FROM CACHE - en_header

Hiding line item text box based on selected variant

petmeadow
Excursionist
14 0 2

I posted this a couple of weeks ago and the help I got was not totally complete, hoping someone else will see this new post and be able to help me further. 

 

Some of our products can get engraving. I am trying to make it so that my text box for engraving input only shows up when the option for engraving is selected "yes" but remains hidden when the option is selected "no". This is the code I have entered in product-customizable-template.liquid for the engraving text box

 

<p class="line-item-property__field">
<label for="engraving">Engraving</label>
<textarea id="engraving" name="properties[Engraving]"></textarea>
</p>

 

Can anyone help guide me for how to make sure it only shows up when engraving "yes" is selected? I know I need to use Javascript but have little knowledge. I have watched so many youtube videos my eyes are melting but none of them seem to work properly when integrated with Shopify. I am using the Debut theme. Any help is greatly appreciated! 

Replies 55 (55)
Ninthony
Shopify Partner
2272 342 944

Need more info, we don't know how to reference the users selection. Can you generate a preview you can provide us so we can take a look?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
pioneer100
Shopify Partner
1119 145 481
Yes, i know what you want.
It requires to add some jquery code.
Add me as a staff, i will do it for free.
Email: candisoft100@gmail.com
Thank you
If helpful, Please Like and accept The Solution.
petmeadow
Excursionist
14 0 2

https://pet-meadow-texas.myshopify.com/collections/metal-urns/products/arielle-heart

 

there's a link to one of the products I am trying to make this change to

pioneer100
Shopify Partner
1119 145 481
I will fix issue in morning. Just add me as staff now
If helpful, Please Like and accept The Solution.
Ninthony
Shopify Partner
2272 342 944

You can go to where your line item text field is and put this above it:

<style>
.radio-container {
    display: flex;
    align-items: center;
}
.line-item-property__field {
display: none;
}
</style>
<div class="radio-container">
    <span>Engraving: </span>
    <input class="engraving-verify" type="checkbox" value="Yes">
</div>
<script>
let checkbox = document.querySelector('.engraving-verify');
checkbox.addEventListener('change', function(){
   if (this.checked === true){
   document.querySelector('.line-item-property__field').style.display = "block";
   }else{
   document.querySelector('.line-item-property__field').style.display = "none";
   }
})
</script>
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
petmeadow
Excursionist
14 0 2

Go check out what happened when i did that. now there is a checkbox which shows the text box if checked but it is not dependent on whether or not the person selects "Yes" for engraving. I really appreciate all the help so far, thank you! 

Ninthony
Shopify Partner
2272 342 944

Just change it to "Check for Engraving", doesn't really need to say yes or no. Alternatively you can put the word Yes next to the input.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
petmeadow
Excursionist
14 0 2

The important part is that we charge extra for the engraving. If they do not select "Yes" then they will not pay the additional cost for the engraving. 

petmeadow
Excursionist
14 0 2

This was the help that I got from my previous post but i'm not sure what type of script or onchange function i would use with this advice. And when I asked for further help this person stopped answering me. 

"

As you already know you have to use jQuery to achieve this
So basic idea is get option default value when page loaded

 var default_value = ($("#selectorID").val();
// Next you have to use condition
if(default_value=='yes'){
$(".line-item-property__field").show();
}else{
$(".line-item-property__field").hide();
}

and in next step you have to use onchange function to get the option value when variant will change.
And once you get it use same code again, just have to change default_value  to new variable with variant value.
Note: Code will used in script tag ."

 

So i just need to know how i can use this advice and make it actually work

pioneer100
Shopify Partner
1119 145 481

-put this code at the bottom of your product template

path: edit code->templates->product.liquid

<script>
	$(document).on("change","#SingleOptionSelector-1",function(){
	  var label= $(this).parents(".selector-wrapper.js.product-form__item").find("label").text().trim();
		if(label== "Engraved"){
		   var val=$(this).val();
			if(val == 'Yes'){
			   $(".line-item-property__field").show();
			}
			else if(val == 'No'){
		       $(".line-item-property__field").hide();
			}
		}
	});

	$(document).ready(function(){
	   var label= $("#SingleOptionSelector-1").parents(".selector-wrapper.js.product-form__item").find("label").text().trim();
		if(label== "Engraved"){
		   var val=$("#SingleOptionSelector-1").val();
			if(val == 'Yes'){
			   $(".line-item-property__field").show();
			}
			else if(val == 'No'){
		       $(".line-item-property__field").hide();
			}
		}	
	});
</script>

- if satisfied, like and accept solution

If helpful, Please Like and accept The Solution.
petmeadow
Excursionist
14 0 2

This didn't change anything at all. I also played with placing it at the end of different code sections to see if maybe that worked. product.customizable.liquid, product.liquid, also tried placing it in sections product-customizable-template.liquid and product-template.liquid. I tried placing it above and below my line item property code. It did not matter where I placed it, no change was present. Does the fact that my default option is "no" affect this at all? like it should be hidden on the default option and then show when the default option is changed to "yes".  and I wonder if that is causing an issue. 

pioneer100
Shopify Partner
1119 145 481
Can you add me as a staff so that i can fix your issue?
Email: candisoft100@gmail.com
If helpful, Please Like and accept The Solution.
pioneer100
Shopify Partner
1119 145 481

Hii @petmeadow  ,   issue is fixed now. you can check from below link.
  https://pet-meadow-texas.myshopify.com/products/arielle-heart?variant=31241177038910

 

-if  satisfied with answer like and mark as solution.

If helpful, Please Like and accept The Solution.
petmeadow
Excursionist
14 0 2

this is perfect, but is there any way that it can be applied to all of the urn collections we have that are engraveable? the arielle heart one is the only one it seems to be applied to. the odyssey, classic paws, and classic series as well have the engraving specifications

pioneer100
Shopify Partner
1119 145 481
You have problems in other options than i will fix it.
Again add me as a staff.
If helpful, Please Like and accept The Solution.
pioneer100
Shopify Partner
1119 145 481

hii, i have fixed issues for all problems.
check now:  for 3 options

https://pet-meadow-texas.myshopify.com/products/classic-paws-collection?variant=31583405932606

 

check for for 2 options:

https://pet-meadow-texas.myshopify.com/products/arielle-heart?variant=31583405047870

If helpful, Please Like and accept The Solution.
petmeadow
Excursionist
14 0 2

thank you so much!! it is still not working for this product though

 

https://pet-meadow-texas.myshopify.com/collections/metal-urns/products/classic-series

 

not sure how it is different as it is a two option product same as the arielle heart

pioneer100
Shopify Partner
1119 145 481

 


@petmeadow wrote:

thank you so much!! it is still not working for this product though

 

https://pet-meadow-texas.myshopify.com/collections/metal-urns/products/classic-series

 

not sure how it is different as it is a two option product same as the arielle heart


this is because you have put option name "Engraving" in above product and i have coded for "Engraved".
but dont worry i will fix it again.
-and not put option name more than these two from now.  "Engraving" &  "Engraved".

 

Thank You

If helpful, Please Like and accept The Solution.