Ucommerce
  • Ucommerce Next Gen
    • Getting Started
      • Prerequisites
      • Licensing
      • Ucommerce Templates
      • Headless Template
      • MVC Template
    • Headless
      • Postman Collection
      • Headless API Authentication
        • Token endpoint - Authorization Header
        • Authorization Scopes
        • Refreshing the Access Token
      • Reference
        • Cart
        • Cart / Order Line Items
        • Shipment
        • Billing
        • Promotion Codes
        • Price Groups
        • Payment Methods
        • Countries
        • Shipping Methods
        • Catalogs
        • Cart Custom Properties
        • Line Item Custom Properties
        • Orders
        • Views for Cart modifying operations
      • Custom Headless APIs
      • Error Handling
      • Pagination
      • Deprecation
    • Backoffice Authentication
      • Microsoft Entra ID Example
      • Auth0 Authentication Example
    • Definitions
      • What is a Definition
    • Search and indexing
      • Configuration
      • Indexing
        • Index Definitions
        • Facets
        • Indexing Prices
        • Suggestions
        • Custom Data
      • Searching
    • Payment Providers
      • Stripe Provider Integration
      • Implementing a custom payment provider
    • Data Import
    • Miscellaneous
      • Media
      • Price Group Inheritance
      • Price Group Criteria
      • Soft Deletion Of Entities
      • Logging
      • OpenTelemetry
    • Extensions
      • Extending Pipelines
        • Order Processing Pipelines
        • Checkout Pipelines
      • Changing Service Behavior
        • Images
        • Content
      • Custom Headless APIs
      • Extend the Backoffice
        • Custom UI Components
      • Custom Editor UI
      • Custom Promotion Criteria
      • Custom Price Group Criteria
    • How-To
      • Migrate from Classic
        • Common database issues
      • Entities from code
        • Bootstrapping data on startup
        • Product Definitions & Fields
      • Discover pipelines and their tasks
      • Executing a pipeline
    • Integrations
      • Umbraco Media Delivery API
      • App Slices
        • Product Picker
  • Release Notes
  • Contact Us
Powered by GitBook
On this page

Was this helpful?

  1. Ucommerce Next Gen
  2. Integrations
  3. App Slices

Product Picker

PreviousApp SlicesNextRelease Notes

Last updated 1 month ago

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 .

Getting started

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

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

```
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.

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.

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.

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.

Ucommerce.Web.WebSite.GraphQL
Umbraco custom property editor example
Search APIs
custom headless APIs
Set up Ucommerce
Integrate with Content Management System
Create product data endpoint in Ucommerce
Fetch and add data to your pages
web component
GraphQL API
search index
custom component server