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

Add Results Count block #8078

Merged
merged 33 commits into from
Jan 17, 2023
Merged

Add Results Count block #8078

merged 33 commits into from
Jan 17, 2023

Conversation

kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Jan 3, 2023

The goal of this PR is to add the new Product Results Count block as part of the blockifying the product archive template project.

It shows the total number of products and how many of them are displayed at the moment based on the global query.

It uses the woocommerce_result_count() function to render the block on the front end.
In the Editor it displays "Showing 1-X of X results".

Fixes #8060

Screenshots

Editor Frontend
image image

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Create new post/page
  2. Try to add "Product Results Count"
    Expected: Product Results Count block is not available there

  1. Edit Product Catalog template
  2. Add "Product Results Count"
    Expected: It displays "Showing 1-X of X results".
  3. Remove Classic Template and add Products block
  4. Make sure Products block has Inherit query from template setting enabled (!)
  5. Save the template and go to Frontend
    Expected: It displays "Showing 1-16 of 17 results". - depends on number of products your store has, numbers may differ, but it displays correct number of product that shows up in Products block
  6. Go to the next page of Products
    Expected: It displays "Showing 17-17 of 17 results". - depends on number of products your store has, numbers may differ, but it displays correct number of product that shows up in Products block

  1. Change global styles and make sure styles are applied to the block (in frontend as well)
  2. Change the color/font styles to the block and make sure styles are applied to the block (in frontend as well)
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Enhancement: Add new Product Results Count block.

@kmanijak kmanijak changed the title Add/product count [Blockifying Product Archive Templates] Add Results Count block Jan 3, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jan 3, 2023

The release ZIP for this PR is accessible via:

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

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.

TypeScript Errors Report

  • Files with errors: 488
  • Total errors: 2256

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jan 3, 2023

Size Change: +1.73 kB (0%)

Total Size: 1.08 MB

Filename Size Change
build/active-filters.js 7.32 kB +2 B (0%)
build/attribute-filter.js 12.4 kB -3 B (0%)
build/cart.js 47.4 kB +10 B (0%)
build/checkout.js 42.9 kB -1 B (0%)
build/featured-category.js 13.1 kB -1 B (0%)
build/featured-product.js 13.4 kB -2 B (0%)
build/filter-wrapper.js 2.39 kB -7 B (0%)
build/handpicked-products.js 7.24 kB +1 B (0%)
build/mini-cart-contents.js 16.9 kB +2 B (0%)
build/product-best-sellers.js 7.61 kB +2 B (0%)
build/product-categories.js 2.36 kB -1 B (0%)
build/product-category.js 8.6 kB +3 B (0%)
build/product-image.js 3.94 kB +1 B (0%)
build/product-new.js 7.6 kB +1 B (0%)
build/product-on-sale.js 7.92 kB +1 B (0%)
build/product-query.js 5.94 kB -1 B (0%)
build/product-summary.js 921 B +1 B (0%)
build/product-tag-list.js 498 B +3 B (+1%)
build/product-tag.js 8.08 kB -6 B (0%)
build/product-title.js 3.31 kB +1 B (0%)
build/product-top-rated.js 7.84 kB +1 B (0%)
build/products-by-attribute.js 8.53 kB +2 B (0%)
build/rating-filter.js 7.43 kB -1 B (0%)
build/reviews-by-category.js 11.2 kB -2 B (0%)
build/reviews-by-product.js 12.3 kB +1 B (0%)
build/single-product.js 9.98 kB -11 B (0%)
build/stock-filter.js 8.17 kB +2 B (0%)
build/wc-blocks-style-rtl.css 25.6 kB +27 B (0%)
build/wc-blocks-style.css 25.6 kB +27 B (0%)
build/wc-blocks-vendors.js 64.2 kB +7 B (0%)
build/wc-blocks.js 2.63 kB -1 B (0%)
build/product-results-count.js 1.67 kB +1.67 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.99 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/all-products-frontend.js 11.6 kB
build/all-products.js 33.4 kB
build/all-reviews.js 7.67 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-wrapper-frontend.js 7.68 kB
build/blocks-checkout.js 40.3 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 9.62 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-express-payment-frontend.js 718 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.33 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.25 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 864 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.69 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping-frontend.js 14.7 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.24 kB
build/cart-frontend.js 28.5 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.91 kB
build/checkout-blocks/billing-address-frontend.js 1.15 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.85 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.25 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.33 kB
build/checkout-blocks/pickup-options-frontend.js 2.79 kB
build/checkout-blocks/shipping-address-frontend.js 1.11 kB
build/checkout-blocks/shipping-method-frontend.js 2.26 kB
build/checkout-blocks/shipping-methods-frontend.js 4.79 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 30 kB
build/customer-account.js 3.08 kB
build/filter-wrapper-frontend.js 14 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/legacy-template.js 2.87 kB
build/mini-cart-component-frontend.js 27.7 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 468 B
build/mini-cart-contents-block/footer-frontend.js 2.82 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 7 kB
build/price-filter.js 8.39 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 6.71 kB
build/product-add-to-cart.js 8.47 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 440 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 258 B
build/product-button-frontend.js 2.14 kB
build/product-button.js 3.84 kB
build/product-category-list-frontend.js 1.14 kB
build/product-category-list.js 503 B
build/product-image-frontend.js 2.14 kB
build/product-price-frontend.js 2.18 kB
build/product-price.js 1.54 kB
build/product-rating-frontend.js 1.57 kB
build/product-rating.js 920 B
build/product-sale-badge-frontend.js 1.37 kB
build/product-sale-badge.js 814 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 376 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.53 kB
build/product-tag-list-frontend.js 1.13 kB
build/product-title-frontend.js 1.57 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.21 kB
build/reviews-frontend.js 7.14 kB
build/single-product-frontend.js 17.7 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.87 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 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.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-data.js 21.4 kB
build/wc-blocks-editor-style-rtl.css 5.41 kB
build/wc-blocks-editor-style.css 5.41 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 932 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.73 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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 29.7 kB

compressed-size-action

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 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.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Jan 13, 2023
@kmanijak kmanijak added the type: new block Applied to work that introduces a new block (typically used on an epic issue). label Jan 13, 2023
@kmanijak kmanijak marked this pull request as ready for review January 13, 2023 11:30
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team January 13, 2023 11:30
@github-actions github-actions bot added this to the 9.4.0 milestone Jan 13, 2023
@github-actions github-actions bot added status: ready to merge and removed status: stale Stale issues and PRs have had no updates for 60 days. labels Jan 13, 2023
@dinhtungdu dinhtungdu modified the milestones: 9.4.0, 9.5.0 Jan 16, 2023
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.

Given that this PR is very similar to #8157, I took the liberty to do a code review here as well. 🙂

It's testing great and code looks good, I just left a few comments inline.

assets/js/blocks/product-results-count/block.json Outdated Show resolved Hide resolved
assets/js/blocks/product-results-count/edit.tsx Outdated Show resolved Hide resolved
tests/e2e/specs/backend/product-results-count.test.js Outdated Show resolved Hide resolved
assets/js/blocks/product-results-count/block.tsx Outdated Show resolved Hide resolved
@albarin albarin requested a review from Aljullu January 16, 2023 10:50
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.

LGTM, thanks for updating the PR, @albarin!

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

The block is testing well. The style is working as expected. I left some minor comments, otherwise, this is LGTM.

assets/js/blocks/product-results-count/block.json Outdated Show resolved Hide resolved
assets/js/blocks/product-results-count/block.json Outdated Show resolved Hide resolved
assets/js/blocks/product-results-count/edit.tsx Outdated Show resolved Hide resolved
assets/js/blocks/product-results-count/edit.tsx Outdated Show resolved Hide resolved
src/BlockTypes/ProductResultsCount.php Outdated Show resolved Hide resolved
src/BlockTypes/ProductResultsCount.php Outdated Show resolved Hide resolved
tests/e2e/specs/backend/product-results-count.test.js Outdated Show resolved Hide resolved
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

Just some more minor comments and we can merge this PR.

src/BlockTypes/ProductResultsCount.php Outdated Show resolved Hide resolved
assets/js/blocks/product-results-count/edit.tsx Outdated Show resolved Hide resolved
@albarin albarin merged commit f3dba22 into trunk Jan 17, 2023
@albarin albarin deleted the add/product-count branch January 17, 2023 15:19
@nielslange nielslange added block: product results count Issues related to the Product Results Count block. type: enhancement The issue is a request for an enhancement. labels Jan 30, 2023
@nielslange nielslange changed the title [Blockifying Product Archive Templates] Add Results Count block Add Results Count block Jan 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product results count Issues related to the Product Results Count block. type: enhancement The issue is a request for an enhancement. type: new block Applied to work that introduces a new block (typically used on an epic issue).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create Product Results Count Block
5 participants