Shopify Module Reference

Shopify Module

Install

npm install --save @ribajs/shopify

Regist

To regist the module include import shopifyModule from '@ribajs/shopify'; in your main.ts file and regist the module with riba.module.regist(shopifyModule);:

import { Riba, Utils } from '@ribajs/core';
import shopifyModule from '@ribajs/shopify';
const riba = new Riba();
const model = {};
riba.module.regist(shopifyModule);
Utils.domIsReady(() => {
  riba.bind(document.body, model);
});

Binders

shopify-img

Loads an shopify image with the exact size for the current img element without the need to get the right size manually over the img_url filter / formatter. The image source path is set by the srcset and sizes attributes to make them responsive.

You should prefer to set the srcset attribute server-site (with liquid) (but if you want to use the shopify-img binder anyway the src attribute should not be set server-site, as this causes problems for some browsers if the srcset attribute is set afterwards the src attribute) but if your images are generated anyway with riba e.g. within a rv-each-item binder then you can safely use the shopify-img binder.

Components

Snippets

utils-json-linklists.liquid

Copy the snippets

  • utils-json-link.liquid,
  • utils-json-links.liquid,
  • utils-json-linklist.liquid
  • and utils-json-linklists.liquid

from @ribajs/shopify/src/snippets/ to your themes snippets directory to transform shopify linklists to a json string.

<script>
var linklists = {% include 'utils-json-linklists' %}
// If the component should access the linklist by his handle
// the linklist must be globally available as follows
window.model = {
  system: {
    linklists: linklists
  }
};
</script>