The empty cart component appears if you visit the cart page but there are no products in the cart.

<aside> ➡️ Note: the "view cart" button will be disabled if the cart is empty, so you can enter the URL manually (/cart by default)

</aside>

Where this element can be seen?

The empty cart can be seen when accessing the cart page when there are no products in the cart.

Besides the example given above, you can also access the empty cart by, being on the cart page, removing all products from it.

How should this element be designed?

There should be an informative message telling the customer that no products are in the cart.

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

</aside>

How the design may look like?

How to develop styles for this element?

The renderCartItems method of the CartPage route has a conditional for rendering the empty cart notice if the cart is empty.

The empty cart message is rendered with some cart page content alongside it, like the heading, the discount code, and even the totals section.

In case you don’t want these elements to be displayed on the empty card page, you can bring the conditional for the render method. Something like this:

renderEmptyCart() {
	// empty cart render logic
}

render() {
    const { totals: { items } } = this.props;

    if (items.length < 1) {
        return this.renderEmptyCart();
    }

    return super.render();
}

How the implementation may look like?

Implementation example 1

Implementation example 2