--- title: Cart Lines description: The API for interacting with the cart lines. api_version: 2023-10 api_name: checkout-ui-extensions source_url: html: https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/cart-lines md: https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/cart-lines.md --- # Cart LinesAPI The API for interacting with the cart lines. ## StandardApi The base API object provided to `purchase`, and `customer-account.order-status` extension targets. * lines StatefulRemoteSubscribable\ required A list of lines containing information about the items the customer intends to purchase. ### 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. ```ts string ``` * merchandise The merchandise being purchased. ```ts Merchandise ``` * quantity The quantity of the merchandise being purchased. ```ts number ``` * cost The details about the cost components attributed to the cart line. ```ts CartLineCost ``` * attributes The line item additional custom attributes. ```ts Attribute[] ``` * discountAllocations Discounts applied to the cart line. ```ts CartDiscountAllocation[] ``` * lineComponents Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ```ts CartBundleLineComponent[] ``` ```ts 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 ```ts "variant" ``` * id A globally-unique identifier. ```ts string ``` * title The product variant’s title. ```ts string ``` * subtitle The product variant's subtitle. ```ts string ``` * image Image associated with the product variant. This field falls back to the product image if no image is available. ```ts ImageDetails ``` * selectedOptions List of product options applied to the variant. ```ts SelectedOption[] ``` * product The product object that the product variant belongs to. ```ts Product ``` * requiresShipping Whether or not the product requires shipping. ```ts boolean ``` * sellingPlan The selling plan associated with the merchandise. ```ts SellingPlan ``` ```ts ProductVariant ``` ### ImageDetails * url The image URL. ```ts string ``` * altText The alternative text for the image. ```ts string ``` ```ts export interface ImageDetails { /** * The image URL. */ url: string; /** * The alternative text for the image. */ altText?: string; } ``` ### SelectedOption * name The name of the merchandise option. ```ts string ``` * value The value of the merchandise option. ```ts string ``` ```ts 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. ```ts string ``` * vendor The product’s vendor name. ```ts string ``` * productType A categorization that a product can be tagged with, commonly used for filtering and searching. ```ts string ``` ```ts 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. ```ts string ``` ```ts 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. ```ts Money ``` ```ts 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. ```ts number ``` * currencyCode The ISO 4217 format for the currency. ```ts CurrencyCode ``` ```ts export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } ``` ### CurrencyCode ```ts '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. ```ts string ``` * value The value for the attribute. ```ts string ``` ```ts export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } ``` ### CartDiscountAllocation ```ts CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation ``` ### CartCodeDiscountAllocation * code The code for the discount ```ts string ``` * type The type of the code discount ```ts "code" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the automatic discount ```ts "automatic" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the custom discount ```ts "custom" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts export interface CartCustomDiscountAllocation extends CartDiscountAllocationBase { /** * The title of the custom discount */ title: string; /** * The type of the custom discount */ type: 'custom'; } ``` ### CartBundleLineComponent * type ```ts "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. ```ts string ``` * merchandise The merchandise of this bundle line component. ```ts Merchandise ``` * quantity The quantity of merchandise being purchased. ```ts number ``` * cost The cost attributed to this bundle line component. ```ts CartLineCost ``` * attributes Additional custom attributes for the bundle line component. ```ts Attribute[] ``` ```ts 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[]; } ``` ## use​Cart​Lines() Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated. ### Returns * 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. ```ts string ``` * merchandise The merchandise being purchased. ```ts Merchandise ``` * quantity The quantity of the merchandise being purchased. ```ts number ``` * cost The details about the cost components attributed to the cart line. ```ts CartLineCost ``` * attributes The line item additional custom attributes. ```ts Attribute[] ``` * discountAllocations Discounts applied to the cart line. ```ts CartDiscountAllocation[] ``` * lineComponents Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ```ts CartBundleLineComponent[] ``` ```ts 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 ```ts "variant" ``` * id A globally-unique identifier. ```ts string ``` * title The product variant’s title. ```ts string ``` * subtitle The product variant's subtitle. ```ts string ``` * image Image associated with the product variant. This field falls back to the product image if no image is available. ```ts ImageDetails ``` * selectedOptions List of product options applied to the variant. ```ts SelectedOption[] ``` * product The product object that the product variant belongs to. ```ts Product ``` * requiresShipping Whether or not the product requires shipping. ```ts boolean ``` * sellingPlan The selling plan associated with the merchandise. ```ts SellingPlan ``` ```ts ProductVariant ``` ### ImageDetails * url The image URL. ```ts string ``` * altText The alternative text for the image. ```ts string ``` ```ts export interface ImageDetails { /** * The image URL. */ url: string; /** * The alternative text for the image. */ altText?: string; } ``` ### SelectedOption * name The name of the merchandise option. ```ts string ``` * value The value of the merchandise option. ```ts string ``` ```ts 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. ```ts string ``` * vendor The product’s vendor name. ```ts string ``` * productType A categorization that a product can be tagged with, commonly used for filtering and searching. ```ts string ``` ```ts 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. ```ts string ``` ```ts 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. ```ts Money ``` ```ts 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. ```ts number ``` * currencyCode The ISO 4217 format for the currency. ```ts CurrencyCode ``` ```ts export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } ``` ### CurrencyCode ```ts '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. ```ts string ``` * value The value for the attribute. ```ts string ``` ```ts export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } ``` ### CartDiscountAllocation ```ts CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation ``` ### CartCodeDiscountAllocation * code The code for the discount ```ts string ``` * type The type of the code discount ```ts "code" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the automatic discount ```ts "automatic" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the custom discount ```ts "custom" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts export interface CartCustomDiscountAllocation extends CartDiscountAllocationBase { /** * The title of the custom discount */ title: string; /** * The type of the custom discount */ type: 'custom'; } ``` ### CartBundleLineComponent * type ```ts "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. ```ts string ``` * merchandise The merchandise of this bundle line component. ```ts Merchandise ``` * quantity The quantity of merchandise being purchased. ```ts number ``` * cost The cost attributed to this bundle line component. ```ts CartLineCost ``` * attributes Additional custom attributes for the bundle line component. ```ts Attribute[] ``` ```ts 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[]; } ``` ## CheckoutApi The API object provided to `purchase.checkout` extension targets. * applyCartLinesChange (change: CartLineChange) => Promise\ required Performs an update on the merchandise line items. It resolves when the new line items have been negotiated and results in an update to the value retrieved through the [`lines`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-lines#standardapi-propertydetail-lines) property. Note This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay. ### CartLineChange ```ts CartLineAddChange | CartLineRemoveChange | CartLineUpdateChange ``` ### CartLineAddChange * type An identifier for changes that add line items. ```ts "addCartLine" ``` * merchandiseId The merchandise ID being added. ```ts string ``` * quantity The quantity of the merchandise being added. ```ts number ``` * attributes The attributes associated with the line item. ```ts Attribute[] ``` * sellingPlanId The identifier of the selling plan that the merchandise is being purchased with. ```ts string ``` ```ts export interface CartLineAddChange { /** * An identifier for changes that add line items. */ type: 'addCartLine'; /** * The merchandise ID being added. * @example 'gid://shopify/ProductVariant/123' */ merchandiseId: string; /** * The quantity of the merchandise being added. */ quantity: number; /** * The attributes associated with the line item. */ attributes?: Attribute[]; /** * The identifier of the selling plan that the merchandise is being purchased * with. */ sellingPlanId?: SellingPlan['id']; } ``` ### Attribute * key The key for the attribute. ```ts string ``` * value The value for the attribute. ```ts string ``` ```ts export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } ``` ### CartLineRemoveChange * type An identifier for changes that remove line items. ```ts "removeCartLine" ``` * id Line Item ID. ```ts string ``` * quantity The quantity being removed for this line item. ```ts number ``` ```ts export interface CartLineRemoveChange { /** * An identifier for changes that remove line items. */ type: 'removeCartLine'; /** * Line Item ID. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The quantity being removed for this line item. */ quantity: number; } ``` ### CartLineUpdateChange * type An identifier for changes that update line items. ```ts "updateCartLine" ``` * id Line Item ID. ```ts string ``` * merchandiseId The new merchandise ID for the line item. ```ts string ``` * quantity The new quantity for the line item. ```ts number ``` * attributes The new attributes for the line item. ```ts Attribute[] ``` * sellingPlanId The identifier of the selling plan that the merchandise is being purchased with or \`null\` to remove the the product from the selling plan. ```ts string ``` ```ts export interface CartLineUpdateChange { /** * An identifier for changes that update line items. */ type: 'updateCartLine'; /** * Line Item ID. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The new merchandise ID for the line item. * @example 'gid://shopify/ProductVariant/123' */ merchandiseId?: string; /** * The new quantity for the line item. */ quantity?: number; /** * The new attributes for the line item. */ attributes?: Attribute[]; /** * The identifier of the selling plan that the merchandise is being purchased * with or `null` to remove the the product from the selling plan. */ sellingPlanId?: SellingPlan['id'] | null; } ``` ### CartLineChangeResult ```ts CartLineChangeResultSuccess | CartLineChangeResultError ``` ### CartLineChangeResultSuccess * type Indicates that the line item was changed successfully. ```ts "success" ``` ```ts export interface CartLineChangeResultSuccess { /** * Indicates that the line item was changed successfully. */ type: 'success'; } ``` ### CartLineChangeResultError * type Indicates that the line item was not changed successfully. Refer to the \`message\` property for details about the error. ```ts "error" ``` * message A message that explains the error. This message is useful for debugging. It is \*\*not\*\* localized, and therefore should not be presented directly to the buyer. ```ts string ``` ```ts export interface CartLineChangeResultError { /** * Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error. */ type: 'error'; /** * A message that explains the error. This message is useful for debugging. * It is **not** localized, and therefore should not be presented directly * to the buyer. */ message: string; } ``` ## use​Apply​Cart​Lines​Change() Returns a function to mutate the `lines` property of checkout. ### Returns * (change: CartLineChange) => Promise\ ### CartLineChange ```ts CartLineAddChange | CartLineRemoveChange | CartLineUpdateChange ``` ### CartLineAddChange * type An identifier for changes that add line items. ```ts "addCartLine" ``` * merchandiseId The merchandise ID being added. ```ts string ``` * quantity The quantity of the merchandise being added. ```ts number ``` * attributes The attributes associated with the line item. ```ts Attribute[] ``` * sellingPlanId The identifier of the selling plan that the merchandise is being purchased with. ```ts string ``` ```ts export interface CartLineAddChange { /** * An identifier for changes that add line items. */ type: 'addCartLine'; /** * The merchandise ID being added. * @example 'gid://shopify/ProductVariant/123' */ merchandiseId: string; /** * The quantity of the merchandise being added. */ quantity: number; /** * The attributes associated with the line item. */ attributes?: Attribute[]; /** * The identifier of the selling plan that the merchandise is being purchased * with. */ sellingPlanId?: SellingPlan['id']; } ``` ### Attribute * key The key for the attribute. ```ts string ``` * value The value for the attribute. ```ts string ``` ```ts export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } ``` ### CartLineRemoveChange * type An identifier for changes that remove line items. ```ts "removeCartLine" ``` * id Line Item ID. ```ts string ``` * quantity The quantity being removed for this line item. ```ts number ``` ```ts export interface CartLineRemoveChange { /** * An identifier for changes that remove line items. */ type: 'removeCartLine'; /** * Line Item ID. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The quantity being removed for this line item. */ quantity: number; } ``` ### CartLineUpdateChange * type An identifier for changes that update line items. ```ts "updateCartLine" ``` * id Line Item ID. ```ts string ``` * merchandiseId The new merchandise ID for the line item. ```ts string ``` * quantity The new quantity for the line item. ```ts number ``` * attributes The new attributes for the line item. ```ts Attribute[] ``` * sellingPlanId The identifier of the selling plan that the merchandise is being purchased with or \`null\` to remove the the product from the selling plan. ```ts string ``` ```ts export interface CartLineUpdateChange { /** * An identifier for changes that update line items. */ type: 'updateCartLine'; /** * Line Item ID. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The new merchandise ID for the line item. * @example 'gid://shopify/ProductVariant/123' */ merchandiseId?: string; /** * The new quantity for the line item. */ quantity?: number; /** * The new attributes for the line item. */ attributes?: Attribute[]; /** * The identifier of the selling plan that the merchandise is being purchased * with or `null` to remove the the product from the selling plan. */ sellingPlanId?: SellingPlan['id'] | null; } ``` ### CartLineChangeResult ```ts CartLineChangeResultSuccess | CartLineChangeResultError ``` ### CartLineChangeResultSuccess * type Indicates that the line item was changed successfully. ```ts "success" ``` ```ts export interface CartLineChangeResultSuccess { /** * Indicates that the line item was changed successfully. */ type: 'success'; } ``` ### CartLineChangeResultError * type Indicates that the line item was not changed successfully. Refer to the \`message\` property for details about the error. ```ts "error" ``` * message A message that explains the error. This message is useful for debugging. It is \*\*not\*\* localized, and therefore should not be presented directly to the buyer. ```ts string ``` ```ts export interface CartLineChangeResultError { /** * Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error. */ type: 'error'; /** * A message that explains the error. This message is useful for debugging. * It is **not** localized, and therefore should not be presented directly * to the buyer. */ message: string; } ``` ## CartLineItemApi The API object provided to `cart-line-item` extension targets. * target StatefulRemoteSubscribable\ required The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable`. ### 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. ```ts string ``` * merchandise The merchandise being purchased. ```ts Merchandise ``` * quantity The quantity of the merchandise being purchased. ```ts number ``` * cost The details about the cost components attributed to the cart line. ```ts CartLineCost ``` * attributes The line item additional custom attributes. ```ts Attribute[] ``` * discountAllocations Discounts applied to the cart line. ```ts CartDiscountAllocation[] ``` * lineComponents Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ```ts CartBundleLineComponent[] ``` ```ts 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 ```ts "variant" ``` * id A globally-unique identifier. ```ts string ``` * title The product variant’s title. ```ts string ``` * subtitle The product variant's subtitle. ```ts string ``` * image Image associated with the product variant. This field falls back to the product image if no image is available. ```ts ImageDetails ``` * selectedOptions List of product options applied to the variant. ```ts SelectedOption[] ``` * product The product object that the product variant belongs to. ```ts Product ``` * requiresShipping Whether or not the product requires shipping. ```ts boolean ``` * sellingPlan The selling plan associated with the merchandise. ```ts SellingPlan ``` ```ts ProductVariant ``` ### ImageDetails * url The image URL. ```ts string ``` * altText The alternative text for the image. ```ts string ``` ```ts export interface ImageDetails { /** * The image URL. */ url: string; /** * The alternative text for the image. */ altText?: string; } ``` ### SelectedOption * name The name of the merchandise option. ```ts string ``` * value The value of the merchandise option. ```ts string ``` ```ts 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. ```ts string ``` * vendor The product’s vendor name. ```ts string ``` * productType A categorization that a product can be tagged with, commonly used for filtering and searching. ```ts string ``` ```ts 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. ```ts string ``` ```ts 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. ```ts Money ``` ```ts 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. ```ts number ``` * currencyCode The ISO 4217 format for the currency. ```ts CurrencyCode ``` ```ts export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } ``` ### CurrencyCode ```ts '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. ```ts string ``` * value The value for the attribute. ```ts string ``` ```ts export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } ``` ### CartDiscountAllocation ```ts CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation ``` ### CartCodeDiscountAllocation * code The code for the discount ```ts string ``` * type The type of the code discount ```ts "code" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the automatic discount ```ts "automatic" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the custom discount ```ts "custom" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts export interface CartCustomDiscountAllocation extends CartDiscountAllocationBase { /** * The title of the custom discount */ title: string; /** * The type of the custom discount */ type: 'custom'; } ``` ### CartBundleLineComponent * type ```ts "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. ```ts string ``` * merchandise The merchandise of this bundle line component. ```ts Merchandise ``` * quantity The quantity of merchandise being purchased. ```ts number ``` * cost The cost attributed to this bundle line component. ```ts CartLineCost ``` * attributes Additional custom attributes for the bundle line component. ```ts Attribute[] ``` ```ts 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[]; } ``` ## use​Target() Returns the cart line the extension is attached to. This hook can only be used by `cart-line-item` extension targets. Until version `2023-04`, this hook returned a `PresentmentCartLine object`. ### Returns * CartLine ### CartLine * id string 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. * merchandise Merchandise The merchandise being purchased. * quantity number The quantity of the merchandise being purchased. * cost CartLineCost The details about the cost components attributed to the cart line. * attributes Attribute\[] The line item additional custom attributes. * discountAllocations CartDiscountAllocation\[] Discounts applied to the cart line. * lineComponents CartBundleLineComponent\[] Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### 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. ```ts string ``` * merchandise The merchandise being purchased. ```ts Merchandise ``` * quantity The quantity of the merchandise being purchased. ```ts number ``` * cost The details about the cost components attributed to the cart line. ```ts CartLineCost ``` * attributes The line item additional custom attributes. ```ts Attribute[] ``` * discountAllocations Discounts applied to the cart line. ```ts CartDiscountAllocation[] ``` * lineComponents Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ```ts CartBundleLineComponent[] ``` ```ts 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 ```ts "variant" ``` * id A globally-unique identifier. ```ts string ``` * title The product variant’s title. ```ts string ``` * subtitle The product variant's subtitle. ```ts string ``` * image Image associated with the product variant. This field falls back to the product image if no image is available. ```ts ImageDetails ``` * selectedOptions List of product options applied to the variant. ```ts SelectedOption[] ``` * product The product object that the product variant belongs to. ```ts Product ``` * requiresShipping Whether or not the product requires shipping. ```ts boolean ``` * sellingPlan The selling plan associated with the merchandise. ```ts SellingPlan ``` ```ts ProductVariant ``` ### ImageDetails * url The image URL. ```ts string ``` * altText The alternative text for the image. ```ts string ``` ```ts export interface ImageDetails { /** * The image URL. */ url: string; /** * The alternative text for the image. */ altText?: string; } ``` ### SelectedOption * name The name of the merchandise option. ```ts string ``` * value The value of the merchandise option. ```ts string ``` ```ts 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. ```ts string ``` * vendor The product’s vendor name. ```ts string ``` * productType A categorization that a product can be tagged with, commonly used for filtering and searching. ```ts string ``` ```ts 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. ```ts string ``` ```ts 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. ```ts Money ``` ```ts 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. ```ts number ``` * currencyCode The ISO 4217 format for the currency. ```ts CurrencyCode ``` ```ts export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } ``` ### CurrencyCode ```ts '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. ```ts string ``` * value The value for the attribute. ```ts string ``` ```ts export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } ``` ### CartDiscountAllocation ```ts CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation ``` ### CartCodeDiscountAllocation * code The code for the discount ```ts string ``` * type The type of the code discount ```ts "code" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the automatic discount ```ts "automatic" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the custom discount ```ts "custom" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts export interface CartCustomDiscountAllocation extends CartDiscountAllocationBase { /** * The title of the custom discount */ title: string; /** * The type of the custom discount */ type: 'custom'; } ``` ### CartBundleLineComponent * type ```ts "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. ```ts string ``` * merchandise The merchandise of this bundle line component. ```ts Merchandise ``` * quantity The quantity of merchandise being purchased. ```ts number ``` * cost The cost attributed to this bundle line component. ```ts CartLineCost ``` * attributes Additional custom attributes for the bundle line component. ```ts Attribute[] ``` ```ts 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[]; } ``` ## use​Cart​Line​Target() Returns the cart line the extension is attached to. This hook can only be used by `cart-line-item` extension targets ### Returns * CartLine ### CartLine * id string 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. * merchandise Merchandise The merchandise being purchased. * quantity number The quantity of the merchandise being purchased. * cost CartLineCost The details about the cost components attributed to the cart line. * attributes Attribute\[] The line item additional custom attributes. * discountAllocations CartDiscountAllocation\[] Discounts applied to the cart line. * lineComponents CartBundleLineComponent\[] Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### 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. ```ts string ``` * merchandise The merchandise being purchased. ```ts Merchandise ``` * quantity The quantity of the merchandise being purchased. ```ts number ``` * cost The details about the cost components attributed to the cart line. ```ts CartLineCost ``` * attributes The line item additional custom attributes. ```ts Attribute[] ``` * discountAllocations Discounts applied to the cart line. ```ts CartDiscountAllocation[] ``` * lineComponents Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ```ts CartBundleLineComponent[] ``` ```ts 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 ```ts "variant" ``` * id A globally-unique identifier. ```ts string ``` * title The product variant’s title. ```ts string ``` * subtitle The product variant's subtitle. ```ts string ``` * image Image associated with the product variant. This field falls back to the product image if no image is available. ```ts ImageDetails ``` * selectedOptions List of product options applied to the variant. ```ts SelectedOption[] ``` * product The product object that the product variant belongs to. ```ts Product ``` * requiresShipping Whether or not the product requires shipping. ```ts boolean ``` * sellingPlan The selling plan associated with the merchandise. ```ts SellingPlan ``` ```ts ProductVariant ``` ### ImageDetails * url The image URL. ```ts string ``` * altText The alternative text for the image. ```ts string ``` ```ts export interface ImageDetails { /** * The image URL. */ url: string; /** * The alternative text for the image. */ altText?: string; } ``` ### SelectedOption * name The name of the merchandise option. ```ts string ``` * value The value of the merchandise option. ```ts string ``` ```ts 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. ```ts string ``` * vendor The product’s vendor name. ```ts string ``` * productType A categorization that a product can be tagged with, commonly used for filtering and searching. ```ts string ``` ```ts 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. ```ts string ``` ```ts 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. ```ts Money ``` ```ts 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. ```ts number ``` * currencyCode The ISO 4217 format for the currency. ```ts CurrencyCode ``` ```ts export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } ``` ### CurrencyCode ```ts '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. ```ts string ``` * value The value for the attribute. ```ts string ``` ```ts export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } ``` ### CartDiscountAllocation ```ts CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation ``` ### CartCodeDiscountAllocation * code The code for the discount ```ts string ``` * type The type of the code discount ```ts "code" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the automatic discount ```ts "automatic" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts 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 ```ts string ``` * type The type of the custom discount ```ts "custom" ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` ```ts export interface CartCustomDiscountAllocation extends CartDiscountAllocationBase { /** * The title of the custom discount */ title: string; /** * The type of the custom discount */ type: 'custom'; } ``` ### CartBundleLineComponent * type ```ts "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. ```ts string ``` * merchandise The merchandise of this bundle line component. ```ts Merchandise ``` * quantity The quantity of merchandise being purchased. ```ts number ``` * cost The cost attributed to this bundle line component. ```ts CartLineCost ``` * attributes Additional custom attributes for the bundle line component. ```ts Attribute[] ``` ```ts 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[]; } ``` ### Examples * #### ##### React ```jsx import { reactExtension, Text, useCartLineTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.cart-line-item.render-after', () => , ); function Extension() { const { merchandise: {title}, } = useCartLineTarget(); return Line item title: {title}; } ``` ##### JavaScript ```js 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}`, ); }); }, ); ``` ## Related [![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/targets) [ReferenceTargets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) [![](https://shopify.dev/images/icons/32/apps.png)![](https://shopify.dev/images/icons/32/apps-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/components) [ReferenceComponents](https://shopify.dev/docs/api/checkout-ui-extensions/components) [![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) [ReferenceConfiguration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) [![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/apps/checkout) [LearnTutorials](https://shopify.dev/apps/checkout)