Configure Open UI Pickers in Bloomreach Commerce Accelerator

Introduction

Since v14.3, Bloomreach Commerce Accelerator provides optional Open UI based picker UIs for commerce categories, products and accounts. These Open UI based Picker UIs provide the same functionality as provided by the existing External Document Picker based Wicket plugins, but they communicate with the optional brX GraphQL Service via GraphQL API set instead.

brX GraphQL Service URL Configuration

In v14.4.x or earlier, the following property should be set in each Commerce Connector document to specify the URL of the brX GraphQL Service, so the Open UI Picker plugins can make queries against the URL.

Since v14.5, the property can be overridden by setting the frontend.config property instead on each Open UI Picker module configuration nodes, like the following examples:

/hippo:configuration/hippo:frontend/cms/ui-extensions/categoriesPicker:
  jcr:primaryType: frontend:uiExtension
  # ... SNIP ...
  frontend:config: '{ "apollo.server.url": "https://api.example.com/graphql" }'

/hippo:configuration/hippo:frontend/cms/ui-extensions/productsPicker:
  jcr:primaryType: frontend:uiExtension
  # ... SNIP ...
  frontend:config: '{ "apollo.server.url": "https://api.example.com/graphql" }'

/hippo:configuration/hippo:frontend/cms/ui-extensions/productVariantsPicker:
  jcr:primaryType: frontend:uiExtension
  # ... SNIP ...
  frontend:config: '{ "apollo.server.url": "https://api.example.com/graphql" }'

Replace Category Picker UI Plugin

By default, the External Document Picker based Wicket plugins will work without any problem. However, if you want to replace the Category Picker UI Plugin with the new Open UI based Picker UI, follow the instructions below.

• Log in to CMS Console (e.g, http://localhost:8080/cms/console/ in your local development environment).
• Navigate to the /hippo:namespaces/starterstoreboot/categorydecorator/hipposysedit:nodetype/hipposysedit:nodetype node, and add the following node underneath. Use the YAML / YAML Import menu to import the following content:

  • /relatedextdocselector:
      jcr:primaryType: hipposysedit:field
      hipposysedit:mandatory: false
      hipposysedit:multiple: true
      hipposysedit:ordered: false
      hipposysedit:path: starterstoreboot:relatedexdocids
      hipposysedit:primary: false
      hipposysedit:type: OpenUiString
    

• Navigate to the /hippo:namespaces/starterstoreboot/categorydecorator/editor:templates/_default_ node, and replace the relatedextdocselector child node with the following. Delete the old node and use the YAML / YAML Import menu to import the following content:

  • /relatedextdocselector:
      jcr:primaryType: frontend:plugin
      caption: Related External Category
      field: relatedextdocselector
      plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
      wicket.id: ${cluster.id}.right.item
      /cluster.options:
        jcr:primaryType: frontend:pluginconfig
        ui.extension: categoriesPicker

• Write the changes to the repository, and verify the changes in the document editor.

Replace Product Picker UI Plugin

By default, the External Document Picker based Wicket plugins will work without any problem. However, if you want to replace the Product Picker UI Plugin, follow the instructions below.

• Log in to CMS Console (e.g, http://localhost:8080/cms/console/ in your local development environment).
• Navigate to the /hippo:namespaces/starterstoreboot/productdecorator/hipposysedit:nodetype/hipposysedit:nodetype node, and add the following node underneath. Use the YAML / YAML Import menu to import the following content:

  • /relatedextdocselector:
      jcr:primaryType: hipposysedit:field
      hipposysedit:mandatory: false
      hipposysedit:multiple: true
      hipposysedit:ordered: false
      hipposysedit:path: starterstoreboot:relatedexdocids
      hipposysedit:primary: false
      hipposysedit:type: OpenUiString

• Navigate to the /hippo:namespaces/starterstoreboot/productdecorator/editor:templates/_default_ node, and replace the relatedextdocselector child node with the following. Delete the old node and use the YAML / YAML Import menu to import the following content:

  • /relatedextdocselector:
      jcr:primaryType: frontend:plugin
      caption: Related External Product
      field: relatedextdocselector
      plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
      wicket.id: ${cluster.id}.right.item
      /cluster.options:
        jcr:primaryType: frontend:pluginconfig
        ui.extension: productsPicker

• Write the changes to the repository, and verify the changes in the document editor.

Replace Product Variant Picker UI Plugin

By default, the External Document Picker based Wicket plugins will work without any problem. However, if you want to replace the Product Variant Picker UI Plugin, follow the instructions below.

• Log in to CMS Console (e.g, http://localhost:8080/cms/console/ in your local development environment).
• Navigate to the /hippo:namespaces/starterstoreboot/productdecorator/hipposysedit:nodetype/hipposysedit:nodetype node, and add the following node underneath. Use the YAML / YAML Import menu to import the following content:

  • /relatedvariantselector:
      jcr:primaryType: hipposysedit:field
      hipposysedit:mandatory: false
      hipposysedit:multiple: true
      hipposysedit:ordered: false
      hipposysedit:path: starterstoreboot:relatedvariantids
      hipposysedit:primary: false
      hipposysedit:type: OpenUiString

• Navigate to the /hippo:namespaces/starterstoreboot/productdecorator/editor:templates/_default_ node, and replace the relatedvariantselector child node with the following. Delete the old node and use the YAML / YAML Import menu to import the following content:

  • /relatedvariantselector:
      jcr:primaryType: frontend:plugin
      caption: Related External Product Variant
      field: relatedvariantselector
      plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
      wicket.id: ${cluster.id}.right.item
      /cluster.options:
        jcr:primaryType: frontend:pluginconfig
        ui.extension: productVariantsPicker

• Write the changes to the repository, and verify the changes in the document editor.

Replace Account Picker UI Plugin

By default, the External Document Picker based Wicket plugins will work without any problem. However, if you want to replace the Account Picker UI Plugin, follow the instructions below.

• Log in to CMS Console (e.g, http://localhost:8080/cms/console/ in your local development environment).
• Navigate to the /hippo:namespaces/starterstore/connectoraccountdetails/hipposysedit:nodetype/hipposysedit:nodetype node, and add the following node underneath. Use the YAML / YAML Import menu to import the following content:

  • /acctid:
      jcr:primaryType: hipposysedit:field
      hipposysedit:mandatory: false
      hipposysedit:multiple: false
      hipposysedit:ordered: false
      hipposysedit:path: starterstore:acctid
      hipposysedit:primary: false
      hipposysedit:type: OpenUiString

• Navigate to the /hippo:namespaces/starterstore/connectoraccountdetails/editor:templates/_default_ node.
• Delete the old acctidselector node underneath and import the following acctid node instead. Use the YAML / YAML Import menu to import the following content:

  • /acctid:
      jcr:primaryType: frontend:plugin
      caption: Account ID
      field: acctid
      plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
      wicket.id: ${cluster.id}.field
      /cluster.options:
        jcr:primaryType: frontend:pluginconfig
        ui.extension: accountsPicker

• Write the changes to the repository, and verify the changes in the document editor.