shopify - How do I use a liquid object array in alpine x-data?

Solution:

You should add a json filter to product.media, namely {{ product.media | json}}. Since the " is already in the product.media output, use x-data='{sources:...}' instead.

<div 
        x-data='{
            sources: {{ product.media | json}},
            activeImage: null,
            prev() {
                let index = this.sources.indexOf(this.activeImage);
                if (index === 0) 
                    index = this.sources.length;
                this.activeImage = this.sources[index - 1];
            },
            next() {
                let index = this.sources.indexOf(this.activeImage);
                if (index === this.sources.length - 1) 
                    index = -1;
                this.activeImage = this.sources[index + 1];
            },
            init() {
                this.activeImage = this.sources.length > 0 ? this.sources[0] : null
            }
          }'
        class="product__media-wrapper md:col-span-3 "
        >
Copy code

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.