# Cart Lines The API for interacting with the cart lines. ```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}; } ``` ```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}`, ); }); }, ); ``` ## StandardApi The base API object provided to `purchase`, and `customer-account.order-status` extension targets. ### Docs_Standard_CartLinesApi ### lines value: `StatefulRemoteSubscribable` A list of lines containing information about the items the customer intends to purchase. ### CartLine ### attributes value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## useCartLines 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. #### Returns: CartLine[] export function useCartLines< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): CartLine[] { const {lines} = useApi(); return useSubscription(lines); } ### CartLine ### attributes value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## CheckoutApi The API object provided to `purchase.checkout` extension targets. ### Docs_Checkout_CartLinesApi ### applyCartLinesChange value: `(change: CartLineChange) => Promise` 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. ### CartLineAddChange ### attributes value: `Attribute[]` The attributes associated with the line item. ### merchandiseId value: `string` The merchandise ID being added. ### quantity value: `number` The quantity of the merchandise being added. ### sellingPlanId value: `string` The identifier of the selling plan that the merchandise is being purchased with. ### type value: `"addCartLine"` An identifier for changes that add line items. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### CartLine ### attributes value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ### CartLineRemoveChange ### id value: `string` Line Item ID. ### quantity value: `number` The quantity being removed for this line item. ### type value: `"removeCartLine"` An identifier for changes that remove line items. ### CartLineUpdateChange ### attributes value: `Attribute[]` The new attributes for the line item. ### id value: `string` Line Item ID. ### merchandiseId value: `string` The new merchandise ID for the line item. ### quantity value: `number` The new quantity for the line item. ### sellingPlanId value: `SellingPlan['id'] | null` The identifier of the selling plan that the merchandise is being purchased with or `null` to remove the the product from the selling plan. ### type value: `"updateCartLine"` An identifier for changes that update line items. ### CartLineChangeResultSuccess ### type value: `"success"` Indicates that the line item was changed successfully. ### CartLineChangeResultError ### message value: `string` 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. ### type value: `"error"` Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## useApplyCartLinesChange Returns a function to mutate the `lines` property of checkout. ### UseApplyCartLinesChangeGeneratedType Returns a function to mutate the `lines` property of checkout. #### Returns: (change: CartLineChange) => Promise export function useApplyCartLinesChange< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): (change: CartLineChange) => Promise { const api = useApi(); if ('applyCartLinesChange' in api) { return api.applyCartLinesChange; } throw new ExtensionHasNoMethodError( 'applyCartLinesChange', api.extension.target, ); } ### CartLineAddChange ### attributes value: `Attribute[]` The attributes associated with the line item. ### merchandiseId value: `string` The merchandise ID being added. ### quantity value: `number` The quantity of the merchandise being added. ### sellingPlanId value: `string` The identifier of the selling plan that the merchandise is being purchased with. ### type value: `"addCartLine"` An identifier for changes that add line items. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### CartLine ### attributes value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ### CartLineRemoveChange ### id value: `string` Line Item ID. ### quantity value: `number` The quantity being removed for this line item. ### type value: `"removeCartLine"` An identifier for changes that remove line items. ### CartLineUpdateChange ### attributes value: `Attribute[]` The new attributes for the line item. ### id value: `string` Line Item ID. ### merchandiseId value: `string` The new merchandise ID for the line item. ### quantity value: `number` The new quantity for the line item. ### sellingPlanId value: `SellingPlan['id'] | null` The identifier of the selling plan that the merchandise is being purchased with or `null` to remove the the product from the selling plan. ### type value: `"updateCartLine"` An identifier for changes that update line items. ### CartLineChangeResultSuccess ### type value: `"success"` Indicates that the line item was changed successfully. ### CartLineChangeResultError ### message value: `string` 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. ### type value: `"error"` Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## CartLineItemApi The API object provided to `cart-line-item` extension targets. ### Docs_CartLineItem_CartLinesApi ### target value: `StatefulRemoteSubscribable` The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable`. ### CartLine ### attributes value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## useTarget 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`. ### 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. #### Returns: CartLine export 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 value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## useCartLineTarget Returns the cart line the extension is attached to. This hook can only be used by `cart-line-item` extension targets ### 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' #### Returns: CartLine export 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 value: `Attribute[]` The line item additional custom attributes. ### cost value: `CartLineCost` The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` Discounts applied to the cart line. ### id value: `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. ### lineComponents value: `CartBundleLineComponent[]` Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### CartLineCost ### totalAmount value: `Money` The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` The ISO 4217 format for the currency. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` The cost attributed to this bundle line component. ### id value: `string` 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. ### merchandise value: `Merchandise` The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` List of product options applied to the variant. ### sellingPlan value: `SellingPlan` The selling plan associated with the merchandise. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout)