# Liquiflow Elements

## Introduction <a href="#introduction" id="introduction"></a>

Our provided tags ([`li-object`](https://docs.liquiflow.app/liquid-attributes/objects), [`li-for`](https://docs.liquiflow.app/liquid-attributes/iteration-lists), [`li-if`](https://docs.liquiflow.app/liquid-attributes/conditional) 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.&#x20;

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 <a href="#alpine-js" id="alpine-js"></a>

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](https://alpinejs.dev/start-here) and installing the Alpine JS [Chrome extension](https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk). 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/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

## JS Attributes

### li-object vs li-js-object <a href="#li-object-vs-li-js-object" id="li-object-vs-li-js-object"></a>

Both tags work similarly by displaying information from the Shopify CMS. The regular [`li-object`](https://docs.liquiflow.app/liquid-attributes/objects) 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:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = product.title
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p>{{ product.title }}</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

And this is an example for `li-js-object`:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-js-object = product.title
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p x-text="product.title">Placeholder</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### li-js-price <a href="#li-js-price" id="li-js-price"></a>

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.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-js-price = product.price
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p x-text="LiquifyHelper.moneyFormat(product.price, true, '€{{amount_with_comma_separator}}')">Placeholder</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### li-js-if <a href="#li-js-if" id="li-js-if"></a>

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.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-js-if = product.price < product.original_price
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<template x-if="product.price < product.original_price"> Placeholder </template>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### li-element <a href="#li-element" id="li-element"></a>

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.