Fix: show correct attribute and price filter data on the category/tag…

… template (woocommerce#50341)
Neosate · Oct 2, 2024 · 73e7d57 · 73e7d57
1 parent 7bef8af
commit 73e7d57
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 6 deletions.
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.tsx
@@ -24,6 +24,7 @@ import {
 	isBoolean,
 	isString,
 	objectHasProp,
+	isObject,
 } from '@woocommerce/types';
 import { Icon, chevronDown } from '@wordpress/icons';
 import {
@@ -133,13 +134,21 @@ const AttributeFilterBlock = ( {
 			query: { orderby: attributeObject?.orderby || 'menu_order' },
 		} );
 
+	const backendQueryState = getSettingWithCoercion(
+		'queryState',
+		{},
+		isObject
+	);
 	const { results: filteredCounts, isLoading: filteredCountsLoading } =
 		useCollectionData( {
 			queryAttribute: {
 				taxonomy: attributeObject?.taxonomy || '',
 				queryType: blockAttributes.queryType,
 			},
-			queryState,
+			queryState: {
+				...backendQueryState,
+				...queryState,
+			},
 			isEditor,
 		} );
 

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.tsx
@@ -18,6 +18,7 @@ import { changeUrl, getUrlParameter } from '@woocommerce/utils';
 import {
 	CurrencyResponse,
 	isBoolean,
+	isObject,
 	isString,
 	objectHasProp,
 } from '@woocommerce/types';
@@ -112,9 +113,17 @@ const PriceFilterBlock = ( {
 	const minPriceParam = getUrlParameter( 'min_price' );
 	const maxPriceParam = getUrlParameter( 'max_price' );
 	const [ queryState ] = useQueryStateByContext();
+	const backendQueryState = getSettingWithCoercion(
+		'queryState',
+		{},
+		isObject
+	);
 	const { results, isLoading } = useCollectionData( {
 		queryPrices: true,
-		queryState,
+		queryState: {
+			...backendQueryState,
+			...queryState,
+		},
 		isEditor,
 	} );
 

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/test/use-price-constraints.jsx b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/test/use-price-constraints.jsx
@@ -69,7 +69,7 @@ describe( 'usePriceConstraints', () => {
 		);
 		const container = renderer.root.findByType( 'div' );
 
-		expect( container.props[ 'data-maxPriceConstraint' ] ).toBe( 2000 );
+		expect( container.props[ 'data-maxPriceConstraint' ] ).toBe( 1100 );
 
 		renderer.update( <TestComponent price={ 1999 } /> );
 
@@ -80,10 +80,10 @@ describe( 'usePriceConstraints', () => {
 		const renderer = TestRenderer.create( <TestComponent price={ 999 } /> );
 		const container = renderer.root.findByType( 'div' );
 
-		expect( container.props[ 'data-minPriceConstraint' ] ).toBe( 0 );
+		expect( container.props[ 'data-minPriceConstraint' ] ).toBe( 900 );
 
 		renderer.update( <TestComponent price={ 1999 } /> );
 
-		expect( container.props[ 'data-minPriceConstraint' ] ).toBe( 1000 );
+		expect( container.props[ 'data-minPriceConstraint' ] ).toBe( 1900 );
 	} );
 } );
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/use-price-constraints.ts b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/use-price-constraints.ts
@@ -20,7 +20,7 @@ export const usePriceConstraint = (
 	minorUnit: number,
 	direction: string
 ) => {
-	const step = 10 * 10 ** minorUnit;
+	const step = 1 * 10 ** minorUnit;
 	let currentConstraint = null;
 	const parsedPrice = parseFloat( price );
 

diff --git a/plugins/woocommerce/changelog/50341-issue-42616-fix-price-filter-category-issue b/plugins/woocommerce/changelog/50341-issue-42616-fix-price-filter-category-issue
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix: show correct attribute and price filter data on the category/tag template.
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/AttributeFilter.php b/plugins/woocommerce/src/Blocks/BlockTypes/AttributeFilter.php
@@ -24,6 +24,19 @@ class AttributeFilter extends AbstractBlock {
 	protected function enqueue_data( array $attributes = [] ) {
 		parent::enqueue_data( $attributes );
 		$this->asset_data_registry->add( 'attributes', array_values( wc_get_attribute_taxonomies() ) );
+
+		// Enqueue any `queryState` that the UI will need to be aware of
+		// (Ex: the category id if we're on a category page, the tag id if we're on a tag page/etc).
+		$query_state = [];
+
+		if ( is_product_category() ) {
+			$query_state['category'] = get_queried_object_id();
+		}
+		if ( is_product_tag() ) {
+			$query_state['tag'] = get_queried_object()->term_id;
+		}
+
+		$this->asset_data_registry->add( 'queryState', $query_state );
 	}
 
 	/**

diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/PriceFilter.php b/plugins/woocommerce/src/Blocks/BlockTypes/PriceFilter.php
@@ -1,4 +1,5 @@
 <?php
+
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
 /**
@@ -14,4 +15,29 @@ class PriceFilter extends AbstractBlock {
 	protected $block_name     = 'price-filter';
 	const MIN_PRICE_QUERY_VAR = 'min_price';
 	const MAX_PRICE_QUERY_VAR = 'max_price';
+
+	/**
+	 * Extra data passed through from server to client for block.
+	 *
+	 * @param array $attributes  Any attributes that currently are available from the block.
+	 *                           Note, this will be empty in the editor context when the block is
+	 *                           not in the post content on editor load.
+	 */
+	protected function enqueue_data( array $attributes = [] ) {
+		parent::enqueue_data( $attributes );
+		$this->asset_data_registry->add( 'attributes', array_values( wc_get_attribute_taxonomies() ) );
+
+		// Enqueue any `queryState` that the UI will need to be aware of
+		// (Ex: the category id if we're on a category page, the tag id if we're on a tag page/etc).
+		$query_state = [];
+
+		if ( is_product_category() ) {
+			$query_state['category'] = get_queried_object_id();
+		}
+		if ( is_product_tag() ) {
+			$query_state['tag'] = get_queried_object()->term_id;
+		}
+
+		$this->asset_data_registry->add( 'queryState', $query_state );
+	}
 }