Add Order Summary card to Checkout sidebar #1959

Aljullu · 2020-03-12T19:26:12Z

Closes #1486.
Closes #1304.

Screenshots

How to test the changes in this Pull Request:

Create a page with the Checkout block and verify it has the Order Summary in the sidebar.
Verify there are no visual regressions in the Cart block.

Aljullu · 2020-03-12T19:26:29Z

assets/js/base/components/cart-checkout/index.js

+export { default as ProductName } from './product-name';
+export { default as ProductPrice } from './product-price';
+export { default as ProductSaleBadge } from './product-sale-badge';
+export { default as ProductVariationData } from './product-variation-data';


I noticed some of these blocks are very similar to the ones in atomic/components/product/. I think it might be worth checking if they can be merged, but I left it out of this PR because it was already quite big and I don't think that's something blocking.

Agree, this is good follow up for later. Great that cart & checkout are sharing these components now though :)

haszari · 2020-03-12T23:27:20Z

assets/js/base/components/cart-checkout/product-sale-badge/index.js

+import './style.scss';
+
+/**
+ * Returns a low stock badge for a line item.


Comment pasteo :)

Removed in 4a60a67.

haszari

Code looks good and testing well – I tested cart and checkout blocks with a range of products (on sale, with attributes, low stock etc). Nothing is broken in cart, and checkout looks great. Also looks reasonable on mobile 🎉

There's one blocker to fix before merge: I don't think useStoreCartItemQuantity hook is needed in checkout, since it doesn't allow changing anything.

This is an epic PR (!), so I haven't fully reviewed all the code, but I didn't see any other issues. We will of course keep testing and iterating.

Some other things I noticed while testing, we might want to follow up separately (nothing blocking, most unrelated to this PR).

Focus highlight on order summary "collapse" heading element has different padding/margin on right/left.

Hard-coded text color - it would be great if we can avoid this and/or use theme colors. In my cart I'm seeing a mix of black-on-white (opinionated blocks) vs. red (storefront customiser).

Hard error when a bad coupon is entered - I think this is already logged as an issue.

The circled quantity numbers seem a little overkill when there's 1x of a product, I'm guessing this is the intended design. Could consider showing number only when there are multiple of the item cc @garymurray. (Note this is exacerbated by my red customisation!!)

haszari · 2020-03-12T23:32:39Z

assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -321,7 +273,7 @@ table.wc-block-cart-items {
 					display: inline-block;
 				}

-				.wc-block-cart-item__sale-badge {
+				.wc-block-sale-badge {


Should some of these styles be in the components directly? Probably not a big deal, there's a little mixing of concerns here - the cart is overriding/tweaking component styles.

I don't think so, I left them here in purpose. Even though they refer to the ProductSaleBadge component, they are only relevant under the Cart block, so I think they belong to the Cart CSS.

haszari · 2020-03-12T23:35:18Z

assets/js/blocks/cart-checkout/checkout/order-summary-item.js

+			<div className="wc-block-order-summary-item__total-price">
+				<ProductPrice
+					currency={ currency }
+					value={ purchasePrice * quantity }


Does this work correctly with the different tax options?

I think so, those prices honor the tax settings.

I found an issue, though: #1963. But since it's affecting the Cart too, I don't think it should block this PR.

haszari · 2020-03-12T23:39:57Z

assets/js/blocks/cart-checkout/checkout/order-summary-item.js

+		variation,
+	} = cartItem;
+
+	const { quantity } = useStoreCartItemQuantity( cartItem );


I don't think you need this hook - you can just accept a static quantity prop from parent component (which should have all the item details).

useStoreCartItemQuantity hook is for changing quantity or removing item :)

Oh, good catch. I missed that cartItem has the quantity attribute. Fixed in 87214e3.

haszari · 2020-03-12T23:55:04Z

@Aljullu One more thing .. is it possible to give the description / summary text more room? They all wrap and it looks like this is unnecessary for the data I have. (e.g. This is a simple product)

garymurray · 2020-03-13T10:26:09Z

The circled quantity numbers seem a little overkill when there's 1x of a product, I'm guessing this is the intended design. Could consider showing number only when there are multiple of the item cc @garymurray. (Note this is exacerbated by my red customisation!!)

@haszari Let's leave that as is for now. Any changes here can be made later in future iterations.

Aljullu · 2020-03-13T14:39:15Z

Focus highlight on order summary "collapse" heading element has different padding/margin on right/left.

Fixed in 7d4fd6e.

Hard-coded text color - it would be great if we can avoid this and/or use theme colors. In my cart I'm seeing a mix of black-on-white (opinionated blocks) vs. red (storefront customiser).

That's a tricky issue that I would like to handle in another PR, the hardcoded colors are there because in the designs they differ from the default color.

I also noticed the Cart block completely ignores the Text color preference, while the Checkout block applies it inconsistently. I created an issue to discuss what's the best solution for this: #1964.

Hard error when a bad coupon is entered - I think this is already logged as an issue.

Right, I think that's not related to this PR.

One more thing .. is it possible to give the description / summary text more room?

Good idea. I refactored the CSS in c575d54.

Aljullu added the status: needs review label Mar 12, 2020

Aljullu added this to the Future Release milestone Mar 12, 2020

Aljullu requested a review from a team as a code owner March 12, 2020 19:26

Aljullu self-assigned this Mar 12, 2020

Aljullu requested review from haszari and removed request for a team March 12, 2020 19:26

Aljullu commented Mar 12, 2020

View reviewed changes

haszari reviewed Mar 12, 2020

View reviewed changes

haszari approved these changes Mar 12, 2020

View reviewed changes

woocommercebot added status: ready to merge and removed status: needs review labels Mar 12, 2020

Aljullu mentioned this pull request Mar 13, 2020

Decide approach for component/element styles for Cart and Checkout blocks across themes and via Customizer settings. #1964

Closed

Aljullu added 12 commits March 13, 2020 15:27

Add missing props to sidebar-layout components

e91ef11

Move specific CSS class to checkout block

3aad038

Add comment on top of @wordpress/components styles in webpack entry

0d2d579

Make it so our styles load after vendor styles

836d67c

Remove unnecessary @todo comment

953fa41

Add Order Summary card to Checkout sidebar

ba7e891

Improve responsive layout

fdd2498

Increase cart.js bundlewatch size

3da2520

Remove wrong comment

4a60a67

Remove unnecessary usage of useStoreCartItemQuantity

87214e3

Refactor layout so the product description can occupy more width

c575d54

Move paddings to the button so focus styles look better

7d4fd6e

Aljullu force-pushed the fix/checkout-cart-summary branch from 741c5ef to 7d4fd6e Compare March 13, 2020 14:30

Aljullu mentioned this pull request Dec 11, 2023

Merge the markup from atomic/blocks/product-elements/ with base/components/cart-checkout/ woocommerce/woocommerce#42680

Open

Aljullu merged commit 746e5b7 into master Mar 13, 2020

Aljullu deleted the fix/checkout-cart-summary branch March 13, 2020 15:49

Aljullu added the skip-changelog PRs that you don't want to appear in the changelog. label Mar 13, 2020

nerrad modified the milestones: Future Release, 2.6.0 Apr 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Order Summary card to Checkout sidebar #1959

Add Order Summary card to Checkout sidebar #1959

Aljullu commented Mar 12, 2020

Aljullu Mar 12, 2020

haszari Mar 12, 2020

haszari Mar 12, 2020

Aljullu Mar 13, 2020

haszari left a comment

haszari Mar 12, 2020

Aljullu Mar 13, 2020

haszari Mar 12, 2020

Aljullu Mar 13, 2020

haszari Mar 12, 2020

Aljullu Mar 13, 2020

haszari commented Mar 12, 2020

garymurray commented Mar 13, 2020 •

edited

Loading

Aljullu commented Mar 13, 2020

Add Order Summary card to Checkout sidebar #1959

Add Order Summary card to Checkout sidebar #1959

Conversation

Aljullu commented Mar 12, 2020

Screenshots

How to test the changes in this Pull Request:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haszari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haszari commented Mar 12, 2020

garymurray commented Mar 13, 2020 • edited Loading

Aljullu commented Mar 13, 2020

garymurray commented Mar 13, 2020 •

edited

Loading