Skip to main content

Cart Lines
API

The API for interacting with the cart lines.

The base API object provided to purchase extension targets.

StatefulRemoteSubscribable<[]>
required

A list of lines containing information about the items the customer intends to purchase.

Was this section helpful?

Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.

[]
Was this section helpful?

The API object provided to purchase.checkout extension targets.

Anchor to applyCartLinesChange
applyCartLinesChange
(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 lines property.

Note

This method will return an error if the cart instruction lines.canAddCartLine is false, or the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.

Was this section helpful?

Anchor to useApplyCartLinesChange
useApplyCartLinesChange()

Returns a function to mutate the lines property of checkout.

(change: ) => Promise<>
Was this section helpful?

The API object provided to cart-line-item extension targets.

StatefulRemoteSubscribable<>
required

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

Was this section helpful?

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.

CartLine

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.

id
string

These line item IDs are not stable at the moment, they might change after any operations on the line items. You should always look up for an updated ID before any call to applyCartLinesChange because you'll need the ID to create a CartLineChange object.

lineComponents
[]

Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.

merchandise

The merchandise being purchased.

quantity
number

The quantity of the merchandise being purchased.

Was this section helpful?

Anchor to useCartLineTarget
useCartLineTarget()

Returns the cart line the extension is attached to. This hook can only be used by cart-line-item extension targets

CartLine

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.

id
string

These line item IDs are not stable at the moment, they might change after any operations on the line items. You should always look up for an updated ID before any call to applyCartLinesChange because you'll need the ID to create a CartLineChange object.

lineComponents
[]

Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.

merchandise

The merchandise being purchased.

quantity
number

The quantity of the merchandise being purchased.

Was this section helpful?
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>;
}