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.

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.

  1. 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.

  2. Open the productPricingDetailsui.html file. This file contains the HTML markup for the Product Pricing Details component.

  3. 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”.

  4. 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:

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

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

  5. Save the modified files.

  6. Use the Salesforce CLI or Developer Console to deploy the updated component to your Salesforce org.

  7. Refresh the Product Details page to verify the changes are applied to the Product Pricing Details component.