*Almost working - Showing a line item based on a variant option

testnook
New Member
2 0 0

Hello world!

I am very new to Shopify and testing things out to see if I can accomplish what I want.  I am currently on a trial version.

The issue:  I have a text box that I want to display only if a customer chooses "Yes" on a customization question.  I have almost accomplished this.  The box shows/hides depending on the variant, but doesn't toggle properly if the variant is changed on the page.

Pertinent facts:

Site is https://testnook.myshopify.com/password

pw: pleasehelp

Variant url showing the text box:  https://testnook.myshopify.com/products/phone-grips-gold?variant=37811571785914

Variant url hiding the text box: https://testnook.myshopify.com/products/phone-grips-gold?variant=37811571753146

The problem is, if you toggle the option while on the page, the text box doesn't change.

 

I think it is something needed in theme.js, but I've been trying different code iterations for hours and my eyes are crossed at this point.  I'm throwing a hail Mary to you guys!

 

Other considerations:

I do not want to use a separate app.

My yes/no variant has to be a Shopify option rather than a custom line item because it affects price.

My selector option id may not always be the same.  Depending on the item, there may be multiple dropdowns and I can't depend on myself to always add X first, etc.

 

Here is the code nugget I used to accomplish what I have:

File: product-customizable-template.liquid

Code:

{% for product_option in product.options_with_values %}
  {% if product_option.name contains "Personalization" and product_option.selected_value == "Yes" %}
   <p class="line-item-property__field">
  <label for="what-customization-would-you-like-on-your-item">What customization would you like on your item?</label>
  <textarea required class="required" id="what-customization-would-you-like-on-your-item" name="properties[What customization would you like on your item?]"></textarea>
</p>
  {% else %}
  {% endif %} 
  {% endfor %}
 
I also tried adding the following above this code, but it did not change anything:

<script>
$(document).on("change", ".product-options .selector-wrapper select", function() {
alert("changed");
})

</script>

 

Thank you to everyone/anyone for your help!

0 Likes
testnook
New Member
2 0 0

I am using the Debut theme.

0 Likes