Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Conversation

nielslange
Copy link
Member

Fixes #8858

In woocommerce/woocommerce#44503, @kmanijak suggested removing the Add to Cart block as that block is experimental, hasn't been touched for 3 years and as there's a newer block. Currently, the Cross-Sells Block is still using the Add to Cart block. This issue aims to replace with within the Cross-Sells Products block.

Screenshots

Before:

Screen Shot 2023-03-31 at 13 43 12
After:

Screen Shot 2023-03-31 at 13 41 45

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

Note
The affected E2E test can individually be triggered using the following command:

npm run test:e2e -- tests/e2e/specs/shopper/cart-checkout/cart.test.js

User Facing Testing

  1. Install and activate the Twenty Twenty-Three theme.
  2. Create a test page with the Cart block.
  3. Ensure that you have four products:
  • 2 x Simple Product
  • 1 x Grouped Product
  • 1 x Variable Product
  1. Open one of the Simple Products and define the other Simple Product, the Grouped Product and the Variable Product as Cross-sells products:

Screen Shot 2023-03-31 at 13 31 51

  1. Go to the frontend.
  2. Add the Simple Product from step 3. to the cart.
  3. Open the test page from step 1.
  4. Verify that the Cross-sell products, as defined in step 4., are visible in the cart.
  5. Verify that the buttons Select options, View products and Add to cart are visible.
  6. Verify that the buttons from the previous step show the same styles as the Proceed to Checkout button.
  7. Verify that clicking the Select options button opens the corresponding product page.
  8. Verify that clicking the View products button opens the corresponding product page.
  9. Verify that clicking the Add to cart button adds that Cross-sell product to the cart.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Update: Replace with within the Cross-Sells Products block.

@nielslange nielslange added type: enhancement The issue is a request for an enhancement. type: refactor The issue/PR is related to refactoring. block: cart Issues related to the cart block. category: tests block: cross-sells Issues related to the cross-sells block. labels Mar 31, 2023
@nielslange nielslange self-assigned this Mar 31, 2023
@woocommercebot woocommercebot requested review from a team and mikejolley and removed request for a team March 31, 2023 06:46
@github-actions
Copy link
Contributor

github-actions bot commented Mar 31, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8914.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 451
  • Total errors: 2212

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 31, 2023

Size Change: -8.51 kB (-1%)

Total Size: 1.06 MB

Filename Size Change
build/active-filters-wrapper-frontend.js 5.97 kB +1 B (0%)
build/active-filters.js 7.49 kB -3 B (0%)
build/all-products-frontend.js 11.8 kB +18 B (0%)
build/all-products.js 37.6 kB +112 B (0%)
build/all-reviews.js 7.66 kB +4 B (0%)
build/attribute-filter-wrapper-frontend.js 7.1 kB -2 B (0%)
build/attribute-filter.js 13.2 kB +4 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB +1 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 5.28 kB -4.44 kB (-46%) 🎉
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 kB -1 B (0%)
build/cart-blocks/cart-items-frontend.js 302 B +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB -5 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.06 kB -1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 653 B -2 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB +5 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB +1 B (0%)
build/cart-frontend.js 29.3 kB -34 B (0%)
build/cart.js 44.1 kB -4.21 kB (-9%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB -2 B (0%)
build/checkout-blocks/billing-address-frontend.js 4.18 kB +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB -3 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 274 B -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.24 kB +1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB +7 B (0%)
build/checkout-blocks/payment-frontend.js 8.39 kB -2 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.11 kB +2 B (0%)
build/checkout-blocks/shipping-address-frontend.js 4.14 kB +2 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.6 kB -2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB +1 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB -1 B (0%)
build/checkout-blocks/totals-frontend.js 310 B +1 B (0%)
build/checkout-frontend.js 30.9 kB -1 B (0%)
build/checkout.js 46 kB +12 B (0%)
build/customer-account.js 3.16 kB -1 B (0%)
build/featured-category.js 14 kB -2 B (0%)
build/featured-product.js 14.4 kB +1 B (0%)
build/filter-wrapper-frontend.js 14.1 kB +14 B (0%)
build/filter-wrapper.js 2.4 kB +5 B (0%)
build/handpicked-products.js 7.92 kB -1 B (0%)
build/legacy-template.js 5.57 kB +3 B (0%)
build/mini-cart-component-frontend.js 28.3 kB -1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 704 B -1 B (0%)
build/mini-cart-contents-block/title-frontend.js 367 B -1 B (0%)
build/mini-cart-contents.js 17.4 kB +7 B (0%)
build/mini-cart.js 4.49 kB +1 B (0%)
build/price-filter-frontend.js 13.9 kB -2 B (0%)
build/price-filter-wrapper-frontend.js 6.95 kB -1 B (0%)
build/price-filter.js 8.4 kB -4 B (0%)
build/product-add-to-cart-frontend.js 6.42 kB -4 B (0%)
build/product-best-sellers.js 8.26 kB -1 B (0%)
build/product-button-frontend.js 1.92 kB +3 B (0%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category.js 9.25 kB -5 B (0%)
build/product-image.js 177 B -1 B (-1%)
build/product-new.js 8.25 kB -4 B (0%)
build/product-on-sale.js 8.58 kB -2 B (0%)
build/product-price-frontend.js 2.08 kB +2 B (0%)
build/product-query.js 11 kB +5 B (0%)
build/product-results-count.js 1.65 kB -1 B (0%)
build/product-stock-indicator-frontend.js 1.01 kB +3 B (0%)
build/product-summary-frontend.js 1.29 kB +1 B (0%)
build/product-tag.js 8.74 kB +3 B (0%)
build/product-title-frontend.js 1.37 kB -1 B (0%)
build/product-top-rated.js 8.49 kB -4 B (0%)
build/products-by-attribute.js 9.58 kB -1 B (0%)
build/rating-filter-frontend.js 20.8 kB +1 B (0%)
build/rating-filter-wrapper-frontend.js 5.58 kB +1 B (0%)
build/rating-filter.js 6.99 kB +1 B (0%)
build/reviews-by-category.js 11.9 kB +3 B (0%)
build/reviews-by-product.js 13 kB +2 B (0%)
build/stock-filter-frontend.js 21 kB -3 B (0%)
build/stock-filter-wrapper-frontend.js 5.82 kB +1 B (0%)
build/stock-filter.js 7.71 kB +3 B (0%)
build/store-notices.js 1.69 kB +2 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 0 B -6.85 kB (removed) 🏆
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 0 B -19.4 kB (removed) 🏆
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 0 B -7.25 kB (removed) 🏆
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB +1 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB -6 B (0%)
build/wc-blocks-vendors.js 64.2 kB +6 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--96321c21-frontend.js 6.85 kB +6.85 kB (new file) 🆕
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB +19.4 kB (new file) 🆕
build/vendors--product-add-to-cart-frontend.js 7.25 kB +7.25 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/attribute-filter-frontend.js 22.4 kB
build/blocks-checkout.js 44 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment-frontend.js 718 B
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/cart-button-frontend.js 816 B
build/mini-cart-contents-block/checkout-button-frontend.js 818 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-frontend.js 2.02 kB
build/price-format.js 1.19 kB
build/product-add-to-cart.js 178 B
build/product-image-frontend.js 1.77 kB
build/product-rating-frontend.js 1.34 kB
build/product-sale-badge-frontend.js 977 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 453 B
build/product-title.js 178 B
build/reviews-frontend.js 7.11 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.79 kB
build/wc-blocks-editor-style.css 5.79 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 27.1 kB
build/wc-blocks-style.css 27.1 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@nielslange nielslange changed the base branch from trunk to add/global-style-for-cart-checkout March 31, 2023 07:11
…ace-add-to-cart-block-with-product-button-block
@mikejolley
Copy link
Member

Will you also be removing the block thats not in use, or is this used elsewhere?

@nielslange
Copy link
Member Author

nielslange commented Mar 31, 2023

Will you also be removing the block thats not in use, or is this used elsewhere?

To remove the "Add to Cart" block, @kmanijak created woocommerce/woocommerce#44503. I'd keep this separate from this PR, as it requires in-depth testing.

I also noticed that all E2E tests are failing currently. I briefly looked into this, but haven't had time to see what's causing this. What I noticed was that all E2E tests of the featured branch are also failing.

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change looks good to me but we should make sure it's not this causing e2e breakage. I noticed some visual bugs on trunk so it might be unrelated.

@github-actions github-actions bot added this to the 10.0.0 milestone Apr 3, 2023
…ace-add-to-cart-block-with-product-button-block
@nielslange
Copy link
Member Author

Change looks good to me but we should make sure it's not this causing e2e breakage. I noticed some visual bugs on trunk so it might be unrelated.

Thanks for your review, @mikejolley. It appears that the failing E2E tests were related to #8928. I just ran the failing E2E tests again, and all tests are passing now:

Screen Shot 2023-04-04 at 11 07 16

@nielslange nielslange merged commit fe2a744 into add/global-style-for-cart-checkout Apr 4, 2023
@nielslange nielslange deleted the update/GS-replace-add-to-cart-block-with-product-button-block branch April 4, 2023 04:08
@opr opr removed this from the 10.0.0 milestone Apr 10, 2023
tarunvijwani pushed a commit that referenced this pull request Apr 21, 2023
* Dummy commit to open a PR

* Revert the last change

* Ensure Checkout block supports the theme-level global styles for `Colors » Buttons` (#8844)

* Add GS support for button colors in Checkout block

* Sync button hover effect with GB

* Fix link margin/padding (#8908)

* Replace <AddToCartButton /> with <ProductButton /> (#8914)

* Add GS support for button typography in Checkout block (#8918)

* Ensure Checkout block supports the theme-level global styles for Typography » Buttons (#8892)

* Remove classname from cart image to avoid conflicts (#8898)

Co-authored-by: Niels Lange <[email protected]>

* Use consistent and semantically correct HTML elements in the Cart and Checkout blocks (#9065)

* Allow button height to adjust

* Ensure to display full width heading background

* Inherit font style and font weight for headings

* Inherit font style and font weight for textarea

* Inherit font family and font weight for buttons

---------

Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: Mike Jolley <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: cross-sells Issues related to the cross-sells block. type: enhancement The issue is a request for an enhancement. type: refactor The issue/PR is related to refactoring.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cross-Sells Products block: Replace Add to Cart block with Product Button block
3 participants