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

Fallback to customized Product Archive template if no better Category or Tag templates are present #5563

Closed

Conversation

sunyatasattva
Copy link
Contributor

If the user has customized the archive-product template and there is no better choice for the Category
or Tag, then the custom Product Archive is chosen.

The priority order is the following:

  1. Custom Taxonomy Template
  2. Taxonomy Template from the Theme
  3. Custom Product Archive Template
  4. Product Archive Template from the Theme

Fixes woocommerce/woocommerce#42656

P.S. Not sure about the labels here.

Screenshots

Screen Shot 2022-01-13 at 23 38 57

Testing

Manual Testing

How to test the changes in this Pull Request:

  1. Enable a theme with an archive-product.html but no taxonomy templates (or add your own to the theme).
  2. Go to Appearance → Editor → Browse All Templates.
  3. Notice that the Category and Tag templates are also available from the theme (previous behaviour).
  4. Customize archive-product and save.
  5. Notice that the Category and Tag templates now also appear as customized and are applied the same edits.

Note: Even though they will have the customized blue dot next to them signaling to the user that some edit has been implemented, they will not appear at the top of the list because they have not received any direct customization. Because of the priority order above (template from theme takes prio over custom product archive), doing otherwise would make things messy. However, happy to talk about this in detail if required.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above

Changelog

Customizations to the theme Product Archive block template are applied to Category and Tag templates is no better alternative is available

@sunyatasattva sunyatasattva added the focus: template Related to API powering block template functionality in the Site Editor label Jan 13, 2022
@sunyatasattva sunyatasattva self-assigned this Jan 13, 2022
@rubikuserbot rubikuserbot requested a review from a team January 13, 2022 22:46
@github-actions
Copy link
Contributor

github-actions bot commented Jan 13, 2022

Size Change: 0 B

Total Size: 868 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 5.92 kB
build/active-filters.js 6.59 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.4 kB
build/all-reviews.js 7.78 kB
build/attribute-filter-frontend.js 17.6 kB
build/attribute-filter.js 13.5 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.24 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 432 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.81 kB
build/cart-blocks/order-summary-discount-frontend.js 2.31 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.34 kB
build/cart-blocks/order-summary-shipping-frontend.js 429 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 45.5 kB
build/cart.js 44.3 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 892 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.54 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.96 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.43 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 7.84 kB
build/checkout-blocks/shipping-address-frontend.js 996 B
build/checkout-blocks/shipping-methods-frontend.js 4.72 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout-frontend.js 47.7 kB
build/checkout.js 45.6 kB
build/featured-category.js 12.1 kB
build/featured-product.js 10.6 kB
build/handpicked-products.js 7.11 kB
build/legacy-template.js 2.19 kB
build/mini-cart-component-frontend.js 16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js 326 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 5.64 kB
build/mini-cart-contents-block/items-frontend.js 225 B
build/mini-cart-contents-block/products-table-frontend.js 288 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-contents.js 22.7 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.1 kB
build/price-filter-frontend.js 12.5 kB
build/price-filter.js 8.49 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart--product-button.js 565 B
build/product-add-to-cart-frontend.js 6.96 kB
build/product-add-to-cart.js 6.64 kB
build/product-best-sellers.js 7.38 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button-frontend.js 1.84 kB
build/product-button.js 1.08 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 925 B
build/product-category-list.js 502 B
build/product-category.js 8.49 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.07 kB
build/product-new.js 7.68 kB
build/product-on-sale.js 7.99 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 730 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 680 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 918 B
build/product-tag-list-frontend.js 919 B
build/product-tag-list.js 496 B
build/product-tag.js 7.81 kB
build/product-title-frontend.js 1.3 kB
build/product-title.js 910 B
build/product-top-rated.js 7.91 kB
build/products-by-attribute.js 8.39 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.2 kB
build/reviews-frontend.js 7 kB
build/single-product-frontend.js 21.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.87 kB
build/stock-filter.js 6.92 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-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/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.75 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 4.92 kB
build/wc-blocks-editor-style.css 4.92 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22 kB
build/wc-blocks-style.css 22 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 71.4 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.61 kB

compressed-size-action

@tjcafferkey
Copy link
Contributor

Few things to note:

  • If I enable a theme that does not have the archive-product.html template and gets them provided from Woo Blocks. The templates screen is missing Product Category and Product Tag templates.
  • Customizations of the themes archive-product.html do not render on the frontend for product category/tag pages.
  • Customizations of the themes archive-product.html template do not appear in the Site Editor for product category/tag templates.

Not sure if I'm doing anything wrong here?

@sunyatasattva
Copy link
Contributor Author

@tjcafferkey I think I addressed all the concerns and I have tested more extensively. Now all the three cases you pointed out should work. Thanks for noticing them 🤦‍♀️

@tjcafferkey
Copy link
Contributor

When I created a archive-product.html file in my theme, and then customized it. No products were rendering on the frontend for neither the shop archive, or tags/categories.

@sunyatasattva
Copy link
Contributor Author

@tjcafferkey Could you elaborate on what you do exactly? Are you sure that in your customizations you have the legacy block activated?

I tried to reproduce in several ways, even completely deactivating and cloning from scratch. Here is a video of the flow working for me:

pr-5563-demo.mov

Perhaps I'm getting something wrong?

@tjcafferkey
Copy link
Contributor

Perhaps I'm getting something wrong?

I've tried to replicate again but can't so it looks like it will have been an issue on my end.

However I've done some more testing and there a number of bugs which I've found, please see my recording. Happy to go through this with you on a call if needed, looks like this particular issue might be a little more complex than we first thought.

fix-5520.mp4

@sunyatasattva
Copy link
Contributor Author

1:48 I was like: 😱 Whaat?

Thanks for the extensive testing, @tjcafferkey. I'm going to be back to the drawing board.

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 21, 2022
@sunyatasattva sunyatasattva removed the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 22, 2022
@sunyatasattva
Copy link
Contributor Author

We had postponed looking into this and its complex behaviours because we decided to go on with E2E tests and make sure such random edge cases could not happen as we focus on this. Perhaps it's time for me to pick this up again :)

@tjcafferkey tjcafferkey removed their request for review April 1, 2022 09:41
… or Tag templates are present

If the user has customized the `archive-product` template and there is no better choice for the Category
or Tag, then the custom Product Archive is chosen.

The priority order is the following:

1. Custom Taxonomy Template
2. Taxonomy Template from the Theme
3. Custom Product Archive Template
4. Product Archive Template from the Theme

Fixes #5520
This is because we want to use the mock theme as
a testbed for template override logic.
@sunyatasattva sunyatasattva force-pushed the fix/5520-fallback-to-custom-archive-template branch from 39d209a to b971de3 Compare April 22, 2022 00:26
@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Jun 21, 2022
@github-actions github-actions bot closed this Jul 2, 2022
@nielslange nielslange deleted the fix/5520-fallback-to-custom-archive-template branch April 19, 2023 23:47
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 status: stale Stale issues and PRs have had no updates for 60 days.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Edits to Product Archive template are not visible in the Product Category and Product Tag pages
2 participants