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

Fix: Spilled icecream error with Filter Products by Attribute when no attribute was selected #4847

Merged
merged 6 commits into from
Oct 15, 2021
Merged

Fix: Spilled icecream error with Filter Products by Attribute when no attribute was selected #4847

Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
14ab0a8
fix: return early if no attribute is selected
dinhtungdu Sep 26, 2021
5c00745
fix: display warning in the editor if the attribute has no term assig…
dinhtungdu Sep 26, 2021
70737e2
fix: prevent flashing title on the front end
dinhtungdu Sep 26, 2021
1421b1e
fix: typo
dinhtungdu Sep 26, 2021
9242b97
fix: prevent js error when preview filter by attribute block without …
dinhtungdu Sep 26, 2021
13f6881
Merge branch 'trunk' into fix/2441
dinhtungdu Oct 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 42 additions & 10 deletions assets/js/blocks/attribute-filter/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Label from '@woocommerce/base-components/filter-element-label';
import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button';
import isShallowEqual from '@wordpress/is-shallow-equal';
import { decodeEntities } from '@wordpress/html-entities';
import { Notice } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -61,7 +62,7 @@ const AttributeFilterBlock = ( {
} = useCollection( {
namespace: '/wc/store',
resourceName: 'products/attributes/terms',
resourceValues: [ attributeObject.id ],
resourceValues: [ attributeObject?.id || 0 ],
shouldSelect: blockAttributes.attributeId > 0,
} );

Expand All @@ -73,7 +74,7 @@ const AttributeFilterBlock = ( {
isLoading: filteredCountsLoading,
} = useCollectionData( {
queryAttribute: {
taxonomy: attributeObject.taxonomy,
taxonomy: attributeObject?.taxonomy,
queryType: blockAttributes.queryType,
},
queryState: {
Expand Down Expand Up @@ -151,7 +152,7 @@ const AttributeFilterBlock = ( {

setDisplayedOptions( newOptions );
}, [
attributeObject.taxonomy,
attributeObject?.taxonomy,
attributeTerms,
attributeTermsLoading,
blockAttributes.showCounts,
Expand All @@ -164,10 +165,10 @@ const AttributeFilterBlock = ( {
const checkedQuery = useMemo( () => {
return productAttributesQuery
.filter(
( { attribute } ) => attribute === attributeObject.taxonomy
( { attribute } ) => attribute === attributeObject?.taxonomy
)
.flatMap( ( { slug } ) => slug );
}, [ productAttributesQuery, attributeObject.taxonomy ] );
}, [ productAttributesQuery, attributeObject?.taxonomy ] );

const currentCheckedQuery = useShallowEqual( checkedQuery );
const previousCheckedQuery = usePrevious( currentCheckedQuery );
Expand Down Expand Up @@ -316,7 +317,36 @@ const AttributeFilterBlock = ( {
[ checked, displayedOptions, multiple ]
);

// Short-circuit if no attribute is selected.
if ( ! attributeObject ) {
if ( isEditor ) {
return (
<Notice status="warning" isDismissible={ false }>
<p>
{ __(
'Please select an attribute to use this filter!',
'woo-gutenberg-products-block'
) }
</p>
</Notice>
);
}
return null;
}

if ( displayedOptions.length === 0 && ! attributeTermsLoading ) {
if ( isEditor ) {
return (
<Notice status="warning" isDismissible={ false }>
<p>
{ __(
'The selected attribute does not have any term assigned to products.',
'woo-gutenberg-products-block'
) }
</p>
</Notice>
);
}
return null;
}

Expand All @@ -326,11 +356,13 @@ const AttributeFilterBlock = ( {

return (
<>
{ ! isEditor && blockAttributes.heading && (
<TagName className="wc-block-attribute-filter__title">
{ blockAttributes.heading }
</TagName>
) }
{ ! isEditor &&
blockAttributes.heading &&
displayedOptions.length > 0 && (
<TagName className="wc-block-attribute-filter__title">
{ blockAttributes.heading }
</TagName>
) }
<div className="wc-block-attribute-filter">
{ blockAttributes.displayStyle === 'dropdown' ? (
<DropdownSelector
Expand Down