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

Design the product list view for the Liferay Classic Theme

    Details

      Description

      Background

      When people talk about the "unique needs of B2B buyers," when it comes to UI, they tend to talk about a distinct motivation that B2B buyers tend to have vs. B2C customers: B2B buyers care about efficiency. Many times, what B2B buyers are purchasing online is replacement parts or replenishment orders. In these cases, they know exactly what they're looking for and the role of a good customer portal is to help them get in and out of the site as quickly as possible.

      This means that, in order for a manufacturer or a distributor to provide a really good customer experience for their buyers, they need to provide a UI that makes it easy to find specific products in what might be a catalog of hundreds of thousands of products.

      A list view can aid in this.

      Most of the time, users prefer list view when they are searching with specific requirements while they love grid view for exploring.

      - List or Grid, It Is Not Important

      Design Brief

      1. Design the product list view for the Classic Theme
      2. Follow the general format of a list view as laid out by Lexicon: https://liferay.design/lexicon/core-components/List/
      3. Show the following data in each row:
        1. Image
        2. Product Name
        3. Short Description
        4. Price
          With the typical variants
          1. Catalog Price
          2. Promo Price
          3. Discount
          4. Bundle product
        5. Availability
        6. SKU
        7. Quantity Selector
        8. Add to Cart Button
        9. Compare
        10. Add to List
        11. GTIN
        12. Manufacturer's Part Number
        13. Variations
          1. A product with multiple options that are SKU contributors (i.e. with variants)
          2. A product without GTIN/Manuf. Part Number
          3. A product with no short description
      4. Design the UI for changing between the list view and other view types, e.g. grid view

      Notes

      • Once we stabilize list view on the classic theme, we can move to Speedwell and Minium

      Resources

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              corbin.murakami Corbin Murakami
              Reporter:
              corbin.murakami Corbin Murakami
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  2.1.3