FROM CACHE - en_header

Studio theme 2.0 - Show/hide line item property text based on variant selection

AndrewFraser55
Shopify Partner
8 2 5

I am trying to show a specific line item property field depending which combination of variants is selected.

 

I have this working in "Simple" theme but cannot get it working in the new theme "Studio", I suspect this is down to the JS differences.

 

If "Personalised Text" variant == "No Text" then I wish to hide all text options, ids are "edible-text19" "edible-text3" and "edible-text5".

 

If "Personalised Text" variant != "No Text" then I wish to display a specific text option depending upon another variant, the size of the product "Shape", options are "Small Round", "Heart", and "Large Round".

 

Simple theme currently published showing the concept working:

Rose Petals Lollipops | Emily's Lollies (emilyslollies.co.uk)

 

example.PNG

 

These are the 3 inputs to be shown or hidden in main-product.liquid in Studio theme:

<div class="product-form__input product-form__input" name="edible-text19" id="edible-text19">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">Enter your personalisation here:</label>
<input class="required" id="edible-text19" type="text" placeholder="19 character limit" name="properties[Edible Text 19]" maxlength="19" form="{{ product_form_id }}">
 <p>If you want to add individual personalisation for multiple lollies please leave your instructions at the shopping cart notes.</p>
</div>

<div class="product-form__input product-form__input"  name="edible-text3" id="edible-text3">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">Enter your personalisation here:</label>
<input class="required" id="edible-text3" type="text" placeholder="3 character limit" name="properties[Edible Text 3]" maxlength="3" form="{{ product_form_id }}">
  <p>If you want to add individual personalisation for multiple lollies please leave your instructions at the shopping cart notes.</p>
</div>
<div class="product-form__input product-form__input"  name="edible-text5" id="edible-text5">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">Enter your personalisation here:</label>
<input class="required" id="edible-text5" type="text" placeholder="5 character limit" name="properties[Edible Text 5]" maxlength="5" form="{{ product_form_id }}">
  <p>If you want to add individual personalisation for multiple lollies please leave your instructions at the shopping cart notes.</p>
</div>

 

 I have this within section-main-product.css of Studio theme to hide by default and this appears to be working:

#edible-text19 {
	display: none;
}
#edible-text5 {
	display: none;
}
#edible-text3 {
	display: none;
}

 

In Simple theme this is my JS, but I cannot get this working within Studio theme:

    initProductVariant: function() {
      var self = this;
      var product = this.productSingleObject;

      var selectCallback = function(variant, selector) {
       //Code added below
     var varianttitle = variant.title;
       
       if (varianttitle.includes("No Text")) {
           	document.getElementById('edible-text13').style.display = 'none'; //Hide
           	document.getElementById('edible-text3').style.display = 'none'; //Hide
           	document.getElementById('edible-text4').style.display = 'none'; //Hide            
           
        } else if (varianttitle.includes("Large Round")) {
         	document.getElementById('edible-text13').style.display = 'block'; //Show
            document.getElementById('edible-text3').style.display = 'none'; //Hide
           	document.getElementById('edible-text4').style.display = 'none'; //Hide 
          
  		} else if (varianttitle.includes("Small Round")) {
         	document.getElementById('edible-text13').style.display = 'none'; //Hide
            document.getElementById('edible-text3').style.display = 'block'; //Show
           	document.getElementById('edible-text4').style.display = 'none'; //Hide 
          
  		} else if (varianttitle.includes("Heart")) {
         	document.getElementById('edible-text13').style.display = 'none'; //Hide
            document.getElementById('edible-text3').style.display = 'none'; //Hide
           	document.getElementById('edible-text4').style.display = 'block'; //Show   		
        } 

 

Any help much appreciated, I am struggling with the Javascript required and how to use it.

Replies 0 (0)