Venture theme : hide price on variant change

[zmo]

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

[diego_ezfy]

@zmo

You must add an “on change” event listener to the 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

[zmo]

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.