Product Picker

The product picker app slice helps you easily integrate product data into your content.

The app slice consists of a web component that communicates with a private GraphQL API on top of the Ucommerce product search index.

Getting started

The following four tasks are needed to integrate the product picker into your solution.

• Set up Ucommerce

• Integrate with Content Management System

• Create product data endpoint in Ucommerce

• Fetch and add data to your pages

Set up Ucommerce

We have a few prerequisites for the app slice to work on the Ucommerce side.

• Activate hosting of custom component files

• Add GraphQL API

The hosting of app slices uses the same infrastructure as custom UI components, which means you need to activate the custom component server.

The Ucommerce GraphQL API used by the app slice is released in the Ucommerce.Web.WebSite.GraphQL package. Install this package and set it up in your program.cs file in the following way:

```
using Ucommerce.Web.WebSite.GraphQL.DependencyInjection;
...
builder.Services.AddUcommerce(builder.Configuration)
...
    .AddGraphQLApi()
...

var app = builder.Build();
app.UseUcommerce()
...
    .UseGraphQLApi();
```

Integrate with Content Management System

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:

<script type="module" src="http(s)://[your Ucommerce host]/CustomComponents/widgets/ucommerce-product-picker.js"></script>

Then you can use the new HTML tag on your page.

<ucommerce-product-picker
    base-api-url="http(s)://[your Ucommerce host]"
    client-id="Your headless clienId"
    client-secret="Your headless client secret"
    culture-code="The culture code for the language to query"
></ucommerce-product-picker>

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.

We have a short Umbraco custom property editor example that you can use for inspiration.

Create product data endpoint in Ucommerce

You will need an endpoint in Ucommerce to fetch the product data when your store generates the page with the picked products.

A solution could be to create a controller extending the HeadlessControllerBase class using the Search APIs to get your product data. See custom headless APIs for more details.

Fetch and add data to your pages

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.

We recommend fetching the product data at this time, to ensure that the product information is always up to date. If prices, descriptions, etc. change in Ucommerce, you would want the information to flow to the website without delay.