Product.selected_or_first_available_variant is only stuck on first variant?

elin12
New Member
2 0 0

I'm trying to access the different variants in my code whenever I select them through a dropdown, so that I can highlight a button based on a specific variant. I use the product.selected_or_first_available_variant object to access the current variant that is selected and I compared that value's id to the id of the variant I wanted. However, the product.selected_or_first_available_variant seems to be always stuck on the first variant, and I double checked that all the variants have quantity > 0.

I printed out the ids in liquid to verify whether product.selected_or_first_available_variant.id would be changing upon selection and it stays at the first variant's id. Then in the javascript, I do the check and activate the functionality to highlight the button. 

 

{% assign current = product.selected_or_first_available_variant %}
{%- assign target_variant = product.variants[6] -%}

{% if current_variant.id == target_variant %}
          updateActiveClass($('#autodeliver_on_radio_{{ product.id }}'));
{% endif %}

 

0 Likes

Hello,

To change a variant through the dropdown you need to code it via Javascript. The Product.selected_or_first_available_variant functionality is only for when the page firstly loads up, it won't change dynamically. 

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
0 Likes
elin12
New Member
2 0 0

Hi, thanks for your reply! I'm thinking about creating a javascript function in the file with the <select> dropdown to get the current selected variant. The only issue is the dynamic change I want to create using the current variant is in another file.

For example, the <select> dropdown is in the product-template.liquid file, and upon selection of an item, I want to highlight a button that's in the subscription-product.liquid file

I'm not too familiar with development for Shopify, so is there like a master javascript file or how can I pass a variable from one file to another?

0 Likes

Hello,

The main Javascript file varies from theme to theme, but it's usually named something like theme.js

That said, it would require Liquid/CSS/Javascript knowledge to implement this feature, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

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

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
0 Likes
DieterDeWet
New Member
1 0 0

Good day,

 

Is there a copy and paste code / simple guideline code snippet to add to the JS file to choose the different variants ?

I am stuck with the product.selected_or_first_available_variant issue. I have narrowed it down to where to add the code but I am not familiar with Shopify's coding methods.

 

Does anyone have a guideline snippet for me to use ?

 

Kind regards,

Dieter

0 Likes