Venture theme : hide price on variant change

zmo
Tourist
12 0 6

Hello

 

Using the Venture theme, I've updated the product-template liquid to hide the price of a product when it's out of stock. It's just an easy {% if variant.available %} ... {% endif %}.

 

It works when I refresh the page with the variant, but then when I change the variant it does not get updated, though the price within gets updated.

 

So how do I trigger an update to that part of the DOM, so that I can hide/show price on variant change?

 

Thanks

Replies 2 (2)
diego_ezfy
Shopify Partner
2313 415 544

@zmo 

You must add an "on change" event listener to the <select> of the Venture theme. It requires a bit of Javascript knowledge to implement that, if you're not comfortable with JS it's highly recommended contacting a developer to assist you.

I have written a blog post recently teaching how to hide the price for sold out variants on the Dawn theme, it works differently than Venture's but perhaps the code used there will help you somehow. 

I'm wishing you all the best.

Kind regards,
Diego

 

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
zmo
Tourist
12 0 6

Thank you for your answer, though what is surprising me is that it looks like there's an observer mechanism implemented as when I change the variant, the prices change, the image changes, the checkout button change.

 

But when I add some custom conditions in my theme's code and it does not work.

 

I looked at the theme.js and it looks like the obverver mechanism is implemented by the `Variant` singleton, the `updatePrice` function contains:

 

```

this.$container.trigger({
  type: 'variantPriceChange',
  variant: variant
});

```

 

But I'm not understanding how it's being propagated to trigger focused DOM changes. I can hijack the onChange, but because it works elsewhere without using onChange on the select, I'm wondering how it's being implemented in the theme.