Skip to main content
Skip table of contents

LWC - Shopping Cart

Shopping Cart

The Shopping Cart Lightning Web Component(LWC) enables members to remove the product, change the quantity, and proceed to check out the product(s) that they want to purchase. 

Configuration Options


Learn more about Experience Builder here.


From the components list, select the Shopping Cart component and drag it onto the site page. 

On the page, click within the Shopping Cart component to bring up the Property editor.

Figure 1. Shopping Cart LWC with configuration properties


PropertiesDescription
Order

This setting needs to be configured for the Pro forma order to display. Use {recordId} for the current record, {url.<param>} (e.g. {url.id}) for a URL parameter or a Salesforce record ID.

Product Detail Page

This setting allows you to enter the API name of the Product Details page created. It needs to be configured to display relevant information about the selected product and allow the user to select specific options and quantities in the shopping cart.

Continue Shopping Page

This setting allows you to enter the API name of the Experience Builder page or the URL of the Visualforce page created to redirect the member when the "Continue Shopping" button is clicked.

  • To redirect the member to the Visual Force Store page staff users need to enter '/communityhub/NC__store' URL in this property field. However, each association configures its customer-facing site URL according to its preferences. For instance, if the ISEN association names their customer-facing site 'Community Nest' and the URL 'NestingZone', the resulting URL will be 'https://power-ruby-1157-dev-ed.scratch.my.site.com/NestingZone'. Thus, staff users should replace 'Community Hub' with a specific URL name, such as 'NestingZone', which means the URL will be /NestingZone/NC__store.


Checkout Page

This allows you to enter the API name of the Checkout page.

Example

Figure 2. Shopping Cart page in Experience Cloud Community Hub

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.