Skip to content

feature(instant-results): add filters for labels, options, components, and config#4326

Open
faisalahammad wants to merge 1 commit into
10up:developfrom
faisalahammad:feature/3975-instant-results-filters
Open

feature(instant-results): add filters for labels, options, components, and config#4326
faisalahammad wants to merge 1 commit into
10up:developfrom
faisalahammad:feature/3975-instant-results-filters

Conversation

@faisalahammad

Copy link
Copy Markdown

Summary

This PR adds more filters to the Instant Results feature so developers can customize facet labels, facet options, individual components, and the front-end configuration object. It addresses the customization gaps described in #3975.

Fixes #3975

Changes

assets/js/api-search/index.js

Before:

setResults(response);

After:

const filteredResponse = applyFilters('ep.InstantResults.response', response);

setResults(filteredResponse || response);

Why: allows third-party code to modify the search results response before it is passed to the React state, with a fallback in case a filter returns a falsy value.

assets/js/instant-results/components/facets/facet.js

Before: facets received the label prop directly.

After: the label is passed through ep.InstantResults.filter.label with the facet name, type, and post types so all facet labels can be customized from one filter.

Why: gives developers a single hook for changing facet labels without editing component internals.

assets/js/instant-results/components/facets/post-type-facet.js

Before:

const options = useMemo(() => buckets.reduce(reduceOptions, []), [buckets, reduceOptions]);

After: reduced options are passed through ep.InstantResults.filter.postType.options before being rendered.

Why: lets developers reorder, remove, or relabel post type options.

assets/js/instant-results/components/facets/price-range-facet.js

Before: the slider min/max were taken directly from aggregations.

After: the min/max values are passed through ep.InstantResults.filter.priceRange.options as { min, max }.

Why: allows the price range bounds to be adjusted by third-party code.

assets/js/instant-results/components/results/did-you-mean.js and assets/js/instant-results/components/tools/sort.js

Before: components were returned directly.

After: components are assigned to a variable and returned through ep.InstantResults.component.didYouMean and ep.InstantResults.component.sort respectively.

Why: follows the same pattern already used for ep.InstantResults.Result and ep.InstantResults.Pagination so components can be wrapped or replaced.

includes/classes/Feature/InstantResults/InstantResults.php

Before: the localized epInstantResults config was passed directly to wp_localize_script.

After: the config is built into a variable, filtered through ep_instant_results_config, and then passed to wp_localize_script.

Why: provides a PHP-side hook for the entire front-end configuration object.

Testing

Test 1: Facet label filter

  1. Add a JS filter on ep.InstantResults.filter.label to rename a taxonomy facet.
  2. Open Instant Results and view the sidebar.

Result: the facet label is updated.

Test 2: Post type options filter

  1. Add a JS filter on ep.InstantResults.filter.postType.options to transform option labels.
  2. Open Instant Results and expand the post type facet.

Result: the option labels reflect the filter output.

Test 3: PHP config filter

  1. Add a PHP filter on ep_instant_results_config to change a value.
  2. Load the page and inspect window.epInstantResults.

Result: the modified value is present in the front-end config.

Notes

  • npm run lint-js passes for the changed JS files.
  • composer run lint reports only pre-existing failures in other test files; InstantResults.php is clean.
  • vendor/bin/phpunit --filter TestInstantResults passes except for an unrelated pre-existing quote mismatch in test_requirements_status.
  • CodeRabbit review passed with no actionable findings.

…, and config

- Add ep.InstantResults.filter.label JS filter for facet labels.
- Add ep.InstantResults.filter.postType.options JS filter for post type options.
- Add ep.InstantResults.filter.priceRange.options JS filter for price range bounds.
- Add ep.InstantResults.component.didYouMean and ep.InstantResults.component.sort JS filters for components.
- Add ep.InstantResults.response JS filter for the search results response.
- Add ep_instant_results_config PHP filter for the front-end config object.

Fixes 10up#3975
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

More filters for Instant Results

1 participant