# Digital Commerce Lightning Web Components

This topic describes the Digital Commerce Lightning Web Components, which are intended for use on the Salesforce platform and follow the same standards as [Salesforce's Lightning Web Components](https://developer.salesforce.com/docs/component-library/documentation/lwc).

Digital Commerce Lightning Web Components supplement Vlocity Lightning Web Components by incorporating calls to the set of Digital Commerce cacheable APIs. Digital Commerce APIs are RESTful Web APIs that are designed to enable client applications such as consumer-facing web and mobile apps to shop for products and services. Vlocity Communications API Caching is optimized for consumer shopping use cases where the user is often anonymous until well into the check-out process. OmniStudio Vlocity Lightning Web Components

Vlocity Lightning Web Components are custom components and widgets 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.

The Digital Commerce Web Components developer reference has two versions:

- [Current Version](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/index.html)

- [Spring '20 Version](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc107/lwc/107.0/index.html)

| Component                                                                                                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [DCAppliedPromotionList](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCAppliedPromotionList.html)         | Render all the applied promotions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| [DCAssetAttributes](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCAssetAttributes.html)                   | Lists all asset attributes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| [DCAssetDetails](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCAssetDetails.html)                         | Renders each asset.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| [DCAssetItemDetails](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCAssetItemDetails.html)                 | Displays asset details for each asset.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| [DCAssetsList](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCAssetsList.html)                             | Displays all assets.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| [DCBaseComponent](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCBaseComponent.html)                       | A base class that is extended by other lightning web components                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| [dcBaseMixin](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/dcBaseMixin.html)                               | <>A wrapper for [DCBaseComponent](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCBaseComponent.html) that help implement your custom UI and leverage the Digital Commerce SDKExtends [OmniScript Base Mixin (omniscriptBaseMixin)](https://help.salesforce.com/s/articleView?id=sf.os_extend_the_omniscriptbasemixin_component_17717.htm&type=5)Enables a custom Salesforce URL for logged-in users by specifying the value of the salesforceCustomDomainUrl variableProvides methods to get an SDK instance, update custom URLs, load a CSS into custom LWCs, update OmniScript data, and other capabilitiesSupports the getTranslatedLabels translation method and its parameters: language and labels</> |
| [DCCatalog](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCCatalog.html)                                   | Render the specified catalog list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| [DCCheckOut](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCCheckOut.html)                                 | Supports the checkout workflow, including payment and submitting the order                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| [DCCheckoutPayment](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCCheckoutPayment.html)                   | Supports payment features                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| [DCChildCatalogs](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCChildCatalogs.html)                       | Render the specified catalog child list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| [DCCustomAuthentication](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCCustomAuthentication.html)         | Reference implementation for sign-in or sign-up using redirect mechanism.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| [DCFilter](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCFilter.html)                                     | Render offer prices in the offer list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| [DCGlobalHeader](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCGlobalHeader.html)                         | Renders a global header available across all components except checkout.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| [DCMediaViewer](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCMediaViewer.html)                           | Render a media carousel that cycles through media resources.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| [DCMyAccount](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCMyAccount.html)                               | Renders user account.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| [DCOfferAddons](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferAddons.html)                           | Supports add-on offers and displays the child bundle options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| [DCOfferAttributeConfig](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferAttributeConfig.html)         | Render attribute values and allow users to choose a predefined set of options.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| [DCOfferColorConfig](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferColorConfig.html)                 | Render color options for an offer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| [DCOfferConfig](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferConfig.html)                           | Retrieve the selected offer details using the getOffer() API. The offer can also be configured in this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| [DCOfferConfigDetails](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferConfigDetails.html)             | Render configuration details for an offer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| [DCOfferConfigurations](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferConfigurations.html)           | Render non-configurable offer attributes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| [DCOfferGridView](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferGridView.html)                       | Render offers in a grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| [DCOfferGroup](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferGroup.html)                             | Render offers in a group.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| [DCOfferGroupSections](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferGroupSections.html)             | Render the first child bundle options (optional).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| [DCOfferGroupSelection](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferGroupSelection.html)           | Segment offer groups                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| [DCOfferInputConfig](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferInputConfig.html)                 | Supports custom input                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| [DCOfferListViewAttribute](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferListViewAttribute.html)     | Render offer attributes in an offer list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| [DCOfferListViewImage](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferListViewImage.html)             | Render offer images in an offer list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| [DCOfferListViewPrice](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferListViewPrice.html)             | Render offer prices in an offer list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| [DCOfferPaymentConfig](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOfferPaymentConfig.html)             | Render payment options for an offer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| [DCOffersList](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOffersList.html)                             | Retrieve the offers for the specified catalog-code using the getOffers() API. DCOffersList is a base class which is extended by all lightning web components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| [DCOffersListView](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCOffersListView.html)                     | Render offers in a list view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| [DCProgressIndicator](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCProgressIndicator.html)               | Render a progress icon or a progress bar.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| [DCPromotionList](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCPromotionList.html)                       | Render all available promotions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| [DCReviewOrder](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCReviewOrder.html)                           | Render all the order details so that the user can review them before submitting the order.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| [DCSampleApp](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCSampleApp.html)                               | Container class where all components are rendered conditionally.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| [DCShoppingCart](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCShoppingCart.html)                         | Render the offers that are being added to the cart. The cart may be updated before checkout.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| [DCShoppingcartNestedOffer](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCShoppingcartNestedOffer.html)   | Render child bundles of the offer that is being added to the cart.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| [DCShoppingCartOfferDetails](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCShoppingCartOfferDetails.html) | Render details of the offers that are being added to cart.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| [DCSignIn](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCSignIn.html)                                     | Supports sign up and sign in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| [DCTotalBar](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCTotalBar.html)                                 | Render total cart prices.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| [DCUpdateBillingAddress](https://sfdo-docs.s3.us-west-2.amazonaws.com/VlocityDevDoc/lwc/DCUpdateBillingAddress.html)         | Supports updates to billing and shipping addresses                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
