Custom pricing component showing a discount percentage
Key Takeaway
Adapt the productPricing reference component: calculate the discount in its JavaScript file, show it in a span element in its HTML file, and check price data before you calculate.
A custom pricing component shows buyers how much they save by displaying a discount percentage next to their negotiated price in a B2B store built with an LWR template. You don't build it from scratch. You adapt the productPricing reference component from the Commerce LWR library, then place it on a store page in Experience Builder.
Before you start
An LWR store already has dozens of standard Lightning web components, so review the existing store components before you build a custom one.
To adapt productPricing, first set up your Commerce DX environment and clone the Commerce LWR repo. In VS Code, cloning places each library component in force-app/main/default/lwc by default.
This customization is available for B2B Commerce in Enterprise, Unlimited, and Developer Editions.