Search code examples
shopifyliquidlaravel-mixalpine.js

Retrieving Liquid Objects in AlpineJS

I am trying to build a custom theme using Alpine & Tailwind. However, I stumbled upon something that I can't figure it out on my own.

If I initialize a component with Alpine and I am trying to create a variable that holds a liquid object like this :

<div class="product__info-wrapper" x-data="{smth: true, productItem: {{product | json}}}">

</div>

It throws a syntax error stating : Unexpected token ';'

How do I use AlpineJS with Liquid objects because I've tried looking this up and there is no information related to this.

PS: I am using Laravel Mix to compile Alpine & Tailwind

Solution

  • You can use escape filter on json to fix this.

    Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn’t change strings that don’t have anything to escape.

    <div class="product__info-wrapper" x-data="{smth: true, productItem: {{product | json | escape}}}">

</div>