Product Customization and External Cart

Prerequisites

• Complete the module's Module 1 - Foundational Setup before you proceed.

• Review and understand how to configure the webview, follow the instructions detailed in Utilizing webviews for product details.

Associate App allows store associates to customize products during the selling experience using a webview launched from the product details page. This setup enables retailers to enrich catalog items with configurable services or features at the point of sale, maintaining a consistent brand experience and product accuracy.

Once Associate App is configured to open a webview, it sends relevant product identifiers to the retailer's hosted web application. The web application can then display configuration options based on the product, such as tailoring services or product add-ons.

Product customization example

A fashion retailer may offer customizing suits. When an associate selects a suit, the webview opens a tailoring interface. Here, associates can capture preferences like jacket style (such as two-button), construction (such as half-lined), and lapel design (such as low-gorge notch lapel). These details are recorded in the product metadata and preserved during checkout.

Retailers may also offer paid upgrades through the same flow. For example, a "butterfly lining" upgrade priced at $10 can be added to the parent product in the cart. Both the base item and the add-on are displayed at checkout, ensuring transparency to the customer.

Configuring product customization

1. Launch the webview from the product details page.

2. Extract the product ID passed to the webview.

3. Display customization options based on the product.

   1. Use extended attributes for metadata.

   2. Or, use add-on products appended to the parent item.

4. Based on the use case and the associate selection, call the Create Line Item / Create Add-on Line Item APIs to update the cart.

5. Once the selection is complete, the associate can close the webview.

To add/modify items in the cart:

• Use the Create Line Item API, using the cartId passed to the webview request. lineItemId will be present in the location attribute in the response header.

• Use the Create Add-on Line Item API to add optional items tied to the parent lineItemId. The Add-on lineItemId will be present in the location attribute in the response header.

• To modify or remove items:

  • Use Update Line Item or Destroy Line Item. Removing a parent item also removes associated add-ons.

External cart in a kiosk

In self-service checkout flows, NewStore supports two integration models:

1. Standalone checkout: The kiosk handles all checkout steps, including promotions, discounts, and payment. Once complete, it injects the final order into NewStore.

2. Assisted checkout: The kiosk generates a cart and QR code. A store associate scans the code in the Associate App to retrieve and finalize the cart. They may apply discounts, add customer information, or adjust line items before completing payment in NewStore.

Creating and managing an external cart

To create an external cart:

1. Create Cart: Call the Create Cart API for a specific store. cartId will be present in the location attribute in the response header.

2. Add Items: Use the Create Line Item API to add products. lineItemId will be present in the location attribute in the response header.

3. Add-ons: Use the Create Add-on Line Item API with the parent lineItemId. Add-lineItemId will be present in the location attribute in the response header.

4. Modify Cart: Use Update Line Item or Destroy Line Item as needed. Removing a parent item also removes associated add-ons.

Note:

• The kiosk cannot add customer, coupon, or payment data.

• Store IDs must match between the create cart API and AA cart retrieval to avoid errors.

• After creating a cart, generate a QR code using any QR library.

• Format:

  com.newstore.associate-one://cart/load?cartId={{cart_id}}