Hiding line item text box based on selected variant

Solved
petmeadow
Excursionist
12 0 0

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! 

0 Likes
Ninthony
Shopify Partner
1637 224 615

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 and accept as 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 :D
0 Likes
CANDISOFT
Shopify Partner
986 142 447
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
For Contact : candisoft100@gmail.com
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.
petmeadow
Excursionist
12 0 0

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

0 Likes
CANDISOFT
Shopify Partner
986 142 447
I will fix issue in morning. Just add me as staff now
For Contact : candisoft100@gmail.com
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.
Ninthony
Shopify Partner
1637 224 615

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 and accept as 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 :D
0 Likes
petmeadow
Excursionist
12 0 0

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! 

0 Likes
Ninthony
Shopify Partner
1637 224 615

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 and accept as 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 :D
0 Likes
petmeadow
Excursionist
12 0 0

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. 

0 Likes
petmeadow
Excursionist
12 0 0

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

0 Likes