Debut theme variant conditional logic - help plaese!

Solved
cafm
New Member
3 0 0

Hi there.

I am very inexperienced at using Shopify, but managed to add an additional variant to my product range that is a drop-down list of options. I created this by modifying the product-customizable-liquid.template under the Sections area of the theme code.

I already had used 3 variants:

  1. Size
  2. No. of Layers
  3. No. of Sides

My issue is that I would only like this new variant to show ONLY when a customer selects the "double-sided" option in the "No. of Sides" variant.

Is there some simple conditional logic code I can apply to the product-customizable-liquid.template so that I can achieve this?

Can I reference the No. of Sides variant by id if I know id="SingleOptionSelector-2" and option value="Double-sided"?

Something like:

{% if product.SingleOptionSelector-2.option.value == 'Double-sided' %}

show the Reseverse-side Design drop-down list variant code

{% endif %}

Can I do something like that? What would the correct syntax be?

Thanks in anticipation!

0 Likes

Hello,

Yep, that is absolutely doable but not through liquid, you'd need Javascript to listen to the currently selected option and change accordingly. 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
cafm
New Member
3 0 0
Ok sure. So where do I put any JavaScript code? Which template?
0 Likes

This is an accepted solution.

You can either create your own files in assets folder and develop your code there or, alternatively, use the main .js file that your theme uses. The file name varies, but you can find its name inside theme.liquid.

Although I must it clear that unfortunately there is not a copy-paste or guide-through solution for this scenario. 

In case you're unfamiliar with these technologies you'll need to hire a Shopify developer to assist you.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.