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

Add Cart/Checkout/Order-Received Templates #9301

Merged
merged 30 commits into from
Jun 29, 2023

Conversation

wavvves
Copy link
Contributor

@wavvves wavvves commented May 1, 2023

This PR aims at introducing Cart, Checkout and Order Confirmation templates.
We implement changes for Cart and Checkout in permalink management, that are now handled via WooCommerce > Settings > Advanced replacing the previous system based on selecting handling pages. We also migrate the current contents for Cart and Checkout that enables a user to maintain his checkout flow experience when enabling a blocks theme. The default Checkout template uses a new template part, Checkout Header, offering a more distraction free view.
For Order Confirmation we will render the defined classic template as part of the view, therefore implementing any actions and filters present on it, making it compatible to any extensions that may make use of them. As part of the phased approach, we will present a placeholder on the editor. The inner elements will not be editable for now.

Fixes #9288
Fixes #9153
Fixes #9165

Replaces #8350 and #8937

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

image

Testing

Automated Tests

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

User Facing Testing

  1. On a new WooCommerce installation take note of the contents for Cart and Checkout pages
  2. Enable a blocks theme eg. Twenty Twenty Three
  3. Go to Appearance > Editor > Template Parts and verify the existence of Checkout Header template part
  4. Verify that you can edit, save, and changes persist
  5. Go to Appearance > Editor > Templates and verify the existence of Cart, Checkout and Order Confirmation templates
  6. Verify for Cart and Checkout templates that the content matches the one noted in step 1.
  7. Go to Appearance > Editor > Templates > Manage all templates and verify the Cart and Checkout show "Customized"
  8. Edit said templates, save, and verify that changes persist.
  9. Make a test purchase. Verify that the views for Cart, Checkout and Order Confirmation contain the new templates
  10. Clear the "Customized" state for Checkout and make a new test order. Verify that no footer is present, and the header is the Checkout Header template part
  11. Go to WooCommerce > Settings > Advanced and verify that for Cart and Checkout we have a freeform endpoint textbox, as opposed to the old page selection dropdown
  12. Edit and save them, and verify that a new checkout flow displays Cart and Checkout on the newly chosen endpoints
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Added new Cart, Checkout, Order Confirmation templates and Checkout Header template part to the Site Editor

@wavvves wavvves added block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. focus: FSE Work related to prepare WooCommerce for FSE. labels May 1, 2023
@wavvves wavvves self-assigned this May 1, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 1, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9301.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: 463
  • Total errors: 2238

⚠️ ⚠️ This PR introduces new TS errors on 3 files:

assets/js/blocks/classic-template/index.tsx

assets/js/blocks/classic-template/test/utils.ts

assets/js/editor-components/template-notice/index.tsx

comments-aggregator

@wavvves wavvves changed the title WIP: Add Cart/Checkout/Order Received FSE Templates WIP: Add Cart/Checkout/Order-Received FSE Templates May 1, 2023
@wavvves wavvves added needs: tests The issue/PR needs tests before it can move forward. focus: template Related to API powering block template functionality in the Site Editor labels May 1, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 1, 2023

Size Change: +2.69 kB (0%)

Total Size: 1.18 MB

Filename Size Change
build/active-filters.js 7.48 kB -5 B (0%)
build/all-products.js 40.3 kB -7 B (0%)
build/all-reviews.js 7.86 kB -4 B (0%)
build/attribute-filter.js 13.3 kB -7 B (0%)
build/breadcrumbs.js 2.13 kB +2 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.48 kB -99 B (-2%)
build/cart-frontend.js 29.9 kB +1 B (0%)
build/cart.js 45.3 kB +239 B (+1%)
build/checkout.js 47.9 kB +315 B (+1%)
build/customer-account.js 3.19 kB +1 B (0%)
build/featured-category.js 15.1 kB -1 B (0%)
build/featured-product.js 15.3 kB +2 B (0%)
build/filter-wrapper.js 2.4 kB +2 B (0%)
build/handpicked-products.js 8.05 kB +4 B (0%)
build/legacy-template.js 8.91 kB +2.09 kB (+31%) 🚨
build/mini-cart-component-frontend.js 30.7 kB -29 B (0%)
build/mini-cart-contents.js 18.1 kB -97 B (-1%)
build/mini-cart.js 5.93 kB -4 B (0%)
build/price-filter.js 8.57 kB +3 B (0%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 271 B -1 B (0%)
build/product-add-to-cart.js 8.83 kB -4 B (0%)
build/product-best-sellers.js 8.36 kB +1 B (0%)
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 953 B -1 B (0%)
build/product-categories.js 2.72 kB +2 B (0%)
build/product-category.js 9.37 kB +3 B (0%)
build/product-new.js 8.65 kB -3 B (0%)
build/product-on-sale.js 8.65 kB +3 B (0%)
build/product-price.js 1.69 kB +2 B (0%)
build/product-query.js 11.9 kB +1 B (0%)
build/product-results-count.js 1.66 kB +3 B (0%)
build/product-search.js 2.63 kB +2 B (0%)
build/product-sku.js 536 B +1 B (0%)
build/product-stock-indicator.js 731 B +1 B (0%)
build/product-summary.js 1.01 kB -1 B (0%)
build/product-tag.js 9 kB -2 B (0%)
build/product-template.js 3.34 kB +2 B (0%)
build/product-title.js 3.65 kB -3 B (0%)
build/product-top-rated.js 8.91 kB +1 B (0%)
build/products-by-attribute.js 9.75 kB -2 B (0%)
build/rating-filter.js 6.94 kB -2 B (0%)
build/reviews-by-category.js 12.1 kB +3 B (0%)
build/reviews-by-product.js 13.3 kB -2 B (0%)
build/single-product.js 11.1 kB -10 B (0%)
build/stock-filter.js 7.67 kB -1 B (0%)
build/wc-blocks-editor-style-rtl.css 6.35 kB +132 B (+2%)
build/wc-blocks-editor-style.css 6.34 kB +131 B (+2%)
build/wc-blocks-vendors.js 65.1 kB -7 B (0%)
build/wc-blocks.js 3.74 kB +31 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.64 kB
build/active-filters-wrapper-frontend.js 7.58 kB
build/all-products-frontend.js 12.2 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-wrapper-frontend.js 7.73 kB
build/blocks-checkout.js 35.1 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.78 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 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 334 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 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-cart-items-frontend.js 3.76 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-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 9.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 31.8 kB
build/filter-wrapper-frontend.js 14.3 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 587 B
build/mini-cart-contents-block/shopping-button-frontend.js 531 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-frontend.js 2.84 kB
build/price-filter-frontend.js 14.7 kB
build/price-filter-wrapper-frontend.js 6.79 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.52 kB
build/product-button-frontend.js 2.67 kB
build/product-button.js 3.97 kB
build/product-collection.js 12.3 kB
build/product-image-frontend.js 2.63 kB
build/product-image.js 4.14 kB
build/product-price-frontend.js 231 B
build/product-rating-frontend.js 2.35 kB
build/product-rating.js 1.04 kB
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge.js 665 B
build/product-sku-frontend.js 1.85 kB
build/product-stock-indicator-frontend.js 2.04 kB
build/product-summary-frontend.js 2.26 kB
build/product-title-frontend.js 2.22 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 6.25 kB
build/reviews-frontend.js 7.17 kB
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-wrapper-frontend.js 6.5 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.83 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 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.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 28 kB
build/wc-blocks-style.css 27.9 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-interactivity.js 10.4 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 30.4 kB

compressed-size-action

This was linked to issues May 1, 2023
@wavvves wavvves changed the title WIP: Add Cart/Checkout/Order-Received FSE Templates WIP: Add Cart/Checkout/Order-Received Templates May 5, 2023
@wavvves wavvves marked this pull request as ready for review May 30, 2023 14:16
@woocommercebot woocommercebot requested review from a team and mikejolley and removed request for a team May 30, 2023 14:16
@wavvves wavvves changed the title WIP: Add Cart/Checkout/Order-Received Templates Add Cart/Checkout/Order-Received Templates May 30, 2023
assets/js/blocks/classic-template/index.tsx Outdated Show resolved Hide resolved
assets/js/blocks/classic-template/order-received.tsx Outdated Show resolved Hide resolved
assets/js/blocks/classic-template/order-received.tsx Outdated Show resolved Hide resolved
src/BlockTypes/ClassicTemplate.php Show resolved Hide resolved
src/BlockTypes/ClassicTemplate.php Show resolved Hide resolved
src/Templates/AbstractPageTemplate.php Outdated Show resolved Hide resolved
templates/templates/blockified/cart.html Outdated Show resolved Hide resolved
templates/templates/cart.html Outdated Show resolved Hide resolved
@wavvves wavvves requested review from nielslange and tarhi-saad June 16, 2023 14:02
@mikejolley mikejolley force-pushed the add/9288_cart-checkout-order-received_fse_templates branch 2 times, most recently from 43b9f6f to 7592eec Compare June 20, 2023 13:17
@mikejolley mikejolley dismissed their stale review June 20, 2023 14:08

Changes resolved.

Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

Thanks for working on this, @wavvves and @mikejolley. The changes work as expected on my end.

mikejolley and others added 21 commits June 28, 2023 13:28
…SE theme (#9339)

* Introduce woocommerce_blocks_template_content hook

* Migrate cart and checkout page content to the template editor

* Add redirection from edit page to edit template

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Removed header and footer from checkout template.

* Removed header and footer from checkout template migration
* Checkout endpoint work

* Move setting field to util

* Include link to edit the template

* Remove todo

* Refactor checkout templates to share logic (#9411)

* Sync endpoints with pages (#9426)

* Switch to page syncing

* Update settings descriptions

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Migrate content on init, once

* Skip migration if page does not exist

* Put back HTML for header and footer parts

* Fix page redirect due to wrong ID

* fix loading template part

* Removed unnecessary var

* update cart and checkout html templates

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Load frontend styles in editor iframe

* Update placeholder to include skeleton and updated icons

* Update classic template configs

* 1px border for .wp-block-woocommerce-classic-template__placeholder-copy

* Show copy on focus

* Sample data

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Added simplified header on checkout template

* Moved simplified header to template part

* updated constants.ts

* added template part to checkout.html
* rebrand order received to order confirmation

* updated descriptions for templates

* updated descriptions for order confirmation placeholder
* Merge branch 'trunk' into poc/cart_and_checkout_fse_templates

* Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates

* Resolve merge conflicts

* Add e2e for permalink settings

* Test that templates exist

* Add test to check that templates can be edited

* Add tests to confirm templates can be edited

* Ensure cart has contents before running tests on frontend views

* Commend out problem test

* Make sure search has multiple results

* Remove useThrottle - bad rebase

* Revert changes to docs after rebase

* Revert function call for noReviewsPlaceholder

* Bad rebase

* Reverts

* Remove revertTemplate

* Spacing

* Wait for networkidle after navigation

* Always wait for network

* Use button roles in site editor

* More specific button locator

* Update option comparison

* Fix template content

* Disable failing tests

* Disable failing classic template tests

* Use enterEditMode

* More enterEditMode usage

* enterEditMode

* Use test.skip

* More robust selectors

* Alt iframe selector

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
@mikejolley mikejolley force-pushed the add/9288_cart-checkout-order-received_fse_templates branch from 6207faf to 8881473 Compare June 28, 2023 12:32
@wavvves wavvves merged commit 17e4481 into trunk Jun 29, 2023
@wavvves wavvves deleted the add/9288_cart-checkout-order-received_fse_templates branch June 29, 2023 13:41
@opr opr added the type: enhancement The issue is a request for an enhancement. label Jul 4, 2023
@nielslange nielslange mentioned this pull request Jul 6, 2023
5 tasks
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: checkout Issues related to the checkout block. focus: FSE Work related to prepare WooCommerce for FSE. focus: template Related to API powering block template functionality in the Site Editor needs: tests The issue/PR needs tests before it can move forward. type: enhancement The issue is a request for an enhancement.
Projects
None yet
9 participants