OrderSummary container

The OrderSummary container displays a detailed summary of the shopper’s order. It includes the subtotal, taxes, shipping costs, and total amount due. It optionally applies discounts or coupons.

This container supports the Coupon and EstimatedShipping slots.

Configurations

The OrderSummary container provides the following configuration options:

children	VNode[]	No	The child elements to be rendered inside the order summary.
initialData	CartModel \| null	No	The initial data for the order summary. Defaults to null.
routeCheckout	function	No	Function to generate the URL for the checkout page.
slots	Slot	No	Slot props for customizing the estimate shipping and coupons display.
errors	boolean	Yes	Flag to indicate if there are errors in the order summary.
showTotalSaved	boolean	No	Flag to show the total amount saved in the order summary.
enableCoupons	boolean	No	Flag to enable or disable the coupons section.
updateLineItems	function	No	Function to update the line items in the order summary. Defaults to returning the same items.

The CartModel object has the following shape:

export interface CartModel {
  id: string;
  totalQuantity: number;
  errors?: ItemError[];
  items: Item[];
  miniCartMaxItems: Item[];
  total: {
    includingTax: Price;
    excludingTax: Price;
  };
  discount?: Price;
  subtotal: {
    excludingTax: Price;
    includingTax: Price;
    includingDiscountOnly: Price;
  };
  appliedTaxes: TotalPriceModifier[];
  totalTax?: Price;
  appliedDiscounts: TotalPriceModifier[];
  shipping?: Price;
  isVirtual?: boolean;
  addresses: {
    shipping?: {
      countryCode: string;
      zipCode?: string;
      regionCode?: string;
    }[];
  };
  isGuestCart?: boolean;
  hasOutOfStockItems?: boolean;
  hasFullyOutOfStockItems?: boolean;
  appliedCoupons?: Coupon[];
}

interface TotalPriceModifier {
  amount: Price;
  label: string;
  coupon?: Coupon;
}

interface FixedProductTax {
  amount: Price;
  label: string;
}

export interface Item {
  taxedPrice: Price;
  rowTotal: Price;
  rowTotalIncludingTax: Price;
  itemType: string;
  uid: string;
  url: ItemURL;
  quantity: number;
  sku: string;
  name: string;
  image: ItemImage;
  links?: ItemLinks;
  price: Price;
  total: Price;
  discountedTotal?: Price;
  discount?: Price;
  regularPrice: Price;
  discounted: boolean;
  bundleOptions?: { [key: string]: any };
  selectedOptions?: { [key: string]: any };
  customizableOptions?: { [key: string]: any };
  message?: string;
  recipient?: string;
  recipientEmail?: string;
  sender?: string;
  senderEmail?: string;
  lowInventory?: boolean;
  insufficientQuantity?: boolean;
  onlyXLeftInStock?: number | null;
  outOfStock?: boolean;
  notAvailableMessage?: string;
  stockLevel?: String;
  discountPercentage?: number;
  savingsAmount?: Price;
  productAttributes?: Attribute[];
  fixedProductTaxes?: FixedProductTax[];
}

interface ItemError {
  id: string;
  text: string;
}

interface ItemImage {
  src: string;
  alt: string;
}

export interface Price {
  value: number;
  currency: string;
}

interface ItemURL {
  urlKey: string;
  categories: string[];
}

interface ItemLinks {
  count: number;
  result: string;
}

interface AttributeOption {
  value: string;
  label: string;
}

interface Attribute {
  code: string;
  value?: string;
  selected_options?: AttributeOption[];
}

interface Coupon {
  code: string;
}

Supported slots

The OrderSummary container supports the Coupons and EstimateShipping slots.

Example configuration

The following example demonstrates how to render the OrderSummary container with the EstimateShipping and Coupons slots:

provider.render(OrderSummary, {
  routeCheckout: () => '#checkout',
  errors: ctx.hasErrors,
  slots: {
    EstimateShipping: (ctx) => {
      const estimateShippingForm = document.createElement('div');
      provider.render(EstimateShipping, {
        showDefaultEstimatedShippingCost: true
      })(estimateShippingForm);
      ctx.appendChild(estimateShippingForm);
    },
    Coupons: (ctx) => {
      const coupons = document.createElement('div');
      provider.render(Coupons)(coupons);
      ctx.appendChild(coupons);
    },
  },
  showTotalSaved: true
})(orderSummary);