The product selector extension allows content authors to easily search and select products in Salesforce B2C Commerce Cloud (SFCC), SAP Commerce Cloud (Hybris) or Commercetools and add them to your content.
The IDs of each product selected are added to the content as an array of strings for SFCC or Commercetools and an array of objects with the id and catalog for Hybris.
The extension requires the use of the sfcc-product-search-proxy) to work around CORS issues when calling the SFCC data endpoint. It is not needed when using with Hybris or Commercetools.
paramerter | default | notes | required |
---|---|---|---|
noItemsText | No items selected. | Placeholder text to display when no items are selected. | false |
searchPlaceholderText | Search | Placeholder text to show in the search box. | false |
The extension works with 'list of text' properties and supports the following parameters:
{
"proxyUrl": "{The URL of the proxy service}",
"sfccUrl": "{The URL of the SFCC instance}",
"authSecret": "{The SFCC OAuth client secret}",
"authClientId": "{The SFCC OAuth client ID}",
"siteId": "{The ID of the site containing products in SFCC}"
}
{
"product selector": {
"title": "Product Selector",
"description": "description",
"type": "array",
"minItems": 3,
"maxItems": 10,
"items": {
"type": "string"
},
"ui:extension": {
"url": "https://product-selector.amplience.com",
"height": 208,
"params": {
"proxyUrl": "https://sfcc-proxy.amplience.com",
"sfccUrl": "https://sandbox.demandware.net",
"authSecret": "aa1111AAAAAA1",
"authClientId": "11111111-1111-1111-1111-111111111111",
"siteId": "TestSite"
}
}
}
}
Hybris works with a list of objects with the properties id and catalog and requires the following parameters:
{
"hybrisUrl": "{URL of your hybris api}",
"backend": "hybris",
"currency": "{Currency of your products defaults to USD}",
"catalogs": [
{
"id": "{ID of catalog}",
"name": "{Display name of catalog}"
}
]
}
{
"title": "title",
"description": "description",
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"catalog": {
"type": "string"
}
}
},
"ui:extension": {
"name": "{{name of extension}}",
"params": {
"hybrisUrl": "https://api-hybris.amplience.com",
"backend": "hybris",
"catalogs": [
{
"id": "test-catalog",
"name": "test"
}
]
}
}
}
The extension works with 'list of text' properties and supports the following parameters:
{
"backend": "commercetools",
"apiUrl": "{API URL}",
"host": "{Auth URL}",
"projectKey": "{Project key}",
"clientId": "{Client id}",
"clientSecret": "{Client secret}",
"scope": "{Scope of permissions}",
"locale": "{Locale for text search}"
}
Values could be get from creating API Client on Commercetools platform (Settings/Developer settings/Create new API client).
Required minimal scope of permissions is view_published_products
, choose View/Products (published).
Image to display is selected from attributes of master variant by name largeImageUrl
or first image in images
array.
{
"product selector": {
"title": "Product Selector",
"description": "description",
"type": "array",
"minItems": 3,
"maxItems": 10,
"items": {
"type": "string"
},
"ui:extension": {
"url": "https://product-selector.amplience.com",
"height": 208,
"params": {
"backend": "commercetools",
"apiUrl": "https://api.europe-west1.gcp.commercetools.com",
"host": "https://auth.europe-west1.gcp.commercetools.com",
"projectKey": "project-amp",
"clientId": "clientId",
"clientSecret": "clientSecret",
"scope": "view_published_products",
"locale": "en-CA"
}
}
}
}
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json
, for example:
"homepage": "."
Your app is ready to be deployed!