Mustache Templates

Mustache Functions

If you're using templates to render out your content, you have a few helper methods to format the data how you want it.

Calling JavaScript Functions in a Template

Be sure to read through the Mustache docs on GitHub. You can call JavaScript functions and methods within your template by following the syntax.

Assuming you had 5 related products, this example:

Total related products: {{#products.length}}{{/products.length}}

Would output:

Total related products: 5

Conditionals

Mustache doesn't have conditionals, but JavaScript will interpret truthy and falsy values based on a functions return value. Most commonly, you'll only want to display a list of items if there's more than one. You could that like this:

{{#products.length}}
  ... 
{{/products.length}}

Image Size Helper

At some point, you might want to render an image of relatable. Since the API hands you back the original image, you'll likely want to fetch a different size to save on download times.

<img src="{{#img_url.small}}{{image.src}}{{/img_url.small}}">

Outputs

<img src="//cdn.shopify.com/.../potatoes_small.jpg?123...">

Money Helper

Format currency based on the settings within your shop. This methods relies on the fact that the options_selection.js file is loaded first.

<!-- You only need this if not already loaded -->
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<!-- Get the first variant's price formatted -->
{{#product}}
  <span class="price">{{#money}}{{variants.0.price}}{{/money}}</span>
{{/product}}

Outputs:

<span class="price">$55.00</span>

On Sale

You can check if a product is on sale with the on sale helper method:

{{#on_sale}}On Sale!{{/on_sale}}

Custom Helpers

You can define your own Mustache helpers by adding it to the Mustache.helpers object. You must define this object after the Relatable object has been defined and before the network request happens, which normally means putting this just before loading the relatable.js script. Learn more about Mustache Functions.

Relatable.helpers = {
  moneyWithoutTrailingZeros: function() {
    return function(price, render) {
      var price = render(price);
      return "$" + price.split(".")[0];
    }
  }
}

You can then use that function by the usual syntax:

{{#moneyWithoutTrailingZeros}}{{ variants.0.price }}{{/moneyWithoutTrailingZeros}}

Events

We dispatch events when Mustache has rendered a Relatable section. The event is fired on the container and bubbles up the DOM.

<script>
  $(document).on('relatable:rendered', function(event) {
    // Run custom code
    console.log(event.target); // will be node of container
  });
</script>