The cart order summary is a representation of the order’s subtotal, taxes applied, discount, applied coupons, total, etc. Additionally by default and very often in the designs there are promo block which has to be styled in the scope of this ticket if it is not CMS content.
The element can be seen on the cart page.
The cart order summary should represent all needed order information. Additionally, the order summary should represent conditional states of order as the applied coupon, promotions discounts, free gifts, etc.
If the order summary should have some additional inputs, for example, discount code input, it should be represented in all states as described in the How to theme coupons?
<aside> ℹ️ Usually, styling this element takes from-to: 4-6h
</aside>
Proceed to checkout button should represent hover state if is not inheriting base template buttons styling.
If the cart page has some promo banners under the order summary, it should also be designed.
On mobile having expandable content for cart order summary, animation guidelines should be provided.
Issues with the designs
CheckoutOrderSummary component is responsible for render of the cart order summary. The same component is rendering order summary for the checkout therefore styles should be isolated for each route to not break view for both pages.
It is possible to pass additional content to be rendered in CheckoutorderSummary since it has a rendering method for children prop.
There are several props that apply different render possibilities for this component, as an example, Scandipwa v5.1.1 will be taken:
showItems used to determine if cart item list has to be rendered,isExpandle determine if summary will be rendered as expandable contentrenderCmsBlock is responsible for CMS content render under summary// To Be added after we will have such implementation