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

Store Design
1

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
example.PNG677×587 105 KB

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


 

If you want to add individual personalisation for multiple lollies please leave your instructions at the shopping cart notes.

  

If you want to add individual personalisation for multiple lollies please leave your instructions at the shopping cart notes.

  

If you want to add individual personalisation for multiple lollies please leave your instructions at the shopping cart notes.

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.