On this Craft Cms lesson we review the search & results syntax and apply it to our own templates.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right guys in this lesson, we're going to take a look at the search and how we can integrate Craft syntax to find the results. So if we remember our, webflow template for search, we had already a very similar look and feel to the movie's template. So what we want to do is create a folder.
We're going to call this search and inside we're going to create a file for the results page. And what I want to do is simply copy the code from the movies template, and we're going to paste it in our results page. We're going to need to remove those variables at the top, and we're going to create new ones. We're going to create a variable called search query.
And it's going to request a parameter from the URL. So this parameter is being requested from the results based on the form field. We're going to see that in just a little bit. Now, all this code is actually from Craft. So if we go over to the documentation we can just copy and paste it, but I want you to understand what it's doing.
Right here we're creating the query, so we're calling all the entries from the section movies, and we're going to search through this little query. To see if we can find any results that match the search query variable that we have above. We're also going to filter this by the score, this little parameter, what it doesit's just going to filter out the best results for us based on that search query or the letter Q in this case.
All right, let me simply swap out the variable here. And we're going to use the filter to count the total amount of results we find that's using the filter in twig syntax. So movie results, and we're just going to output the total and for the for loop, we want to make sure we change that to the correct query "movie results."
And let's move that header and bring it inside the conditional of if there's movie entries or if something exists within these results, then we can output the title of movie results. And we're doing this because we might want to search for actors and so I'm just adding this inside the same conditional.
All right. And the next thing is we need to head over to the Nav bar include so we can find the search form. And all we have to do is swap out the action. We're gonna change that action to a URL of search/ results because that's the template we just created. That's where we want the users to go to when they enter their value in the input form.
And for the name of that form or field, it's going to be the same as the Q that we mentioned. That can be anything you can put anything you want. We're just using the letter Q cause it's short. But once you actually use the form field on the site, you can look for anything and it immediately takes you to the template we created.
Notice how on the URI we have the letter Q. With a question Mark, which equals, and then the value that little value is what's being pushed into the movie results as a search. And the cool thing about this is that we don't have to worry about indexing all the time. This is something craft does immediately and without an ex extra costs or additional costs, which is really cool because webflow does not allow us to do that.
All right, so let's go ahead and copy this movie results, entire snippet, paste it in and just swap out the information so that we can find actors also.
Again, all the variables need to change in this instance. So the title would be cast the variable movie results, copy and paste that. Cast results, it's going to be our new variable change this section to cast, which is the handle. And make sure we change the variables in our conditional, both on the title and on the for-loop.
Make sure we use the correct card. So the component actor card right now, we're using the movies. So that should be all set. And now if we want it to search for actors, all we have to do is try it out. So let's type in Peter Jackson, which is indeed in our database. And boom, there we go. We have that results right there.
All right. So what we want to do is make sure we add that conditional above also on the entire little section so that we get the results from the, so we don't see the actors or the movies content block. If there isn't any results from there. So that's what I'm doing. I'm just adding that same conditional above it so that we don't have that excess of space.
And just like that we refresh, we should be able to see it working pretty good. All right. So let's jump into our next lesson to overcome one of the features I'd like to have in webflow, but we don't, and that is our wishlist. So I'll see you there.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS