Cart LinesAPI
The API for interacting with the cart lines.
Anchor to standardapiStandardApi
The base API object provided to purchase extension targets.
- Anchor to lineslinesStatefulRemoteSubscribable<[]>required
A list of lines containing information about the items the customer intends to purchase.
Docs_Standard_CartLinesApi
- lines
A list of lines containing information about the items the customer intends to purchase.
StatefulRemoteSubscribable<CartLine[]>
export interface Docs_Standard_CartLinesApi
extends Pick<StandardApi, 'lines'> {}CartLine
- attributes
The line item additional custom attributes.
Attribute[] - cost
The details about the cost components attributed to the cart line.
CartLineCost - discountAllocations
Discounts applied to the cart line.
CartDiscountAllocation[] - 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 - lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
CartBundleLineComponent[] - merchandise
The merchandise being purchased.
Merchandise - quantity
The quantity of the merchandise being purchased.
number
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[];
}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;
}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'CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocationCartCodeDiscountAllocation
- code
The code for the discount
string - discountedAmount
The money amount that has been discounted from the order
Money - type
The type of the code discount
"code"
export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
/**
* The code for the discount
*/
code: string;
/**
* The type of the code discount
*/
type: 'code';
}CartAutomaticDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the automatic discount
string - type
The type of the automatic discount
"automatic"
export interface CartAutomaticDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the automatic discount
*/
title: string;
/**
* The type of the automatic discount
*/
type: 'automatic';
}CartCustomDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the custom discount
string - type
The type of the custom discount
"custom"
export interface CartCustomDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the custom discount
*/
title: string;
/**
* The type of the custom discount
*/
type: 'custom';
}CartBundleLineComponent
- attributes
Additional custom attributes for the bundle line component.
Attribute[] - cost
The cost attributed to this bundle line component.
CartLineCost - 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 - type
"bundle"
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[];
}Merchandise
- id
A globally-unique identifier.
string - image
Image associated with the product variant. This field falls back to the product image if no image is available.
ImageDetails - product
The product object that the product variant belongs to.
Product - requiresShipping
Whether or not the product requires shipping.
boolean - selectedOptions
List of product options applied to the variant.
SelectedOption[] - sellingPlan
The selling plan associated with the merchandise.
SellingPlan - sku
The product variant's sku.
string - subtitle
The product variant's subtitle.
string - title
The product variant’s title.
string - type
"variant"
ProductVariantImageDetails
- altText
The alternative text for the image.
string - url
The image URL.
string
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}Product
- id
A globally-unique identifier.
string - productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
string - vendor
The product’s vendor name.
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;
}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;
}SellingPlan
- id
A globally-unique identifier.
string
export interface SellingPlan {
/**
* A globally-unique identifier.
* @example 'gid://shopify/SellingPlan/1'
*/
id: string;
}Anchor to useCartLinesuse
Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.
UseCartLinesGeneratedType
Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.
CartLine[]export function useCartLines<
Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): CartLine[] {
const {lines} = useApi<Target>();
return useSubscription(lines);
}CartLine
- attributes
The line item additional custom attributes.
Attribute[] - cost
The details about the cost components attributed to the cart line.
CartLineCost - discountAllocations
Discounts applied to the cart line.
CartDiscountAllocation[] - 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 - lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
CartBundleLineComponent[] - merchandise
The merchandise being purchased.
Merchandise - quantity
The quantity of the merchandise being purchased.
number
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[];
}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;
}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'CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocationCartCodeDiscountAllocation
- code
The code for the discount
string - discountedAmount
The money amount that has been discounted from the order
Money - type
The type of the code discount
"code"
export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
/**
* The code for the discount
*/
code: string;
/**
* The type of the code discount
*/
type: 'code';
}CartAutomaticDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the automatic discount
string - type
The type of the automatic discount
"automatic"
export interface CartAutomaticDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the automatic discount
*/
title: string;
/**
* The type of the automatic discount
*/
type: 'automatic';
}CartCustomDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the custom discount
string - type
The type of the custom discount
"custom"
export interface CartCustomDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the custom discount
*/
title: string;
/**
* The type of the custom discount
*/
type: 'custom';
}CartBundleLineComponent
- attributes
Additional custom attributes for the bundle line component.
Attribute[] - cost
The cost attributed to this bundle line component.
CartLineCost - 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 - type
"bundle"
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[];
}Merchandise
- id
A globally-unique identifier.
string - image
Image associated with the product variant. This field falls back to the product image if no image is available.
ImageDetails - product
The product object that the product variant belongs to.
Product - requiresShipping
Whether or not the product requires shipping.
boolean - selectedOptions
List of product options applied to the variant.
SelectedOption[] - sellingPlan
The selling plan associated with the merchandise.
SellingPlan - sku
The product variant's sku.
string - subtitle
The product variant's subtitle.
string - title
The product variant’s title.
string - type
"variant"
ProductVariantImageDetails
- altText
The alternative text for the image.
string - url
The image URL.
string
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}Product
- id
A globally-unique identifier.
string - productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
string - vendor
The product’s vendor name.
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;
}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;
}SellingPlan
- id
A globally-unique identifier.
string
export interface SellingPlan {
/**
* A globally-unique identifier.
* @example 'gid://shopify/SellingPlan/1'
*/
id: string;
}Anchor to checkoutapiCheckoutApi
The API object provided to purchase.checkout extension targets.
- Anchor to applyCartLinesChangeapplyCartLinesChange(change: ) => 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
linesproperty.NoteThis method will return an error if the cart instruction
is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
Docs_Checkout_CartLinesApi
- applyCartLinesChange
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`](/docs/api/checkout-ui-extensions/apis/cart-lines#standardapi-propertydetail-lines) property. > Note: This method will return an error if the [cart instruction](/docs/api/checkout-ui-extensions/apis/cart-instructions#standardapi-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.
(change: CartLineChange) => Promise<CartLineChangeResult>
export interface Docs_Checkout_CartLinesApi
extends Pick<CheckoutApi, 'applyCartLinesChange'> {}CartLineChange
CartLineAddChange | CartLineRemoveChange | CartLineUpdateChangeCartLineAddChange
- attributes
The attributes associated with the line item.
Attribute[] - merchandiseId
The merchandise ID being added.
string - quantity
The quantity of the merchandise being added.
number - sellingPlanId
The identifier of the selling plan that the merchandise is being purchased with.
string - type
An identifier for changes that add line items.
"addCartLine"
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.
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;
}CartLine
- attributes
The line item additional custom attributes.
Attribute[] - cost
The details about the cost components attributed to the cart line.
CartLineCost - discountAllocations
Discounts applied to the cart line.
CartDiscountAllocation[] - 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 - lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
CartBundleLineComponent[] - merchandise
The merchandise being purchased.
Merchandise - quantity
The quantity of the merchandise being purchased.
number
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[];
}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'CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocationCartCodeDiscountAllocation
- code
The code for the discount
string - discountedAmount
The money amount that has been discounted from the order
Money - type
The type of the code discount
"code"
export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
/**
* The code for the discount
*/
code: string;
/**
* The type of the code discount
*/
type: 'code';
}CartAutomaticDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the automatic discount
string - type
The type of the automatic discount
"automatic"
export interface CartAutomaticDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the automatic discount
*/
title: string;
/**
* The type of the automatic discount
*/
type: 'automatic';
}CartCustomDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the custom discount
string - type
The type of the custom discount
"custom"
export interface CartCustomDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the custom discount
*/
title: string;
/**
* The type of the custom discount
*/
type: 'custom';
}CartBundleLineComponent
- attributes
Additional custom attributes for the bundle line component.
Attribute[] - cost
The cost attributed to this bundle line component.
CartLineCost - 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 - type
"bundle"
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[];
}Merchandise
- id
A globally-unique identifier.
string - image
Image associated with the product variant. This field falls back to the product image if no image is available.
ImageDetails - product
The product object that the product variant belongs to.
Product - requiresShipping
Whether or not the product requires shipping.
boolean - selectedOptions
List of product options applied to the variant.
SelectedOption[] - sellingPlan
The selling plan associated with the merchandise.
SellingPlan - sku
The product variant's sku.
string - subtitle
The product variant's subtitle.
string - title
The product variant’s title.
string - type
"variant"
ProductVariantImageDetails
- altText
The alternative text for the image.
string - url
The image URL.
string
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}Product
- id
A globally-unique identifier.
string - productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
string - vendor
The product’s vendor name.
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;
}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;
}SellingPlan
- id
A globally-unique identifier.
string
export interface SellingPlan {
/**
* A globally-unique identifier.
* @example 'gid://shopify/SellingPlan/1'
*/
id: string;
}CartLineRemoveChange
- id
Line Item ID.
string - quantity
The quantity being removed for this line item.
number - type
An identifier for changes that remove line items.
"removeCartLine"
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
- attributes
The new attributes for the line item.
Attribute[] - id
Line Item ID.
string - merchandiseId
The new merchandise ID for the line item.
string - quantity
The new quantity for the line item.
number - 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.
SellingPlan['id'] | null - type
An identifier for changes that update line items.
"updateCartLine"
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
CartLineChangeResultSuccess | CartLineChangeResultErrorCartLineChangeResultSuccess
- type
Indicates that the line item was changed successfully.
"success"
export interface CartLineChangeResultSuccess {
/**
* Indicates that the line item was changed successfully.
*/
type: 'success';
}CartLineChangeResultError
- 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.
string - type
Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error.
"error"
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;
}Anchor to useApplyCartLinesChangeuse
Returns a function to mutate the lines property of checkout.
UseApplyCartLinesChangeGeneratedType
Returns a function to mutate the `lines` property of checkout.
(change: CartLineChange) => Promise<CartLineChangeResult>export function useApplyCartLinesChange<
Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): (change: CartLineChange) => Promise<CartLineChangeResult> {
const api = useApi<Target>();
if ('applyCartLinesChange' in api) {
return api.applyCartLinesChange;
}
throw new ExtensionHasNoMethodError(
'applyCartLinesChange',
api.extension.target,
);
}CartLineChange
CartLineAddChange | CartLineRemoveChange | CartLineUpdateChangeCartLineAddChange
- attributes
The attributes associated with the line item.
Attribute[] - merchandiseId
The merchandise ID being added.
string - quantity
The quantity of the merchandise being added.
number - sellingPlanId
The identifier of the selling plan that the merchandise is being purchased with.
string - type
An identifier for changes that add line items.
"addCartLine"
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.
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;
}CartLine
- attributes
The line item additional custom attributes.
Attribute[] - cost
The details about the cost components attributed to the cart line.
CartLineCost - discountAllocations
Discounts applied to the cart line.
CartDiscountAllocation[] - 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 - lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
CartBundleLineComponent[] - merchandise
The merchandise being purchased.
Merchandise - quantity
The quantity of the merchandise being purchased.
number
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[];
}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'CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocationCartCodeDiscountAllocation
- code
The code for the discount
string - discountedAmount
The money amount that has been discounted from the order
Money - type
The type of the code discount
"code"
export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
/**
* The code for the discount
*/
code: string;
/**
* The type of the code discount
*/
type: 'code';
}CartAutomaticDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the automatic discount
string - type
The type of the automatic discount
"automatic"
export interface CartAutomaticDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the automatic discount
*/
title: string;
/**
* The type of the automatic discount
*/
type: 'automatic';
}CartCustomDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the custom discount
string - type
The type of the custom discount
"custom"
export interface CartCustomDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the custom discount
*/
title: string;
/**
* The type of the custom discount
*/
type: 'custom';
}CartBundleLineComponent
- attributes
Additional custom attributes for the bundle line component.
Attribute[] - cost
The cost attributed to this bundle line component.
CartLineCost - 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 - type
"bundle"
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[];
}Merchandise
- id
A globally-unique identifier.
string - image
Image associated with the product variant. This field falls back to the product image if no image is available.
ImageDetails - product
The product object that the product variant belongs to.
Product - requiresShipping
Whether or not the product requires shipping.
boolean - selectedOptions
List of product options applied to the variant.
SelectedOption[] - sellingPlan
The selling plan associated with the merchandise.
SellingPlan - sku
The product variant's sku.
string - subtitle
The product variant's subtitle.
string - title
The product variant’s title.
string - type
"variant"
ProductVariantImageDetails
- altText
The alternative text for the image.
string - url
The image URL.
string
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}Product
- id
A globally-unique identifier.
string - productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
string - vendor
The product’s vendor name.
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;
}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;
}SellingPlan
- id
A globally-unique identifier.
string
export interface SellingPlan {
/**
* A globally-unique identifier.
* @example 'gid://shopify/SellingPlan/1'
*/
id: string;
}CartLineRemoveChange
- id
Line Item ID.
string - quantity
The quantity being removed for this line item.
number - type
An identifier for changes that remove line items.
"removeCartLine"
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
- attributes
The new attributes for the line item.
Attribute[] - id
Line Item ID.
string - merchandiseId
The new merchandise ID for the line item.
string - quantity
The new quantity for the line item.
number - 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.
SellingPlan['id'] | null - type
An identifier for changes that update line items.
"updateCartLine"
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
CartLineChangeResultSuccess | CartLineChangeResultErrorCartLineChangeResultSuccess
- type
Indicates that the line item was changed successfully.
"success"
export interface CartLineChangeResultSuccess {
/**
* Indicates that the line item was changed successfully.
*/
type: 'success';
}CartLineChangeResultError
- 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.
string - type
Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error.
"error"
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;
}Anchor to cartlineitemapiCartLineItemApi
The API object provided to cart-line-item extension targets.
- Anchor to targettargetStatefulRemoteSubscribable<>required
The cart line the extension is attached to. Until version
2023-04, this property was a.
Docs_CartLineItem_CartLinesApi
- target
The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable<PresentmentCartLine>`.
StatefulRemoteSubscribable<CartLine>
export interface Docs_CartLineItem_CartLinesApi
extends Pick<CartLineItemApi, 'target'> {}CartLine
- attributes
The line item additional custom attributes.
Attribute[] - cost
The details about the cost components attributed to the cart line.
CartLineCost - discountAllocations
Discounts applied to the cart line.
CartDiscountAllocation[] - 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 - lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
CartBundleLineComponent[] - merchandise
The merchandise being purchased.
Merchandise - quantity
The quantity of the merchandise being purchased.
number
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[];
}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;
}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'CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocationCartCodeDiscountAllocation
- code
The code for the discount
string - discountedAmount
The money amount that has been discounted from the order
Money - type
The type of the code discount
"code"
export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
/**
* The code for the discount
*/
code: string;
/**
* The type of the code discount
*/
type: 'code';
}CartAutomaticDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the automatic discount
string - type
The type of the automatic discount
"automatic"
export interface CartAutomaticDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the automatic discount
*/
title: string;
/**
* The type of the automatic discount
*/
type: 'automatic';
}CartCustomDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the custom discount
string - type
The type of the custom discount
"custom"
export interface CartCustomDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the custom discount
*/
title: string;
/**
* The type of the custom discount
*/
type: 'custom';
}CartBundleLineComponent
- attributes
Additional custom attributes for the bundle line component.
Attribute[] - cost
The cost attributed to this bundle line component.
CartLineCost - 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 - type
"bundle"
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[];
}Merchandise
- id
A globally-unique identifier.
string - image
Image associated with the product variant. This field falls back to the product image if no image is available.
ImageDetails - product
The product object that the product variant belongs to.
Product - requiresShipping
Whether or not the product requires shipping.
boolean - selectedOptions
List of product options applied to the variant.
SelectedOption[] - sellingPlan
The selling plan associated with the merchandise.
SellingPlan - sku
The product variant's sku.
string - subtitle
The product variant's subtitle.
string - title
The product variant’s title.
string - type
"variant"
ProductVariantImageDetails
- altText
The alternative text for the image.
string - url
The image URL.
string
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}Product
- id
A globally-unique identifier.
string - productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
string - vendor
The product’s vendor name.
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;
}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;
}SellingPlan
- id
A globally-unique identifier.
string
export interface SellingPlan {
/**
* A globally-unique identifier.
* @example 'gid://shopify/SellingPlan/1'
*/
id: string;
}Anchor to useTargetuse
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 .
Anchor to useTarget-returnsReturns
- attributes[]
The line item additional custom attributes.
- cost
The details about the cost components attributed to the cart line.
- discountAllocations[]
Discounts applied to the cart line.
- idstring
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
because you'll need the ID to create aobject.- lineComponents[]
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
- merchandise
The merchandise being purchased.
- quantitynumber
The quantity of the merchandise being purchased.
CartLine
UseTargetGeneratedType
Returns the cart line the extension is attached to. This hook can only be used by extensions in 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. Until version `2023-04`, this hook returned a `PresentmentCartLine` object. > Caution: Deprecated as of version `2023-10`, use `useCartLineTarget()` instead.
CartLineexport function useTarget(): CartLine {
const api = useApi<
| 'purchase.cart-line-item.line-components.render'
| 'purchase.checkout.cart-line-item.render-after'
| 'purchase.thank-you.cart-line-item.render-after'
| 'customer-account.order-status.cart-line-item.render-after'
>();
if (!api.target) {
throw new ExtensionHasNoTargetError(api.extension.target);
}
return useSubscription(api.target);
}CartLine
- attributes
The line item additional custom attributes.
Attribute[] - cost
The details about the cost components attributed to the cart line.
CartLineCost - discountAllocations
Discounts applied to the cart line.
CartDiscountAllocation[] - 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 - lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
CartBundleLineComponent[] - merchandise
The merchandise being purchased.
Merchandise - quantity
The quantity of the merchandise being purchased.
number
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[];
}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;
}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'CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocationCartCodeDiscountAllocation
- code
The code for the discount
string - discountedAmount
The money amount that has been discounted from the order
Money - type
The type of the code discount
"code"
export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
/**
* The code for the discount
*/
code: string;
/**
* The type of the code discount
*/
type: 'code';
}CartAutomaticDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the automatic discount
string - type
The type of the automatic discount
"automatic"
export interface CartAutomaticDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the automatic discount
*/
title: string;
/**
* The type of the automatic discount
*/
type: 'automatic';
}CartCustomDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the custom discount
string - type
The type of the custom discount
"custom"
export interface CartCustomDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the custom discount
*/
title: string;
/**
* The type of the custom discount
*/
type: 'custom';
}CartBundleLineComponent
- attributes
Additional custom attributes for the bundle line component.
Attribute[] - cost
The cost attributed to this bundle line component.
CartLineCost - 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 - type
"bundle"
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[];
}Merchandise
- id
A globally-unique identifier.
string - image
Image associated with the product variant. This field falls back to the product image if no image is available.
ImageDetails - product
The product object that the product variant belongs to.
Product - requiresShipping
Whether or not the product requires shipping.
boolean - selectedOptions
List of product options applied to the variant.
SelectedOption[] - sellingPlan
The selling plan associated with the merchandise.
SellingPlan - sku
The product variant's sku.
string - subtitle
The product variant's subtitle.
string - title
The product variant’s title.
string - type
"variant"
ProductVariantImageDetails
- altText
The alternative text for the image.
string - url
The image URL.
string
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}Product
- id
A globally-unique identifier.
string - productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
string - vendor
The product’s vendor name.
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;
}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;
}SellingPlan
- id
A globally-unique identifier.
string
export interface SellingPlan {
/**
* A globally-unique identifier.
* @example 'gid://shopify/SellingPlan/1'
*/
id: string;
}Anchor to useCartLineTargetuse
Returns the cart line the extension is attached to. This hook can only be used by cart-line-item extension targets
- attributes[]
The line item additional custom attributes.
- cost
The details about the cost components attributed to the cart line.
- discountAllocations[]
Discounts applied to the cart line.
- idstring
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
because you'll need the ID to create aobject.- lineComponents[]
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
- merchandise
The merchandise being purchased.
- quantitynumber
The quantity of the merchandise being purchased.
CartLine
UseCartLineTargetGeneratedType
Returns the cart line the extension is attached to. This hook can only be used by extensions in the following extension targets: - `purchase.cart-line-item.line-components.render` - `purchase.checkout.cart-line-item.render-after` - `purchase.thank-you.cart-line-item.render-after` - 'customer-account.order-status.cart-line-item.render-after'
CartLineexport function useCartLineTarget(): CartLine {
const api = useApi<
| 'purchase.cart-line-item.line-components.render'
| 'purchase.checkout.cart-line-item.render-after'
| 'purchase.thank-you.cart-line-item.render-after'
| 'customer-account.order-status.cart-line-item.render-after'
>();
if (!api.target) {
throw new ExtensionHasNoTargetError(
'useCartLineTarget',
api.extension.target,
);
}
return useSubscription(api.target);
}CartLine
- attributes
The line item additional custom attributes.
Attribute[] - cost
The details about the cost components attributed to the cart line.
CartLineCost - discountAllocations
Discounts applied to the cart line.
CartDiscountAllocation[] - 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 - lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
CartBundleLineComponent[] - merchandise
The merchandise being purchased.
Merchandise - quantity
The quantity of the merchandise being purchased.
number
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[];
}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;
}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'CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocationCartCodeDiscountAllocation
- code
The code for the discount
string - discountedAmount
The money amount that has been discounted from the order
Money - type
The type of the code discount
"code"
export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
/**
* The code for the discount
*/
code: string;
/**
* The type of the code discount
*/
type: 'code';
}CartAutomaticDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the automatic discount
string - type
The type of the automatic discount
"automatic"
export interface CartAutomaticDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the automatic discount
*/
title: string;
/**
* The type of the automatic discount
*/
type: 'automatic';
}CartCustomDiscountAllocation
- discountedAmount
The money amount that has been discounted from the order
Money - title
The title of the custom discount
string - type
The type of the custom discount
"custom"
export interface CartCustomDiscountAllocation
extends CartDiscountAllocationBase {
/**
* The title of the custom discount
*/
title: string;
/**
* The type of the custom discount
*/
type: 'custom';
}CartBundleLineComponent
- attributes
Additional custom attributes for the bundle line component.
Attribute[] - cost
The cost attributed to this bundle line component.
CartLineCost - 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 - type
"bundle"
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[];
}Merchandise
- id
A globally-unique identifier.
string - image
Image associated with the product variant. This field falls back to the product image if no image is available.
ImageDetails - product
The product object that the product variant belongs to.
Product - requiresShipping
Whether or not the product requires shipping.
boolean - selectedOptions
List of product options applied to the variant.
SelectedOption[] - sellingPlan
The selling plan associated with the merchandise.
SellingPlan - sku
The product variant's sku.
string - subtitle
The product variant's subtitle.
string - title
The product variant’s title.
string - type
"variant"
ProductVariantImageDetails
- altText
The alternative text for the image.
string - url
The image URL.
string
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}Product
- id
A globally-unique identifier.
string - productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
string - vendor
The product’s vendor name.
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;
}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;
}SellingPlan
- id
A globally-unique identifier.
string
export interface SellingPlan {
/**
* A globally-unique identifier.
* @example 'gid://shopify/SellingPlan/1'
*/
id: string;
}examples
React
import { reactExtension, Text, useCartLineTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.cart-line-item.render-after', () => <Extension />, ); function Extension() { const { merchandise: {title}, } = useCartLineTarget(); 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}`, ); }); }, );
