Laravel E-Commerce - Search Products - Part 20

what's up guys welcome back and in this video I'd like to implement search into our application we'll add the ability to search our products database in the most basic way possible we'll then add a level search package that makes our search a little bit more robust for example it will search multiple fields and give certain fields priority over other ones in a future video we'll take a look at using algo Leah for search which makes our search more interactive and provides a better user experience alright so I've done some minor prep work for this lesson I've added a search text box here in a few pages so wherever this bread comes sort of component appears I've added this search box so there's one here in the shop page there's one here in the product page and there's one here in the cart page so you'll see this search component there too let me just show you so here's the shop page I actually put that breadcrumbs in its own component let me show you that breadcrumbs right here actually and here's the partial for the search which is right here and it's just a basic form input name equals query it doesn't go anywhere yet we'll work on that so what will happen here is if I just search for something you'll have a query string here so that's what we want to have happen and we want to have a search results page here with all of our search results so let's go ahead and do that so in my routes file here I want a new one called search search and we'll just put it in our shop controller we can put it in a new like product search controller but since it's only one method I'm good with just putting in here we'll call a new search method and we'll call it search so let's go ahead and go to the shop controller and it's add that method so all right here search it's gonna take in the request and let's just return the view which doesn't exist yet but we'll make it just call it search results and let's go ahead and make a new view here so where are we right here so let's just copy one of the pages I'm just gonna copy the sorry that's not it copy the product page so product that blade up HP let's just duplicate that let's call it search results stop blades dot PHP okay so let's change this to search results and we can leave this for the breadcrumbs we only need two we just need this and actually just leave that one let's remove this one and let's call this search and it's make this search container and we'll leave that to just remove all of this stuff everything here and this now ends the search container search container let's just put some stuff in here to make sure it works and well we don't need this partials that might like we don't need any of this extra Jas and yet see if that works so laptops okay oh yeah I have to UM change the form the action so the route is called search search let's try it again from here up tops or laptop and the refresher let's try it again there you go so it goes to the correct page the breadcrumbs alright and it looks good so I want to make sure that our query stays in this text box when there is one so let's go ahead and go back in here let's put a value equals let's just do a request go global input query and that should populate that field if there is one and there is change it to appliance it should stay there cool all right now let's make sure that our search results go in here so let's focused on making this look nice or decent at least am I going I am going to the search results page and we don't need this it's an h1 here call it search results and it's also put like sort of a counter to how many results there are so just put in a paragraph tag so for example five results put that in the bracket four again require input query and we'll close that up see if that works okay it looks good to me and yeah now let's wait I'm missing a and one there okay and now let's focus on displaying the results here so back to our shop controller and over here what am I gonna do I'm gonna make a new query product search sorry now search where name and revenues like and we're gonna just to make it a little bit dynamic instead of just putting the query in like this we're gonna wrap it with wild cards if you know anything about SQL you know that the wild card is the % so if I just do this percent percent then it's gonna look for anything that contains this query that people pass in instead of just the query itself later on when we add a package we'll make this more dynamic but for now this is pretty good for our needs and let's just pass that in with products products and now we should have access to that products in our view so search results and let's just go over that be for each products as product and let's just wrap it in a div and it's just a product name see if that works and undefined variable query oh sorry back to our controller okay sorry I meant to grab this and just get it from the request request input query just like we've been doing and it's not showing any results I think that's because I always forget to do this get you need to do that and now so there we go there's the results for our query and it's make sure that that's correct so back to our we can get it from here or we can just do in the view it's simple enough so let's just doing the view so right here I'm just gonna do products count and yep so that's right nine results and here our our our nine results let's trust me else good laptop there should be more for laptop and there is with 30 results and they're all here cool alright one thing I want to do is just some validation we don't really want to search for something that only has like two characters because that might produce too many results trigger for example that's gonna the letter is gonna produce a lot of results it's not too many in our case but this is returning everything with the letter e so let's validate it and make sure there's at least three characters so here let's just you request validate make sure just let me call in and the query should have what should be required and it should be minimum of three characters and let's try it out it works but I don't think we're displaying the error messages in our view so okay cool so it works but we have to make sure we display our error messages so let me just grab a snippet from one of the views that does have the error messages I think this one does so it does this one just shows the message the error messages or the success message if there is one so I'm gonna grab this and make sure it's in all of our other views that don't have it so this one this is a search results one and let me just reinvent this and let me just also wrap it in a container div and see if that works let me refresh that and let me just put something with two characters and there we go query must be at least three characters cool I'm just gonna quickly do that for the other pages so the other one was product blade so right here and then for the shop right here cool and let me quickly test that up so shop two characters okay product two characters okay and for the cart there was already messages here so if you try here there you go cool all right let's search for something again all right now I want to sort of just make this look nicer so I want to display all of our search results in a nice table so back to our search results page right here actually I have a snippet of code that I'm going to paste it's just a table which I just copied from the bootstrap documentation use uncomment this and if you look if i refresh it looks pretty decent and I'm not using bootstrap here but let me show you what I did I actually just ripped all the table styles from bootstrap for I literally just looked in the bootstrap dot CSS file and just copied everything that had table in front of it and that works for us so and now we have a nice table so let's just go ahead and change this table so our data isn't it so back into our search results just in that this okay and I'm gonna for the headings we'll do with the product name we'll do the product details we'll do the product description and we'll do the product price and for these we're gonna loop over them so we don't need these two and it's go ahead do that so be for each products as product and it's gonna put this in there they should have indented that okay so I'm gonna just put our product information here so product name is the first one just copy this oops and then product details and then product description and then price present price and let's see how that looks it's looking good to me so here's all 30 of our results and we don't need this stuff anymore also I want to do a few things I want to link this to the actual product page so let's link this to the product page and I kind of want to shorten this so it's only on one line so let's go ahead and do those things so we don't need this for shortening there's a string helper in laravel called STR limit and that's gonna do what you think it's gonna do it's gonna limit it to however characters you want and it's gonna add three dots at the end so that should do it for that cool and let's go ahead and link this off so I'm gonna make an anchor tag and where am I going to link to so it's gonna be shop so and the second parameter is just gonna be the product which we're looping over and the slug is the parameters that we need it's gonna put this closing tag in the right place right here and that should link out there's no CSS for it but it's actually a link there is for the hover State so see if this works laptop four and it goes to the appropriate page cool now if you want pagination I already have a video on pagination but it's the same exact thing so in our controller where's my controller just change this get to paginate and however many results you want per page 10 and we also have to change something in the view if you look at our product to product products on the shop the shop view yes you'll see that right here is how to get the links for pagination and it also preserves any other query strings we have so let's go and do that for the search results let's put it right underneath the table let me just indent this cool to put it here and it still called products so this should work the pagination should work at least cool so we have pagination right here ten results per page ten ten ten now if you want this to be like an overview of how many results there are for the entire query then instead of doing where are we here products count you can just do products total and that should be 30 in our case there we go and you can make it more fancy you can do like page one of two but I don't want to do that so let me quickly just style this I'm mostly just spacing like I want some spacing here so spacing down here and also like underneath this so what I'm gonna do let's call this search results count so I can target it in my CSS this is already called search container let's call it search results container and then go into my CSS wherever that is all right here so underneath pages it's like a new one called search results okay and it's gonna add a few things here search results container let's give it a minimum height of like 500 margin on the top and the bottom so for the links just so we know it's linked just add a few things here color dark blue will add a hover state text-decoration:underline and it's to one for the search results Celt mb 20 and let's make sure that we are adding it in our pages here pages search results and we do npm run dev cool let's check it out okay so there's an issue with the container but everything else looks good what did I do wrong search results container container okay I see so this one is overriding that one okay so let's just change this which one's overriding margin and search result continue yeah so this should be auto npm run again cool let's check that out and there we go cool okay let's quickly talk about how dynamic this search query is so earlier you saw I added these percent signs which makes it somewhat dynamic for example if I search for top it should still find laptop because we have those percent signs and it does cool and there's additional stuff here too but if we took those out then it wouldn't find that because it's strictly searching for the word that we're searching for in this case there's none and it wouldn't find that because all of our results have like laptop one laptop - so I did laptop one that should find that top one so yeah you definitely need those percent signs to make it usable but right now it's only searching the name column what if we wanted search results to include the other columns as well specifically the ones that were showing so details description and that's it and furthermore how do we add like certain way - which results we want to have priority so for the first case where we just want to include results from other columns we can just do something like this so we can just add another clause it'll be or where and we can just add each column we want so details like again and we're gonna do the same thing we're just gonna copy this and we can grab this and do it for the next column so what's the next column its description and this should go at the end though that down here okay and that should work so if we go here I'm searching for laptop one and let's also search for something here so like 15 inch and it found the results is search for something in the description I think this will result in a lot of results yeah it does because this is pretty much in every product but now we have a somewhat of a more dynamic search query but if we want to go even further for example if you want to give certain weight to certain columns then this can get a bit messy so this is when we can use a package like this this one is the one I found to be most useful and easiest to use so - the things that I use that I like is it does like an entire text search so by that I mean if I search for a string for example this string over here if I search for just this and just this as a user ice kind of still want results that have that but our search as it is now it's not smart enough to do that so this should result in nothing okay and this package automatically does that for you and the other thing it does is it gives weight to certain columns you can see here so let's go ahead and install this oh I'm gonna copy this I'm gonna do a composer require and then what's the next thing says add the trait to the model and your search rules so I'm gonna add this in my product model because that's the thing we're searching over so product when I copy the you statements let's put it here and what's next we're gonna use the trait so right here searchable trait and let's just copy this whole thing over here and copy okay so this I believe is if you want to search for relationships which in our case were not doing so we'll just take that out and here is where we want to specify the columns we want to search and the associated weight we want for each column so it says right here the priority that has a higher number is more important and anything that's equal has equal importance so let's go ahead and do that some products name let's give that weight up 10 because we want that to be the highest next is products pot details let's give that a weight of 5 and products not description and let's give that to like it's already there and that should do it now in our controller we no longer need to do this I'll leave this in here for you guys but all we have to do now is products is product search and all we have to do is pass in what we're searching so query and we can still paginate it like we're doing before that still works and that should work automatically let's see if it still works let's just say this actually let's just see if this works now it should because it's doing a full-text search and it doesn't see it found the results with this string but it's spread across the entire string and everything else should still work the same but now our search is a bit more dynamic so there you have it guys we've managed to implement search functionality into our application allowing users to search for our products in the database we've then added this package over here to make search a little bit more robust adding priority and split multiple word search terms in a future video we'll take a look at using a service like algo lien to do our search which greatly improves the user experience it adds features like typo detection and search as we type thanks for watching I hope you learn something new make sure to comment like and subscribe if you haven't already done so see you in the next one okay thanks bad [Music]

Channel: Andre Madarang

Views: 34,456

Keywords: laravel ecommerce, laravel e-commerce, ecommerce laravel, e-commerce laravel, drehimself, andre madarang, laravel search, search laravel, laravel search products, laravel search tutorial, laravel search query, laravel search form, laravel search results, search results laravel, laravel search database, laravel searchable, nicolaslopezj searchable, laravel text search, laravel column search

Id: rsHO-RRwIH8

Length: 30min 38sec (1838 seconds)

Published: Tue Mar 06 2018