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

Product Query: Add order by “best selling” as a preset #7687

Merged

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Nov 15, 2022

This PR achieves the following:

  • Adds a section in the inspector control called “Popular Presets”, which contains a dropdown with popular presets (see Product Query [3]: [Settings] Implement the Quick Display Presets #7621).
  • Adds support for the first preset: “Best selling products”. By selecting this, users can sort products by total sales.
  • Switches the order of the custom inspector controls and the default Query Loop inspector controls: our controls will be now on top as per the latest design spec (see pdnLyh-2By-p2).
  • Restricts the allowed Query parameters to the sort orders we want to allow according to the latest design spec (disabling title and date).
  • Removes the core “Order By” dropdown.
  • Refactor setCustomQueryAttribute to setQueryAttribute because since a few iterations, our custom query attributes are not deeply nested anymore, and this function can be used for the normal query too.

In order to achieve back-end compatibility, since the Product Query block uses the WordPress API as opposed to the Store API, we needed to add compatibility for the custom popularity meta value as a valid value of the orderby parameter through a REST API filter. This shouldn't cause any side-effects, but it is important to know that we are meddling once more with the REST API itself (the other is to add compatibility for editor preview).

Fixes #7324
References #7621

Accessibility

Other Checks

  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Screenshot 2022-11-15 at 19 28 26

Testing

User Facing Testing

Warning
Ensure you have at least one order of some of your products and your products have some sales associated with them.

  1. Add a Product Query block.
  2. Ensure the core Query Loop block inspector settings are now at the bottom of the inspector controls.
  3. Ensure a new section called “Popular Filters” is there with a dropdown.
  4. Ensure “Newest” is selected as default from the dropdown and products are shown in descending order of date published.
  5. Change “Newest” to “Best selling”.
  6. Ensure the new order is based on the total sales. For products with no sales, they should all come after, ordered by ID. See Rethink Best Selling Products logic woocommerce#42596 and https://wordpress.org/support/topic/sort-by-popularity-4. We are now just reproducing the old logic. Discussion on this is pending.
  7. Ensure steps 4 and 6 work on the front-end.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Product Query: add option to sort products by “Best selling”

@sunyatasattva sunyatasattva added type: enhancement The issue is a request for an enhancement. block-type: product-query Issues related to/affecting all product-query variations. labels Nov 15, 2022
@sunyatasattva sunyatasattva self-assigned this Nov 15, 2022
@rubikuserbot rubikuserbot requested review from a team and gigitux and removed request for a team November 15, 2022 18:27
@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-7687.zip

@github-actions
Copy link
Contributor

github-actions bot commented Nov 15, 2022

TypeScript Errors Report

Files with errors: 427
Total errors: 2062

🎉 🎉 This PR does not introduce new TS errors.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 15, 2022

Size Change: +306 B (0%)

Total Size: 971 kB

Filename Size Change
build/checkout.js 40.1 kB -1 B (0%)
build/product-query.js 3.2 kB +307 B (+11%) ⚠️
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.75 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.33 kB
build/all-products-frontend.js 11.3 kB
build/all-products.js 33.1 kB
build/all-reviews.js 7.78 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.12 kB
build/attribute-filter.js 12.2 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-cross-sells-products--product-add-to-cart-frontend.js 5.48 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.74 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.02 kB
build/cart-blocks/cart-express-payment-frontend.js 778 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.29 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
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/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.72 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-frontend.js 5.99 kB
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/cart-frontend.js 46.2 kB
build/cart.js 46.1 kB
build/checkout-blocks/actions-frontend.js 1.77 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.9 kB
build/checkout-blocks/billing-address-frontend.js 955 B
build/checkout-blocks/contact-information-frontend.js 1.77 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.88 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.27 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-shipping-frontend.js 6.04 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.29 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.03 kB
build/checkout-blocks/terms-frontend.js 1.63 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 48.3 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.41 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.85 kB
build/mini-cart-component-frontend.js 20 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 2.97 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 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.1 kB
build/mini-cart-frontend.js 1.77 kB
build/mini-cart.js 4.28 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.37 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-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.46 kB
build/product-add-to-cart.js 8.37 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 431 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 2.13 kB
build/product-button.js 3.82 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.13 kB
build/product-category-list.js 502 B
build/product-category.js 8.62 kB
build/product-image-frontend.js 2.16 kB
build/product-image.js 3.93 kB
build/product-new.js 7.62 kB
build/product-on-sale.js 7.96 kB
build/product-price-frontend.js 2.15 kB
build/product-price.js 1.53 kB
build/product-rating-frontend.js 1.45 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.38 kB
build/product-sale-badge.js 811 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 630 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.52 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 1.12 kB
build/product-tag-list.js 497 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.58 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.86 kB
build/products-by-attribute.js 8.54 kB
build/rating-filter-frontend.js 7.16 kB
build/rating-filter-wrapper-frontend.js 5.41 kB
build/rating-filter.js 5.79 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 17.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.79 kB
build/stock-filter-wrapper-frontend.js 6.03 kB
build/stock-filter.js 6.71 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart-frontend.js 6.87 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.2 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/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.54 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.86 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/wc-blocks-data.js 18.6 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-vendors.js 62.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.6 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Nov 15, 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.

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.

When testing this PR, I'm getting this error:
imatge

Is that something you can also reproduce, @sunyatasattva? The ProductQuery class doesn't seem to have a extend_rest_query_allowed_params method.

@sunyatasattva
Copy link
Contributor Author

Thanks for catching that @Aljullu. Looks like something went wrong with the rebasing, perhaps? The actual method name was extend_rest_query_params, I renamed it to match the filter. Should work now.

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 the PR, @sunyatasattva!

I'm still getting a fatal:
imatge

I could work-around it making extend_rest_query_allowed_params public. However, then I get a 400 error when the Product Query block tries to load products in the editor.

imatge

Can you reproduce as well?

@sunyatasattva
Copy link
Contributor Author

sunyatasattva commented Nov 17, 2022

This is odd. Here is a video of the flow working fine on my side. It's also interesting that I did not change the type of the method to public, it's still private. In general, you'd say that filters should be public methods?

EDIT: I read more about how WP Filters work, and indeed I guess it should be public. I am now very confused on how it worked in my case and didn't throw a fatal error. Any ideas? Anyways, I have updated it to be public.

best-selling.mov

What's your environment? Are you able to reproduce on a fresh one? I wonder if perhaps there is a conflicting filter removing the allowed query params? Perhaps giving the filter a higher priority could solve this, if that's the case?

I'm going to try and investigate a bit further to see whether I can break it.

@sunyatasattva
Copy link
Contributor Author

@Aljullu Tried changing the merging approach on the filter. Could you please also pull and test again?

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.

It's working well on my end, now. Thanks for updating this PR, @sunyatasattva! Code changes look good as well.

@sunyatasattva
Copy link
Contributor Author

It honestly was super mysterious on how things were working for me previously. I do not understand, but glad you tested. 🙏

This commits achieves the following:

* Adds a section in the inspector control called “Popular Presets”,
which contains a dropdown with popular presets.
* Adds support for the first preset: “Best selling products”.
By selecting this, users can sort products by total sales.
* Switches the order of the custom inspector controls and the default
Query Loop inspector controls: our controls will be now on top
as per the latest design spec (see pdnLyh-2By-p2).
* Restricts the allowed Query parameters to the sort orders we want to
allow according to the latest design spec (disabling title and date).
* Removes the core “Order By” dropdown.
* Refactor `setCustomQueryAttribute` to `setQueryAttribute` because
since a few iterations, our custom query attributes are not deeply nested
anymore, and this function can be used for the normal query too.
…y block

This commit does the following:

* Adds the `popularity` value as an allowed value for `orderby` on
`product` REST API calls.
* Handles the query differently if the `orderby` value is one among the
custom ones.
@sunyatasattva sunyatasattva force-pushed the add/7324-add-orderby-best-selling-to-product-query branch from 7cda22f to 13a0331 Compare November 21, 2022 17:50
@sunyatasattva sunyatasattva merged commit 03da591 into trunk Nov 21, 2022
@sunyatasattva sunyatasattva deleted the add/7324-add-orderby-best-selling-to-product-query branch November 21, 2022 18:22
dinhtungdu added a commit that referenced this pull request Nov 22, 2022
Aljullu pushed a commit that referenced this pull request Nov 22, 2022
…ced Filters` (#7726)

* E2E: Change label of product filters from `Product filters` to `Advanced
Filters` to match with the updates from #7687

* rename test file and test title to advanced filters

* E2E: Fix flaky test related to `waitForAllProductsBlockLoaded` (#7727)

* explain the reason for try/catch
tarunvijwani pushed a commit that referenced this pull request Nov 24, 2022
* Add support for “Popular Presets” for PQ block

This commits achieves the following:

* Adds a section in the inspector control called “Popular Presets”,
which contains a dropdown with popular presets.
* Adds support for the first preset: “Best selling products”.
By selecting this, users can sort products by total sales.
* Switches the order of the custom inspector controls and the default
Query Loop inspector controls: our controls will be now on top
as per the latest design spec (see pdnLyh-2By-p2).
* Restricts the allowed Query parameters to the sort orders we want to
allow according to the latest design spec (disabling title and date).
* Removes the core “Order By” dropdown.
* Refactor `setCustomQueryAttribute` to `setQueryAttribute` because
since a few iterations, our custom query attributes are not deeply nested
anymore, and this function can be used for the normal query too.
* Add back-end support for sorting by Best Selling via the Product Query block
* Adds the `popularity` value as an allowed value for `orderby` on
`product` REST API calls.
* Handles the query differently if the `orderby` value is one among the
custom ones.
tarunvijwani pushed a commit that referenced this pull request Nov 24, 2022
…ced Filters` (#7726)

* E2E: Change label of product filters from `Product filters` to `Advanced
Filters` to match with the updates from #7687

* rename test file and test title to advanced filters

* E2E: Fix flaky test related to `waitForAllProductsBlockLoaded` (#7727)

* explain the reason for try/catch
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. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Query [3]: [Settings] Order by Best Selling
2 participants