Product APIAPIs
APIs
The Product API provides an extension with data about the current Product.
Supporting targets
Anchor to productapiProductApi
- numberrequired
The unique identifier for the product.
- Anchor to variantIdvariantIdnumberrequired
The unique identifier for the product variant.
ProductApiContent
- id
The unique identifier for the product.
number
- variantId
The unique identifier for the product variant.
number
export interface ProductApiContent {
/**
* The unique identifier for the product.
*/
id: number;
/**
* The unique identifier for the product variant.
*/
variantId: number;
}
Was this section helpful?
Anchor to examplesExamples
Examples of using the Product API.
Anchor to example-retrieve-the-id-of-the-product.Retrieve the ID of the product.
Was this section helpful?
Retrieve the ID of the product.
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.product-details.action.render'>();
return (
<Navigator>
<Screen name="ProductApi" title="Product Api">
<ScrollView>
<Text>{`Product ID: ${api.product.id}`}</Text>
</ScrollView>
</Screen>
</Navigator>
);
};
export default reactExtension('pos.product-details.action.render', () => (
<Modal />
));
examples
Retrieve the ID of the product.
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.product-details.action.render'>(); return ( <Navigator> <Screen name="ProductApi" title="Product Api"> <ScrollView> <Text>{`Product ID: ${api.product.id}`}</Text> </ScrollView> </Screen> </Navigator> ); }; export default reactExtension('pos.product-details.action.render', () => ( <Modal /> ));
TS
import { Navigator, Screen, ScrollView, Text, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.product-details.action.render', (root, api) => { const navigator = root.createComponent(Navigator); const screen = root.createComponent(Screen, { name: 'ProductApi', title: 'Product Api', }); const scrollView = root.createComponent(ScrollView); const text = root.createComponent(Text); text.append(`Product ID: ${api.product.id}`); scrollView.append(text); screen.append(scrollView); navigator.append(screen); root.append(navigator); });