Advanced Configurator

The Advanced Configurator is designed to configure a product through the use of inputs, such as radio buttons and drop-downs. Advanced Configuration can be designed on a single options page, or for more complex configurations with product sections, the options can be split into multiple pages.

Configurations are created and then attached to products. If a product requires configuration, then the Configure button will appear in place of the Add to Cart button.

The graphic depicted above shows the process flow for a configured product. A configuration is comprised of a page or pages, which in turn are comprised of inputs. Each step of the process potentially has an injection point for JavaScript and CSS. An input may have a subconfiguration, which is a collection of pages that have options to configure the parent option.

One of the cornerstones of the Configurator is the ability to write scripts that alter the function and behavior of the configuration. This can be applied to control which controls are active/inactive, what the values are in drop-down boxes, or any number of other functions. This allows the Configurator to provide dynamic options as the customer is building their product. Optimizely has selected JavaScript as the language of choice, though any language or JavaScript library (that is jQuery) could be used as long as it is supported by the browser. These scripts are entered within the Configured Commerce Admin Console using the Script Editor. The code can be executed on page load, on page exit, and using pass/fail of configuration options.

In addition to the JavaScript used to control the behavior and UI of the configurator, there is a separate server side script that runs and works with the Configurator. This script is used for business logic and price validation, and is written in C#.

The script editor is a WYSIWYG JavaScript editor that allows the user to conveniently create JavaScript code. Simply add your code to the editor text box and click the accept button to enter the code. Clicking the delete button will clear all current code in the editor. Clicking the cancel button will close the editor and discard any changes made to the coding of the script.

There is a second script editor that is used at the page level to generate and edit the CSS, JavaScript, and HTML of the page. With this editor, you can choose if code that you write or edit is appended to the end of the generated code, or if code you write overwrites what is automatically generated. You can make this choice by selecting the appropriate radio button in the top of the window.