Product configurator

The product configurator refers to the part of the checkout process in which a customer selects the edition of a product they want to buy, and chooses any available add-ons. Theme developers can customize the configurator to suit their needs.

Product configuration customization consists of three parts:

• Create the user interface for the edition and add-on listings.
• Manage the states of the selected items.
• Manage how to add items to the cart.

You can view the product configuration page directly in the Storefront Toolkit. Use the following URL pattern:

/_locale_/apps/_appId_/_appName_/configure

For example:

/en-US/apps/577/g-suite/configure

Build the user interface

You build the edition and add-on listing user interface with the same lists that appear on the product page: the application > editions and application > addonsProducts page objects.

When you have your lists, you can manage the selected states. The selected editions and add-ons are available under the application > configurator object. It is important to set them as selected when the page loads. There are many scenarios where they might be selected by default, for example when a customer clicks an edition directly on the product page and goes to the configuration page to select add-ons.

The new checkout flow only accepts pricing plan IDs as items to add to carts. As you build the UI, you must maintain a reference to those IDs. You can find them under the edition object (plans > 0 > uuid).

There are two ways to add items to the cart:

• through a Buy button, which sends customers to the cart
• through an Add to Cart action, which keeps customers on the storefront. For mor einformation, see Add to cart

Create the Buy button

Under application > callToAction, the urlCreator object contains the necessary parts to construct the URL for your selected items. For example:

• "base": "https://example.com/api/internal/storefront/v1/cta?productId=577&type=BUY"
• "actionType": "BUY"
• "editionParam": "eppid"
• "addonParam": "appid"

You must use JavaScript to construct the URL for the selected items. A product with one edition and two add-ons selected would resemble the following example:

https://example.com/api/internal/storefront/v1/cta?productId=577&type=BUY&eppid=123123-123123&appid=1233-123&appid=876-45691