The Salesforce Developers website will undergo maintenance on May 29, 2024 from 3:00 a.m. UTC to 10:00 a.m. UTC. The maintenance process may affect the availability of our documentation. Please plan accordingly.

Digital Commerce Web Components

Digital Commerce Web Components are built on Web Component standards that work with all modern browsers and can be distributed with any JavaScript library or framework. Web components allow you to create new custom, reusable, encapsulated HTML tags to use in your web pages or applications.

Use Digital Commerce Web Components to implement an eCommerce solution. These components support all of the major phases of any eCommerce solution, namely browse phase, configure phase, cart phase, and checkout. You can use these web components as-configured or they can be customized based on client requirements.

The Digital Commerce reference app is available to Salesforce customers and partners as a working sample to learn more about the Digital Commerce solution.

Current Salesforce customers and partners can explore how Digital Commerce web components work with the Digital Commerce SDK by accessing the Digital Commerce Web Component Reference App which is located in a zip file in a VPL. See Digital Commerce Lightning Web Component Artifacts for information and links to the VPL.

The reference implementation showcases preconfigured SDK and web component dependencies, sample apps, and build/deploy scripts for off-platform development.

Digital Commerce Web Components were developed using a Google library called LitElement, which is a simple base class for creating fast, lightweight web components. Web Components are encapsulated. You can develop your applications using any library and any tool that supports Web Standards. There are no dependencies on Google Polymer, however, and because of its foundation on LitElement, Digital Commerce Web Components provides full support for a shadow DOM.

You can use Digital Commerce Web Components to develop Single-Page-Applications (SPAs) and non-SPA applications. Each web component comes with defined methods to retrieve data and a Newport style template to render data.

See Digital Commerce Web Components developer reference.

For the Spring '20 version of the Digital Commerce Web Components developer reference see https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/wc107/index.html

ComponentDescription
VlocityAssetAttributesRender asset attributes.
VlocityDCAppliedPromotionListRender all the applied promotions.
VlocityDCAssetDetailsRender each asset.
VlocityDCAssetItemDetailsDisplay asset details for each asset.
VlocityDCAssetsListDisplay all the assets.
VlocityDCBaseComponentBase class extended by all DC components. This class contains common logic of all components.
VlocityDCCatalogRender the specified catalog list.
VlocityDCCheckoutSupports the checkout workflow, including payment and submitting the order.
VlocityDCChildCatalogRender the specified catalog child list.
VlocityDCEditModalSupports basket updates.
VlocityDCFilterRender offer prices in the list of offers.
VlocityDCFirebaseRedirectStrategyUsed for sign-in or sign-up using redirect mechanism.
VlocityDCGlobalHeaderRenders a global header which is available across all components except checkout.
VlocityDCHomePageRender the home screen during the browse phase.
VlocityDCMainContains internal navigation logic between different screens/phases.
VlocityDCMediaViewerRender a media carousel that cycles through media resources.
VlocityDCModalRender a modal popup.
VlocityDCMyAccountRender user account.
VlocityDCOfferAddonsSupports add-on offers and displays the child bundle options.
VlocityDCOfferAttributeConfigRender attribute values and allow users to choose a predefined set of options.
VlocityDCOfferColorConfigRender color options for an offer.
VlocityDCOfferConfigRetrieve the selected offer details using the getOffer() API. The offer can also be configured in this component.
VlocityDCOfferConfigDetailsRender configuration details for an offer.
VlocityDCOfferConfigurationsRender non-configurable offer attributes.
VlocityDCOfferGridViewRender offers in a grid.
VlocityDCOfferGroupRender offers in a group.
VlocityDCOfferGroupSectionsRender the first child bundle options.
VlocityDCOfferGroupSelectionSegment offer groups.
VlocityDCOfferInputConfigSupports custom input.
VlocityDCOfferListViewRender a list of all the offers.
VlocityDCOfferListViewAttributeRender offer attributes in an offer list.
VlocityDCOfferListViewImageRender offer images in an offer list.
VlocityDCOfferListViewPriceRender offer prices in an offer list.
VlocityDCOfferPaymentConfigRender payment options for an offer.
VlocityDCOffersListRetrieve the offers for the specified catalog-code using the getOffers() API. DCOffersList is a base class which is extended by all web components.
VlocityDCPromotionListRender all available promotions.
VlocityDCReviewOrderRender all the order details so that the user can review them before submitting the order.
VlocityDCShoppingCartRender the offers that are being added to the cart. The cart may be updated before checkout.
VlocityDCShoppingNestedOfferRender child bundles of the offer that is being added to the cart.
VlocityDCShoppingOfferDetailsRender details of the offers that are being added to cart.
VlocityDCSigninSupports sign up and sign in.
VlocityDCToastRender toast messages.
VlocityDCTotalbarRender total cart prices.
VlocityDCUpdateBillingAddressSupports updates to the billing and shipping addresses.