# Liquiflow Elements

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

Our provided tags ([`li-object`](/liquid-attributes/objects.md), [`li-for`](/liquid-attributes/iteration-lists.md), [`li-if`](/liquid-attributes/conditional.md) 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`](/liquid-attributes/objects.md) 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.liquiflow.app/add-ons/liquiflow-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.