Customize B2B Store Components Using Open Source Components

Open source components provide editable source code for standard B2B store components. Using open source components, you can modify component functionality without building a new component from scratch.

The source code is available in a public Git repository. Clone the repository, customize and extend the components to meet your store requirements, and then deploy the updated versions to any B2B store using tools such as Salesforce Developer Experience (Salesforce DX) and Visual Studio Code (VS Code).

For detailed instructions on cloning and working with the open source components, see the README.md file in the Git repository.

We recommend you validate and test changes in a sandbox environment before deploying them to the production environment.

Note

Example Scenario: Personalize Product Pricing

A Commerce Admin wants to customize the Product Pricing Details component on a Product Details page to:

Display the currency as a code (for example, USD) instead of a symbol ($).
Highlight the main price in a specific color.
Display the percent difference between the main price and the strikethrough (original) price.

Using an open source component, a developer can implement these changes by modifying the existing component’s code rather than rebuilding the product pricing details component from scratch.

Code changes

Open the Product Pricing Details component in VS Code:

a. Pull the latest version of the component from your Salesforce org.

b. Open the productPricingDetails component.
Open the productPricingDetailsui.html file. This file contains the HTML markup for the Product Pricing Details component.
Change all pricing displays using “symbol” ($) to “code” (USD):

a. Find ‌the text "currency-display-as="symbol".

b. Replace all the instances with “currency-display-as=”code”.

Update component code logic to show the percent difference between the main and strikethrough prices:

a. Calculate the percent difference in the productPricingDetailsui.js file. Add the following code to the JavaScript file to determine whether to display the percent difference and to calculate that difference:

1/**
2* New:
3* Determine whether to display percentage difference between the strikethrough price and main price.
4* @type (boolean)
5* @public
6*/
7get displayPercentageDifference() {
8  // Display percentage if strikethrough price is higher than main price.
9  return this.strikethroughPrice > this.mainPrice;
10}
11/**
12* New:
13* The percentage difference between the main price and strikethrough price.
14* This value is calculated as: ((strikethroughPrice - mainPrice) / mainPrice * 100.
15* @type (string)
16* @public
17*/
18get percentageDifference() {
19  if (this.mainPrice && this.strikethroughPrice) {
20    const percentage = ((this.strikethroughPrice - this.mainPrice) / this.mainPrice) * 100;
21    return `${percentage.toFixed(0)}`; // whole number percentage
22  }
23  return '0';
24  //Default to ‘0%’ if prices are not set.
25}

b. Format where the percent difference shows up in the productPricingDetailsui.html file. Add the following HTML to display the percent difference:

1<!-- New! –>
2<span class=”slds-m-right_xx-small”>
3  <span
4    if:false={displayPercentageDifference}
5    class=”percentage-difference slds-text-heading_small slds-p-right_x-small”>
6    {percentageDifference}% off
7  </span>
8<span>

c. Replace all the instances with “currency-display-as=”code”.

1/* New! */
2.percentage-difference {
3  border: 1px solid #db3603; /* red border */
4  color: #ffffff; /* white text */
5  font-weight: 400;
6  padding: 5px 5px;
7  font-size: 12px;
8  display: inline-block;
9  text-align: center;
10  background-color: #d83603; /* red background */
11  margin-left: 10px; /* space from other prices */
12}

Save the modified files.
Use the Salesforce CLI or Developer Console to deploy the updated component to your Salesforce org.
Refresh the Product Details page to verify the changes are applied to the Product Pricing Details component.

Customize B2B Store Components Using Open Source Components

Example Scenario: Personalize Product Pricing

Code changes

See Also