Skip to main content

Cart Lines
API

The APIs for interacting with the cart lines.

Anchor to orderstatusapiOrderStatusApi

The API object provided to this and other customer-account.order-status extension targets.

Anchor to lines
lines
StatefulRemoteSubscribable<[]>
required

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

Was this section helpful?

Anchor to useCartLines
useCartLines()

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

Anchor to useCartLines-returnsReturns

[]
Was this section helpful?

Anchor to cartlineitemapiCartLineItemApi

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

Anchor to target
target
StatefulRemoteSubscribable<>
required

The cart line the extension is attached to.

Was this section helpful?

Anchor to useTarget
useTarget()

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

Anchor to useTarget-returnsReturns

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,
useTarget,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.cart-line-item.render-after',
() => <Extension />,
);

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