Shopify - 首次亮相主题 - 如果选择了某些变体，则显示一个文本框

Question

我试图仅在选择“样式”下拉选项“浮雕”时显示我的“浮雕”文本框。 我在我的新模板 product-customizable-template.liquid 中添加了以下代码，该模板创建了文本框，但我想隐藏它，除非选择“浮雕”。

<p class="line-item-property__field">
<label for="embossing">Embossing</label>
<input required class="required" id="embossing" type="text" name="properties[Embossing]">
</p> 

“风格”下拉菜单

样式文本框具有以下代码：

<select class="single-option-selector single-option-selector-product-customizable-template product-form__input" id="SingleOptionSelector-0" data-index="option1">
<option value="None" selected="selected">None</option>
<option value="Embossing">Embossing</option>
<option value="Stamp">Stamp</option>
</select>

我还在网站上工作，所以它现在不活跃。

任何帮助将不胜感激，谢谢！

Answer 1

您需要使用 Javascript 检查页面load和select框的change ，您可以轻松添加和删除自定义代码以形成

您可以检查并尝试以下代码段以获得更好的想法

// on change test for your condition
document.getElementById('SingleOptionSelector-0').addEventListener('change', function (e) {
   _checkAndAppend();
});

// run on page load and check the for value and add if selected value meet condition
_checkAndAppend();

function _checkAndAppend() {
   var item = document.getElementById('SingleOptionSelector-0');
   var itemValue = document.getElementById('SingleOptionSelector-0').value;
   if (itemValue == 'Embossing') { 
      var input = `<p class="line-item-property__field _embossing">
            <label for="embossing">Embossing</label>
            <input required class="required" id="embossing" type="text" name="properties[Embossing]">
            </p> `;
      item.parentNode.insertAdjacentHTML('beforeend',input);
   } else {
      if(document.querySelector('._embossing')){
         document.querySelector('._embossing').remove();
      }      
   }
}