Choose a version:

Cart Line Item API
APIs

The Cart Line Item API provides an extension with data about the current Cart Line Item.

Supporting targets

Anchor to cartlineitemapiCartLineItemApi

Anchor to cartLineItem cartLineItem required: The selected line item in the merchant’s current cart.

CartLineItemApi

Access to the selected line item in the merchant’s current cart.

cartLineItem
The selected line item in the merchant’s current cart.
```
LineItem
```

export interface CartLineItemApi {
  /**
   * The selected line item in the merchant’s current cart.
   */
  cartLineItem: LineItem;
}

LineItem

attributedUserId
```
number
```
discounts
```
Discount[]
```
isGiftCard
```
boolean
```
price
```
number
```
productId
```
number
```
properties
```
{ [key: string]: string; }
```
quantity
```
number
```
sku
```
string
```
taxable
```
boolean
```
taxLines
```
TaxLine[]
```
title
```
string
```
uuid
```
string
```
variantId
```
number
```
vendor
```
string
```

export interface LineItem {
  uuid: string;
  price?: number;
  quantity: number;
  title?: string;
  variantId?: number;
  productId?: number;
  discounts: Discount[];
  taxable: boolean;
  taxLines: TaxLine[];
  sku?: string;
  vendor?: string;
  properties: {[key: string]: string};
  isGiftCard: boolean;
  attributedUserId?: number;
}

Discount

amount
```
number
```
currency
```
string
```
discountDescription
```
string
```
type
```
string
```

export interface Discount {
  amount: number;
  currency?: string;
  discountDescription?: string;
  type?: string;
}

TaxLine

enabled
```
boolean
```
price
```
Money
```
rate
```
number
```
rateRange
```
{ min: number; max: number; }
```
title
```
string
```
uuid
```
string
```

export interface TaxLine {
  title: string;
  price: Money;
  rate: number;
  uuid?: string;
  rateRange?: {min: number; max: number};
  enabled?: boolean;
}

Money

amount
```
number
```
currency
```
string
```

export interface Money {
  amount: number;
  currency: string;
}

Was this section helpful?

Anchor to examplesExamples

Examples of using the Cart Line Item API.

Anchor to example-retrieve-the-id-of-the-cart-line-item.Retrieve the ID of the cart line item.

Was this section helpful?

Retrieve the ID of the cart line item.

import React from 'react';

import {

Text,

Screen,

ScrollView,

Navigator,

reactExtension,

useApi,

} from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {

const api = useApi<'pos.cart.line-item-details.action.render'>();

return (

<Text>{`Cart Line Item ID: ${api.cartLineItem.id}`}</Text>

</ScrollView>

</Screen>

</Navigator>

);

};

export default reactExtension(

'pos.cart.line-item-details.action.render',

() => <Modal />,

);

examples

Retrieve the ID of the cart line item.

React

import React from 'react';

import {
  Text,
  Screen,
  ScrollView,
  Navigator,
  reactExtension,
  useApi,
} from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.cart.line-item-details.action.render'>();
  return (
    <Navigator>
      <Screen name="CartLineItemApi" title="Cart Line Item Api">
        <ScrollView>
          <Text>{`Cart Line Item ID: ${api.cartLineItem.id}`}</Text>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension(
  'pos.cart.line-item-details.action.render',
  () => <Modal />,
);

TS

import {
  Navigator,
  Screen,
  ScrollView,
  Text,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.cart.line-item-details.action.render',
  (root, api) => {
    const navigator = root.createComponent(Navigator);
    const screen = root.createComponent(Screen, {
      name: 'CartLineItemApi',
      title: 'Cart Line Item Api',
    });
    const scrollView = root.createComponent(ScrollView);
    const text = root.createComponent(Text);

    text.append(`Cart Line Item ID: ${api.cartLineItem.id}`);
    scrollView.append(text);
    screen.append(scrollView);
    navigator.append(screen);
    root.append(navigator);
  },
);