Product
APIs
The ProductSearch API gives extensions access to the native product search and fetching functionality of Shopify POS. The interface provides numerous functions to search for products by query, or to fetch the details of one or more products or product variants.
Anchor to productsearchapiProductSearchApi
Anchor to fetchPaginatedProductVariantsWithProductId
fetchPaginatedProductVariantsWithProductId
(productId: number, paginationParams: ) => Promise<<>>
required
Fetches a page of product variants associated with a product.
Anchor to fetchProductsWithIds
fetchProductsWithIds
(productIds: number[]) => Promise<<>>
required
Fetches multiple products' details.
Anchor to fetchProductVariantsWithIds
fetchProductVariantsWithIds
(productVariantIds: number[]) => Promise<<>>
required
Fetches multiple product variants' details.
Anchor to fetchProductVariantsWithProductId
fetchProductVariantsWithProductId
(productId: number) => Promise<[]>
required
Fetches all product variants associated with a product.
Anchor to fetchProductVariantWithId
fetchProductVariantWithId
(productVariantId: number) => Promise<>
required
Fetches a single product variant's details.
Anchor to fetchProductWithId
fetchProductWithId
(productId: number) => Promise<>
required
Fetches a single product's details.
Anchor to searchProducts
searchProducts
(searchParams: ) => Promise<<>>
required
Search for products on the POS device.
Was this section helpful?
Anchor to examplesExamples
Examples of using the Cart API
Anchor to example-search-for-products-with-a-search-barSearch for products with a search bar
Anchor to example-fetch-a-specific-product-with-a-product-idFetch a specific product with a product ID
Anchor to example-fetch-multiple-products-by-specifying-product-idsFetch multiple products by specifying product IDs
Anchor to example-fetch-a-specific-product-variant-with-a-variant-idFetch a specific product variant with a variant ID
Anchor to example-fetch-multiple-product-variants-by-specifying-variant-idsFetch multiple product variants by specifying variant IDs
Anchor to example-fetch-a-page-of-product-variants-with-a-specific-product-idFetch a page of product variants with a specific product ID
Was this section helpful?
Search for products with a search bar
import React, { useState } from 'react'
import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';
const Modal = () => {
const api = useApi<'pos.home.modal.render'>();
const [data, setData] = useState<ListRow[]>([]);
const search = async (queryString?: string) => {
const results = await api.productSearch.searchProducts({queryString})
const data = results.items.map((product): ListRow => {
return {
id: String(product.id),
leftSide: {
label: product.title,
image: {
source: product.featuredImage
}
}
}
})
setData(data)
}
return (
<Navigator>
<Screen name="HelloWorld" title="Hello World!">
<List
listHeaderComponent={<SearchBar
placeholder='Search products'
onTextChange={search}
onSearch={search}
/>}
imageDisplayStrategy='always'
data={data}
/>
</Screen>
</Navigator>
)
}
export default reactExtension('pos.home.modal.render', () => <Modal />);