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, coreModule } from '@ribajs/core';
import { shopifyModule } from '@ribajs/shopify';
import { ready } from '@ribajs/utils/src/dom';
const riba = new Riba();
const model = {};
riba.module.regist(coreModule);
riba.module.regist(shopifyModule);
ready(() => {
  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

shopify-linklist

Component to render a shopify linklist

Attributes

Name	Type	Description
linklist	string	The linklist as a json string
handle	string	Sets the linklist by his name (see note below)
pills	boolean	If the navigation should be displayed as pills
vertical	boolean	If the navigation should be displayed as vertically
collapseOnNewPage	boolean	Set this option to true if toggleable links should be automatically collapse when a page changes
showOnActiveChild	boolean	Set this option to true if toggleable links should be automatically open when a child link is active

Note: If you do not want to pass the linklist as a json string, you can also pass just the linklist handle string. This assumes, however, that the linklist is available as a global variable under window.model.system.linklists[yourLinklistHandle].

Template Methods

Name	Arguments	Description
toggle	link	Toggles a link
collapse	link	Collapse a link
collapseAll		Collapse all links
show	link	Show a link
showAll		Show all links

Collapseable links

If a link should be collapseable, #collapse must be entered as the URL for this link in the Shopify administration:

Example

<shopify-linklist linklist='{% include 'utils-json-linklist', linklist: linklists.main-menu %}'></shopify-linklist>

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>

utils-json-linklist.liquid

If you only want a specific linklist you can use utils-json-linklist.liquid:

<script>
var mainMenu = {% include 'utils-json-linklist', linklist: linklists.main-menu %};
</script>

Shopify Module Reference