Skip to content

Instantly share code, notes, and snippets.

@bittersweet
Last active August 29, 2015 14:01
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save bittersweet/ba6079e01f20cb14eb80 to your computer and use it in GitHub Desktop.
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
Copy link

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