Facets Need Clicks0:03
All right, so here you can see we have highlighted search results, which is pretty cool and really easy to implement. And then off to the side we have our facets. So we have all of the top authors who are included as part of these results. But yeah, right now in our implementation, you can't click on these, they don't do anything. So yeah, let's discuss two different ways that we might go about implementing this. Alright, so let's start within our search view.
that we might go about implementing this. Alright, so let's start within our search view. And yeah, you should be focused on the aside here. So notice we loop over each facet and for each one we display a div that contains the heading as well as a list of each filter for that facet. And yeah, once again, if I switch back, we have our heading and a list of each filter. Cool. So yeah, one thing we could do,
Facet Links via URL0:43
and a list of each filter. Cool. So yeah, one thing we could do, it's maybe not the most flexible option, but maybe it would work for you, is just make each of these filters, uh, an anchor tag. So yeah, you don't even need a form in this case you can dynamically figure out what the URL should be and what the query string should be and then the user clicks on it and it just reloads the page. That would be an option. So here's what you might do.
and then the user clicks on it and it just reloads the page. That would be an option. So here's what you might do. In that case, this would now be an anchor tag. So let's wrap it. And yeah, once again it's still going to visit the search page. So now if I come back and refresh, yes I can click on any of these, but we're not doing anything, we're not taking that value and sending it along with the request. So let's make sure we do that as part of the query string. Maybe something like this in the query string,
So let's make sure we do that as part of the query string. Maybe something like this in the query string, we'll set the author name equal to the filter value. Alright, so now once again, if I click on one of these and I open up the URL so you can see better, sure enough it passed through author and then Stephen King in this case. But here's one issue. If I look for what's the Stephen King book? How about uh, it's not gonna work. That's too generic.
If I look for what's the Stephen King book? How about uh, it's not gonna work. That's too generic. Um, the Shining, okay, so now if I click on Stephen King though, watch what happens. Currently the URL includes the query, but when I click on Stephen King, we lose the query because it wasn't included, uh, when the user clicks that link. So let's make sure that we merge in any of the existing, um,
Preserve Query Strings2:07
when the user clicks that link. So let's make sure that we merge in any of the existing, um, query string values, uh, in the URI along with author and here's how we could do that. So, hmm, let's do this. Let's swap it out entirely with a call to Laravel, uh, URL query method. This allows us to generate an absolute URL but also send through query string values. So for example, if I just did something like this,
but also send through query string values. So for example, if I just did something like this, we're gonna get a URL to search, give it a refresh, click on it, and that's the URL, right? But if I command click, we can also send through query string values. So if I were to say, excuse me, excuse me, two times fu is bar and come back refresh. If I click on this now, you'll see we went to search and then we appended fu equals bar.
If I click on this now, you'll see we went to search and then we appended fu equals bar. It takes care of that for us. So yeah, what you could do is maybe start with request, um, all or maybe just grab all of the things within the query string. So now, yeah, if I switch back, let's look for once again shining. All right, notice the query string. Next.
for once again shining. All right, notice the query string. Next. If I click on one of these, notice it retains the query string. So now all I have to do is keep the existing query string, but then merge in currentAuthor. So if we wanna do that, maybe, and I apologize, I don't have too much real estate here, why don't we switch? Yeah, that's better. Okay, so let's do an array_merge
estate here, why don't we switch? Yeah, that's better. Okay, so let's do an array_merge and I'm gonna merge in the author equals filterValue with the existing, uh, query string. Yeah, I think that looks good. So let's give it another shot. Let's start from scratch with the shining up. Uh, we have one issue here. What did we forget? We forgot to close out the, uh, array there. Alright, refresh. And if I take a look at the URL,
We forgot to close out the, uh, array there. Alright, refresh. And if I take a look at the URL, we have searchQuery equals theShining. But now if I click on StephenKing, it's not gonna update because we're not yet doing anything with that value. But if we take a look at the URL, we have our authorName and we still have the queryString, which is what we want. Okay, but now what if I were to search for onceAgain matter if I give it a refresh, now it resets the authorName and that's probably what you would want, right?
if I give it a refresh, now it resets the author name and that's probably what you would want, right? If I make a new search, I probably don't wanna retain any of the existing, um, filters 'cause that wouldn't make sense. I wanna start from scratch, look for matter, and then filter it down to any of these authors, uh, as you can see here. Okay, so now let's do this. Let's add a class of link.
Backend Author Filtering4:45
Okay, so now let's do this. Let's add a class of link. No, I thought tailwind had something for that. Alright, let's say text-blue-500, hover, underline, just quick dummy styling and um, yeah, that would work. Okay, so now that we know how to update the request, let's now receive that on the backend and figure out how to, um, tell Typesense to filter the results the way we need to. Let's switch over. I'm gonna open up my routes file.
to filter the results the way we need to. Let's switch over. I'm gonna open up my routes/web.php file and yeah, let's just do this right up here. Let's dd all of the request data so you can see what we're working with. So I will click on Thomas Hobbs here and sure enough we send through uh, an array ultimately that has the query as well as the single author that we are trying to filter by. Okay, so now why don't we check for that?
that we are trying to filter by. Okay, so now why don't we check for that? We could do something like this if request->filled(author). And by the way, if you're not familiar with filled, it determines if the instance contains a non-empty value for the given key. So it checks, do we have an author key and also is it, uh, populated? Is it anything but empty?
and also is it, uh, populated? Is it anything but empty? So if that were the case, then we need to filter by the author, right? So if I come back and give this a refresh, sure enough, uh, we caught that. Cool. So let's take care of this. What would we need to do in this case? Well, we would need to update the search parameters to be explicit that we need to filter by the author.
Well, we would need to update the search parameters to be explicit that we need to filter by the author. So with that in mind, I'm gonna select this entire array and I'm gonna save it to a variable called searchParams. And then I will declare them right up here. That way we can append to it. So now if we have something for author, yeah, I wanna do something like this searchParams filter by which we learned about a few episodes ago. And yeah, don't forget the format, it'll be field name.
by which we learned about a few episodes ago. And yeah, don't forget the format, it'll be field name followed by a colon, followed by the operator, and then the value itself. So in our case, I wanna say well filter it down to where the author is equal to the value that was passed through the query string. So I can say author colon equals and then I will append the request->author. Okay? So now at this point, if I were to die
and then I will append the request author. Okay? So now at this point, if I were to die and dump the search brands and I give it a refresh, now we are querying by matter, we're searching through the title field only. We're gonna face it by the authors, but then I'm gonna further filter it down. The only books I actually care about are the ones that match my query, but also were written by Graham Green in this case.
that match my query, but also were written by Graham Green in this case. Cool. It's just not that hard. So let's bring it back. We now perform our search. We return results written by Graham Green and then, uh, we render them. So let's give it a shot back to the browser, give it a refresh. Oh, we got, could not find a filter. I keep making this mistake.
Oh, we got, could not find a filter. I keep making this mistake. Don't forget it's actually authors is the field name because of course a Book can have one or more authors. Alright, so now if I come back and I give it a refresh and yeah, I don't know this book, but I do know it was written by Graham Green. Okay, so we're doing fairly well in this case. Uh, a couple little things though, like let's look for Hobbit instead, we know that's written by um, Tolkien.
Fix Link Precedence8:02
Uh, a couple little things though, like let's look for Hobbit instead, we know that's written by um, Tolkien. And if I click on one of these, well yes, I see the results and I am filtering by Tolkien, but notice if I try to select something else, it's like it suddenly stopped working and that's because we'll notice the author is not updating. So what's going on here? Well, I'll show you, let's go back to phpstorm into my search page.
Well, I'll show you, let's go back to PHPStorm into my search page. And yet right here where we build up the link, we are taking the existing request, but then we are merging in the author. However, in this case, I want the new author to always take precedence. And right now we're doing the opposite. If there is an author in the query string, which there is after you make your first selection, right?
If there is an author in the query string, which there is after you make your first selection, right? That always takes precedence over what you provide first. So this is an easy fix, we're just going to move it to the end. And that's it. So now if I come back and refresh, I should be able to filter by David Winsell and yep, that's working. Let's go to Chuck. Um, yeah, I guess we have more than one book called The Hobbit,
Limitations and Next Steps9:04
Let's go to Chuck. Um, yeah, I guess we have more than one book called The Hobbit, which is a little weird, uh, but it is in fact working. It's gonna matter. Let's look for Gar Reynolds version and uh, take a look at that book if you want. Okay, so let's talk about the pros and cons here. Pro is it's actually fairly easy to implement. All you really need to figure out is what your URL should be, and that's just not very difficult at all.
what your URL should be, and that's just not very difficult at all. However, a downside is you can't multi-select. So notice in all of these cases, you select one author and that's the author you're gonna get. Uh, there's no way to say, well give me multiple authors. I care about searches that match this query and are written by this author or that author or that author right now we can't do that, right? Uh, it's just not going to work. So that's an issue.
or that author right now we can't do that, right? Uh, it's just not going to work. So that's an issue. Instead, we might solve that by returning to a traditional form. That way each of our filters could contain little check boxes. And if I check each one, that will update a list of authors that we ultimately send, um, back to the server. So I'm gonna show you how to work on that in the next episode.
So I'm gonna show you how to work on that in the next episode.
