Liquid, JavaScript, themes, sales channels
I have a question about selecting product's variants and looking forward to getting some help:
On the price section, I've set when the price is equal to 0, display 'ENQUIRE FOR PRICE' instead of 0, the code is below:
{%- if selected_variant.price == 0 -%}
ENQUIRE FOR PRICE
{%- else -%}
{{- selected_variant.price | money -}}
{%- endif -%}
However, it only works when I enter the page with a selected variant that has a price equal to 0, for example in this Link .
If I enter the page with this link, it will display the product with a non-zero price first, then when I select a product price equal to 0, the code above doesn't work. This situation also happening on my stock variable and 'Contact for preorder button, I've attached a demo video please check.
I'm assuming it's related to some javascript code in my theme, that refreshed the product information section when I selected variants. Could anyone please give me some advice about where should I work on?
Thanks in advance for any help.
Solved! Go to the solution
This is an accepted solution.
Hi @Ultipower,
Please change the code here: https://i.imgur.com/66OtKwm.png
Hope it is clear to you.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
I'm assuming it's related to some javascript code in my theme, that refreshed the product information section when I selected variants. Could anyone please give me some advice about where should I work on?
This will vary wildly between themes and is an advanced subject even if you have coding experience.
Pertinent liquid objects
https://shopify.dev/api/liquid/objects/product#product-first_available_variant
https://shopify.dev/api/liquid/objects/product#product-selected_or_first_available_variant
If you have a shopify theme you could look at the "choose an option" customization tutorial to try and synthesize a solution
https://help.shopify.com/en/manual/online-store/themes/os/customize/add-pick-an-option
Otherwise a clunky workaround is to make an event handler that checks the variant parameter and compares that to a hidden message field with matching variant ids to display that message.
Or just full reloads the page every time the option is changed.
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Hi @Ultipower,
Because when you change variants, the price will be reloaded according to JS so you need to change JS too.
Please go to Assets > theme.min.js file, find '.price-list', and change code: https://i.imgur.com/AJuNfs5.png
Code:
if (i) if (e) {
if (t && t.price === e.price && t.compare_at_price === e.compare_at_price) return;
i.innerHTML = "";
if (e.compare_at_price > e.price ) {
i.innerHTML += '<span class="price price--highlight"><span class="visually-hidden">'.concat(window.languages.productSalePrice, "</span>").concat(T.formatMoney(e.price, window.theme.moneyFormat), "</span>");
i.innerHTML += '<span class="price price--compare"><span class="visually-hidden">'.concat(window.languages.productRegularPrice, "</span>").concat(T.formatMoney(e.compare_at_price, window.theme.moneyFormat), "</span>");
} else {
if (e.price == 0) {
i.innerHTML += '<span class="price"><span class="visually-hidden">'.concat(window.languages.productSalePrice, "</span>ENQUIRE FOR PRICE</span>");
} else {
i.innerHTML += '<span class="price"><span class="visually-hidden">'.concat(window.languages.productSalePrice, "</span>").concat(T.formatMoney(e.price, window.theme.moneyFormat), "</span>");
}
}
i.style.display = "";
} else i.style.display = "none"
Hope it helps!
Hi @LitExtension , Thanks for your prompt and helpful response.
I've tried your code and it works very well.
I would like also to change the stock detail to 'PLEASE CONTACT US FOR ETA OF THIS ITEM OR MAKE A PRE-ORDER AT A DISCOUNT PRICE TODAY!' when I select a variant that price is zero.
Could you please let me know how to do that?
Thanks in advance.
This is an accepted solution.
Hi @Ultipower,
Please change the code here: https://i.imgur.com/66OtKwm.png
Hope it is clear to you.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Hi @LitExtension ,
Thanks for your reply.
Sorry about the confusion, but I mean how can I change the stock text when switching to a product that's unavailable.
For example on this image https://imgur.com/a/CdPkXOf Stock and the disabled button at the bottom shares the same language setting which is 'CONTACT FOR PREORDER', when the user selects a product that is out of stock. I want after the stock shows: PLEASE CONTACT US FOR ETA OF THIS ITEM OR MAKE A PRE-ORDER AT A DISCOUNT PRICE TODAY!
And the button that is disabled still shows CONTACT FOR PREORDER, is that possible to do?
Thank you.
Hi, can you help me? I can found the file in my theme. I'm using dawn theme. Thank you
Hi @Ultipower, get a quick solution for displaying variant names and prices on Shopify collection pages by checking out this YouTube video:
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024