Liquify Pro Elements
Introduction
Our provided tags (li-object, li-for, li-if etc.) offer the capability to construct nearly any desired Shopify logic. However, for more intricate components such as the Mini-Cart or Variant swatches, we've introduced li-element, li-js-object, li-js-price and li-js-if tags.
These tags simplify the process, allowing you to create complex components more easily. They harness real-time data from Shopify APIs, enabling seamless data updates without requiring the site to reload. This significantly enhances the overall e-commerce experience. In the following steps, we furnish the initial Liquify building blocks to craft exceptional e-commerce experiences.
Alpine JS
Alpine is a robust, minimal tool designed for crafting behavior directly within your markup, serving as a modern equivalent to jQuery. Simply insert a script tag (Already inside the Starter Template), and you are ready to begin. We leverage Alpine JS to offer you the foundational elements for creating AJAX behavior within your cart or variant selector.
Moreover, Alpine JS extends its assistance to other JavaScript functionalities as well. To explore the full range of features that Alpine JS offers, we recommend referring to the documentation and installing the Alpine JS Chrome extension. This extension allows you to inspect the data provided by the Shopify API and its associated objects, facilitating a comprehensive understanding of their structure and content.
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>JS Attributes
li-object vs li-js-object
Both tags work similarly by displaying information from the Shopify CMS. The regular li-object is used for Liquify functionality, while the li-js-object accesses Shopify's API responses via Alpine JS. We currently use the li-js-object in various components and plan to implement more in the future. Here is an example on how the two tags get converted:
li-object = product.title<p>{{ product.title }}</p>And this is an example for li-js-object:
li-js-object = product.title<p x-text="product.title">Placeholder</p>li-js-price
As we can't apply Liquify filters in our Alpine JS Data, we have to come up with alternative methods. This special object tag will display a number in the store's currency.
li-js-price = product.price<p x-text="LiquifyHelper.moneyFormat(product.price, true, '€{{amount_with_comma_separator}}')">Placeholder</p>li-js-if
If you want to hide things based on certain rules, you can use li-js-if with Shopify's Date API. For example, the original price when a discount is applied.
li-js-if = product.price < product.original_price<template x-if="product.price < product.original_price"> Placeholder </template>li-element
Sometimes, we use the li-element in Webflow for special purposes to make things easier. We've established predefined functionalities for these tags, with plans for further expansion in the future. For instance, the "Add-to-cart" element is given a special tag called li-element="add-to-cart". In the next sections, we'll explain how these are commonly used.
Last updated
Was this helpful?