Control user interface look and feel using the CPQ Configuration API

The Direct API Configuration feature lets you control user interface "look and feel" using the Oracle Configure, Price, Quote Configuration API.

You can use the Direct API Configuration feature to control user interface "look and feel" using the Oracle Configure, Price, Quote Configuration API. This ability lets you do things like the following:

• Apply a site-specific "Look and Feel" product customization to the user interface experience.
• Apply site-specific user interface components for a custom user interface experience.
• Add a new UI component to the configuration flow.
• Remove tabs from the product customization user interface experience.
• Apply a product type specific set of user interface components to the configuration flow.

Before you can accomplish these tasks, you must first make sure that the API driven configuration feature has been implemented (described in the previous topic). Also, it is assumed that the Commerce and Oracle Configure, Price, Quote Integration has already been configured and enabled.

In the sections that follow, you are provided with details for using this feature to carry out these customization tasks.

Apply a site-specific "Look and Feel" product customization to the user interface experience

Consider this situation. Say a customer wants a new custom user interface look and feel for their site. The customer's in-house design and brand management team have provided specifications as to:

• Color Schemes
• Style Header and Footer
• Navigation
• Buttons, input fields, check boxes, Multi-select Lists, single select Lists, date pickers, pick lists
• Component Sizes
• Component Styles
• Component Colors
• Component Fonts

You are instructed to change the user site interface look and feel so that it reflects the customer product customization changes. This is done by completing the following tasks:

• Refer to the Customizing your store layouts section on the Oracle Help Center. You can see that it is possible to apply the required user in look and feel by cloning and customizing a Commerce theme.

  Note: The included version of the JavaScript Library of Knockout UI Components used to render the Layout response from Oracle Configure, Price, Quote uses OOTB theme/styles, (i.e., Bootstrap Forms and Components). Also, by making changes at the provided Theme level, you can change the look and feel of the configuration UI experience without making any changes directly to the UI elements or JS Library.

• Clone the provided the theme and apply the required specifications for:
  • Backgrounds
  • Buttons
  • Navigation Menu
  • Menu
  • Typography
  This is done directly in the Design page.
• Use the Design page to access the theme's CSS and apply all of the remaining UI specifications.
• Save all your changes.
• Navigate to Layout → Product Layout → Layout Settings.
• Set the Layout Preview Product ID for 4ForU Deal offer, this is a configurable product which allows shoppers to buy services for Landline, Mobile, Internet and TV in a single bundle at a steep discount.
• Save your changes.
• Select Product Layout → Preview. You are presented with a preview of the product layout for the 4ForU Deal offer.
• The system displays the configurable options available in a combination of UI components such as the following:
  • Panels
  • Tabs
  • Input fields
  • Radio buttons
  • Checkboxes
  • Multi -select lists
  • Single select lists
  • Date pickers
  • Pick Lists

You can now see that all of the user interface components are displayed in accordance with the new theme that you have created and are in accordance with the rest of the site.

Apply site-specific user interface components for a custom user interface experience

A case may arise where a customer wants the customization user interface experience to be slightly different from the rest of the site to convey the feeling of personal design when they are building their tailored product.

The customer's in-house design and brand management team has provided specifications to make changes to the following user interface elements:

• Buttons - Primary Buttons should contain an icon
• Input Fields - Should all have labels
• Check boxes - Should be rendered as sliders
• Multi-select lists - Should be displayed as a collection of check boxes
• Single select lists - Should be displayed as drop down lists
• Date pickers - Should be displayed as Tumbler Scrolls
• Color pick list - Should be displayed as a swatch matrix with a tone slider

As a member of the SI user interface design team, you are instructed to implement the new product customization user interface look and feel. You see that in order to change how the Oracle Configure, Price, Quote model user interface components are rendered inCommerce, changes must be made to the JavaScript Library of Knockout user interface components used to render the Layout response from Oracle Configure, Price, Quote. This JavaScript Library is part of the Oracle Configure, Price, Quote Configurator user interface extension which was uploaded at feature implementation time.

To implement the new product customization user interface look and feel, complete the following tasks:

• Log in to Commerce Admin and navigate to Settings → Extensions.
• Deactivate the Oracle Configure, Price, Quote Configurator user interface extension.
• Delete the Oracle Configure, Price, Quote Configurator user interface extension. This extension includes the Direct API versions of the Configure and Reconfigure user interface elements as well as a common JavaScript Library that defines the mapping of Oracle Configure, Price, Quote user interface components to Commerce Knockout Components.
• Create new versions of the following:
  • Configure element (if you want the button to appear differently or launch the configuration in a new widget)
  • Reconfigure element (if you want the button to appear differently or launch the configuration in a new widget)
  • JavaScript Library (In the JavaScript library for each component that is to be rendered differently modify the HTML, JavaScript and define new styles which must also be added to the global stylesheet).
• Bundle the user interface elements and JavaScript library into a single extension that can be uploaded in a single step.
• Navigate to Settings → Extensions and upload the new version of Oracle Configure, Price, Quote Configurator user interface extension.
• Reapply the "Customize via direct API" for Configure by doing the following:
  • Navigate to Design → Layout → Product Layout → Layout Settings.
  • Select Product Layout → Grid View and select the Product Details widget.
  • Select the Element Library.
  • Add the Customize Button for Direct API to the Product Details Widget.
  • Save your changes.
  • Navigate back to Layout → Product Layout → Layout Settings.
  • Set the Layout Preview Product ID for 4ForU Deal offer. This is a configurable product which allows shoppers to buy services for Landline, Mobile, Internet, and TV in a single bundle at a steep discount.
  • Save your changes.
  • Select Product Layout → Preview. You are presented with a preview of the product layout for the 4ForU Deal offer.
  • Select to customize the offer. You are presented with the customizable options for the offer in a combination of user interface components including the following. These are presented as per the new Knockout user interface components.
    • Buttons
    • Input Fields
    • Checkboxes
    • Multi-select lists
    • Single select list
    • Date pickers
    • Color pick list
• Add the customized offer to the cart.
• Select the cart and chooses to edit the configure item. You are presented with the customizable options for the offer in a combination of user interface components. These are presented as per the new Knockout user interface components. These include the following:
  • Buttons
  • Input Fields
  • Checkboxes
  • Multi-select lists
  • Single select list
  • Date pickers
  • Color pick list
• Publish your changes.

Upon completing these tasks, you will see that the product customization user interface look and feel and components are now distinct from the store design theme and in accordance with the customer's specifications.

Add a new user interface component to the configuration user interface flow

Sometimes a customer may want new to add a new user interface component that shoppers will use to select an image that will be imprinted on the shopper's mobile phone case.

In this example, the customer's in-house design and brand management team have developed a new "Image Carousel" user interface component that shoppers will use to select the image to be imprinted. This new user interface component is used as the user interface control for Oracle Configure, Price, Quote model attributes which require the shopper to select an image.

As a member of the SI user interface design team, you are instructed to ensure that this new user interface component is displayed correctly in Commerce. To add the new user interface component to the configuration user interface experience via direct API, complete the following tasks:

• Log in to Commerce Admin and navigate to Settings → Extensions and do the following:
  • Deactivate the Oracle Configure, Price, Quote Configurator user interface extension.
  • Delete the Oracle Configure, Price, Quote Configurator user interface extension. This extension includes the direct API versions of the Configure and Reconfigure user interface elements as well as a common JavaScript Library of user interface Components used to render the Layout response from Oracle Configure, Price, Quote.
• Create new versions of the JavaScript Library to include the new 'Image Carousel' user interface component, including HTML, JavaScript and Style Definitions which must also be added to the global stylesheet.
• Bundle the user interface elements and new JavaScript library into a single extension that can be uploaded in a single step.
• Navigate to Settings → Extensions and upload the edited version of the Oracle Configure, Price, Quote Configurator user interface extension.
• Reapply the '"Customize via direct API" for Configure.
• Preview the product layout and make sure that the new image carousel user interface component renders correctly when customizing a product.
• Preview product layout and make sure that the new image carousel user interface component renders correctly when reconfiguring a product.
• Publish your changes.

Upon completing these tasks, you should see that the product customization user interface now includes a new user interface component in accordance with the customer's specifications.

Remove tabs from the product customization user interface experience

In this case, the customer's in-house design and brand management team have requested that all tabs be removed from the product customization user interface as they have received feedback from customers that they are confusing.

As a member of the user interface design team, you are instructed to remove all tabs from the customization user interfaces. To remove all tabs, complete the following tasks:

• Login to Commerce Admin and navigate to Settings → Extensions.
• Deactivate the Oracle Configure, Price, Quote Configurator user interface extension.
• Delete the Oracle Configure, Price, Quote Configurator user interface extension. This extension includes the direct API versions of the Configure and Reconfigure user interface elements as well as the JavaScript Library of user interface Components.
• Edit the JavaScript Library to change how tabs are rendered (stacked, side by side etc.)
• Navigate to Settings → Extensions and upload the edited version of Oracle Configure, Price, Quote Configurator user interface Extension.
• Reapply the "Customize via direct API" for Configure Preview the product layout and make sure that there are no tabs displayed when customizing a product.
• Preview the product layout and make sure that there are no tabs displayed when reconfiguring a product.
• Publish you changes.

Upon completion of these tasks, you will note that the product customization user interface no longer displays any tabbed layout in accordance with the customer's specifications.

Apply a product type specific set of user interface components to the configuration flow

In this case the, the customer's in-house design and brand management team want the shopper's configuration experience to be different when they customize shippable goods (for example, "Build your own laptop") and when they customize services such as the Phones4All offer.

For this, a new set of "Service Configuration user interface Components" has been developed by the in-house design and brand management team for the following:

• Buttons
• Input Fields
• Checkboxes
• Multi-select lists
• Single select list
• Date pickers
• Color pick list

As a member of the user interface design team, you are instructed to ensure that when a shopper is customizing a service these new user interface components will be displayed. This is done by completing the following tasks:

• Log in to Commerce Admin.
• Navigate to Settings → Extensions.
• Deactivate the Oracle Configure, Price, Quote Configurator user interface extension.
• Delete the Oracle Configure, Price, Quote Configurator user interface Extension. This extension includes the direct API versions of the Configure and Reconfigure user interface elements as well as the common JavaScript Library.
• Edit the JavaScript Library by adding conditional IF statements that map the Oracle Configure, Price, Quote user interface components to the new "Service Configuration user interface Components" where Product Type = Service.
• Navigate to Settings → Extensions and upload the edited version of Oracle Configure, Price, Quote Configurator user interface extension.
• Reapply the "Customize via direct API" for Configure.
• Publish your changes.
• Create a new "Services Product Layout" for products where Product Type = Service.
• Create a new "Service Product Details Widget."
• Add the "Customize Button for direct API" user interface element to the Product Details Widget.
• Add the "Service Product Details Widget" to the "Services Product Layout."
• Save your changes.
• Navigate back to Layout → Services Product Layout → Layout Settings.
• Set the Layout Preview Product ID for 4ForU Deal offer.
• Select Product Layout → Preview. You are presented with a preview of the product layout for the 4ForU Deal offer.
• Select to customize the offer. You are presented with the customizable options for the offer in a combination of user interface components. This includes each of the new "Service Configuration user interface Components." This includes the following:
  • Buttons
  • Input Fields
  • Checkboxes
  • Multi-select lists
  • Single select list
  • Date pickers
  • Color pick list
  These are now presented correctly.
• Publish your changes.

Upon completing these tasks, the product customization user interface now displays the new product type specific user interface components in the configuration flow.