# Cart API The Cart API enables UI Extensions to manage and interact with POS cart contents, such as discounts, line items, and customer details. It provides a comprehensive set of functions for adding and removing items, alongside a subscribable object that keeps the UI Extension updated with real-time changes to the cart. ### Supporting targets - [pos.home.tile.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render) - [pos.home.modal.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-modal-render) - [pos.product-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render) - [pos.product-details.action.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-render) - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render) - [pos.customer-details.action.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-render) - [pos.order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render) - [pos.order-details.action.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-render) - [pos.draft-order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render) - [pos.draft-order-details.action.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-render) ## CartApi ### CartApiContent ### addAddress Add an address to the customer (Customer must be present) ### addCartCodeDiscount Add a code discount to the cart ### addCartProperties Adds custom properties to the cart ### addCustomSale Add a custom sale to the cart ### addLineItem Add a line item by variant ID to the cart ### addLineItemProperties Adds custom properties to the specified line item ### applyCartDiscount Apply a cart level discount ### bulkAddLineItemProperties Adds custom properties to multiple line items at the same time. ### bulkSetLineItemDiscounts Set line item discounts to multiple line items at the same time. ### clearCart Clear the cart ### deleteAddress Delete an address from the customer (Customer must be present) ### removeAllDiscounts Remove all cart and line item discounts ### removeCartDiscount Remove the cart discount ### removeCartProperties Removes the specified cart properties ### removeCustomer Remove the current customer from the cart ### removeLineItem Remove the line item at this uuid from the cart ### removeLineItemDiscount Remove all discounts from a line item ### removeLineItemProperties Removes the specified line item properties ### setAttributedStaff Sets an attributed staff to all line items in the cart. ### setAttributedStaffToLineItem Sets an attributed staff to a specific line items in the cart. ### setCustomer Set the customer in the cart ### setLineItemDiscount Add a discount on a line item to the cart ### subscribable Provides a subscription to POS cart changes. Provides an initial value and a callback to subscribe to value changes. Currently supports only one subscription. You can utilize `makeStatefulSubscribable` on a `RemoteSubscribable` to implement multiple subscriptions. Using `makeStatefulSubscribable` or the corresponding hooks counts as a subscription. ### updateDefaultAddress Update the default address for the customer (Customer must be present) ### Address ### address1 ### address2 ### city ### company ### country ### countryCode ### firstName ### lastName ### name ### phone ### province ### provinceCode ### zip ### CountryCode ### AF ### AX ### AL ### DZ ### AD ### AO ### AI ### AG ### AR ### AM ### AW ### AC ### AU ### AT ### AZ ### BS ### BH ### BD ### BB ### BY ### BE ### BZ ### BJ ### BM ### BT ### BO ### BA ### BW ### BV ### BR ### IO ### BN ### BG ### BF ### BI ### KH ### CA ### CV ### BQ ### KY ### CF ### TD ### CL ### CN ### CX ### CC ### CO ### KM ### CG ### CD ### CK ### CR ### HR ### CU ### CW ### CY ### CZ ### CI ### DK ### DJ ### DM ### DO ### EC ### EG ### SV ### GQ ### ER ### EE ### SZ ### ET ### FK ### FO ### FJ ### FI ### FR ### GF ### PF ### TF ### GA ### GM ### GE ### DE ### GH ### GI ### GR ### GL ### GD ### GP ### GT ### GG ### GN ### GW ### GY ### HT ### HM ### VA ### HN ### HK ### HU ### IS ### IN ### ID ### IR ### IQ ### IE ### IM ### IL ### IT ### JM ### JP ### JE ### JO ### KZ ### KE ### KI ### KP ### XK ### KW ### KG ### LA ### LV ### LB ### LS ### LR ### LY ### LI ### LT ### LU ### MO ### MG ### MW ### MY ### MV ### ML ### MT ### MQ ### MR ### MU ### YT ### MX ### MD ### MC ### MN ### ME ### MS ### MA ### MZ ### MM ### NA ### NR ### NP ### NL ### AN ### NC ### NZ ### NI ### NE ### NG ### NU ### NF ### MK ### NO ### OM ### PK ### PS ### PA ### PG ### PY ### PE ### PH ### PN ### PL ### PT ### QA ### CM ### RE ### RO ### RU ### RW ### BL ### SH ### KN ### LC ### MF ### PM ### WS ### SM ### ST ### SA ### SN ### RS ### SC ### SL ### SG ### SX ### SK ### SI ### SB ### SO ### ZA ### GS ### KR ### SS ### ES ### LK ### VC ### SD ### SR ### SJ ### SE ### CH ### SY ### TW ### TJ ### TZ ### TH ### TL ### TG ### TK ### TO ### TT ### TA ### TN ### TR ### TM ### TC ### TV ### UG ### UA ### AE ### GB ### US ### UM ### UY ### UZ ### VU ### VE ### VN ### VG ### WF ### EH ### YE ### ZM ### ZW ### ZZ ### CustomSale ### price ### quantity ### taxable ### title ### CartDiscountType 'Percentage' | 'FixedAmount' | 'Code' ### SetLineItemPropertiesInput Parameters for adding custom properties to a line item. ### lineItemUuid The uuid belonging to the line item which should receive the custom properties. ### properties The custom properties to apply to the line item. ### SetLineItemDiscountInput Parameters for adding a line item discount. ### lineItemDiscount The discount to be applied to the line item. ### lineItemUuid The uuid belonging to the line item which should receive the discount. ### LineItemDiscount ### amount The percentage or fixed amount for the discount. ### title The title of the line item discount. ### type The discount type. ### Customer ### email ### firstName ### id ### lastName ### note ### LineItemDiscountType 'Percentage' | 'FixedAmount' ### Cart ### cartDiscount ### cartDiscounts ### customer ### grandTotal ### lineItems ### note ### properties ### subtotal ### taxTotal ### Discount ### amount ### discountDescription ### type ### LineItem ### discounts ### isGiftCard ### price ### productId ### properties ### quantity ### sku ### taxable ### title ### uuid ### variantId ### vendor ## Examples The Cart API enables UI Extensions to manage and interact with POS cart contents, such as discounts, line items, and customer details. It provides a comprehensive set of functions for adding and removing items, alongside a subscribable object that keeps the UI Extension updated with real-time changes to the cart. ### Supporting targets - [pos.home.tile.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render) - [pos.home.modal.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-modal-render) - [pos.product-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render) - [pos.product-details.action.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-render) - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render) - [pos.customer-details.action.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-render) - [pos.order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render) - [pos.order-details.action.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-render) - [pos.draft-order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render) - [pos.draft-order-details.action.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-render) ### ### Subscribe to cart changes. ```tsx import React from 'react'; import { reactExtension, useApi, Tile, useCartSubscription } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const cart = useCartSubscription(); return ( <Tile title='My App' subtitle={`${cart.lineItems.length} line items in cart`} enabled /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Cart, Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: `${api.cart.subscribable.initial.lineItems.length} line items in cart`, enabled: true, }); api.cart.subscribable.subscribe((newCart: Cart) => { tile.updateProps({ subtitle: `${newCart.lineItems.length > 0} line items in cart`, }); }); root.append(tile); }); ``` ### ### Apply a cart level discount ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.applyCartDiscount('Percentage', 'Summer discount', '10')} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.applyCartDiscount('Percentage', 'Summer discount', '10'); }, }); root.append(tile); }); ``` ### ### Apply a cart level discount code ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.addCartCodeDiscount('SUMMER_2024')} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.addCartCodeDiscount('SUMMER_2024'); }, }); root.append(tile); }); ``` ### ### Remove all the discounts on the cart and line items ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.removeAllDiscounts(true)} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.removeAllDiscounts(true); }, }); root.append(tile); }); ``` ### ### Set a custom discount on a line item ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.setLineItemDiscount('aa-1234567', 'Percentage', 'Summer discount', '10')} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.setLineItemDiscount( 'aa-1234567', 'Percentage', 'Summer discount', '10', ); }, }); root.append(tile); }); ``` ### ### Set a custom discount on multiple line items ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.bulkSetLineItemDiscounts([ { lineItemUuid: 'aa-1234567', lineItemDiscount: { title: 'Summer 2024', amount: '10', type: 'Percentage', }, }, { lineItemUuid: 'bb-1234567', lineItemDiscount: { title: 'Shorts sale', amount: '15', type: 'FixedAmount', }, }, ])} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.bulkSetLineItemDiscounts([ { lineItemUuid: 'aa-1234567', lineItemDiscount: { title: 'Summer 2024', amount: '10', type: 'Percentage', }, }, { lineItemUuid: 'bb-1234567', lineItemDiscount: { title: 'Shorts sale', amount: '15', type: 'FixedAmount', }, }, ]); }, }); root.append(tile); }); ``` ### ### Remove a discount on a line item ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.removeLineItemDiscount('aa-1234567')} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.removeLineItemDiscount('aa-1234567'); }, }); root.append(tile); }); ``` ### ### Clear the entire cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.clearCart()} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.clearCart(); }, }); root.append(tile); }); ``` ### ### Set the customer in the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.setCustomer({ id: 1, })} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.setCustomer({ id: 1, }); }, }); root.append(tile); }); ``` ### ### Remove the customer in the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.removeCustomer()} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.removeCustomer(); }, }); root.append(tile); }); ``` ### ### Add a custom sale to the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.addCustomSale({ title: 'New product', quantity: 1, price: '10.00', taxable: true, })} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.addCustomSale({ title: 'New product', quantity: 1, price: '10.00', taxable: true, }); }, }); root.append(tile); }); ``` ### ### Add a line item to the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.addLineItem(12345678, 1)} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.addLineItem(12345678, 1); }, }); root.append(tile); }); ``` ### ### Remove a line item from the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.removeLineItem('aa-1234567')} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.removeLineItem('aa-1234567'); }, }); root.append(tile); }); ``` ### ### Add custom properties to the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.addCartProperties({Engraving: 'John Doe'})} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart action', enabled: true, onPress: () => { api.cart.addCartProperties({Engraving: 'John Doe'}); }, }); root.append(tile); }); ``` ### ### Remove custom properties from the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.removeCartProperties(['Engraving'])} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.removeCartProperties(['Engraving']); }, }); root.append(tile); }); ``` ### ### Add custom properties to a line item ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.addLineItemProperties('aa-1234567', {Engraving: 'John Doe'})} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.addLineItemProperties('aa-1234567', {Engraving: 'John Doe'}); }, }); root.append(tile); }); ``` ### ### Add custom properties to multiple line items ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.bulkAddLineItemProperties([ {lineItemUuid: 'aa-1234567', properties: {Engraving: 'John Doe'}}, {lineItemUuid: 'bb-001234567', properties: {Engraving: 'Jane Doe'}} ])} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.bulkAddLineItemProperties([ {lineItemUuid: 'aa-1234567', properties: {Engraving: 'John Doe'}}, {lineItemUuid: 'bb-001234567', properties: {Engraving: 'Jane Doe'}}, ]); }, }); root.append(tile); }); ``` ### ### Remove custom properties from a line item ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.removeLineItemProperties('aa-1234567', ['Engraving'])} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.removeLineItemProperties('aa-1234567', ['Engraving']); }, }); root.append(tile); }); ``` ### ### Set an attributed staff member on the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.setAttributedStaff(123456)} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.setAttributedStaff(123456); }, }); root.append(tile); }); ``` ### ### Set an attributed staff member on a line item ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.setAttributedStaffToLineItem(123456, 'aa-1234567')} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.setAttributedStaffToLineItem(123456, 'aa-1234567'); }, }); root.append(tile); }); ``` ### ### Add an address to the customer in the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.addAddress({ address1: '123456 Main Street', city: 'Ottawa', province: 'Ontario', firstName: 'John', lastName: 'Doe', country: 'Canada' })} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.addAddress({ address1: '123456 Main Street', city: 'Ottawa', province: 'Ontario', firstName: 'John', lastName: 'Doe', country: 'Canada', }); }, }); root.append(tile); }); ``` ### ### Delete an address corresponding to an ID ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.deleteAddress(123456)} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.deleteAddress(123456); }, }); root.append(tile); }); ``` ### ### Set the default address of the customer in the cart ```tsx import React from 'react'; import { reactExtension, useApi, Tile } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' subtitle='Call cart function' enabled onPress={() => api.cart.updateDefaultAddress(123456)} /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My App', subtitle: 'Call cart function', enabled: true, onPress: () => { api.cart.updateDefaultAddress(123456); }, }); root.append(tile); }); ```