I am interested in changing the sitecore search facet filter from allowing multiple selections to only allowing a single

I have successfully implemented the Sitecore search widget and the result list is working as expected.

However, I encountered an issue with the filter functionality using facets. By default, it supports multiple filters but my requirement is to have single select (only one facet selected at a time).

I have tried different approaches but I'm unsure how to achieve this functionality.

When I attempt to select a new facet, it just adds the new selected facet ID to the existing array instead of replacing it.

If someone could provide guidance on how to achieve single select functionality for facets in Sitecore search, it would be greatly appreciated.

<button onClick={() => { onFacetClick({ facetValueId: selectedArticleTypeValue?.id, facetIndex: 0, facetId: 'article_type', type: 'valueId', checked: false, }); > {jobFacet?.text} </button>

javascriptnext.jssitecorejss

Answer №1

This method may not be effective,

Based on my understanding, it seems to only support multiple filters in facet. Therefore, you will need to create custom logic to achieve this. Here's what you can do:

  1. Create a state for selectedFacet
  2. Upon clicking the button, add logic to call onFacetClick and manage the state accordingly
  3. Add a condition to check if there is already a selectedFacet (which can be found through the state), then remove the current one before adding the latest one

Consider implementing something like this:

if (selectedValue) {
    onFacetClick({
        facetValueId: selectedArticleTypeValue?.id,
        facetIndex: 0,
        facetId: 'article_type',
        type: 'valueId',
        checked: false,
    });
}
if (jobFacet.id) {
    onFacetClick({
        facetValueId: jobFacet.id,
        facetIndex: 0,
        facetId: 'article_type',
        type: 'valueId',
        checked: true,
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

You can either use handleSubmit() as an onSubmit function or simply pass onSubmit as a prop

I attempted to integrate the redux form into my stepper component. Following a tutorial, I implemented async form from In the tutorial's demo, everything was working smoothly. However, upon clicking the sign-up button, I encountered an ...

javascripthtmlreactjsreduxmaterial-ui

Is it possible to preserve the <canvas> elements to use for future animation frames?

Currently, I am working on a graph visualization project that involves complex calculations being done on an HTML5 canvas. My goal is to create an interactive animation where the graph remains fixed, but additional elements are overlaid as the mouse moves ...

javascripthtmlcanvas

What should be transmitted to the front-end following the successful validation of a token on the server?

My process starts with a login page and then moves to the profile page. When it comes to handling the token on the backend, I use the following code: app.use(verifyToken); function verifyToken(req, res, next) { if (req.path === '/auth/google&ap ...

javascriptnode.jsangularexpress

PHP and AJAX concurrent session issue causing difficulties specifically in Chrome browser

TL;DR. I'm encountering an issue in Chrome where different requests are seeing the same value while incrementing a session counter, despite it working fine in Firefox and Internet Explorer. I am attempting to hit a web page multiple times until I rec ...

phpjavascriptajaxgoogle-chromesession

Swap out periods with commas in the content of Json Data

I have a JSON file containing percentage data that I am extracting and displaying on my website: <?php $resultData = file_get_contents('https://example.com/json/stats?_l=en'); $jsonData = json_decode($resultData, true); if( isset( ...

javascriptphpjqueryjson

What is the reason behind React re-rendering child components despite passing props that have been memoized with useMemo?

While exploring this topic, I stumbled upon an answer that seems relevant: When does React re-render child component? However, my inquiry delves into a more intricate question. Why does React typically re-render child components when utilizing the useMemo ...

javascriptreactjs

Building a floating video player using React

I recently installed the React-Player module and it is functioning perfectly. However, I am encountering some difficulties in trying to embed the player within an Element so that it appears as a floating player across my application, regardless of the page ...

javascriptcssreactjsreact-player

When attempting to launch my Next.js project on Vercel, an issue arises with the message: "Encountering a FirebaseError: Firebase: Error (auth/invalid-api-key)."

I encountered a wall of errors during the build process: (node:748) UnhandledPromiseRejectionWarning: FirebaseError: Firebase: Error (auth/invalid-api-key). at createErrorInternal (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c3 ...

firebasenext.jsvercel

Validate with JavaScript, then display and submit

I've created a submit function to verify form inputs, and then, if desired (via checkbox), print as part of the submission process. The issue is that when printing, the form submission never finishes. However, without printing, the form submits corre ...

javascriptprintingform-submit

"Enhancing user experience with dynamic input fields through Ajax auto-fill functionality

I have a unique invoice form that allows users to add multiple parts at their discretion. As the user inputs a part number, an AJAX script automatically populates the description and price fields. The script functions properly for the initial input fields ...

javascriptjqueryajax

Troubleshooting: Angular 2 property binding animations not functioning as expected

I'm attempting to create a fade-in animation for a div element. Here is the code snippet: import { Component, trigger, state, style, transition, animate, keyframes, group } from '@angular/core'; @Component( ...

javascripthtmlcssangular

How can PHP handle JSON data that arrives in an incomplete format?

I have created a basic website application that interacts with an API to gather backlink data for any website entered by the user. The API sends data in JSON format, consisting of strings and numbers. After parsing the response, I filter out the desired da ...

javascriptphparraysajaxjson

What is the best way to extract a JSON value and use it across multiple functions?

Currently, everything seems to be working fine. However, I'm unsure about the correct way to call the json data. I attempted using a direct link but it didn't work. Do I need to modify the "data" parameters? I'm confused because I saw that ...

javascriptjqueryhtmljsonfunction

Error message: Unable to locate Bootstrap call in standalone Angular project after executing 'ng add @angular/pwa' command

Having an issue while trying to integrate @angular/pwa, it keeps showing me an error saying "Bootstrap call not found". It's worth mentioning that I have removed app.module.ts and am using standalone components in various places without any module. Cu ...

javascriptangulartypescriptprogressive-web-apps

I am looking for string validation in Angular

Hello, I have just one input box where I enter a 10-digit string, and I am looking to apply the following validations to the entered string: The first 4 characters should be alphabets The characters from 5 to 9 should be numeric The last character should ...

javascriptangularjsvalidation

Develop a JavaScript function to declare variables

I am currently attempting to develop a small memory game where the time is multiplied by the number of moves made by the player. Upon completion of all pairs, a JavaScript function is executed: function finish() { stopCount(); var cnt1 = $("#cou ...

javascriptjqueryhtml

Whoops! Looks like there was a hiccup with the Vercel Deployment Edge Function, causing an

Every time I attempt to send a POST request to my Edge Function on Vercel Deployment, I encounter the following error message: [POST] /api/openai reason=EDGE_FUNCTION_INVOCATION_FAILED, status=500, user_error=true TypeError: Illegal invocation at app/api/ ...

typescriptnext.jsverceledge-function

transferring iterative information via ajax data flow

My form includes hidden input fields that are manually declared in the AJAX data without a loop. How can I efficiently loop through them in the AJAX data? Below is my form script: <form method="POST" name="myform"> <?php for($i=1;$i<=5;$i+ ...

javascriptphpjqueryajax

AngularJS interprets expressions in the 'action' attribute

This afternoon I encountered a rather peculiar behavior with AngularJS. If "//" is present in an expression within the "action" attribute of a form, Angular will throw an interpolate error. Take a look at the code snippet below. When you run this code, t ...

javascriptangularjs

Unpredictable Dependency Outcomes in Node.js

Encountering a warning while running yarn install where all dependencies are installed, but a specific warning is triggered: Warning: Pattern ["esprima-fb@~3001.0001.0000-dev-harmony-fb"] is attempting to unpack in the same destination "/Users/Me/Librar ...

javascriptnode.jsexpressnpmyarnpkg