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

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Sep 15, 2022

This PR adds support for the Filter By Price block.

The code is written to be easily extendible and adding easily the support to other filters and other variations (frontend side/editor side).

#6790

Screenshots

Screen Capture on 2022-09-15 at 14-26-59

Testing

Automated Tests

User Facing Testing

  1. Create a new post/page and add the Product Query block and the Filter By Price block.
  2. On the front-end side, apply some range of price and be sure that the filters are applied correctly.
  3. Edit the post/page and add the Product Query block and enable "Show only products on sale" option.
  4. On the front-end side, apply some range of price and be sure that the filters are applied correctly.
  5. Edit the post/page and add a Query Loop block.
  6. On the front-end side, apply some range of price, be sure that the filters are applied correctly and the Query Loop works correctly (continue to show posts).
  7. Do the same steps (1-6), but instead add in a post/page, add the blocks in an FSE template (for example Product Catalog template).

Note
During your test, pay attention to the pagination too.

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

N/A

@gigitux gigitux added type: enhancement The issue is a request for an enhancement. skip-changelog PRs that you don't want to appear in the changelog. block-type: product-query Issues related to/affecting all product-query variations. labels Sep 15, 2022
@gigitux gigitux self-assigned this Sep 15, 2022
@rubikuserbot rubikuserbot requested review from a team and Aljullu and removed request for a team September 15, 2022 14:14
@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-7162.zip

@gigitux gigitux force-pushed the add/price_filter_support branch from 8839d75 to 7818f5d Compare September 15, 2022 14:18
@github-actions
Copy link
Contributor

github-actions bot commented Sep 15, 2022

Size Change: 0 B

Total Size: 903 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.62 kB
build/active-filters.js 8.27 kB
build/all-products-frontend.js 26.4 kB
build/all-products.js 33.6 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.3 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 17.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 252 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.63 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.66 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.12 kB
build/cart-blocks/cart-express-payment-frontend.js 801 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.26 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
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 347 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
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-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.73 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 432 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 50.4 kB
build/cart.js 46.4 kB
build/checkout-blocks/actions-frontend.js 1.76 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.94 kB
build/checkout-blocks/billing-address-frontend.js 927 B
build/checkout-blocks/contact-information-frontend.js 2.99 kB
build/checkout-blocks/express-payment-frontend.js 1.18 kB
build/checkout-blocks/fields-frontend.js 342 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.88 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 604 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.89 kB
build/checkout-blocks/shipping-address-frontend.js 1.06 kB
build/checkout-blocks/shipping-methods-frontend.js 4.98 kB
build/checkout-blocks/terms-frontend.js 1.62 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 52.5 kB
build/checkout.js 40.1 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.29 kB
build/legacy-template.js 2.84 kB
build/mini-cart-component-frontend.js 16.8 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/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 592 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 4.57 kB
build/price-filter-frontend.js 13.4 kB
build/price-filter.js 9.34 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 226 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart-frontend.js 1.24 kB
build/product-add-to-cart.js 6.48 kB
build/product-best-sellers.js 7.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 432 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 1.88 kB
build/product-button.js 1.58 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 878 B
build/product-category-list.js 502 B
build/product-category.js 8.61 kB
build/product-image-frontend.js 1.91 kB
build/product-image.js 1.61 kB
build/product-new.js 7.62 kB
build/product-on-sale.js 7.94 kB
build/product-price-frontend.js 1.91 kB
build/product-price.js 1.53 kB
build/product-query.js 649 B
build/product-rating-frontend.js 1.18 kB
build/product-rating.js 772 B
build/product-sale-badge-frontend.js 1.14 kB
build/product-sale-badge.js 817 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 381 B
build/product-sku.js 379 B
build/product-stock-indicator-frontend.js 993 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 874 B
build/product-tag-list.js 497 B
build/product-tag.js 7.99 kB
build/product-title-frontend.js 1.33 kB
build/product-title.js 936 B
build/product-top-rated.js 7.86 kB
build/products-by-attribute.js 8.53 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 29.3 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.62 kB
build/stock-filter.js 7.53 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--04fe80d1-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 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.85 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/wc-blocks-data.js 15.9 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 932 B
build/wc-blocks-registry.js 2.79 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24 kB
build/wc-blocks-style.css 23.9 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62 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.6 kB

compressed-size-action

@gigitux gigitux force-pushed the add/price_filter_support branch from 7818f5d to db1030e Compare September 15, 2022 14:24
Product Query - Add support for the Filter By Price Block
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.

That's really cool. 🤩 Really exciting to see that this works in parallel to the On sale filter, the potential is huge! Good job! 👏

I found a strange behavior. When no products match the price filter, all products are shown (ie, setting the price filter to 33-34):

imatge

I also left a couple of inline comments, but they are quite minor.

Oh, and can you set the sprint of this PR? 🙏

@@ -79,24 +82,39 @@ public function get_query_by_attributes( $query ) {
'post_status' => 'publish',
'posts_per_page' => $query['posts_per_page'],
'orderby' => $query['orderby'],
'orderby' => $query['orderby'],
Copy link
Contributor

Choose a reason for hiding this comment

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

This line is duplicated, is that a typo?

Comment on lines 166 to 168
return array(
'on_sale' => ( ! isset( $variation_props['attributes']['query']['onSale'] ) || true !== $variation_props['attributes']['query']['onSale'] ) ? array() : $this->get_on_sale_products_query(),
);
Copy link
Contributor

Choose a reason for hiding this comment

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

I know it's not introduced in this PR, but I wonder if we could extract this check into its own variable to make the code easier to read, something like:

Suggested change
return array(
'on_sale' => ( ! isset( $variation_props['attributes']['query']['onSale'] ) || true !== $variation_props['attributes']['query']['onSale'] ) ? array() : $this->get_on_sale_products_query(),
);
$on_sale = ! isset( $variation_props['attributes']['query']['onSale'] ) || true !== $variation_props['attributes']['query']['onSale'];
return array(
'on_sale' => $on_sale ? array() : $this->get_on_sale_products_query(),
);

@gigitux gigitux force-pushed the add/price_filter_support branch from 30445ec to 81c0f5c Compare September 16, 2022 15:50
@gigitux
Copy link
Contributor Author

gigitux commented Sep 16, 2022

Thanks for the review and for testing the PR. I addressed all your feedback! b243528

The relation in the query was wrong. It was OR, but the right value is AND.

I noticed this strange behavior.
With this range 33-34 and when the Product Query block shows all products, the result matches with WC Core

image

above WC Core

With the same range, but with the Product Query block that shows only on-sale products, the result doesn't match

image

Exploration

It seems that it isn't easy to find the grouped products on sale with the WP_Query class. With e55a41d I have tried a different approach, and it works! The problem that I see, is that we do two queries to the database, but it seems that the function
wc_get_product_ids_on_sale() caches the results, so, in the end, it could be more performant.

What do you think?

@gigitux gigitux force-pushed the add/price_filter_support branch from 81c0f5c to b243528 Compare September 16, 2022 15:54
@gigitux gigitux requested a review from Aljullu September 16, 2022 16:59
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 updating this PR, @gigitux! I'm facing some issues with the last changes, though. I left some inline comments below. 👇

Comment on lines +183 to +184
$max_price_query,
$min_price_query,
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we check that $max_price_query and $min_price_query are not an empty array, here? Otherwise we end up with queries in this form:

    [meta_query] => Array
        (
            [relation] => AND
            [0] => Array
                (
                )

            [1] => Array
                (
                )

        )

(I have no idea if that's an issue, though, so feel free to ignore this comment if you think that's ok)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

*/
private function get_on_sale_products_query() {
return array(
'post_in' => wc_get_product_ids_on_sale(),
Copy link
Contributor

@Aljullu Aljullu Sep 21, 2022

Choose a reason for hiding this comment

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

Should this be post__in (with two underscores), instead?

Comment on lines 99 to 104
function( $acc, $query ) {
// Ignoring the warning of not using meta queries.
// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
$acc['meta_query'] = isset( $query['meta_query'] ) ? array_merge( $acc['meta_query'], array( $query['meta_query'] ) ) : $acc['meta_query'];
return $acc;
},
Copy link
Contributor

Choose a reason for hiding this comment

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

If we go with the post__in approach, this array_reduce() is ignoring that property, right? Because we are only taking the meta_query value from $queries_attributes and $queries_filters, but not post__in. I might be missing something, though. 🤔

@gigitux
Copy link
Contributor Author

gigitux commented Sep 21, 2022

With the last refactor I broke:

  • pagination
  • on filter sale

Thanks for your review and comments! Now, it should be fine! 🤞

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 updating this PR, @gigitux! This is working fine. I left one minor comment about how we merge the post__in attribute, instead of accumulating all ids I think we should only accumulate the duplicated ones. But besides this, LGTM so pre-approving.

Comment on lines 101 to 103
if ( isset( $query['post__in'] ) ) {
$acc['post__in'] = isset( $acc['post__in'] ) ? array_merge( $acc['post__in'], $query['post__in'] ) : $query['post__in'];
}
Copy link
Contributor

Choose a reason for hiding this comment

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

If I'm understanding this correctly, I think this is working now because we only set the post__in attribute with the on sale filter. But if at some point there were two filters using post__in, instead of concatenating the ids we should only include the intersection of $acc['post__in'] and $query['post__in'], in other words, ids which are in both arrays so it behaves as an AND instead of an OR.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point! I fixed this!

@github-actions github-actions bot added this to the 8.6.0 milestone Sep 23, 2022
@sunyatasattva sunyatasattva modified the milestones: 8.6.0, 8.7.0 Sep 26, 2022
@gigitux gigitux force-pushed the add/price_filter_support branch from d4d1f2a to 0d7a39a Compare September 28, 2022 13:31
@gigitux
Copy link
Contributor Author

gigitux commented Sep 28, 2022

Thanks for the review! 🥳

@gigitux gigitux merged commit 80e83a8 into trunk Sep 28, 2022
@gigitux gigitux deleted the add/price_filter_support branch September 28, 2022 13:44
@gigitux gigitux mentioned this pull request Sep 28, 2022
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
…e#7162)

* Product Query: Fix pagination issue

* Product Query - Add support for the Filter By Price Block woocommerce#6790

Product Query - Add support for the Filter By Price Block

* fix query relation

* fix on sale query

* fix bugged pagination and on-sale filter after refactor

* fix reload page when the Filter By Price block is used with All Products block

* use array_intersect instead of array_merge
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product-query Issues related to/affecting all product-query variations. 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