The cart page displays the contents of the cart (which can be empty). It can be accessed by clicking the cart icon (and, on the desktop, clicking "view cart").
The cart page layout is represented on the cart page.
The cart page should be represented for desktop and mobile.
<aside> ℹ️ Usually, styling this element takes from-to: 3-5h
</aside>
The CartPage component is responsible for rendering the cart page, and styling the layout.
<aside> ➡️ Additionally, adjustments for smaller elements may be needed.
</aside>
In the scope of this ticket should be styled below elements:
<aside> ➡️ Empty cart is not in the scope of this ticket, we have a separate task for this.
</aside>
<aside> ➡️ Product links are not in the scope of this ticket, we have a separate task for this.
</aside>
The page content can be rendered by one of two different methods. The renderMobile() will render all the mobile content and the renderDesktop() the desktop content.
Examples:
CartPage.component.js
renderDesktop() {
/*
* In this example, we're changing a lot of the cart page layout
* for the Printerbase project, adding additional divs
* and changing render methods disposition.
* We're also passing a new mod (isEmpty) to the main div
*/
return (
<>
<div
block="CartPage"
elem="Static"
mods={ { isEmpty: this.cartIsEmpty() } }
>
{ this.renderHeading() }
{ this.renderCartItems() }
<div block="CartPage" elem="Additional">
<div block="CartPage" elem="PromoWrapper">
{ this.renderPromo() }
</div>
{ this.renderDiscountCode() }
</div>
</div>
{ this.renderTotalsSection() }
</>
);
}
CartPage.container.js
/**
* This is an example of the _updateBreadcrumbs() container's method
* which was overridden on Printerbase to change the breadcrumbs text
* to "Shopping basket"
*/
_updateBreadcrumbs() {
const { updateBreadcrumbs } = this.props;
const breadcrumbs = [
{ url: '/cart', name: __('Shopping basket') }
];
updateBreadcrumbs(breadcrumbs);
}
In some cases, it might be necessary to add the breadcrumbs to the mobile version of the cart page, which is hidden by default.
<aside> ➡️ Most of the time, the breadcrumbs might be already present on the DOM. In this case, you just need to change its styles to display them.
</aside>