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

Single Product Template - Related Products: fix items per page option #9286

Merged
merged 1 commit into from
May 4, 2023
Merged

Single Product Template - Related Products: fix items per page option #9286

merged 1 commit into from
May 4, 2023

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Apr 28, 2023 •
edited
Loading

🤖 Generated by Copilot at 57a4e90

Summary

🛠️📄🔢

Added posts_per_page parameter to RelatedProducts block query. This lets users control the number of related products displayed in the block.

Walkthrough

  • Add posts_per_page parameter to the query array returned by build_query function in RelatedProducts class (link). This allows the block to display the user's chosen number of related products in the editor and the frontend.

Fixes #9122

Testing

User Facing Testing

  1. Edit the Single Product Template.
  2. Click on the button Upgrade to Blockified Single Product template.
  3. Focus the Related Products Controls block.
  4. Change the option Items per Page, for example put 1. (check the image below)
  5. Save the template.
  6. Visit a Product and be sure that the Related Products block shows the number of products that you selected before. (if you select a high number, there is the risk that there will be displayed fewer products. It is not a bug, but it means that aren't so many related products).

image

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Single Product Template - Related Products: fix items per page option.

@gigitux gigitux added the type: bug The issue/PR concerns a confirmed bug. label Apr 28, 2023
@gigitux gigitux self-assigned this Apr 28, 2023
@gigitux gigitux linked an issue Apr 28, 2023 that may be closed by this pull request
Related Products Block not Respecting 'Items per Page' Option #9122
Closed
@woocommercebot woocommercebot requested review from a team and kmanijak and removed request for a team April 28, 2023 13:21
@github-actions
Copy link
Contributor

github-actions bot commented Apr 28, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

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

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
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-frontend.js wp-polyfill ⚠️
price-filter-frontend.js react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️

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

TypeScript Errors Report

  • Files with errors: 450
  • Total errors: 2228

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB
build/active-filters-wrapper-frontend.js 4.68 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 12.1 kB
build/all-products.js 38.8 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 23.2 kB
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB
build/attribute-filter-wrapper-frontend.js 4.63 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 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-frontend.js 5.39 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 717 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.39 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 654 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 332 B
build/cart-blocks/order-summary-shipping-frontend.js 16.9 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.6 kB
build/cart.js 44.5 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.66 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 8.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.59 kB
build/checkout-blocks/shipping-methods-frontend.js 6.3 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 311 B
build/checkout-frontend.js 31.3 kB
build/checkout.js 46.2 kB
build/customer-account.js 3.18 kB
build/featured-category.js 14.4 kB
build/featured-product.js 14.7 kB
build/filter-wrapper-frontend.js 14.2 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8 kB
build/legacy-template.js 5.62 kB
build/mini-cart-component-frontend.js 29.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 864 B
build/mini-cart-contents-block/checkout-button-frontend.js 866 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.23 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.09 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 731 B
build/mini-cart-contents-block/title-label-frontend.js 661 B
build/mini-cart-contents.js 17.9 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-wrapper-frontend.js 5.78 kB
build/price-filter.js 8.46 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B
build/product-add-to-cart--product-rating.js 151 B
build/product-add-to-cart-frontend.js 6.5 kB
build/product-add-to-cart.js 8.87 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.18 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.35 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 4.31 kB
build/product-new.js 8.34 kB
build/product-on-sale.js 8.67 kB
build/product-price-frontend.js 2.12 kB
build/product-price.js 1.68 kB
build/product-query.js 11.4 kB
build/product-rating-frontend.js 1.33 kB
build/product-rating.js 921 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 974 B
build/product-sale-badge.js 801 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 998 B
build/product-sku.js 578 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 770 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 922 B
build/product-tag.js 8.97 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.75 kB
build/product-top-rated.js 8.58 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 3.04 kB
build/rating-filter.js 7.01 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.8 kB
build/stock-filter-wrapper-frontend.js 3.31 kB
build/stock-filter.js 7.73 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-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.58 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/wc-blocks-data.js 22.7 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 27.7 kB
build/wc-blocks-style.css 27.6 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.1 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
build/wc-shipping-method-pickup-location.js 30.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

kmanijak
kmanijak approved these changes May 4, 2023
View reviewed changes
Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

Works as expected! 💪

I would only suggest testing steps improvement, to avoid confusion:

  1. Focus the Related Products block.
  2. Change the option Items per Page, for example put 1. (check the image below)

It's a Related Products Controls block that allows changing Items per Page, not Related Products.
image

@github-actions github-actions bot added this to the 10.2.0 milestone May 4, 2023
@gigitux
Copy link
Contributor Author

gigitux commented May 4, 2023

Thanks for the review! I updated the testing instructions! I will merge after the E2E tests pass!

@gigitux gigitux enabled auto-merge (squash) May 4, 2023 11:33
@gigitux gigitux merged commit 3f5aed6 into trunk May 4, 2023
@gigitux gigitux deleted the 9122-related-products-block-not-respecting-items-per-page-option branch May 4, 2023 12:21
@kmanijak kmanijak added the block-type: product-grid Issues related to/affecting all product-grid type blocks. label May 8, 2023
@kmanijak kmanijak mentioned this pull request May 11, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@kmanijak kmanijak kmanijak approved these changes

Assignees

@gigitux gigitux

Labels
block-type: product-grid Issues related to/affecting all product-grid type blocks. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Milestone
10.2.0
Development

Successfully merging this pull request may close these issues.

Related Products Block not Respecting 'Items per Page' Option
2 participants
@gigitux @kmanijak