Show both prices with and without VAT to customers in the storefront

[MacLake]

What I'm trying to achieve

Hi, nice that we now have VAT calculation in Saleor. In our small shop we have complicated requirements, as we sell products to private persons and to companies in the EU and outside. Some products are for B2B only, others also for B2C. So we need to display both prices with and without VAT.

Describe a proposed solution

For products without variant picker this is quite easy, just by modifying templates/product/details.html

It would be even better to extend the checkbox “Show gross prices to custumors…” in the dashboard to a choice to display gross, net or both prices.

Other solutions I've tried and won't work

But for products that display a variant picker I can’t figure out where exactly the displayed price snippet is generated. I only found out where the price is displayed, but not how:

{% if show_variant_picker %}
          <div id="variant-price-component"></div>
…

This div is filled by a JS when the page is loaded and when you click variants buttons, but how exactly?

[petedermott]

I've been looking into a similar problem when trying to display a RRP on my products but I think I'm starting to figure it out.

The price variations are actually set up in a React component and pulled in as a JSON object, I'll try and run down how (I think) this works:

1. The variant data is pulled into the template from the details view via the get_variant_picker_data function and added to the template as a JSON dump for React to use.

2. On the product details page a React component is created in the #variant-price-component div you found via the variant-picker.js file.

3. This will in turn call VaraintPrice.js to do some logic and display the price elements as required, I think this will be where you want to look for your particular issue.

One other thing to note is that I'm pretty sure you will need to run npm run build-assets if you make any changes to the React components to get them to show up on the front end!

[maarcingebala]

Hey @MacLake, this variant picker component is a bit complicated, unfortunately. As @petedermott wrote, it's rendered using React and powered with data from get_variant_picker_data, so you should see what data is passed there and adjust it accordingly if needed. This would be useful in base Saleor as well so if you come up with a working solution I'd be happy to merge it. Let my know if you need any further assistance.

[petedermott]

I actually had the same requirement recently so I've come up with a VariantPrice.js that should be a drop in replacement

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.