shopping-cart-lwc

welisacommerce-shopping-cart-lwc renders the shopper-facing cart table, summary, and action buttons. Use it when you need a complete cart UI with optional editing, draft saving, and checkout navigation.

Public properties

Basic usage

Parent JavaScript

import { LightningElement } from 'lwc';

export default class CartContainer extends LightningElement {
    shoppingCartId = 'a01xx0000000001AAA';
    showCartActions = true;
    isEditable = true;
}

Parent HTML

<template>
    <welisacommerce-shopping-cart-lwc
        shopping-cart-id="{shoppingCartId}"
        show-cart-actions="{showCartActions}"
        is-editable="{isEditable}"
    ></welisacommerce-shopping-cart-lwc>
</template>

Column Overrides

Use the columnOverrides public property on welisacommerce-shopping-cart-lwc to replace default table cells with custom templates and to request extra Shopping_Cart_Item__c fields for rendering. Each override entry can supply a template and a list of additional field API names that must be queried.

Supported columns

columnOverrides is an object keyed by the default column names exposed by shoppingCartDataTable:

• productInformation – title cell. value is the product title; type attributes include code, isGrouped, products, addons, subtitle, webProductId, hasAddons, cartItemDetail, addonLabel, currencyIsoCode, and (when provided) additionalFields.
• productImage – image thumbnail. value is the image URL; type attributes include productId and additionalFields.
• price – unit price block. value is the pricing object; type attributes include currencyIsoCode, discountLabel, showPercentage, showDiscount, and additionalFields.
• subtotal – line subtotal. value is the subtotal object; type attributes mirror price and include additionalFields.
• action – action menu. value is the row id; type attributes include recordId, title, webProductId, pricebookId, isEditable, and additionalFields.

Quantity is not overrideable; it remains controlled by the component to preserve edit behavior.

Additional fields contract

• Set additionalFields to an array of Shopping_Cart_Item__c API names required by your custom template (for example ['Custom_Field__c', 'Another_Field__c']).
• Retrieved values are exposed to the template through typeAttributes.additionalFields.<FieldApiName> and mirror the display value if present, otherwise the raw value.

Implementation steps

1. Create a template for the target column (use the available value and typeAttributes listed above).
2. Import the template into the parent LWC that hosts welisacommerce-shopping-cart-lwc.
3. Define the columnOverrides object with one entry per column you want to replace, including both template and any additionalFields your template needs.
4. Pass columnOverrides into welisacommerce/shoppingCartLwc in the parent markup.

Example: custom product information and price cells

Parent JavaScript

import { LightningElement } from 'lwc';
import customProductInfo from './customProductInfo.html';
import customPrice from './customPrice.html';

export default class CartPage extends LightningElement {
    columnOverrides = {
        productInformation: {
            template: customProductInfo,
            additionalFields: ['Custom_Field__c']
        },
        price: {
            template: customPrice,
            additionalFields: []
        }
    };
}

Parent HTML

<template>
    <welisacommerce-shopping-cart-lwc
        shopping-cart-id="{recordId}"
        show-cart-actions
        is-editable
        column-overrides="{columnOverrides}"
    ></welisacommerce-shopping-cart-lwc>
</template>

Custom product info template (customProductInfo.html)

<template>
    <div class="custom-product">
        <div class="title">{value}</div>
        <div class="code">{typeAttributes.code}</div>
        <template lwc:if="{typeAttributes.additionalFields.Custom_Field__c}">
            <div class="meta">{typeAttributes.additionalFields.Custom_Field__c}</div>
        </template>
    </div>
</template>

Custom price template (customPrice.html)

<template>
    <div class="custom-price">
        <span class="amount">{value.priceAfterDiscount}</span>
        <template lwc:if="{typeAttributes.showDiscount}">
            <span class="discount">{value.discountPercentage}% off</span>
        </template>
    </div>
</template>

Example: override the product details column (productInformation)

Use the product title as value and pull extra attributes from typeAttributes, including code, subtitle, products, addons, and any additionalFields you request.

Parent JavaScript

import { LightningElement } from 'lwc';
import customProductDetails from './customProductDetails.html';

export default class CartPage extends LightningElement {
    columnOverrides = {
        productInformation: {
            template: customProductDetails,
            additionalFields: ['Custom_Tag__c']
        }
    };
}

Custom product details template (customProductDetails.html)

<template>
    <div class="custom-product-details">
        <div class="title">{value}</div>
        <template lwc:if="{typeAttributes.subtitle}">
            <div class="subtitle">{typeAttributes.subtitle}</div>
        </template>
        <template lwc:if="{typeAttributes.code}">
            <div class="code">SKU {typeAttributes.code}</div>
        </template>
        <template lwc:if="{typeAttributes.additionalFields.Custom_Tag__c}">
            <div class="tag">{typeAttributes.additionalFields.Custom_Tag__c}</div>
        </template>
    </div>
</template>

Standard row presentation behavior

The shopping cart component renders more than the product title for each line.

Standard row presentation can also include:

• subtitle, which is exposed as part of the standard cart item data used by the cart row presentation
• cartItemDetail, when provider-generated detail content is present for the item
• grouped child-product summaries and addon content when the cart item represents grouped or extended product structures

Document these as part of the supported row presentation contract rather than as one-off implementation details. For renderer-level field mapping, see Shopping Cart Datatable → ShoppingCartItemDto Mapping.

Summary-only rows

The shopping cart experience distinguishes between normal line items and summary-only items.

• normal line items are rendered in the main cart item table
• summary-only items are rendered in the cart summary area instead of the editable line-item list
• summary-only items still participate in cart totals and summary calculations

This is the supported storefront behavior for rows such as fee-style summary lines that should remain visible to the buyer without appearing as normal editable product rows.

Tips

• Keep templates lightweight; they are rendered inside the shopping cart item table.
• If you need namespaced field API names, include the namespace in additionalFields.
• When adding new fields, confirm CRUD/FLS permissions and surface only data required for rendering.