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

Update Filter Products by Price block to work with PHP templates #6146

Merged
merged 12 commits into from
Apr 5, 2022

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Mar 28, 2022

Fixes #6135
Fixes #6139

Filter Products by Price block will only work with the PHP rendered Classic Template block if the filters are applied to the URL and the page is re-rendered. This behaviour happens with the Classic Themes such as Storefront.

Changes introduced:

  • Use asset_data_registry to pass data to the frontend when the PHP template is being used. This will let the JS components know how to behave when interacting with them as opposed to the All Products block.
  • Refactor the Filter Products by Price block to get filter params, append them to the URL and reload the page.

Manual Testing

  1. With a block theme, go to Appearance > Editor > Template > Product Catalog.
  2. Add the Filter Products by Price block above the product grid and set Filter Button attribute to true.
  3. Change the values of the price slider.
  4. Notice the page reloads and the list of products updates accordingly.

Kooha-03-28-2022-16-01-09b

Changelog

Allow adding the Filter Products by Price block to Product Catalog templates to filter products.

@Aljullu Aljullu added type: enhancement The issue is a request for an enhancement. block: filter by price Issues related to the Filter by Price block. focus: FSE Work related to prepare WooCommerce for FSE. labels Mar 28, 2022
@Aljullu Aljullu self-assigned this Mar 28, 2022
@rubikuserbot rubikuserbot requested review from a team and sunyatasattva and removed request for a team March 28, 2022 14:05
@github-actions
Copy link
Contributor

github-actions bot commented Mar 28, 2022

Size Change: +1.59 kB (0%)

Total Size: 874 kB

Filename Size Change
build/active-filters.js 6.96 kB -1 B (0%)
build/all-products-frontend.js 18.2 kB +1 B (0%)
build/all-products.js 34 kB -1 B (0%)
build/attribute-filter-frontend.js 16.9 kB +1 B (0%)
build/attribute-filter.js 13.1 kB +1 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.17 kB +2 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.2 kB +2 B (0%)
build/cart-blocks/cart-items-frontend.js 299 B +1 B (0%)
build/cart-blocks/cart-line-items-frontend.js 5.5 kB +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB +1 B (0%)
build/cart-blocks/empty-cart-frontend.js 344 B -2 B (-1%)
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.33 kB -3 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 428 B -1 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 433 B -1 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB -1 B (0%)
build/cart-frontend.js 45.7 kB +5 B (0%)
build/cart.js 44.5 kB +4 B (0%)
build/checkout-blocks/actions-frontend.js 1.41 kB +1 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB -2 B (0%)
build/checkout-blocks/billing-address-frontend.js 893 B -2 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.49 kB +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.65 kB -1 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.9 kB -1 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -1 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 433 B -1 B (0%)
build/checkout-blocks/payment-frontend.js 7.77 kB +1 B (0%)
build/checkout-blocks/shipping-address-frontend.js 997 B -2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.72 kB -3 B (0%)
build/checkout-frontend.js 48 kB -9 B (0%)
build/checkout.js 45.8 kB -1 B (0%)
build/featured-category.js 8.66 kB +4 B (0%)
build/featured-product.js 9.78 kB +1 B (0%)
build/handpicked-products.js 7.13 kB +3 B (0%)
build/legacy-template.js 2.19 kB +1 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js 326 B -3 B (-1%)
build/mini-cart-contents-block/filled-cart-frontend.js 229 B -1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 5.62 kB +2 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 5.36 kB +1 B (0%)
build/mini-cart-contents-block/title-frontend.js 367 B -1 B (0%)
build/mini-cart-contents.js 23.4 kB -2 B (0%)
build/price-filter-frontend.js 12.3 kB +225 B (+2%)
build/price-filter.js 8.72 kB +242 B (+3%)
build/product-add-to-cart-frontend.js 7 kB -3 B (0%)
build/product-add-to-cart.js 7.48 kB +3 B (0%)
build/product-best-sellers.js 7.4 kB +2 B (0%)
build/product-button-frontend.js 2.07 kB -2 B (0%)
build/product-button.js 2.29 kB -2 B (0%)
build/product-categories.js 3.16 kB +1 B (0%)
build/product-category-list-frontend.js 922 B -1 B (0%)
build/product-category-list.js 501 B +1 B (0%)
build/product-category.js 8.5 kB +2 B (0%)
build/product-image-frontend.js 1.84 kB +4 B (0%)
build/product-image.js 1.07 kB +1 B (0%)
build/product-new.js 7.68 kB +5 B (0%)
build/product-on-sale.js 7.99 kB -2 B (0%)
build/product-price-frontend.js 1.93 kB +1 B (0%)
build/product-rating-frontend.js 1.15 kB +1 B (0%)
build/product-rating.js 735 B -1 B (0%)
build/product-sale-badge.js 678 B -2 B (0%)
build/product-search.js 2.18 kB -2 B (0%)
build/product-stock-indicator-frontend.js 1.03 kB +1 B (0%)
build/product-tag.js 7.83 kB +2 B (0%)
build/products-by-attribute.js 8.41 kB +1 B (0%)
build/reviews-by-category.js 11.5 kB -2 B (0%)
build/reviews-by-product.js 12.6 kB +3 B (0%)
build/single-product-frontend.js 21.6 kB -1 B (0%)
build/single-product.js 10.1 kB +5 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB +1.15 kB (+6%) 🔍
build/vendors--mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 7.35 kB +1 B (0%)
build/wc-blocks-vendors.js 71.4 kB -30 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 5.92 kB
build/all-reviews.js 8.01 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/filled-cart-frontend.js 755 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.75 kB
build/cart-blocks/order-summary-discount-frontend.js 2.27 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 452 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.39 kB
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 604 B
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 325 B
build/mini-cart-component-frontend.js 16.5 kB
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 5.32 kB
build/mini-cart-contents-block/items-frontend.js 226 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 6.57 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.64 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-price.js 1.5 kB
build/product-sale-badge-frontend.js 1.09 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 381 B
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 916 B
build/product-tag-list.js 495 B
build/product-title-frontend.js 1.29 kB
build/product-title.js 911 B
build/product-top-rated.js 7.92 kB
build/reviews-frontend.js 6.98 kB
build/stock-filter-frontend.js 6.51 kB
build/stock-filter.js 6.57 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.74 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.83 kB
build/wc-blocks-editor-style-rtl.css 4.94 kB
build/wc-blocks-editor-style.css 4.94 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.js 2.62 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 tjcafferkey self-assigned this Mar 30, 2022
@tjcafferkey tjcafferkey changed the title [WIP] Update Filter Products by Price block to work with PHP templates Update Filter Products by Price block to work with PHP templates Mar 30, 2022
@tjcafferkey tjcafferkey marked this pull request as ready for review March 30, 2022 14:15
assets/js/blocks/price-filter/block.js Show resolved Hide resolved
assets/js/blocks/price-filter/block.js Outdated Show resolved Hide resolved
assets/js/blocks/price-filter/block.js Outdated Show resolved Hide resolved
assets/js/blocks/price-filter/block.js Outdated Show resolved Hide resolved
assets/js/blocks/price-filter/block.js Outdated Show resolved Hide resolved
assets/js/blocks/price-filter/block.js Outdated Show resolved Hide resolved
Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

Really minor thing (comment removal, the other is just a suggestion). Approving as to not block you when you fix it :)

Thanks for addressing my feedback so thoroughly!

assets/js/blocks/price-filter/block.js Outdated Show resolved Hide resolved
assets/js/blocks/price-filter/block.js Show resolved Hide resolved
@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
price-filter.js wp-url ⚠️

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

@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
price-filter.js wp-url ⚠️

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

@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
price-filter.js wp-url ⚠️

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

@tjcafferkey
Copy link
Contributor

Failing tests seem unrelated (checkout) and are a result of this PR being merged supposedly #6126 so going to go ahead and merge this.

@tjcafferkey tjcafferkey merged commit 78da195 into trunk Apr 5, 2022
@tjcafferkey tjcafferkey deleted the update/price-filter-php-filters branch April 5, 2022 10:52
tjcafferkey added a commit that referenced this pull request Apr 5, 2022
* Update Filter Products by Price block to work with PHP templates

* Reformat param formatting

* Add check for PHP template

* window guards and comments for context

* Add comment to page reload

* Addressed code review feedback

* Fix setMinPriceQuery and setMaxPriceQuery values

* Remove unnecessary snake_case comment and update newUrl to assign to window.location.href.

* package-lock.json update

Co-authored-by: tjcafferkey <[email protected]>
@tarhi-saad tarhi-saad added this to the 7.4.0 milestone Apr 11, 2022
@dinhtungdu
Copy link
Member

dinhtungdu commented Apr 12, 2022

@tjcafferkey Not sure if this is happening on your end, but the price filter doesn't work for me. The min/max prices in the URL are wrong after changing the price slider:

image

Note: I'm using latest trunk.

@Aljullu
Copy link
Contributor Author

Aljullu commented Apr 12, 2022

What are your currency settings, @dinhtungdu? You can find them in WooCommerce > Settings. It might be worth opening an issue and adding it to the #6134 epic.

@dinhtungdu
Copy link
Member

@Aljullu You're right. I'm setting Number of decimals to 0. This PR only works if the Number of decimals is set to 2. I will create an issue and a PR to fix it.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: filter by price Issues related to the Filter by Price block. focus: FSE Work related to prepare WooCommerce for FSE. type: enhancement The issue is a request for an enhancement.
Projects
None yet
5 participants