Merge pull request #2541 from 10up/fix/2497

Display post types on facets with duplicate labels.
10up · Jan 12, 2022 · 11b543a · 11b543a
2 parents eeb8d5e + 446699a
commit 11b543a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 23 deletions.
diff --git a/assets/js/instant-results/components/facets/facet.js b/assets/js/instant-results/components/facets/facet.js
@@ -17,10 +17,11 @@ import TaxonomyTermsFacet from './taxonomy-terms-facet';
  * @param {number} props.index Facet index.
  * @param {string} props.name Facet name.
  * @param {string} props.label Facet label.
+ * @param {string} props.postTypes Facet post types.
  * @param {'post_type'|'price_range'|'taxonomy'} props.type Facet type.
  * @return {WPElement} Component element.
  */
-export default ({ index, label, name, type }) => {
+export default ({ index, label, name, postTypes, type }) => {
 	const defaultIsOpen = index < 2;
 
 	switch (type) {
@@ -30,7 +31,12 @@ export default ({ index, label, name, type }) => {
 			return <PriceRangeFacet defaultIsOpen={defaultIsOpen} label={label} />;
 		case 'taxonomy':
 			return (
-				<TaxonomyTermsFacet defaultIsOpen={defaultIsOpen} label={label} taxonomy={name} />
+				<TaxonomyTermsFacet
+					defaultIsOpen={defaultIsOpen}
+					label={label}
+					postTypes={postTypes}
+					taxonomy={name}
+				/>
 			);
 		default:
 			return <></>;

diff --git a/assets/js/instant-results/components/facets/post-type-facet.js b/assets/js/instant-results/components/facets/post-type-facet.js
@@ -49,7 +49,7 @@ export default ({ defaultIsOpen, label }) => {
 			options.push({
 				checked: selectedPostTypes.includes(key),
 				id: `ep-search-post-type-${key}`,
-				label: postTypeLabels[key],
+				label: postTypeLabels[key].singular,
 				order: index,
 				value: key,
 			});
@@ -102,7 +102,7 @@ export default ({ defaultIsOpen, label }) => {
 						{selectedPostTypes.map((value) => (
 							<ActiveContraint
 								key={value}
-								label={postTypeLabels[value]}
+								label={postTypeLabels[value].singular}
 								onClick={() => onClear(value)}
 							/>
 						))}

diff --git a/assets/js/instant-results/components/facets/taxonomy-terms-facet.js b/assets/js/instant-results/components/facets/taxonomy-terms-facet.js
@@ -7,6 +7,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies.
  */
+import { facets, postTypeLabels } from '../../config';
 import Context from '../../context';
 import Panel from '../common/panel';
 import CheckboxList from '../common/checkbox-list';
@@ -18,10 +19,11 @@ import { ActiveContraint } from '../tools/active-constraints';
  * @param {Object} props Components props.
  * @param {boolean} props.defaultIsOpen Whether the panel is open by default.
  * @param {string} props.label Facet label.
+ * @param {Array} props.postTypes Facet post types.
  * @param {string} props.taxonomy Facet taxonomy.
  * @return {WPElement} Component element.
  */
-export default ({ defaultIsOpen, label, taxonomy }) => {
+export default ({ defaultIsOpen, label, postTypes, taxonomy }) => {
 	const {
 		state: {
 			isLoading,
@@ -33,6 +35,28 @@ export default ({ defaultIsOpen, label, taxonomy }) => {
 		dispatch,
 	} = useContext(Context);
 
+	/**
+	 * A unique label for the facet. Adds additional context to the label if
+	 * another taxonomy with the same label is being used as a facet.
+	 */
+	const uniqueLabel = useMemo(() => {
+		const isNotUnique = facets.some(
+			(facet) => facet.label === label && facet.name !== taxonomy,
+		);
+
+		const typeLabels = postTypes.map((postType) => postTypeLabels[postType].plural);
+		const typeSeparator = __(', ', 'elasticpress');
+
+		return isNotUnique
+			? sprintf(
+					/* translators: %1$s: Facet label. $2$s: Facet post types. */
+					__('%1$s (%2$s)', 'elasticpress'),
+					label,
+					typeLabels.join(typeSeparator),
+			  )
+			: label;
+	}, [label, postTypes, taxonomy]);
+
 	/**
 	 * Create list of filter options from aggregation buckets.
 	 *
@@ -107,7 +131,7 @@ export default ({ defaultIsOpen, label, taxonomy }) => {
 
 	return (
 		options.length > 0 && (
-			<Panel defaultIsOpen={defaultIsOpen} label={label}>
+			<Panel defaultIsOpen={defaultIsOpen} label={uniqueLabel}>
 				{(isOpen) => (
 					<>
 						{isOpen && (

diff --git a/assets/js/instant-results/components/layout.js b/assets/js/instant-results/components/layout.js
@@ -43,8 +43,8 @@ export default () => {
 			<div className="ep-search-page__body">
 				<Sidebar isOpen={isSidebarOpen}>
 					<Sort />
-					{facets.map(({ name, label, type }, index) => (
-						<Facet index={index} key={name} label={label} name={name} type={type} />
+					{facets.map((facet, index) => (
+						<Facet {...facet} index={index} />
 					))}
 				</Sidebar>
 

diff --git a/assets/js/instant-results/components/results/result.js b/assets/js/instant-results/components/results/result.js
@@ -32,7 +32,7 @@ export default ({ hit }) => {
 		},
 	} = hit;
 
-	const postTypeLabel = postTypeLabels?.[resultPostType];
+	const postTypeLabel = postTypeLabels[resultPostType]?.singular;
 
 	return (
 		<article

diff --git a/includes/classes/Feature/InstantResults/InstantResults.php b/includes/classes/Feature/InstantResults/InstantResults.php
@@ -623,9 +623,12 @@ public function get_post_type_labels() {
 
 		foreach ( $post_types as $post_type ) {
 			$post_type_object = get_post_type_object( $post_type );
-			$post_type_label  = get_post_type_labels( $post_type_object )->singular_name;
+			$post_type_labels = get_post_type_labels( $post_type_object );
 
-			$labels[ $post_type ] = $post_type_label;
+			$labels[ $post_type ] = array(
+				'plural'   => $post_type_labels->name,
+				'singular' => $post_type_labels->singular_name,
+			);
 		}
 
 		return $labels;
@@ -643,12 +646,13 @@ public function get_facets() {
 		 * Post type facet.
 		 */
 		$facets['post_type'] = array(
-			'type'   => 'post_type',
-			'labels' => array(
+			'type'       => 'post_type',
+			'post_types' => [],
+			'labels'     => array(
 				'admin'    => __( 'Post type', 'elasticpress' ),
 				'frontend' => __( 'Type', 'elasticpress' ),
 			),
-			'aggs'   => array(
+			'aggs'       => array(
 				'post_types' => array(
 					'terms' => array(
 						'field' => 'post_type.raw',
@@ -674,12 +678,13 @@ public function get_facets() {
 			);
 
 			$facets[ $slug ] = array(
-				'type'   => 'taxonomy',
-				'labels' => array(
+				'type'       => 'taxonomy',
+				'post_types' => $taxonomy->object_type,
+				'labels'     => array(
 					'admin'    => $admin_label,
 					'frontend' => $labels->singular_name,
 				),
-				'aggs'   => array(
+				'aggs'       => array(
 					'taxonomy_terms' => array(
 						'terms' => array(
 							'field' => 'terms.' . $slug . '.facet',
@@ -695,12 +700,13 @@ public function get_facets() {
 		 */
 		if ( $this->is_woocommerce ) {
 			$facets['price_range'] = array(
-				'type'   => 'price_range',
-				'labels' => array(
+				'type'       => 'price_range',
+				'post_types' => [ 'product' ],
+				'labels'     => array(
 					'admin'    => __( 'Price range', 'elasticpress' ),
 					'frontend' => __( 'Price', 'elasticpress' ),
 				),
-				'aggs'   => array(
+				'aggs'       => array(
 					'max_price' => array(
 						'max' => array(
 							'field' => 'meta._price.double',
@@ -734,9 +740,10 @@ public function get_facets_for_frontend() {
 				$facet = $available_facets[ $key ];
 
 				$facets[] = array(
-					'name'  => $key,
-					'label' => $facet['labels']['frontend'],
-					'type'  => $facet['type'],
+					'name'      => $key,
+					'label'     => $facet['labels']['frontend'],
+					'type'      => $facet['type'],
+					'postTypes' => $facet['post_types'],
 				);
 			}
 		}