Choose a version:

CartLineItemApi

Requires access to protected customer data for some properties.

This API object is provided to extensions registered for the purchase.cart-line-item.line-components.render, purchase.checkout.cart-line-item.render-after, purchase.thank-you.cart-line-item.render-after, and customer-account.order-status.cart-line-item.render-after extension targets.

It extends the StandardApi and provides the target cart line item associated with the extension.

Anchor to propertiesProperties

See the StandardApi examples for more information on how to use the API.

Anchor to target target StatefulRemoteSubscribable<> required: The cart line the extension is attached to. Until version 2023-04, this property was a StatefulRemoteSubscribable<PresentmentCartLine>.

CartLineItemApi

target
The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable<PresentmentCartLine>`.
```
StatefulRemoteSubscribable<CartLine>
```

export interface CartLineItemApi {
  /**
   * The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable<PresentmentCartLine>`.
   */
  target: StatefulRemoteSubscribable<CartLine>;
}

CartLine

id
These line item IDs are not stable at the moment, they might change after any operations on the line items. You should always look up for an updated ID before any call to `applyCartLinesChange` because you'll need the ID to create a `CartLineChange` object.
```
string
```
merchandise
The merchandise being purchased.
```
Merchandise
```
quantity
The quantity of the merchandise being purchased.
```
number
```
cost
The details about the cost components attributed to the cart line.
```
CartLineCost
```
attributes
The line item additional custom attributes.
```
Attribute[]
```
discountAllocations
Discounts applied to the cart line.
```
CartDiscountAllocation[]
```
lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
```
CartBundleLineComponent[]
```

export interface CartLine {
  /**
   * These line item IDs are not stable at the moment, they might change after
   * any operations on the line items. You should always look up for an updated
   * ID before any call to `applyCartLinesChange` because you'll need the ID to
   * create a `CartLineChange` object.
   * @example 'gid://shopify/CartLine/123'
   */
  id: string;

  /**
   * The merchandise being purchased.
   */
  merchandise: Merchandise;

  /**
   * The quantity of the merchandise being purchased.
   */
  quantity: number;

  /**
   * The details about the cost components attributed to the cart line.
   */
  cost: CartLineCost;

  /**
   * The line item additional custom attributes.
   */
  attributes: Attribute[];

  /**
   * Discounts applied to the cart line.
   */
  discountAllocations: CartDiscountAllocation[];

  /**
   * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
   */
  lineComponents: CartLineComponentType[];
}

Merchandise

type
```
"variant"
```
id
A globally-unique identifier.
```
string
```
title
The product variant’s title.
```
string
```
subtitle
The product variant's subtitle.
```
string
```
image
Image associated with the product variant. This field falls back to the product image if no image is available.
```
ImageDetails
```
selectedOptions
List of product options applied to the variant.
```
SelectedOption[]
```
product
The product object that the product variant belongs to.
```
Product
```
requiresShipping
Whether or not the product requires shipping.
```
boolean
```
sellingPlan
The selling plan associated with the merchandise.
```
SellingPlan
```

ProductVariant

ImageDetails

url
The image URL.
```
string
```
altText
The alternative text for the image.
```
string
```

export interface ImageDetails {
  /**
   * The image URL.
   */
  url: string;

  /**
   * The alternative text for the image.
   */
  altText?: string;
}

SelectedOption

name
The name of the merchandise option.
```
string
```
value
The value of the merchandise option.
```
string
```

export interface SelectedOption {
  /**
   * The name of the merchandise option.
   */
  name: string;

  /**
   * The value of the merchandise option.
   */
  value: string;
}

Product

id
A globally-unique identifier.
```
string
```
vendor
The product’s vendor name.
```
string
```
productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
```
string
```

export interface Product {
  /**
   * A globally-unique identifier.
   */
  id: string;

  /**
   * The product’s vendor name.
   */
  vendor: string;

  /**
   * A categorization that a product can be tagged with, commonly used for filtering and searching.
   */
  productType: string;
}

SellingPlan

id
A globally-unique identifier.
```
string
```

export interface SellingPlan {
  /**
   * A globally-unique identifier.
   * @example 'gid://shopify/SellingPlan/1'
   */
  id: string;
}

CartLineCost

totalAmount
The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line.
```
Money
```

export interface CartLineCost {
  /**
   * The total amount after reductions the buyer can expect to pay that is directly attributable to a single
   * cart line.
   */
  totalAmount: Money;
}

Money

amount
The price amount.
```
number
```
currencyCode
The ISO 4217 format for the currency.
```
CurrencyCode
```

export interface Money {
  /**
   * The price amount.
   */
  amount: number;
  /**
   * The ISO 4217 format for the currency.
   * @example 'CAD' for Canadian dollar
   */
  currencyCode: CurrencyCode;
}

CurrencyCode

'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'

Attribute

key
The key for the attribute.
```
string
```
value
The value for the attribute.
```
string
```

export interface Attribute {
  /**
   * The key for the attribute.
   */
  key: string;

  /**
   * The value for the attribute.
   */
  value: string;
}

CartDiscountAllocation

CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation

CartCodeDiscountAllocation

code
The code for the discount
```
string
```
type
The type of the code discount
```
"code"
```
discountedAmount
The money amount that has been discounted from the order
```
Money
```

export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
  /**
   * The code for the discount
   */
  code: string;

  /**
   * The type of the code discount
   */
  type: 'code';
}

CartAutomaticDiscountAllocation

title
The title of the automatic discount
```
string
```
type
The type of the automatic discount
```
"automatic"
```
discountedAmount
The money amount that has been discounted from the order
```
Money
```

export interface CartAutomaticDiscountAllocation
  extends CartDiscountAllocationBase {
  /**
   * The title of the automatic discount
   */
  title: string;

  /**
   * The type of the automatic discount
   */
  type: 'automatic';
}

CartCustomDiscountAllocation

title
The title of the custom discount
```
string
```
type
The type of the custom discount
```
"custom"
```
discountedAmount
The money amount that has been discounted from the order
```
Money
```

export interface CartCustomDiscountAllocation
  extends CartDiscountAllocationBase {
  /**
   * The title of the custom discount
   */
  title: string;

  /**
   * The type of the custom discount
   */
  type: 'custom';
}

CartBundleLineComponent

type
```
"bundle"
```
id
A unique identifier for the bundle line component. This ID is not stable. If an operation updates the line items in any way, all IDs could change.
```
string
```
merchandise
The merchandise of this bundle line component.
```
Merchandise
```
quantity
The quantity of merchandise being purchased.
```
number
```
cost
The cost attributed to this bundle line component.
```
CartLineCost
```
attributes
Additional custom attributes for the bundle line component.
```
Attribute[]
```

export interface CartBundleLineComponent {
  type: 'bundle';

  /**
   * A unique identifier for the bundle line component.
   *
   * This ID is not stable. If an operation updates the line items in any way, all IDs could change.
   *
   * @example 'gid://shopify/CartLineComponent/123'
   */
  id: string;

  /**
   * The merchandise of this bundle line component.
   */
  merchandise: Merchandise;

  /**
   * The quantity of merchandise being purchased.
   */
  quantity: number;

  /**
   * The cost attributed to this bundle line component.
   */
  cost: CartLineCost;

  /**
   * Additional custom attributes for the bundle line component.
   *
   * @example [{key: 'engraving', value: 'hello world'}]
   */
  attributes: Attribute[];
}

Was this section helpful?

import {

reactExtension,

Text,

useTarget,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.cart-line-item.render-after',

() => <Extension />,

);

function Extension() {

const {

merchandise: {title},

} = useTarget();

return <Text>Line item title: {title}</Text>;

}

examples

React

import {
  reactExtension,
  Text,
  useTarget,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.cart-line-item.render-after',
  () => <Extension />,
);

function Extension() {
  const {
    merchandise: {title},
  } = useTarget();
  return <Text>Line item title: {title}</Text>;
}

JavaScript

import {extension} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.cart-line-item.render-after',
  (root, {target}) => {
    const text = root.createText(
      `Line item title: ${target.current.title}`,
    );
    root.appendChild(text);

    target.subscribe((updatedTarget) => {
      text.updateText(
        `Line item title: ${updatedTarget.title}`,
      );
    });
  },
);

Anchor to relatedRelated

APIsStandardApi

APIsCheckoutApi

APIsOrderStatusApi

APIsPickupPointListApi

APIsPickupLocationListApi

APIsShippingOptionItemApi

APIsExtensionTargets