Custom Scripting:

These instructions are meant for users doing advanced customization. Familiarity with HTML, Javascript and Liquid is assumed. Please see the instructions or our FAQ for help on more general matters.

Javascript callback when recommendations are displayed

You can use our JSON-P-style callback which is called when the recommendations are finished loading.

You can invoke it by setting the name of the function in your Shopify template before including the Directed Edge snippet:

{% assign directed-edge-callback = 'finished' %}
{% include 'directed-edge' %}
<script type="text/javascript">
  function finished() { alert("Recommendations have been displayed!"); }
</script>

The count key in the hash will be set to the number of items displayed.

Back to contents
Conditionally restrict recommendations to a particular tag / type / vendor / collection

You can choose to conditionally show only certain groups of products by setting the directed-edge-tags or directe-edge-exclude-tags variables in your Liquid template before including the Directed Edge snippet.

Here are the values that you can set:

tag {% assign directed-edge-tags = 'some-tag' %}
type {% assign directed-edge-tags = 'type_some-type' %}
vendor {% assign directed-edge-tags = 'vendor_some-type' %}
collection {% assign directed-edge-tags = 'collection_some-collection-handle' %}

For example, to only show proucts from the same vendor as the current vendor, you can use this:

{% capture directed-edge-tags %}vendor_{{ product.vendor | handleize }}{% endcapture %}
{% include 'directed-edge' %}

You can avoid certain tags, types, vendors or collections by using the directed-edge-excluded-tags variable instead.

Back to contents
Override the set of recommendations shown on a page

You can use the directed-edge-blocks variable to specify which sets of recommendations will be shown on a given page, overriding the settings from our settings panel. The possible values are:

  • top_products
  • recommended
  • bundle
  • hand_picked
  • related_products
  • basket
  • recently_viewed
  • related_to_recently_viewed

These can be concatenated together using commas:

{% assign directed-edge-blocks = 'related_products,top_products' %}
{% include 'directed-edge' %}
Back to contents
Dynamically loading recommendations (e.g. in quick-view frames)

Some of our customers are interested in showing recommendations inside of popup frames. This is possible, but needs a few steps to get things working.

First, you will need to include our snippet in your templte with an indication that tells it not to execute immediately. You can do that this way:

{% assign directed-edge-no-execute = true %}
{% include 'directed-edge' %}

Include that snippet in your template or frame's dynamic content at the point where you'd like to display the recommendations, as usual.

Next, since this will typically be happening from a template where we can't automatically figure out the which product is currently being viewed, you'll need to let our widget know which product to display recommendations for:

DirectedEdgeQuery.execute(PRODUCT IDS)

The "PRODUCT IDS" should either be a single product ID for the product template mode, or an array of product IDs for cart mode.

Back to contents