Showing a text box when only one variant is selected.

amymariah
New Member
6 0 0

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

0 Likes
ChoosiZon
Navigator
314 54 83

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

Create
Launch
Donate
0 Likes
ChoosiZon
Navigator
314 54 83

You removed the text box?

Create
Launch
Donate
0 Likes
amymariah
New Member
6 0 0

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 

0 Likes
ChoosiZon
Navigator
314 54 83

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

 

Create
Launch
Donate
0 Likes
amymariah
New Member
6 0 0

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 

0 Likes
ChoosiZon
Navigator
314 54 83

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

 

Create
Launch
Donate
0 Likes
amymariah
New Member
6 0 0

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  

0 Likes
ChoosiZon
Navigator
314 54 83
<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.

Create
Launch
Donate
0 Likes