Showing a text box when only one variant is selected.

amymariah
Tourist
9 0 1

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!Screenshot 2021-05-13 at 21.42.01.pngScreenshot 2021-05-13 at 21.42.05.png

Replies 10 (10)
ChoosiZon
Shopify Partner
412 66 109

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

Donate
For faster response with a fee pls email to : choositech@outlook.com
ChoosiZon
Shopify Partner
412 66 109

You removed the text box?

Donate
For faster response with a fee pls email to : choositech@outlook.com
amymariah
Tourist
9 0 1

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
Shopify Partner
412 66 109

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

 

Donate
For faster response with a fee pls email to : choositech@outlook.com
amymariah
Tourist
9 0 1

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
Shopify Partner
412 66 109

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

 

Donate
For faster response with a fee pls email to : choositech@outlook.com
amymariah
Tourist
9 0 1

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
Shopify Partner
412 66 109
<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.

Donate
For faster response with a fee pls email to : choositech@outlook.com
amymariah
Tourist
9 0 1

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