Enhance store pricing by displaying the percentage discount alongside a negotiated price. Create the app by adapting a productPricing component from the Commerce LWR library.
-
Open your VS Code editor.
-
In the lwc/productPricing folder, double-click productPricing.js.
The file is open in the Visual Studio Code editor.
-
To insert the discount percentage calculation logic, add the code in the snippet and highlighted in the screenshot.
1** * Gets the discount percentage.
2 * * Calculated as
3 * ((originalPrice - negotiatedPrice) / originalPrice) * 100 * @returns {number|null}
4 * Returns null if discount percentage cannot be calculated
5 * * @readonly
6 * * @private
7 * */ get discountPercentage() { if (this.originalPrice && this.negotiatedPrice)
8 { const original = parseFloat(this.originalPrice); const negotiated = parseFloat(this.negotiatedPrice);
9 if (original !== 0) { return Math.round(((original - negotiated) / original) * 100); } } return null;
10 }
11 /** * Gets whether the discount percentage is available * @type {boolean} * @readonly * @private */
12 get isDiscountAvailable() { return this.discountPercentage !== null;
13 }
14 /**
-
Save the file.
-
In the productPricing folder, double-click productPricing.js-meta.xml.
The file is open in the Visual Studio Code editor.
-
If you deploy the force-app/main/default/lwc with this custom LWC, skip this step; the lwc/builderProductPricing.js-meta.xml file includes the Experience Builder target declarations.
To make your LWC deployable in Experience Builder, set isExposed to true, and define {lightningCommunity__Page}, {lightningCommunity__Page_Layout}, or {lightningCommunity__Theme_Layout} in targets.
The snippet specifies a pricing js.meta.xml for a component in Experience Builder and also enables component property editing.
-
Save the file.
-
In the Visual Studio Code explorer, double-click productPricing.html.
The productPricing.html template is open in the Visual Studio Code editor.
-
To display the discount percentage element alongside a negotiated price, add the <span> highlighted in the snippet.
-
Save the file.
-
From the component project directory in Visual Studio Code, right-click the enhanced productPricing under force-app/main/lwc, and select SFDX: Deploy Source to Org.
View the status of your deployment on the Output tab of the integrated terminal, where SFDX displays a notice that includes an exit code, such as “SFDX: Deploy Source to Org … ended with exit code 0.” Exit code 0 means that the command ran successfully.
-
In the VS Code editor, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
-
Enter SFDX.
-
Select SFDX: Open Default Org.
Your store opens in a separate browser.
-
In the left Navigation panel, click Components.
The custom component displays under Components | Custom Components.
-
From the Custom area of the Lightning Components list, drag your Lightning web component to the page canvas.
-
To edit component properties, select the component on the page canvas, and enter changes in the component property editor.
j