How to Build a Dynamic Shopping Cart in Salesforce Using LWC

In plain words: A dynamic shopping cart in Salesforce Lightning Web Components (LWC) is an interactive client-side UI component that automatically updates and displays a list of selected items in real-time using standard modern web technologies like HTML templates and reactive JavaScript properties.

Lightning Web Components (LWC) provide a fast, standards-based way to build modern user experiences on the Salesforce platform. In this guide, you will learn how to create a responsive, reusable shopping cart component to render items dynamically.

Prerequisites

• A Salesforce Developer Edition or active Sandbox environment.
• Salesforce CLI (sf or legacy sfdx) installed and authenticated to your org.
• Basic familiarity with JavaScript ES6 and LWC template directives.

Step 1: Set Up Your Project & Component

CLI Commands:

# Create a project
sf project generate -n shopping-cart-demo
cd shopping-cart-demo

# Create the LWC bundle
sf lightning generate component -n shoppingCart -d force-app/main/default/lwc --type lwc

Step 2: Build the Shopping Cart Component

Open shoppingCart.html and add the dynamic list rendering template using the for:each directive:

<template>
    <div class="slds-box slds-theme_default">
        <h2 class="slds-text-heading_medium slds-m-bottom_small">Shopping Cart</h2>
        <ul class="slds-list_dotted">
            <!-- Render items dynamically -->
            <template for:each={cartItems} for:item="item">
                <li key={item.id}>{item.name}</li>
            </template>
        </ul>
    </div>
</template>

Key Rule: Every iteration loop in LWC must contain a unique key attribute on the direct child element inside the loop. This enables the Virtual DOM to accurately detect changes and optimize UI re-rendering.

Next, open shoppingCart.js to initialize the cart items inside the lifecycle hook:

import { LightningElement } from 'lwc';

export default class ShoppingCart extends LightningElement {
    cartItems = [];

    connectedCallback() {
        // Load initial cart data
        this.cartItems = [
            { id: '1', name: 'Salesforce Enterprise License' },
            { id: '2', name: 'Platform Integration User' },
            { id: '3', name: 'Premier Support Plan' }
        ];
    }
}

Component Metadata (shoppingCart.js-meta.xml)
Ensure <isExposed>true</isExposed> is set along with targets like lightning__AppPage and lightning__RecordPage so the component is visible inside Lightning App Builder.

Step 3: Deploy and Add to Lightning App Builder

• Deploy your project to your target org: sf project deploy start.
• Navigate to Setup > Lightning App Builder in Salesforce.
• Create a new Lightning page or edit an existing Record/App page.
• Locate shoppingCart under Custom Components in the sidebar, drag it onto your canvas, save, and activate the page.

Step 4: Verify the Results

Open the activated page in your Lightning Experience environment. You should see the cart populated with your items.

Next Steps: Extend this base component by connecting it to Apex for real-time SOQL queries, adding dynamic quantity management, or integrating with Salesforce B2B/B2C Commerce APIs.