Select product's variant and display customised price/stock

Solved
Ultipower
New Member
5 0 0

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.

 

Accepted Solution (1)

Accepted Solutions
LitExtension
Shopify Partner
2016 336 409

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Replies 5 (5)
PaulNewton
Shopify Partner
3512 235 688

@Ultipower 

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.

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
LitExtension
Shopify Partner
2016 336 409

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!

 

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
Ultipower
New Member
5 0 0

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.

LitExtension
Shopify Partner
2016 336 409

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Ultipower
New Member
5 0 0

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.