javascript - Shopify - Debut Theme - Showing A Textbox if Certain Variant is Selected

Question

I'm trying to show my "Embossing" textbox only when the "Style" dropdown option "Embossing" is selected. I've added the below code in my new template, product-customizable-template.liquid, which created the textbox but I want to hide it unless "Embossing" is selected.

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

"Style" Dropdown

The Style textbox has the following code:

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

I am still working on the site, so it is not active right now.

Any help would be greatly appreciated, thank you!

question from:https://stackoverflow.com/questions/65650222/shopify-debut-theme-showing-a-textbox-if-certain-variant-is-selected

Answer 1

You need to check on-page load and on change of select box using Javascript and you can add and remove custom code to form easily

You can check and try the below snippet for a better idea

// 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();
      }      
   }
}