Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make `Filters Products by Price` work with `Active Filters` block (https://github.com/woocommerce/woocommerce-blocks/pull/6245) 

* Set the min and max price from the URL to make the active filters work with PHP templates

* Extract price formatting into a separate function

* Rename the `hasSetPriceDefault` variable and improve comments

Co-authored-by: Tomasz Tunik <tomasztunik@gmail.com>
This commit is contained in:
Alba Rincón 2022-04-21 10:25:17 +02:00 committed by GitHub
parent 881c202717
commit df206284a3
1 changed files with 53 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js
View File

@ -47,6 +47,19 @@ function formatParams( url, params ) {
return addQueryArgs( cleanUrl, paramObject );
}
/**
* Formats price values taking into account precision
*
* @param {string} value
* @param {number} minorUnit
*
* @return {number} Formatted price.
*/
function formatPrice( value, minorUnit ) {
return Number( value ) * 10 ** minorUnit;
}
/**
* Component displaying a price filter.
*
@ -60,6 +73,14 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
''
);
/**
* Important: Only used on the PHP rendered Block pages to track
* the price filter defaults coming from the URL
*/
const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] = useState(
false
);
const minPriceParam = getUrlParameter( 'min_price' );
const maxPriceParam = getUrlParameter( 'max_price' );
const [ queryState ] = useQueryStateByContext();
@ -72,18 +93,18 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
const [ minPriceQuery, setMinPriceQuery ] = useQueryStateByKey(
'min_price',
Number( minPriceParam ) * 10 ** currency.minorUnit || null
formatPrice( minPriceParam, currency.minorUnit ) || null
);
const [ maxPriceQuery, setMaxPriceQuery ] = useQueryStateByKey(
'max_price',
Number( maxPriceParam ) * 10 ** currency.minorUnit || null
formatPrice( maxPriceParam, currency.minorUnit ) || null
);
const [ minPrice, setMinPrice ] = useState(
Number( minPriceParam ) * 10 ** currency.minorUnit || null
formatPrice( minPriceParam, currency.minorUnit ) || null
);
const [ maxPrice, setMaxPrice ] = useState(
Number( maxPriceParam ) * 10 ** currency.minorUnit || null
formatPrice( maxPriceParam, currency.minorUnit ) || null
);
const { minConstraint, maxConstraint } = usePriceConstraints( {
@ -96,6 +117,34 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
minorUnit: currency.minorUnit,
} );
/**
* Important: For PHP rendered block templates only.
*
* When we render the PHP block template (e.g. Classic Block) we need
* to set the default min_price and max_price values from the URL
* for the filter to work alongside the Active Filters block.
*/
useEffect( () => {
if ( ! hasSetPhpFilterDefaults && filteringForPhpTemplate ) {
setMinPriceQuery(
formatPrice( minPriceParam, currency.minorUnit )
);
setMaxPriceQuery(
formatPrice( maxPriceParam, currency.minorUnit )
);
setHasSetPhpFilterDefaults( true );
}
}, [
currency.minorUnit,
filteringForPhpTemplate,
hasSetPhpFilterDefaults,
maxPriceParam,
minPriceParam,
setMaxPriceQuery,
setMinPriceQuery,
] );
// Updates the query based on slider values.
const onSubmit = useCallback(
( newMinPrice, newMaxPrice ) => {
@ -114,7 +163,6 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
min_price: finalMinPrice / 10 ** currency.minorUnit,
max_price: finalMaxPrice / 10 ** currency.minorUnit,
} );
// If the params have changed, lets reload the page.
if ( window.location.href !== newUrl ) {
window.location.href = newUrl;