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

Migrate Cart and Checkout Pages to the Template Editor when using a FSE theme #9339

Conversation

mikejolley
Copy link
Member

Adds a mechanism to migrate pages to the template editor by:

  1. Taking default content for the template from the page
  2. Redirecting the edit page link to the template

Default content is generated from the page content and the page title. This means if you're using a shortcode, or a block, on your cart/checkout page, it will automatically copy across to the FSE template.

Fixes #9334

Testing

  1. Ensure you're running a FSE theme and have cart/checkout pages already setup. Before using this, edit the page content to add something custom/unique e.g. some text, so you can identify the content later.
  2. Check out this PR
  3. Go to Appearance > Editor > Templates and view the Cart and Checkout templates. They should contain your original page content (unless already customised, in which case you can reset customisations to see the page content)
  4. Go to Pages and edit a Checkout or Cart page. You should be taken to the editor instead.
  • Do not include in the Testing Notes

@mikejolley mikejolley added type: enhancement The issue is a request for an enhancement. skip-changelog PRs that you don't want to appear in the changelog. labels May 3, 2023
@mikejolley mikejolley requested a review from wavvves May 3, 2023 15:29
@woocommercebot woocommercebot requested a review from a team May 3, 2023 15:29
@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023

The release ZIP for this PR is accessible via:

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

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

assets/js/blocks/classic-template/constants.ts

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

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB
build/active-filters-wrapper-frontend.js 4.68 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 12.1 kB
build/all-products.js 38.9 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 23.2 kB
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB
build/attribute-filter-wrapper-frontend.js 4.64 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 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-frontend.js 5.53 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 717 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.39 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 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 654 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 273 B
build/cart-blocks/order-summary-heading-frontend.js 332 B
build/cart-blocks/order-summary-shipping-frontend.js 16.9 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.6 kB
build/cart.js 44.7 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.65 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.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 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 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.16 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 6.35 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 31.3 kB
build/checkout.js 46.3 kB
build/customer-account.js 3.18 kB
build/featured-category.js 14.4 kB
build/featured-product.js 14.7 kB
build/filter-wrapper-frontend.js 14.2 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8 kB
build/legacy-template.js 5.77 kB
build/mini-cart-component-frontend.js 29.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 864 B
build/mini-cart-contents-block/checkout-button-frontend.js 866 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.23 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-contents-block/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.08 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 729 B
build/mini-cart-contents-block/title-label-frontend.js 661 B
build/mini-cart-contents.js 17.9 kB
build/mini-cart-frontend.js 2.05 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-wrapper-frontend.js 5.78 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B
build/product-add-to-cart--product-rating.js 151 B
build/product-add-to-cart-frontend.js 6.5 kB
build/product-add-to-cart.js 8.88 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.18 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.35 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 4.31 kB
build/product-new.js 8.34 kB
build/product-on-sale.js 8.67 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.74 kB
build/product-query.js 11.4 kB
build/product-rating-frontend.js 1.45 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 974 B
build/product-sale-badge.js 801 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 578 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 771 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 922 B
build/product-tag.js 8.97 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.75 kB
build/product-top-rated.js 8.58 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 3.04 kB
build/rating-filter.js 7.01 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.8 kB
build/stock-filter-wrapper-frontend.js 3.31 kB
build/stock-filter.js 7.73 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.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 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.58 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--product-add-to-cart-frontend.js 7.25 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 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.75 kB
build/wc-blocks-style-rtl.css 27.7 kB
build/wc-blocks-style.css 27.7 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65.2 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 30.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@mikejolley mikejolley self-assigned this May 5, 2023
@@ -13,8 +12,14 @@ class CartTemplate {

/**
* Constructor.
*
* Templates require FSE theme support, so this will only init if a FSE theme is active.
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's use the term "Block theme" as it is the "official term" now. WP community is moving away from "FSE theme" (or FSE anything for that matter)

Copy link
Contributor

@nerrad nerrad left a comment

Choose a reason for hiding this comment

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

While having the redirects is good to catch things like bookmarked items, or links added in ways we might forget, I think we should also consider filtering the page list table to remove the pages from any display.

That could be done in a followup though.

@mikejolley
Copy link
Member Author

@nerrad one thing it does catch is the "edit page" link in the admin toolbar. So I agree it might be worth having both. Although...if we hide it, the user won't be able to remove that page manually. New users won't be affected if we find a way to prevent page creation on install.

@nerrad
Copy link
Contributor

nerrad commented May 5, 2023

Although...if we hide it, the user won't be able to remove that page manually.

Well, I think we need to keep the page in the short term in case the user switches back to a classic theme... which is also a scenario we might need to account for in terms of behaviour.

The primary value I see for hiding the page from the list table is to reduce confusion when people visit there as the entry point to view/edit their pages. While the redirect mitigates that confusion, the quick edit functionality is still there.

Copy link
Contributor

@wavvves wavvves left a comment

Choose a reason for hiding this comment

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

Just wow, this is great 🤩

@wavvves wavvves merged commit 55a80ed into add/9288_cart-checkout-order-received_fse_templates May 5, 2023
@wavvves wavvves deleted the add/page-migration branch May 5, 2023 12:17
mikejolley added a commit that referenced this pull request Jun 20, 2023
…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 <[email protected]>
mikejolley added a commit that referenced this pull request Jun 26, 2023
…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 <[email protected]>
mikejolley added a commit that referenced this pull request Jun 28, 2023
…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 <[email protected]>
wavvves added a commit that referenced this pull request Jun 29, 2023
* WIP: dirty attempt to dry run Cart & Checkout templates

* Added Cart and Checkout to the template hierarchies

* Merge branch 'trunk' into poc/cart_and_checkout_fse_templates

* Updated cart & Checkout templates

* Order Received FSE template (#8937)

* Order Received template bootstrap

* typo

* WIP: new block

* add logic here

* Order received classic template

* reverted constants.ts

* Added the post title (buggy)

* Corrected page title

* Updated constants.ts

* Fixed template typo

* removed placeholder for order received block

* add order-received template description

* updated placeholder description

* Formatting fixes

* Template description.

* replaced hardcoded string with OrderReceivedTemplate::SLUG

---------

Co-authored-by: Luigi <[email protected]>

* Code formatting (#8350)

* Code formatting

* page_template_hierarchy priority to 1 (#9323)

Co-authored-by: Paulo Arromba <[email protected]>

* Migrate Cart and Checkout Pages to the Template Editor when using a FSE 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 <[email protected]>

* Removed header and footer from checkout template. (#9378)

* Removed header and footer from checkout template.

* Removed header and footer from checkout template migration

* Permalink solution for the checkout endpoint/template (#9406)

* 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 <[email protected]>

* Migrate pages to templates once (#9488)

* 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 <[email protected]>

* Include a notice to redirect user to template editor (#9508)

* Template Placeholder Design for the Order Received Template (#9602)

* 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 <[email protected]>

* Add simplified header on checkout template (#9607)

* Added simplified header on checkout template

* Moved simplified header to template part

* updated constants.ts

* added template part to checkout.html

* Add missing translation

* frontpage_template_hierarchy no longer needed

* Allow plugin based template parts (#9667)

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

* Synced templates on blockified folder

* Add blockified order-received.html

* removed WooCommerce prefix

* Refactor/rebrand order received template to order confirmation (#9734)

* rebrand order received to order confirmation

* updated descriptions for templates

* updated descriptions for order confirmation placeholder

* Resolve merge conflict

* Resolve merge conflicts

* Resolve more merge conflicts after rebase

* Fix formatting

* Use patterns for localisation (#9883)

* e2e tests for cart and checkout templates (#9939)

* 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 <[email protected]>

* Skip flakey test

---------

Co-authored-by: Luigi <[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
skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants