I am looking to switch to Dawn theme, however need to do some customisation on the product page where I will need to be able to access the current variation selected when the variation selected changes.
2 Likes
Cause product object has no. selected property, and for variant, it has a different meaning
https://help.shopify.com/themes/liquid/objects/product
https://help.shopify.com/themes/liquid/objects/variant#variant-selected.
Thanks!
I know how to access the value.
{%- assign current_variant = product.selected_or_first_available_variant -%}
{{ current_variant.option2 }}
Which of course works fine on page load, I need to get the value when the selected variation changes.
Just can’t figure out how to hook into the VariantSelects Script.
Hello @alison_Cl ,
By going to your theme’s global.js you can see updateMasterId() from there you can get your current selected variant value. Please see here I have added console log line and I am getting current value.
@EvinceDev
What’s next? How can I display it on the product page instead of the console?
Hello @GM-Mart ,
You can add it on product page by using jquery code. For Ex. $(“p”).html(“Hello world!”);
To expand on this more for you or anyone else. The way I solved this problem was by updating “updateMasterId()”:
updateMasterId() {
this.currentVariant = this.getVariantData().find((variant) => {
return !variant.options.map((option, index) => {
document.getElementById("currently-selected-variation").innerHTML = this.options[index];
return this.options[index] === option;
}).includes(false);
});
}
The Important line of code being added is this: document.getElementById(“currently-selected-variation”).innerHTML = this.options[index];
It will basically update the inner HTML of a div, span, or p that has an ID of “currently-selected-variation”
So on your product page now you need to add:
{% assign current = product.selected_or_first_available_variant %}
{{ current.title }}
You save my life! Thank you so much!
My case is a little different from yours. I need to get the selected variant id and make some changes.
Were you able to get the current selected variant id? If so, could you please share how you did?
I’m on my phone and this was a bit ago, but you MIGHT be able to get the ID with {% assign current = product.selected_or_first_available_variant %}
{{ current.ID }}
Change current.title to current.id
1 Like
I fixed it for Dawn 15. We no longer use global.js, instead we use product-info.js.
Dawn 15 solution to update variant name on page upon variant change:
Open product-info.js
Find this function: handleUpdateProductInfo(productUrl)
Make a new line below: this.updateVariantInputs(variant?.id);
Add this:
this.updateVariantName(html);
Now after the closing bracket for handleUpdateProductInfo(productUrl)
Add this new function:
updateVariantName(html) {
const newVariantNameSpan = html.querySelector('#currently-selected-variation');
const currentVariantNameSpan = this.querySelector('#currently-selected-variation');
if (newVariantNameSpan && currentVariantNameSpan) {
const newContent = newVariantNameSpan.textContent.trim();
currentVariantNameSpan.textContent = newContent;
}
}
That’s it, you can use the same custom liquid block from the previous solution in your theme:
{% assign current = product.selected_or_first_available_variant %}
{{ current.title }}
Here is a screenshot of the edited product-info.js**:**
1 Like