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

Make Products by category/tag/attribute fallback to the Product catalog template #7712

Merged
merged 24 commits into from Nov 24, 2022

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Nov 18, 2022

This PR aims to make the Products by Category, Products by Tag, and Products by Attribute templates fall back to the Product Catalog one.
That means that if neither the theme nor the user has customized one of those three templates, it will look like the Product Catalog one.

Fixes #7648

User Facing Testing

Pre-requisites for testing

  • Make sure you are on this branch on WC Core if the change is not yet on the latest version of the plugin.
  • Make sure you have at least one tag and some products tagged with it.
  • Make sure you have at least one Product Attribute with Enabled Archives and some products associated with it.
  • Make sure you have at least one category and some products on it.
  • Make sure you are using the "Twenty Twenty Two" theme (or a blocks theme).

Product by category/tag/attribute fall back to Product Catalog if not customized

  1. Make you have no customizations on any template on https://store.local/wp-admin/site-editor.php?postType=wp_template.
  2. Edit the Product Catalog template, add some customization and save.
  3. On the front end, go to /shop and make sure you see the customization you just did.
  4. On the front end, go also to a category, a tag, and an attribute page (like product-category/clothing/, /product-tag/music, color/red, depending on your store configuration)./
  5. Check that all 3 pages are using the Product Catalog template, meaning you see exactly the same customization you did on the Product Catalog.

Product by category/tag/attribute customizations take priority over Product Catalog ones

  1. Make you have no customizations on any template on https://store.local/wp-admin/site-editor.php?postType=wp_template.
  2. Edit the Product by Attribute template, add some customization and save.
  3. Go back, edit the Product Catalog template, add some customization and save.
  4. On the front end, go to a product attribute page and make sure you see the customization you just did to Product by Attribute.
  5. On the front end, go to /shop, to a category, and a tag page and check that you see the customization from Product Catalog.
  6. Clear all customizations and repeat for Product by Tag and Product by Category templates.

Product by category/tag/attribute fall back to Product Catalog from the theme

  1. Make you have no customizations on any template on https://store.local/wp-admin/site-editor.php?postType=wp_template.
  2. Add a file template called archive-product.html to your templates folder of your theme with some identifiable changes.
  3. On the front end, go to /shop and make sure you see the template you just added.
  4. On the front end, go also to a category, a tag, and an attribute page (like product-category/clothing/, /product-tag/music, color/red, depending on your store configuration).
  5. Check that all 3 pages are also using the Product Catalog template from the theme.

Product by category/tag/attribute from theme take priority over Product Catalog

  1. Make you have no customizations on any template on https://store.local/wp-admin/site-editor.php?postType=wp_template.
  2. Add a file template called archive-product.html to your templates folder of your theme with some identifiable changes.
  3. Add a file template called taxonomy-product_attribute.html to your templates folder of your theme with some identifiable changes.
  4. On the front end, go to a product attribute page and make sure it's using the taxonomy-product_attribute.html template.
  5. On the front end, go to /shop, to a category, and a tag page and check that they are using the archive-product.html.
  6. Repeat for Product by Tag (file taxonomy-product_tag.html) and Product by Category (file taxonomy-product_cat.html).

Test any other combination of file templates and customized templates in the db you can think of.

In general, the priority should be:

  • Custom Taxonomy template
  • Taxonomy template from the theme
  • Custom Product Catalog template
  • Product Catalog template from the theme
  • Product Catalog template from blocks

I made this table 👇 with all the possible combinations of theme and customized templates and the result template I think they should render (could be useful to make some more testing cases):
Screenshot 2022-11-21 at 11 56 13

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Make the 'Products by Category', 'Products by Tag', and 'Products by Attribute' templates to fallback to the 'Product Catalog' one.

@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2022

TypeScript Errors Report

Files with errors: 428
Total errors: 2063

🎉 🎉 This PR does not introduce new TS errors.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2022

Size Change: +15 B (0%)

Total Size: 971 kB

Filename Size Change
build/active-filters-frontend.js 7.74 kB -2 B (0%)
build/active-filters-wrapper-frontend.js 6.02 kB +3 B (0%)
build/all-products-frontend.js 11.3 kB -15 B (0%)
build/all-products.js 33.1 kB +4 B (0%)
build/all-reviews.js 7.79 kB +7 B (0%)
build/attribute-filter-frontend.js 22.6 kB +6 B (0%)
build/attribute-filter-wrapper-frontend.js 7.14 kB +12 B (0%)
build/attribute-filter.js 12.3 kB +5 B (0%)
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.48 kB -3 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 4.74 kB -4 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 kB +18 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 779 B +1 B (0%)
build/cart-blocks/cart-items-frontend.js 298 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB -3 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 781 B -2 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.72 kB -1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 5.99 kB -1 B (0%)
build/cart-frontend.js 46.2 kB -49 B (0%)
build/cart.js 46.1 kB +14 B (0%)
build/checkout-blocks/actions-frontend.js 1.77 kB -2 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.89 kB -5 B (0%)
build/checkout-blocks/contact-information-frontend.js 1.8 kB +27 B (+2%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB +3 B (0%)
build/checkout-blocks/fields-frontend.js 344 B +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB +1 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.89 kB +6 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB +3 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 6.04 kB -1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 436 B +1 B (0%)
build/checkout-blocks/payment-frontend.js 8.31 kB +14 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.01 kB -15 B (0%)
build/checkout-blocks/terms-frontend.js 1.64 kB +2 B (0%)
build/checkout-blocks/totals-frontend.js 324 B -1 B (0%)
build/checkout-frontend.js 48.3 kB -50 B (0%)
build/checkout.js 40.1 kB -27 B (0%)
build/featured-product.js 13.4 kB -5 B (0%)
build/filter-wrapper-frontend.js 13.8 kB +5 B (0%)
build/filter-wrapper.js 2.4 kB -2 B (0%)
build/handpicked-products.js 7.29 kB +3 B (0%)
build/legacy-template.js 2.85 kB -2 B (0%)
build/mini-cart-component-frontend.js 20 kB -7 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.95 kB -23 B (-1%)
build/mini-cart-contents-block/products-table-frontend.js 590 B -1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 289 B +1 B (0%)
build/mini-cart-contents.js 17.1 kB +4 B (0%)
build/mini-cart-frontend.js 1.76 kB -1 B (0%)
build/mini-cart.js 4.29 kB +1 B (0%)
build/price-filter-frontend.js 13.6 kB +9 B (0%)
build/price-filter-wrapper-frontend.js 7.02 kB +6 B (0%)
build/price-filter.js 8.38 kB +2 B (0%)
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 227 B +1 B (0%)
build/product-add-to-cart.js 8.37 kB -3 B (0%)
build/product-best-sellers.js 7.62 kB -2 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 432 B +1 B (0%)
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B -1 B (0%)
build/product-button-frontend.js 2.13 kB -1 B (0%)
build/product-button.js 3.82 kB -1 B (0%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category-list-frontend.js 1.13 kB -1 B (0%)
build/product-category.js 8.62 kB +3 B (0%)
build/product-image.js 3.93 kB -1 B (0%)
build/product-new.js 7.62 kB +1 B (0%)
build/product-on-sale.js 7.95 kB -5 B (0%)
build/product-price-frontend.js 2.15 kB -2 B (0%)
build/product-price.js 1.53 kB +3 B (0%)
build/product-query.js 3.22 kB -1 B (0%)
build/product-rating-frontend.js 1.44 kB -1 B (0%)
build/product-sale-badge-frontend.js 1.38 kB -2 B (0%)
build/product-sale-badge.js 816 B +5 B (+1%)
build/product-search.js 2.62 kB -3 B (0%)
build/product-sku-frontend.js 629 B -1 B (0%)
build/product-stock-indicator-frontend.js 1.26 kB -1 B (0%)
build/product-stock-indicator.js 646 B +1 B (0%)
build/product-summary-frontend.js 1.52 kB -2 B (0%)
build/product-tag-list.js 498 B +1 B (0%)
build/product-tag.js 8 kB +3 B (0%)
build/product-title-frontend.js 1.57 kB -3 B (0%)
build/product-title.js 3.3 kB -2 B (0%)
build/product-top-rated.js 7.87 kB +1 B (0%)
build/products-by-attribute.js 8.54 kB -1 B (0%)
build/rating-filter-frontend.js 7.16 kB +7 B (0%)
build/rating-filter-wrapper-frontend.js 5.41 kB +4 B (0%)
build/rating-filter.js 5.79 kB -4 B (0%)
build/reviews-by-category.js 11.2 kB +3 B (0%)
build/reviews-by-product.js 12.3 kB +2 B (0%)
build/reviews-frontend.js 7.02 kB +8 B (0%)
build/single-product-frontend.js 17.5 kB +40 B (0%)
build/single-product.js 10 kB -3 B (0%)
build/stock-filter-frontend.js 7.8 kB +4 B (0%)
build/stock-filter-wrapper-frontend.js 6.04 kB +6 B (0%)
build/stock-filter.js 6.7 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart-frontend.js 6.86 kB -2 B (0%)
build/vendors--attribute-filter-wrapper-frontend.js 8.2 kB -4 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB -5 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.54 kB -1 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB -2 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB -2 B (0%)
build/wc-blocks-data.js 18.7 kB +45 B (0%)
build/wc-blocks-vendors.js 62.4 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters.js 7.33 kB
build/blocks-checkout.js 27.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-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 319 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/checkout-blocks/billing-address-frontend.js 955 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/featured-category.js 13.2 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/title-frontend.js 368 B
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 1.46 kB
build/product-category-list.js 502 B
build/product-image-frontend.js 2.16 kB
build/product-rating.js 787 B
build/product-sku.js 377 B
build/product-summary.js 921 B
build/product-tag-list-frontend.js 1.12 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 2.92 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 24.2 kB
build/wc-blocks-style.css 24.2 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 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

compressed-size-action

@albarin albarin force-pushed the 7648/exploration-fallback-2 branch 7 times, most recently from 875ff18 to ab938be Compare November 18, 2022 15:11
@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2022

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.

@albarin albarin changed the title 7648/exploration fallback 2 Make Products by category/tag/attribute fallback to the Product catalog template Nov 18, 2022
@albarin albarin added the focus: template Related to API powering block template functionality in the Site Editor label Nov 18, 2022
@albarin albarin marked this pull request as ready for review November 21, 2022 10:59
@rubikuserbot rubikuserbot requested review from a team and Aljullu and removed request for a team November 21, 2022 11:01
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

This is testing great, thanks so much for writing those testing steps with so much detail!

I left a couple of questions inline in the code, but besides that, LGTM!

src/Utils/BlockTemplateUtils.php Outdated Show resolved Hide resolved
src/Utils/BlockTemplateUtils.php Outdated Show resolved Hide resolved
@github-actions github-actions bot added this to the 9.0.0 milestone Nov 22, 2022
@albarin
Copy link
Contributor Author

albarin commented Nov 23, 2022

@Aljullu I've made some more changes, in case you want to review:
There was an issue when editing the template directly from the specific URL (wp-admin/site-editor.php?postType=wp_template&postId=woocommerce%2Fwoocommerce%2F%2Farchive-product), instead of from the list of templates, it wasn't loading the fallback template.
I've fixed it with the pre_get_block_template hook.

add_filter( 'pre_get_block_template', array( $this, 'get_block_template_fallback' ), 10, 3 );

There are a few tests failing right now because of an issue that is being fixed here: WordPress/gutenberg#45992, once that is merged and we update the version of the e2e-test-utils they should pass.
They are passing locally when I test with the change.

Copy link
Contributor

@Aljullu Aljullu 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 investigating the failing tests, @albarin! I did a quick round of testing and everything seems to be working well, and code changes look good.

There are a few tests failing right now because of an issue that is being fixed here: WordPress/gutenberg#45992, once that is merged and we update the version of the e2e-test-utils they should pass.

Do you think we should disable those test until we can update e2e-test-utils and get them pass?

tests/e2e/specs/backend/site-editing-templates.test.js Outdated Show resolved Hide resolved
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: template Related to API powering block template functionality in the Site Editor
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make the Products by Category, Tag, and Attribute templates to fallback to the Product Catalog one
3 participants