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