Uploaded image for project: 'PUBLIC - Liferay Commerce'
  1. PUBLIC - Liferay Commerce
  2. COMMERCE-4036

Provide Better Front Store Product Detail Page Option Value Navigation

    Details

    • Severity of Issue:
      Critical

      Description

      Goal:
      Replace DDM Form Option Value navigation implementation with better React based implementation to provide better user experience for option values that are SKU contributors.

      Challenge:
      SKU contributor option value leads buyer to product variation kept in inventory. If O is number of options describing the product and V is the number of values each option provides, then the number of product variation equals t

      Math.pow(V,O)
      

      Example: If there is 3 options:
      Color: RED, YELLOW
      Size: S, M
      Style: Slim, Custom
      there are Math.pow(2,3)=8 SKU entries:
      RED-S-Slim
      RED-M-Slim
      RED-S-Custom
      RED-M-Custom
      YELLOW-S-Slim
      YELLOW-M-Slim
      YELLOW-S-Custom
      YELLOW-M-Custom

      Problem arises once there is no particular ACTIVE SKU in inventory. Our goal is to give user insight that particular option combination is possible but not available.

      In current implementation we hide option values that lead buyer to unavailable items, what may, depending on options picking even hide path to the available items (see COMMERCE-1507)

      Second idea was option value disabling, instead of hiding. That principle makes unavailable items visible but it still, in one point blocks user to easily switch to variation that leads to next available item. Ticket COMMERCE-3028 provides insight in Amazon front store implementation of this feature. Amazon provides thumbs that link to each available item (and thumb is variation of option values) - be aware of formula Math.pow(V,O).

      For this we need:

      • designer idea - good UX that makes difference comparing to our competitors (Andrea)
      • frontend engineer - react implementation of UI that relies on headless api (Fabio)
      • backend engineer - headless API design and implementation to supply react with view objects, integration tests (Igor)
      • Test and QA engineer - functional test (Pietro)

      This ticket should be base for Marco Leo and Corbin Murakami to create plan and give approval for this feature.
      If feature is approved Corbin should come up with Epic and 3 stories (design, frontend, backend) and Igor Beslic would create subtasks for each story.

      Target release would be Lyra.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              corbin.murakami Corbin Murakami
              Reporter:
              igor.beslic Igor Beslic
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:

                  Packages

                  Version Package