Shopify结账页面条件式颜色选择下拉菜单开发求助

你当前的代码依赖Liquid的{% case %}语句实现逻辑，但Liquid是服务器端渲染，页面加载后就固定了，无法响应用户的实时选择变化。要实现动态交互，需要结合HTML、CSS和JavaScript来处理。

修改后的完整代码 #

<p class="line-item-property__field">
    <label>Color Wheel</label><br>
    <select required class="required" id="color-wheel" name="properties[Color Wheel]">
        <option value="">请选择</option>
        <option value="Random">Random</option>
        <option value="Amolen">Amolen</option>
        <option value="Stronghro3D">Stronghro3D</option>
        <option value="PolyMaker">PolyMaker</option>
        <option value="CookieCad">CookieCad</option>
        <option value="Zyltech">Zyltech</option>
        <option value="Ziro 3D">Ziro 3D</option>
    </select>

    <!-- Random选项提示语，默认隐藏 -->
    <div id="random-note" class="color-option hidden">
        Thank you a Random color choice will be selected for you
    </div>

    <!-- Amolen品牌颜色下拉，默认隐藏 -->
    <div id="amolen-colors" class="color-option hidden">
        <select required class="required" name="properties[Amolen Color]">
            <option value="AM-0001">AM-0001</option>
            <option value="AM-0002">AM-0002</option>
            <option value="AM-0003">AM-0003</option>
            <option value="AM-0004">AM-0004</option>
            <option value="AM-0005">AM-0005</option>
            <option value="AM-0006">AM-0006</option>
            <option value="AM-0007">AM-0007</option>
        </select>
    </div>

    <!-- Stronghro3D品牌颜色下拉，默认隐藏 -->
    <div id="stronghro3d-colors" class="color-option hidden">
        <select required class="required" name="properties[Stronghro3D Color]">
            <option value="SH-001">SH-001</option>
            <option value="SH-002">SH-002</option>
            <!-- 补充更多颜色选项 -->
        </select>
    </div>

    <!-- 其他品牌下拉框按相同结构添加 -->
    <div id="polymaker-colors" class="color-option hidden">
        <select required class="required" name="properties[PolyMaker Color]">
            <!-- 填充PolyMaker的颜色选项 -->
        </select>
    </div>
    <div id="cookiecad-colors" class="color-option hidden">
        <select required class="required" name="properties[CookieCad Color]">
            <!-- 填充CookieCad的颜色选项 -->
        </select>
    </div>
    <div id="zyltech-colors" class="color-option hidden">
        <select required class="required" name="properties[Zyltech Color]">
            <!-- 填充Zyltech的颜色选项 -->
        </select>
    </div>
    <div id="ziro3d-colors" class="color-option hidden">
        <select required class="required" name="properties[Ziro 3D Color]">
            <!-- 填充Ziro 3D的颜色选项 -->
        </select>
    </div>
</p>

<style>
    .hidden {
        display: none;
    }
    .color-option {
        margin-top: 10px;
    }
</style>

<script>
    const colorWheelSelect = document.getElementById('color-wheel');
    const colorOptions = document.querySelectorAll('.color-option');

    // 监听主下拉框选择变化
    colorWheelSelect.addEventListener('change', function() {
        const selectedValue = this.value;

        // 先隐藏所有选项容器
        colorOptions.forEach(option => option.classList.add('hidden'));

        // 根据选中值显示对应内容
        switch(selectedValue) {
            case 'Random':
                document.getElementById('random-note').classList.remove('hidden');
                break;
            case 'Amolen':
                document.getElementById('amolen-colors').classList.remove('hidden');
                break;
            case 'Stronghro3D':
                document.getElementById('stronghro3d-colors').classList.remove('hidden');
                break;
            case 'PolyMaker':
                document.getElementById('polymaker-colors').classList.remove('hidden');
                break;
            case 'CookieCad':
                document.getElementById('cookiecad-colors').classList.remove('hidden');
                break;
            case 'Zyltech':
                document.getElementById('zyltech-colors').classList.remove('hidden');
                break;
            case 'Ziro 3D':
                document.getElementById('ziro3d-colors').classList.remove('hidden');
                break;
            default:
                break;
        }
    });
</script>

关键修改说明 #

1. 静态结构定义：把所有需要展示的提示语、二级下拉框都提前写好，通过.hidden类默认隐藏
2. JavaScript动态控制：监听主下拉框的change事件，根据选中值切换对应元素的显示状态
3. Shopify属性兼容：所有下拉框的name保持properties[XXX]格式，确保选中值能同步到购物车项属性中

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