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
| Component | Description |
|---|---|
| VlocityAssetAttributes | Render asset attributes. |
| VlocityDCAppliedPromotionList | Render all the applied promotions. |
| VlocityDCAssetDetails | Render each asset. |
| VlocityDCAssetItemDetails | Display asset details for each asset. |
| VlocityDCAssetsList | Display all the assets. |
| VlocityDCBaseComponent | Base class extended by all DC components. This class contains common logic of all components. |
| VlocityDCCatalog | Render the specified catalog list. |
| VlocityDCCheckout | Supports the checkout workflow, including payment and submitting the order. |
| VlocityDCChildCatalog | Render the specified catalog child list. |
| VlocityDCEditModal | Supports basket updates. |
| VlocityDCFilter | Render offer prices in the list of offers. |
| VlocityDCFirebaseRedirectStrategy | Used for sign-in or sign-up using redirect mechanism. |
| VlocityDCGlobalHeader | Renders a global header which is available across all components except checkout. |
| VlocityDCHomePage | Render the home screen during the browse phase. |
| VlocityDCMain | Contains internal navigation logic between different screens/phases. |
| VlocityDCMediaViewer | Render a media carousel that cycles through media resources. |
| VlocityDCModal | Render a modal popup. |
| VlocityDCMyAccount | Render user account. |
| VlocityDCOfferAddons | Supports add-on offers and displays the child bundle options. |
| VlocityDCOfferAttributeConfig | Render attribute values and allow users to choose a predefined set of options. |
| VlocityDCOfferColorConfig | Render color options for an offer. |
| VlocityDCOfferConfig | Retrieve the selected offer details using the getOffer() API. The offer can also be configured in this component. |
| VlocityDCOfferConfigDetails | Render configuration details for an offer. |
| VlocityDCOfferConfigurations | Render non-configurable offer attributes. |
| VlocityDCOfferGridView | Render offers in a grid. |
| VlocityDCOfferGroup | Render offers in a group. |
| VlocityDCOfferGroupSections | Render the first child bundle options. |
| VlocityDCOfferGroupSelection | Segment offer groups. |
| VlocityDCOfferInputConfig | Supports custom input. |
| VlocityDCOfferListView | Render a list of all the offers. |
| VlocityDCOfferListViewAttribute | Render offer attributes in an offer list. |
| VlocityDCOfferListViewImage | Render offer images in an offer list. |
| VlocityDCOfferListViewPrice | Render offer prices in an offer list. |
| VlocityDCOfferPaymentConfig | Render payment options for an offer. |
| VlocityDCOffersList | Retrieve the offers for the specified catalog-code using the getOffers() API. DCOffersList is a base class which is extended by all web components. |
| VlocityDCPromotionList | Render all available promotions. |
| VlocityDCReviewOrder | Render all the order details so that the user can review them before submitting the order. |
| VlocityDCShoppingCart | Render the offers that are being added to the cart. The cart may be updated before checkout. |
| VlocityDCShoppingNestedOffer | Render child bundles of the offer that is being added to the cart. |
| VlocityDCShoppingOfferDetails | Render details of the offers that are being added to cart. |
| VlocityDCSignin | Supports sign up and sign in. |
| VlocityDCToast | Render toast messages. |
| VlocityDCTotalbar | Render total cart prices. |
| VlocityDCUpdateBillingAddress | Supports updates to the billing and shipping addresses. |