Product Picker
Last updated
Was this helpful?
Last updated
Was this helpful?
The product picker app slice helps you easily integrate product data into your content.
The app slice consists of a that communicates with a private on top of the Ucommerce product .
The following four tasks are needed to integrate the product picker into your solution.
We have a few prerequisites for the app slice to work on the Ucommerce side.
Activate hosting of custom component files
Add GraphQL API
Load the web component into your content management system by importing the app slice javascript file into your page. Ucommerce hosts the web component on the following URL, which you can reference on runtime:
Then you can use the new HTML tag on your page.
Notice that the credentials are available in the HTML so this should not be used in publicly available parts of your website.
The ucommerce-product-picker
element will emit an event product-selection
, with the IDs of the selected products, when the user clicks the add button. These IDs can then be saved and used for fetching all the product data from the API built in the next step.
You will need an endpoint in Ucommerce to fetch the product data when your store generates the page with the picked products.
The last piece in the puzzle is to generate your page using the product data from your endpoint using the product IDs returned by the picker.
The hosting of app slices uses the same infrastructure as custom UI components, which means you need to activate the .
The Ucommerce GraphQL API used by the app slice is released in the package. Install this package and set it up in your program.cs
file in the following way:
We have a short that you can use for inspiration.
A solution could be to create a controller extending the HeadlessControllerBase
class using the to get your product data. See for more details.