Appmate Templates
Appmate templates are very similar to Shopify's theme files with one major difference - they are rendered on the client side (the browser) and not on Shopify's servers. You thereby do not get access to the data you can access in your regular theme templates. You should however get access to all the data you need to implement our apps. Please get in touch if you are missing anything.
Appmate templates are using the Liquid template language, which you should be familiar with if your are intending to edit them.
{% raw %}
<script id="wishlist-link" data="wishlist" type="text/x-template" app="wishlist-king">
<a href="{{ wishlist.url }}" class="wk-link wk-{{ wishlist.state }}{{ wishlist.item_count }}</script>
{% endraw %}
Appmate templates are escaped from the Shopify template environment using the raw
tag. You might also notice, that they are wrapped in script
tags. This is necessary to prepare the templates for client side rendering.
Including templates
Templates are reference by there id. Including them in your Shopify theme is a little bit different from including them within another appmate theme.
Inlucding a snippet in a Shopify theme file
<!-- include 'wishlist-link'-->
Use this special HTML comment to include an Appmate snippet in your theme files. Snippets where the data
attribute is wishlist
or cookie_advice
won't get any data passed. If you want to include a snippet where the data
attribute is product
you must pass a product id.
<!-- include 'wishlist-button-collection' with '{{ product.id }}' -->
Inlucding a snippet in another Appmate snippet
{% raw %}
<script id="wishlist-button-collection" data="product" type="text/x-template" app="wishlist-king">
{% if product.in_wishlist %}
{% include 'wishlist-button-remove' with product %}
{% else %}
{% include 'wishlist-button-add' with product %}
{% endif %}
</script>
{% endraw %}
To include an Appmate snippet in another Appmate snippet you use the standard Liquid syntax.