Appending refinement to search URL

Hello all! I have a question about how to append a refinement to a URL in the template of a hit item.

Currently I have this:

<a href="?refinementList%5BManufacturername%5D%5B0%5D={{Manufacturername}}">{{Manufacturername}}</a>

Right now it takes the user directly to a page with that as a refinement, but I would like them to be able to click on another link within the hit item template, such as this:

<a href="?refinementList%5BTags%5D%5B0%5D={{Tags}}">{{Tags}}</a>

and have it add that as a refinement. At the moment it goes to a page with only one or the other as a refinement.

Just a note: the refinements widget works just fine; I’m basically hoping to program a bit of the logic of the refinements widget into my hit template without resorting to creating a custom function. I’m not sure this is possible, but hoping it is!

Hi @sgtkellogg,

I’m not sure I understand your question. Could you reproduce your issue in a codesandbox to help us better understand and be able to troubleshoot?

You can find our start templates for codesandbox.io here.

Hi Cindy, thanks for the response!

I’m not sure I can reproduce the exact issue I’m having in a sandbox, but I have a deployment of my app here: https://torchforkdataweb20191023021927.azurewebsites.net/Hardware

If you click within the search results (not the refinements), click on any item’s company, then any item’s category, and you’ll see that the refinements don’t “stack,” or two can’t be applied using only those links. I was hoping there was a template trick or maybe a special type of URL I was unaware of. Thanks!

Here is my search widget and template:

search.addWidget(
    instantsearch.widgets.hits({        
        container: '#hits',
        templates: {
            item: `        
                  
         
                <div class="col-sm-4" style="padding:0px 2px 2px 0px">
<div class="smallinfopane">
                    <div style="float:left; ">
                  <div class="rankbig">#{{ Rank }}</div>
            <a href="/Hardware/details/{{Hardwareid}}">
                        <img src="{{Imageurl}}" width="100" height="100" />
                        </a>
                    </div>
        <div class="amazonproducttitlesmall"><a href="/Hardware/details/{{Hardwareid}}" >{{Title}}</a></div>
                    <div class="clearfix"></div>
                    <div class="littlebuybutton2" style="height:23px; overflow:hidden; margin-top:10px;">
                        <a class="littlecompany" href="?refinementList%5BTags%5D%5B0%5D={{Tags}}">{{Tags}}</a>
                        // <a class="littlecompany" href="?refinementList%5BManufacturername%5D%5B0%5D={{Manufacturername}}">{{Manufacturername}}</a>
                    </div>
                    <div class="clearfix"></div>
            </div>
</div>
                             
             
                   
      `,
        },
    })
);

Hi @sgtkellogg,

Thanks for the helpful information!

Your url will need to combine the refinements like this:

https://torchforkdataweb20191023021927.azurewebsites.net/Hardware?refinementList[Manufacturername][0]=Logitech&&refinementList[Tags][0]=Webcams

You’ll need to keep track of the current refinement in your code and then append the new refinement on the url.

That makes sense. Is there a shortcode for the template that does that by any chance? I’m not sure how to implement that other than maybe using javascript in some way

Hi @sgtkellogg,

We don’t have any shortcodes, so implementing in JavaScript is the way to go to save the state of the current url and then add the other refinement to the end of that url.

I’ve got a codesandbox that demonstrates the routing which may be helpful.

Ok, thought so, thanks for the response! I ended up using a single URL based on your earlier example which got me to the result I was looking for.

1 Like