The cart item list component presents a collection of cart items. Always as a list view. Each cart item is accompanied by a summary of the product details, quantity input, delete button and price.

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

</aside>

What are the dependencies?

• Quantity input. How to theme a quantity input?
• Product price. How to theme a product price?

Where this element can be seen?

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

• Cart page
• Checkout page
• Cart popup

How should this element be designed?

The cart item should be displayed in the following states:

• Default
• Hovered on the whole cart item (if the specific design is required)
• Hovered on the remove button

Please account for the following:

• It must be possible to remove and increase the cart item quantity
• Cart item might be out of stock
• Cart item might display selected options of the customizable product
• Cart item might display selected configurable product options
• Cart item might display selected bundle product configurations
• Cart item might display selected downloadable product links

Cart page

Cart overlay

Checkout page

Design example #1

Design example #2

Issues with the design

• No hover effect for the remove button is demonstrated

How to develop styles for this element?

The CartItem component is responsible for rendering the cart item. Cart items are rendered in renderCartItem method in CartPage.component.js, CartOverlay.component.js and in items.map(this.renderItem) in CheckoutOrderSummary.component.js because showItems prop is passed from Checkout.component.js

<aside> ➡️ In cart items for price render CartItemPrice component is used, which is styled in the scope of price styling How to theme a product price

</aside>

Implementation example #1

Implementation example #2

<aside> ➡️ Taking some examples from the previous projects, the fact, that ScandiPWA version possibly will be different, should be taken into consideration

</aside>