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

Question

I am actually building a custom shopify theme using tailwind-css and alpinejs. Pls Look at the code below. I am trying to use the array output of {{product.media}} in the x-data component so I can use it to implement a product page carousel ..

<div 
        x-data="{
            sources: {{ product.media }},
            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 "
        >
            <div class="relative">
                <template x-for="media in sources">
                    <div
                        x-show="activeImage === media"
                        x-transition
                        class="mb-3"
                    >
                        {% render 'media', media: media, class: 'flex-shrink-0 snap-start w-8/12 col-span-3 mx-auto' %}
                    </div>
                </template>
                <a
                @click.prevent="prev"
                class="cursor-pointer text-white absolute left-0 top-1/2 -translate-y-1/2"
                >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-10 w-10"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15 19l-7-7 7-7"
                    />
                </svg>
                </a>
                <a
                @click.prevent="next"
                class="cursor-pointer text-white absolute right-0 top-1/2 -translate-y-1/2"
                >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-10 w-10"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M9 5l7 7-7 7"
                    />
                </svg>
                </a>
            </div>

Notice what I wrote in the x-data component ..

sources: {{ product.media }}

I was expecting to get an array of media attached to sources. I think I am not doing it right. I continue to see the error below

..Undefined object mediatheme-checkUndefinedObject

plus it does not work in my theme

score 0 · Accepted Answer · answered Dec 08 '22 at 07:38

0

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 "
        >

answered Dec 08 '22 at 07:38

comforx

106
4

,Thanks for your contribution. I still am not able to retrieve an output. I also tried outputting the array using ... but I still am not getting any output. – oscar Dec 08 '22 at 12:47
You mix use alpinejs and liquidjs. {% render 'media', media: media, class: 'flex-shrink-0 snap-start w-8/12 col-span-3 mx-auto' %} is wrong. You could try . {% render %> executes at server side, while – comforx Dec 08 '22 at 14:10
BTW, you'd better to extract product.media from x-data to a script tag.
– comforx Dec 08 '22 at 14:17
you are a true helper. Thanks for the quick pointer to my miss of alpinejs and liquid code. That was where I began to realize how novice I am in coding. Secondly, your suggestion was a magic formula, everything worked out as expected. You are my hero – oscar Dec 08 '22 at 15:52

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

1 Answers1