Add the CPQ Cart to Your Digital Experience Site

Add the Industries CPQ Cart to your Digital Experience site to allow your users to create quotes, orders, or opportunities using the cart.

Before you create a site with the LWC Cart, enable digital experiences in your org. For more information, see Enable Digital Experiences for Salesforce Customer Identity.

Note Multisite cart is not yet validated for Experience Cloud. You may attempt this setup, but it is currently unsupported.

1. From Setup, use the Quick Find box to search for Digital Experiences and click All Sites.
2. Depending on if you're adding the cart to an existing or new site:

   • If you’re adding the cart to a new site, click New.

   • If you’re adding the cart to an existing site, click Edit on the site.

3. If you’re creating a site, select a template that supports record and object pages and LWC components.
   For example, you can select the Help Center template and click Get Started.
4. Enter a name for your site and optionally a URL and then click Create.
5. Click Builder.
6. Click Home and then + New Page.
7. Click Object Pages.
8. From the list, depending on the page that you want to create, search for and select Order, Quote, or Opportunity.
9. Click Create and then Create again.
   Salesforce Experience Cloud creates a page with Detail, List, and related list pages.
10. Click the Lightning icon and add the following Industries CPQ Cart components to your site:
    

    Note Set the value for objectApiName to match the type of page that you're creating. For example, if you're creating a page for quotes, use objectApiName = Quote.

    Component	Properties
    CpqGlobalHeaderContainer	recordId = {!recordId}, objectApiName = Order
    CpqEventOrchestratorUtil	recordId = {!recordId}
    CpqFlexCardUtils	channelName = cpqutils, cartPageSize = 10, recordId = {!recordId}
    CpqCartSummaryContainer	recordId = {!recordId}, objectApiName = Order
    CpqCartDetailViewContainer	recordId = {!recordId}, objectApiName = Order
    CpqBrowsePhaseContainer	recordId = {!recordId}, objectApiName = Order
    Record Detail	recordId = {!recordId}
    Related Record List	Parent record Id = {!recordId}
    CpqProductConfigureTotalBar	recordId = {!recordId}, objectApiName = Order

11. Click Preview and verify the page and CPQ cart components.
12. If the preview looks good, click Publish.