Basic Usage

Basic Usage

So you've created an association, related a few items, and you're ready to show them in your theme.

You can either use inline templates (faster/easier) or our JavaScript API (more control) to get the data into your store.

Using Inline Templates

To make things easy, We use MustacheJS to render out inline content. You'll need to add a few data attributes to any HTML element on your page.

In this example we're getting some related articles based on a product ID. This provides a quick easy way to render HTML markup without using JavaScript.

You can find the list of available fields for your target resource by referring to the Shopify API, or previewing the network request in your browser developer's console. Here's a preview of an example response:

As seen in the example above, you'll need to provide a few attributes to indicate the resource you're after.

• data-relatable="[base].[target]"

  Sets the association you're wanting to fetch. Based on the association you set up earlier, the base resource represents what you have, and the target resource represents what you want. Note when accessing the "parent" of a one to many relationship, the target should be singular. For example, if you had a one to many relationship between a single product with many pages, you could access the product of a page like: "page.product".

• data-relatable-id="[id]"

  Pass in the ID of the base object. For example, if you wanted to get the related articles of a product, you would pass in the product ID. The ID should always be the ID of the resource you have.