The product list component presents a collection of products, either in a grid or in a list with the pagination. Each product is accompanied by a summary of the product details.

What are the dependencies?

Where this element can be seen?

A product list is a very common element through the e-commerce site. It can be found on the following elements:

How should this element be designed?

The product list should be displayed in the following states:

Please account for the following:

Product list in grid view (with pagination)

Product list in grid view (with pagination)

<aside> ℹ️ Usually, styling this element takes from-to: 4-6h

</aside>

How the design may look like?

Design example 1

Design example 2

How to develop styles for this element?

How to theme a product list?

The ProductList component is responsible for rendering the list of products.

The ProductListPage component is responsible for rendering each product page. If the products are still loading, the method renderPlaceholderItems() will render a bunch of placeholder product cards.

The ProductCard component is responsible for rendering each product card.

The renderCardListContent() method is responsible for rendering product cards in a list layout.

The renderCardContent() method is responsible for rendering product cards in a grid layout.

Both the above-mentioned methods will conditionally render a product card or any other content passed in the renderContent property.

<aside> ➡️ The product picture size is also in the scope of this ticket.

</aside>

By default products that are out of stock might display no price. the renderProductPrice() method is responsible for this behavior.

Pagination, load more and infinite scroll is held in the separate task.

Fact that there can be no image and image placeholder will be visible should be taken into consideration.

If designs are requesting some action buttons for a specific product card (wishlist, add to compare page, etc), all hover effects should be applied as per designs and requested if not provided by the designer.

How to theme no results?

The ProductList components method renderNoProducts is responsible for rendering no results. Product preview components are located in ProductCard component.

How to theme the product links?

The ProductLinks component is responsible for rendering the cross-sell products on PDP and on the cart page.

The product links cards are also rendered by the ProductCard component. So, they will share the same styles.

By default, only 4 products are displayed in the product links, and only changing the grid to more or fewer columns won't make any difference.

To change the number of products:

  1. Override the ProductLinks.container.js file. How to override a file?
  2. Override the ProductLinksContainer class.
  3. Override the defaultProps.
  4. Set the numberOfProductsToDisplay property to the desired number of products.
  5. A real defaultProps example where we want to display 5 products would look like this:
static defaultProps = {
        ...this.defaultProps,
        numberOfProductsToDisplay: 5
};

<aside> ➡️ The numberOfProductsToDisplay can also be passed by parameter to the ProductLinks container. This way, it’s possible to render a different amount of products on each page.

</aside>

How to theme an HTML widget?

The ProductListWidget container is responsible for rendering the “Hot Sellers” list on the homepage.

There’s no component for this element, only a container that will render a ProductList.

<aside> ➡️ The “Hot Sellers” section above the ProductListWidget on the homepage is CMS content. Therefore, it’s not part of the component and is not to be styled in the scope of this ticket. If a header is necessary, implement a new one.

</aside>

The RecentlyViewedWidget component is responsible for rendering the “Recently Viewed Products” list on the homepage.

How the implementation may look like?

Implementation Example #1

Implementation Example #2