如何在Alpine x-data中使用Shopify product.media数组实现商品轮播？

问题场景 #

我正在使用Tailwind CSS和Alpine.js开发自定义Shopify主题，尝试将{{ product.media }}传入Alpine.js的x-data组件实现商品页轮播功能，但目前遇到Undefined object 'media'的theme-check错误，轮播功能完全无法运行。

原代码 #

<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>
</div>

核心错误点 #

1. Liquid对象与JS不兼容：{{ product.media }}是Shopify的Liquid对象集合，直接写入x-data会输出Liquid的字符串表示，不是合法的JavaScript数组，导致Alpine无法解析，同时触发theme-check错误。
2. Liquid与Alpine变量冲突：在<template x-for>中使用{% render 'media', media: media %}时，Liquid会优先解析media变量，但此时media是Alpine的JS变量，Liquid无法识别，因此报错。

解决方案 #

修改思路 #

放弃直接将Liquid对象传入Alpine的方式，改用Liquid循环提前渲染所有媒体元素，配合Alpine控制元素的显示/隐藏状态，彻底避免两类变量的冲突问题。

修改后的完整代码 #

<div 
        x-data="{
            activeIndex: 0,
            totalMedia: {{ product.media.size }},
            prev() {
                this.activeIndex = this.activeIndex === 0 ? this.totalMedia - 1 : this.activeIndex - 1;
            },
            next() {
                this.activeIndex = this.activeIndex === this.totalMedia - 1 ? 0 : this.activeIndex + 1;
            }
          }"
        class="product__media-wrapper md:col-span-3 "
        >
            <div class="relative">
                {% for media in product.media %}
                    <div
                        x-show="activeIndex === {{ forloop.index0 }}"
                        x-transition
                        class="mb-3"
                    >
                        {% render 'media', media: media, class: 'flex-shrink-0 snap-start w-8/12 col-span-3 mx-auto' %}
                    </div>
                {% endfor %}
                
                <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>
</div>

代码说明 #

1. 简化Alpine状态管理：用activeIndex记录当前显示的媒体索引，totalMedia存储媒体总数，无需处理复杂的对象数组操作。
2. Liquid循环渲染媒体：直接用{% for media in product.media %}生成所有媒体元素，通过forloop.index0（Liquid的0起始循环索引）绑定Alpine的activeIndex，控制元素显示状态。
3. 优化切换逻辑：prev/next方法直接操作索引值，逻辑简洁可靠，避免了原代码中indexOf可能出现的对象匹配问题。

内容的提问来源于stack exchange，提问作者oscar