From d85acc7e09e3bc314f0cfd95beb501395f4dbde6 Mon Sep 17 00:00:00 2001
From: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:03:27 +0200
Subject: [PATCH] Product Collection: allow custom collections hiding each of
the filters (#49713)
* Allow hiding all of the filter controls in PC block
* Add new test
* Add changelog
* Update documentation with information about hideControls values
---
.../edit/inspector-controls/index.tsx | 45 +++++++++++++++----
.../register-product-collection.md | 13 +++++-
.../index.js | 1 +
.../product-collection.block_theme.spec.ts | 24 ++++++++++
...rols-when-using-the-hidecontrols-attribute | 4 ++
5 files changed, 78 insertions(+), 9 deletions(-)
create mode 100644 plugins/woocommerce/changelog/49187-product-collection-missing-handlers-for-controls-when-using-the-hidecontrols-attribute
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx
index 1c0ff47e2d0..8df7f261fab 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx
@@ -81,8 +81,23 @@ const ProductCollectionInspectorControls = (
isArchiveTemplate && shouldShowFilter( CoreFilterNames.INHERIT );
const showOrderControl =
showQueryControls && shouldShowFilter( CoreFilterNames.ORDER );
- const showFeaturedControl = shouldShowFilter( CoreFilterNames.FEATURED );
const showOnSaleControl = shouldShowFilter( CoreFilterNames.ON_SALE );
+ const showStockStatusControl = shouldShowFilter(
+ CoreFilterNames.STOCK_STATUS
+ );
+ const showHandPickedProductsControl = shouldShowFilter(
+ CoreFilterNames.HAND_PICKED
+ );
+ const showKeywordControl = shouldShowFilter( CoreFilterNames.KEYWORD );
+ const showAttributesControl = shouldShowFilter(
+ CoreFilterNames.ATTRIBUTES
+ );
+ const showTaxonomyControls = shouldShowFilter( CoreFilterNames.TAXONOMY );
+ const showFeaturedControl = shouldShowFilter( CoreFilterNames.FEATURED );
+ const showCreatedControl = shouldShowFilter( CoreFilterNames.CREATED );
+ const showPriceRangeControl = shouldShowFilter(
+ CoreFilterNames.PRICE_RANGE
+ );
const setQueryAttributeBind = useMemo(
() => setQueryAttribute.bind( null, props ),
@@ -134,16 +149,30 @@ const ProductCollectionInspectorControls = (
{ showOnSaleControl && (
) }
-
-
-
-
-
+ { showStockStatusControl && (
+
+ ) }
+ { showHandPickedProductsControl && (
+
+ ) }
+ { showKeywordControl && (
+
+ ) }
+ { showAttributesControl && (
+
+ ) }
+ { showTaxonomyControls && (
+
+ ) }
{ showFeaturedControl && (
) }
-
-
+ { showCreatedControl && (
+
+ ) }
+ { showPriceRangeControl && (
+
+ ) }
) : null }
diff --git a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/register-product-collection.md b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/register-product-collection.md
index fbfa68e5b2d..1bbfd04f222 100644
--- a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/register-product-collection.md
+++ b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/register-product-collection.md
@@ -66,7 +66,17 @@ Attributes are the properties that define the behavior of the collection. All th
- `type` (type `string`): The type of layout. Accepted values are `grid` and `stack`.
- `columns` (type `number`): The number of columns to display.
- `shrinkColumns` (type `boolean`): Whether the layout should be responsive.
-- `hideControls` (type `array`): The controls to hide.
+- `hideControls` (type `array`): The controls to hide. Possible values:
+ - `order` - "Order by" setting
+ - `attributes` - "Product Attributes" filter
+ - `created` - "Created" filter
+ - `featured` - "Featured" filter
+ - `hand-picked` - "Hand-picked Products" filter
+ - `keyword` - "Keyword" filter
+ - `on-sale` - "On Sale" filter
+ - `stock-status` - "Stock Status" filter
+ - `taxonomy` - "Product Categories", "Product Tags" and custom taxonomies filters
+ - `price-range` - "Price Range" filter
#### Preview Attribute
@@ -127,6 +137,7 @@ __experimentalRegisterProductCollection({
columns: 3,
shrinkColumns: true,
},
+ hideControls: [ "created", "stock-status" ]
},
});
```
diff --git a/plugins/woocommerce-blocks/tests/e2e/plugins/register-product-collection-tester/index.js b/plugins/woocommerce-blocks/tests/e2e/plugins/register-product-collection-tester/index.js
index 931a6a0266e..af8015a43b6 100644
--- a/plugins/woocommerce-blocks/tests/e2e/plugins/register-product-collection-tester/index.js
+++ b/plugins/woocommerce-blocks/tests/e2e/plugins/register-product-collection-tester/index.js
@@ -11,6 +11,7 @@ __experimentalRegisterProductCollection( {
query: {
perPage: 5,
},
+ hideControls: [ 'keyword', 'on-sale' ],
},
} );
diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts
index fd0bd65deba..ebf89ca2b86 100644
--- a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts
+++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts
@@ -1468,6 +1468,30 @@ test.describe( 'Testing registerProductCollection', () => {
.locator( 'visible=true' );
await expect( products ).toHaveCount( 5 );
} );
+
+ test( 'hideControls allows to hide filters', async ( {
+ pageObject,
+ page,
+ } ) => {
+ await pageObject.goToProductCatalogAndInsertCollection(
+ 'myCustomCollection'
+ );
+
+ const sidebarSettings = await pageObject.locateSidebarSettings();
+ const onsaleControl = sidebarSettings.getByLabel(
+ SELECTORS.onSaleControlLabel
+ );
+ await expect( onsaleControl ).toBeHidden();
+
+ await page
+ .getByRole( 'button', { name: 'Filters options' } )
+ .click();
+ const keywordControl = page.getByRole( 'menuitemcheckbox', {
+ name: 'Keyword',
+ } );
+
+ await expect( keywordControl ).toBeHidden();
+ } );
} );
test.describe( 'My Custom Collection with Preview', () => {
diff --git a/plugins/woocommerce/changelog/49187-product-collection-missing-handlers-for-controls-when-using-the-hidecontrols-attribute b/plugins/woocommerce/changelog/49187-product-collection-missing-handlers-for-controls-when-using-the-hidecontrols-attribute
new file mode 100644
index 00000000000..a2041274dd9
--- /dev/null
+++ b/plugins/woocommerce/changelog/49187-product-collection-missing-handlers-for-controls-when-using-the-hidecontrols-attribute
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Product Collection: allow custom collections to hide all of the filter controls, not only some of them