Update to Review Your Order Screen
Update to Review Your Order Screen
What Was Done
Redesigned the /shop/cart Review Order page in bista_menmd_website to match new mockups for both desktop and mobile, without touching the Shipping or Payment steps.
Template changes (shop_cart_redesign.xml):
- Replaced Odoo's default wizard breadcrumb with a branded 3-step indicator - numbered circles with connecting lines on desktop, a "Step X of 3 / Next: Y" progress bar on mobile
- Replaced the "Order overview" h3 with a bold h1 heading and subtitle
- Moved "You might also need" outside of #cart_products so it renders as a truly separate white card below the cart items card
- Stripped the stock suggested products section from inside #cart_products
- Added Shipping and Estimated Tax placeholder rows to the Order Summary sidebar
- Replaced the Odoo checkout button with a "Continue to Shipping" button hardcoded to /shop/checkout (the dynamic step_specific_values href was incorrectly resolving to payment)
- Added SSL badge below the CTA button
CSS changes (website_sale.scss additions):
- Page background changed to #f8f9fa (light grey) via :has() targeting #wrap and body
- Primary text color set to #003056 throughout
- Cart items restructured with CSS grid: image | name + stepper + Remove | price right-aligned. Stepper sits below the product name, Remove text link below the stepper, trash icon hidden
- "You might also need" styled as a 4-column grid (desktop) / 2-column (mobile) with image → name → price → "+ Add" order
- Order Summary sidebar: white card, ::before pseudo-element for "Order summary" heading, green CTA button, consistent 1.25rem padding on all screen sizes
- Mobile: price moved to be inline with stepper (grid-row: 2)
Files Changed
| File | Status |
|---|---|
| bista_menmd_website/views/shop_cart_redesign.xml | New |
| bista_menmd_website/static/src/scss/website_sale.scss | Modified (additions appended) |
| bista_menmd_website/__manifest__.py | Modified (shop_cart_redesign.xml added to data list after shop_cart_templates.xml) |
Steps to Test
- Add at least one product to the cart and navigate to /shop/cart
- Confirm step indicator shows circle "1" active with "Review your order" label
- Confirm h1 heading and subtitle render correctly on the light grey background
- Confirm cart items appear in a white card - stepper below name, price right-aligned, "Remove" text link visible
- Remove one item from cart to confirm Remove works, re-add it
- Adjust quantity with +/- and confirm totals update
- Confirm "You might also need" renders as a separate white card below the items card (not inside it). Remove all suggested products from cart to verify it disappears when empty
- Enter a discount code and confirm Apply works
- Click Continue to Shipping and confirm it lands on the shipping/address page, not payment
- On mobile: confirm 2-column suggested products grid, price inline with stepper, Order Summary card appears below