FROM CACHE - en_header

Can't get selected variant

Solved
QnavWhat
Excursionist
45 2 6

Hi there,

in my collection I added '?variant=*here-comes-the-variant-id*' to the link url (like it' done here). On my product page I try to access this url parameter via variant.selected (or product.selected) (or even product.selected_or_first_available_variant).

{% assign current_variant = variant.selected %}

But I can't get the variant and I have no clue why.

Can someone please advise me what to do ... thanks

Accepted Solutions (2)

Accepted Solutions
tim
Shopify Expert
3040 170 1099

This is an accepted solution.

Out of the 3 options you've mentioned, only the last one, product.selected_or_first_available_variant references proper variable and property. This should be right: 

{% assign current = product.selected_or_first_available_variant %}

 

My post solved your problem? Like it!

View solution in original post

tim
Shopify Expert
3040 170 1099

This is an accepted solution.

'Cause product object has no .selected property, and for variant  it has different meaning

https://help.shopify.com/themes/liquid/objects/product

https://help.shopify.com/themes/liquid/objects/variant#variant-selected

My post solved your problem? Like it!

View solution in original post

Replies 15 (15)
tim
Shopify Expert
3040 170 1099

This is an accepted solution.

Out of the 3 options you've mentioned, only the last one, product.selected_or_first_available_variant references proper variable and property. This should be right: 

{% assign current = product.selected_or_first_available_variant %}

 

My post solved your problem? Like it!
QnavWhat
Excursionist
45 2 6

With product.selected_or_first_available_variant it is working now - I have no clue why I seemed not to work before. Still I'm confussed why product.selected and variant.selected do not give me any values. I will ignore these as I get my data with your advised method. Thanks a lot

tim
Shopify Expert
3040 170 1099

This is an accepted solution.

'Cause product object has no .selected property, and for variant  it has different meaning

https://help.shopify.com/themes/liquid/objects/product

https://help.shopify.com/themes/liquid/objects/variant#variant-selected

My post solved your problem? Like it!
QnavWhat
Excursionist
45 2 6

Thanks for your help

Akshay_V
Shopify Partner
438 16 58


@tim Is there any way to get selected variant title like cart page on the product page after selecting from the swatch.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
kuldeep
New Member
7 0 0

Hi Tim 

 

{%- assign current_variant = product.selected_or_first_available_variant -%}
 
 
{% if current_variant.id == 123 %}
<a href=""><img src="{{ 'sample.png' | asset_url }}" alt="sample" class="product-form " id="new-button"></a>
{% endif %}
 
I am not getting this new id on variant change on product page . Always default variant id is coming . I am writing this code in product template . need a anchor tag based on selected variant .
 
your help will be appreciated .
 
Thank you 
kuldeep
New Member
7 0 0

Hi All 

 

I found that i can get variant sku by {{ variant.sku }} and if i am adding this in anchor tag , it's working .

but below code is not working . I will be very grateful if someone can help 

 

{% if variant.sku == 'H0-S3TC-64ZA' %}
do something
{% endif %}

 

Many Thanks 

Product
Tourist
5 0 3

How can I get that value at runtime? I mean, how can I get with JavaScript the selected variation object when the select elements change.

FurnaceX
Shopify Partner
45 2 41

@ProductDid you figure this out?

"How can I get that value at runtime? I mean, how can I get with JavaScript the selected variation object when the select elements change."

attotasolutions
Shopify Partner
26 0 17

Hi,

You can get the current product's variant ID using below.

{{ product.selected_variant.id }}

You might actually want to use product.selected_or_first_available_variant.id - as I understand it, selected_variant is null if there's no variant in the URL of the page you are on.

HDK
Shopify Partner
10 0 3

Having the same problem here, especially with the features of OS 2.0. Can't add a text-block with the wanted metadata to the products template since the meta-data is assigned to the variants, not the products. Can however add a custom-liquid-block

{{ product.selected_or_first_available_variant.metafields.XXX['YYY']}}

but this doesn't change when another varient is selected. Is there a way to react to variant-selection without messing with the actual templates code / js - files?

sagar_at_avyya
Shopify Partner
19 1 10

Any solutions to this?

 


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

sagar_at_avyya
Shopify Partner
19 1 10

Any updates?


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

Badrnyali
New Member
2 0 0

I'm also stuck here. product.selected_or_first_available_variant is working when the page load and shows the first variant, still when changing through variants, it's not working it stays in the first variant, and also selected_variant is not working !!!

HDK
Shopify Partner
10 0 3

Things get even worse. We are using the empire-theme by pixelunion and want to upgrade to a halfway decent version. We managed to write some custom javascript-code and attach a "change"-event-listener to the hidden selectbox, that is changed when a variant is selected. For some reason this doesn't work propperly in empire 7.0.0. The strange thing is, that when we inspect the document, change the visibility of the selectbox from "hidden" to "block" an change the selected value manually, the event is triggered.

 

<script>
window.onload = function() {
f=document.querySelector(".variant-selection__variants[name='id']");
f.addEventListener('change',function() {... } );
}
</script>