Showing a text box when only one variant is selected.

[amymariah]

Hey,

I'm having difficulty with the coding to make the text box only show up when "yes" is selected. I've been trying for hours now and I'm no where near closer to figuring it out. I mean I figured out how to get the text box so I'm half way there right?

I'm using theme Debut

can anyone help me, it seems straight forward but I think I'e been staring at it too long.

thank you!

[ChoosiZon]

We have to see your site and the page you are talking about to be able to see have a chance to help...

[amymariah]

sorry!

https://amy-mariah.myshopify.com/collections/cards-1/products/21st-birthday-card?variant=40007790231...

password : prohrt

[ChoosiZon]

You removed the text box?

[amymariah]

Hey,

I haven’t changed anything, my listings are all under the cards section under products in the drop down menu, I’m still setting up my listings so they don’t show on the homepage, sorry I didn’t make that clear 

[ChoosiZon]

---

@amymariah wrote:

Hey,

I haven’t changed anything, my listings are all under the cards section under products in the drop down menu, I’m still setting up my listings so they don’t show on the homepage, sorry I didn’t make that clear 

---

ok,find your product-template.liquid under Sections.

At near bottom before this {% schema %} start tag add this :

<!-- eidted here =======-->
          
                <script>
                 let $variantCardVal = $('select#SingleOptionSelector-1').val();
                 $(document).ready(function(){
                  if ($variantCardVal == 'No (blank inside)') {
                      $('.line-item-property__field').hide();
                    } else {
                      $('.line-item-property__field').show();
                    }
                     });
                  $('select#SingleOptionSelector-1').on('change', function() {
                    if (this.value == 'No (blank inside)') {
                      $('.line-item__field').hide();
                    } else {
                      $('.line-item__field').show();
                    }
                    });
             </script>

It will work only if your html structure for that part is not changed,and the product variants are as they are.

[amymariah]

Hey, thank you so much for that, I’ve tried putting it in different places but nowhere seems to work 😞 I’ve tried the product-template.liquid and my custom one for how I added the text box in, the text box still shows when tried in both 

[ChoosiZon]

---

@amymariah wrote:

Hey, thank you so much for that, I’ve tried putting it in different places but nowhere seems to work 😞 I’ve tried the product-template.liquid and my custom one for how I added the text box in, the text box still shows when tried in both 

---

So sorry the code missing something.Put this one instead at same place :

<script>
  let $variantCardVal = $('select#SingleOptionSelector-1').val();
  $('.line-item-property__field').hide();
  $(document).ready(function(){
    if (($variantCardVal == 'No (blank inside)'), (typeof $variantCardVal === 'undefined')) {
      $('.line-item-property__field').hide();
    } else {
      $('.line-item-property__field').show();
    }
  });

  $('select#SingleOptionSelector-1').on('change', function() {
    if (this.value == 'No (blank inside)') {
      $('.line-item-property__field').hide();
    } else {
      $('.line-item-property__field').show();	
    }
  });
</script>

[amymariah]

Hey, thank you again, it’s still not changing the text box, there’s probably nothing wrong with your code, I’m probably just not doing something right haha! 
I’ve tried a few different places but it doesn’t seem to change anything 😢 

[ChoosiZon]

<script>
  let $variantCardVal_0 = $('select#SingleOptionSelector-0').val();
  let $variantCardVal_1 = $('select#SingleOptionSelector-1').val();
  let $variantCardVal_2 = $('select#SingleOptionSelector-2').val();
  $('.line-item-property__field').hide();
  $(document).ready(function(){
    if (($variantCardVal_0 == 'Yes add gift message (+£0.50)') || ($variantCardVal_1 == 'Yes add gift message (+£0.50)') || ($variantCardVal_2 == 'Yes add gift message (+£0.50)')) {
      $('.line-item-property__field').show();
    } else {
      $('.line-item-property__field').hide();
    }
  });
       
  $('select#SingleOptionSelector-0').on('change', function() {
    if (this.value == 'No (blank inside)') {
      $('.line-item-property__field').hide();
    } else {
      $('.line-item-property__field').show();
    }
  });
  $('select#SingleOptionSelector-1').on('change', function() {
    if (this.value == 'No (blank inside)') {
      $('.line-item-property__field').hide();
    } else {
      $('.line-item-property__field').show();
    }
  });
  $('select#SingleOptionSelector-2').on('change', function() {
    if (this.value == 'No (blank inside)') {
      $('.line-item-property__field').hide();
    } else {
      $('.line-item-property__field').show();
    }
  });
</script>

Hi,you changed the variant structure.

I adjusted the code so can try put at the place mentioned above.

[amymariah]

hey, it's still not working, I feel really bad about keep saying it isn't working as I feel like i'm wasting your time when I think it's just me being stupid! I do really appreciate your help