shopping-cart-lwc

welisacommerce/shoppingCartLwc renders the buyer-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

• productInformation – title cell. value is the product title; type attributes include code, isGrouped, products, addons, subtitle, webProductId, hasAddons, 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>

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.