Skip to content

Instantly share code, notes, and snippets.

@bittersweet bittersweet/guide.md Secret
Last active Aug 29, 2015

Embed
What would you like to do?
Intermediair example

I've generated this example based on http://www.intermediair.nl/vacature/4236810/Senior+Salarisadministrateur/

Include our widget on the page:

<script src="https://4d9ae17c5ae68590ce6f-1c6f7d77e67457fef78cfb90b7e69696.ssl.cf3.rackcdn.com/assets/springsense.js"></script>

Define a custom template for the Springsense output. I've 'abused' some of the existing classes to get the example out there quickly.

<script type="text/html" id="springest_template">
  <tr>
    <td class="first bookmark">
      <strong class="title">
        <a href="<%= url %>"><%= name %></a>
      </strong>
      <br />
      <span><%= description %></span>
      <a href="<%= url %>" rel="nofollow"> bekijk meer</a>
    </td>
  </tr>
</script>

The only new html that's necessary is a container where we load in the Springsense results. In the example I added this container after the closing div of the 'relevant vacatures'.

<div class="related-vacatures clearfix" style="margin-top: 40px">
  <table class="dynamic-box">
    <caption>Relevante opleidingen</caption>
    <tbody id="related-trainings">
    </tbody>
  </table>
</div>

This is the actual widget implementation which uses your public key, the job title didn't really have a unique ID so I've hardcoded the job title in this case. I've also added some minor styling for the powered by Springest image.

<script>
  $(document).ready(function() {
    Springest.setApiKey('aah2828dn33c9d76f259aac45f9c7d2');
    var job_title = 'Senior Salarisadministrateur';
    var container_id = "#related-trainings";
    var callback = function(container, data) {
      $.each(data.trainings, function(_, training) {
        training.description = training.description.substr(0, 150) + "...";
        $(container).append(Springest.template("springest_template", training));
      });
    };

    Springest.getTrainings(job_title, container_id, callback);
  });
</script>

<style>
  #PoweredBySpringest img {
    width: 70px;
    position: relative;
    top: 2px
  }
</style>

Modifying training URL

In this example I change the url attribute of the Training object received from Springsense. This is just like the truncating of description, you modify the training/object before you pass it to the (custom) template.

So basically that is to cut up the training URL you receive from springsense like: http://www.springest.nl/boertien-vergouwen-overduin/salarisadministratie?utm_term=Senior%20Salarisadministrateur

So you are left with salarisadministratie and just add the training's ID so it corresponds with the internal URL setup of Intermediair.

var callback = function(container, data) {
  $.each(data.trainings, function(_, training) {
    training.description = training.description.substr(0, 150) + "...";
    var path = training.url.split('/');
    training_slug = path[path.length - 1].split('?')[0];
    training.url = 'http://www.intermediair.nl/testen-tools/opleidingen/training/' + training_slug + '/' + training.id;
    $(container).append(Springest.template("springest_template", training));
  });
};
@djfpaagman

This comment has been minimized.

Copy link

djfpaagman commented May 28, 2014

Also see https://gist.github.com/djfpaagman/1bda66d4b0d450f70313 for a complete description of the widget.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.