The product selector extension allows content authors to easily search and select products in Salesforce Commerce Cloud and add them to your content.
The IDs of each product selected are added to the content as an array of strings for SFCC 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.
| 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"
}
]
}
}
}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.
Your app is ready to be deployed!