Laravel E-Commerce - Search w/ Algolia (Autocomplete) - Part 21

what's up guys welcome back and in this video I'd like to extend the search we did in the last video and use our Golia algo leah is a service that greatly improves the user search experience adding features like extremely fast search results as you type typo detection and so many more features you've probably used it before here are a few sites that use it so the laravel documentation uses a here lower castes uses it to search for a lessened secure well tailwind uses it in their dogs and so many more other sites now there's a few different plugins available that all do search but have different use cases there's instant search and here's an example here let's see actually no it's back here they have an e-commerce site that sort of looks like Amazon and it instantly searches as you type and gives you results there's an autocomplete and this just has a sort of drop-down of results so this one has NBA players and this is the one we're gonna be using and there's also dark search which is pretty similar to autocomplete but it specializes in documentation and several sites use it like stripe bootstrap view actually if you look at a lower caste lower caste has both types lower caste has the autocomplete up here so if we search for our kolya but if you press Enter without selecting one then it uses the instant search which is dedicated for margin just more than just the autocomplete of a drop down it has stuff like filtering and more features but for this lesson we'll just focus on the autocomplete so in order to work with El ghoulia we have to put the data we want to be searchable in what they call an index and that lives on their servers so if you're paranoid about your data being on a third-party service then you probably shouldn't be using this another reason they need it on their servers is because their servers are highly optimized in order to produce the really fast queries so there's two steps step one is to put our data on their servers and step two is to use their JavaScript API to work with the index data on our sites front-end for step one putting the data on their servers this is essentially what laravel Scout is for it's responsibility is to put our data onto our Golia and keep it in sync every time we make changes to our model so let's go ahead and install Scout so let's go to the installation here it's composer require it and then we can publish the config using this command after it's done okay let's publish the config and that just made a new config Scout file and now we just have to add this trait in our model so let's go and do that so the product the model is our product and we already did this in the other search but this time we're gonna be using our kolya so a searchable trade is from the other video we'll try to leave it and use both at the same time hopefully that works all right and make sure we import it I could just it is okay what's next yeah you should cue it they'll be more faster but we're not gonna do it in this instance take a look at my novel horizon video if you want to know how to use cues so we are gonna be using our ghoulia so we have to install this client sorry I forgot to make my font bigger for you guys it's bigger now now let's take a look at that Scout config and we're using a ghoulia and we need to enter these into our environment file and I'm gonna do that behind the scenes so you don't see my credentials and this allows our laravel app to push up and index to algo Leah okay now we need to push our products table data from our database up to our Golia so before we do that let's just take a look at the documentation first for Scout so this method searchable as it just lets you specify the index name on algo Leah by default it's just going to use the table name so in our case it's going to be called products but if you want to change it you can use this next is this method to searchable array if you don't want to push up all the fields for example let me just open my database here if you don't want to push up all of these fields for example you don't want to push up they're created and updated at then you can specify an array of fields to return here but in our case I'm just going to everything up and also should be searchable will only push up certain data based on this so for example I don't have this field yet in our products but if this were a real app I'd have a column called quantity and we don't want the product to be searchable unless the quantity is greater than zero so we would add this method and do return this quantity greater than zero and Scout will take care of only pushing up those models that satisfy this condition but in our case we're just gonna push everything up since it's just a demo app so let's go ahead do that so to do that we do PHP artisan Scout import and specify the model so app product okay it says it's been imported let's take a look if that index is an algo Leah so color indices and indices and there it is products and there's 84 records here theaters 84 yep there's 84 and laravel Scout is smart enough to know if we added a new one if we edited one so let's go ahead and just go to our admin and we'll add one and then we'll edit one just just to see if I'll go your picks up on that so men okay so I'm gonna add a new product in Voyager here okay let's do Samsung Galaxy S nine Samsung Galaxy S nine the new phone actually I already did this in my other project so let's make it 99999 the latest flagship phone from Samsung and yeah we'll make a feature image let's I have an image here and it is a mobile phone oh I don't know why this is required let me just put the same image and I guess I made these required to let me just do this I don't think this works but whatever I just want to put it in there okay so that's in there should be in there there it is and let's see if I'll go you picked up on that so products and there it is right there if you could see there's 85 records now just one we just added and we can use it here and just search for Samsung and this is the details we just entered okay now let's check if editing works so let me edit this and let me edit hopefully I'll go Leo sees okay let me just save this I don't know how it's asking for validation I mean for an image okay and check out ghoulia and refresh this there you go so I'll go your picks up on it cool now let's specify the fields we want to be searchable for example even this is searchable right now which makes no sense see so if you go to ranking we only want to name details and maybe description to be ranked or searchable so name and the highest has the most priority details and description and for ranking based this is based on sorting so maybe we can specify the price for that cool we can save that and now if we go back this is no longer searchable because we specified which fields we want to be searchable all right so now everything is configured in Alec Golia the next step is to get this working on our application using the JavaScript API now there's drivers for the major frameworks like react and view and again I I'm really tempted to use view but I'm just gonna stick with vanilla JavaScript for this and maybe in a future video I'll switch it over to you okay we're gonna use this demo like I showed you earlier as a base because it looks pretty good already and we'll just modify it after this okay so let's see what's going on here mmm okay we don't need to do this because this is already done using label Scout that's sort of the back end portion and that's the same okay so here is where the markup is actually we have to add yeah let's add the JavaScript first supposed to grab this and I need to put it in those views again so there's four I believe so shop one product to cart three and the actual search page let's just search for laptop for okay so we have to add the JavaScript and the CSS on those pages okay so start with shop shop top blade and new section extra Jas and we just paste that in and I'm also gonna make a custom one actually that's what that SRC as well and that's gonna go to just it's gonna put it in the public folder and call it I'll go Lea Sachi is let me show you what I mean I'm gonna go to the public folder we can put it in resources resources assets yes and use NPM to compile it but for this purpose I'm just gonna put it in the public file where is the public for their lives jeaious and it's like a new one I'll call the US and I like to do this okay so shop what's next so I mean it me just copy this cuz we're gonna use this for all for those views so shop product straight down here and then that cart and then search search results cool okay now we have to do the same for the okay so this is the boiler boiler plate here and this is the public key so it's okay if you guys see that okay so I'm gonna put this sorry we don't need that this in that custom Algol ejs I made cool and now this is the mark up so I'm gonna grab this and this is gonna go in our search partial so this is a search partial this is the original search we had I'm just gonna put it on top and hopefully they don't interfere with one another and I'm gonna use this CSS themed which is pretty much the CSS for this so let me just grab this and I'm gonna do the same thing like we did for our JavaScript so where's public right here CSS make a new one called oh cool yeah dot CSS they start in and we're gonna make some modifications here so leave that and we have to add it to those four pages again so where am I going shop extra CSS this CSS I'll call the dot CSS so just copy that and do the same for the rest of them so product cart and search results cool okay so if i refresh there should be two search boxes here now hopefully that worked and there we go here is the al-khalil one and here's the one from before so Oh some made minor tweaks I want to hear search for players obviously we don't want that so if we go into the search partial just name it search with I'll go Lea okay cool and then I want to make this as long as this I believe it's I specified in my CSS 350 pixels and I think this is only 300 pixels so here 300 pixels so we'll just change that to 350 and there's another one this is the drop-down where the search results go okay up to 350 and actually it see if this works okay it doesn't work yet see what's going on actually that's a refreshment that should have been how come it's not changing to 350 actually sorry it's 400 pixels so 350 it's 400 400 check that out there you go all right let's see what's going on here shut the console okay so let's go into our JavaScript so I'll go Leah so this is products and this is a number of hits so change it to 10 and see if that does anything okay value of undefined so down here okay so there's no team because that was the example so this is should be price and because price is not a key we don't need to do the highlighted result so yeah I should do it hopefully and now hopefully this works and it does there you go it's searching our database and it also highlights it so let's make a few more minor tweaks here I like the highlight to be a little bit more visible and the hover I'd like to be more visible so again this is just in our CSS I think it's somewhere in here where is it okay so this is the hover I'd like just to be a bit more visible so I'm just changing the Alpha okay it's a bit more visible and also the thing that's highlighted is this so let's change it to like 0.4 not too much 3.3 okay shy poor three whatever you want okay that's good to me okay let's make this more dynamic the first thing I want to do is there's no error message or not error message but like there's no message just as there's no results so to do that back to our JavaScript if we make another method here called empty and taking the result and we can just return the message here sorry we did not find any results for let's put that in quotes actually like this so that and then I'm going to concatenate result dot query is what you tucked into the text box and it's close that quote let's see if that works so let's type in some gibberish and there you go sorry we did not find anybody at school okay the next thing I want to do is when we click on one of the these results I want this to go to the actual product page so if we add something here let's see empty okay so right here if we add this method again this is in the documentation so just give it a read but this listens for when you select one of the items so this suggestion is just the object that's selected and that has everything we need so we just open up dev tools and show you what I mean if I select one of these you'll see it here in dev tools and that nothing showed what happened there it is there so we have the slug and that's all we needed to generate the URL that goes to the appropriate product page so let's go ahead and do that so let's just do window dot location dot H ref that will just go to a new link and window dot location we know that location dot origin just takes the origin of whatever URL you're on so it takes out all these extra parameters so if I do window dot location the origin this would return laravel ecommerce example dot test there you go so let's use that and we wanna append slash shop and we want to append suggestion dot slug and that should do it once we click on it it should go to the appropriate product page so laptop one or laptop 11 there you go it works cool okay the next thing I want to do is add more fields to this results view for example I want the details to show up so I want this to show up as well and this is probably too long so we'll leave that out but like I said I want it to appear underneath and we also have to change this to cents I mean two dollars so a few things that I never figured out maybe if one of you guys know please let me know in the comments one is you can't inspect this you try it there disappears and if you drill down I'm sorry the wrong one if you drill down the farthest you'll get is to this data set so kind of sucks that you can't expect it which was difficult in figuring out how to add like additional information here I just did trial and error until I got it right also there is an option to use templates here instead of just putting all your markup in here but I couldn't for the life of me figure out how to do that so if someone knows how to do that please give me an example because I tried for hours and I couldn't figure it out so we had to put all of our markup in here so because I had to do that I'm gonna use es6 template strings because it's just a bit easier to work with when we have markup combined okay sorry I forgot the equals so what I realized here is this container that it's being put in is actually a Flex container so if I for example if I add one more field here if I just did this let me just show you what I mean hello then it's going to have three items in one row let me just take this out this might not make sense to you but just bear with me so now it's gonna have three items in a row because it's a flex container and it's justifying it with the space between and you can see that in the CSS so space right here so I wanted a new row but I couldn't do that unless I took this out so let's take this out and now you'll see that they're not in a row actually we have to we have to take not this so we're gonna take the display flex out so if I take that up then you see that they're just pushed up against each other so okay so I played up with I play around with the markup until I got it right and here's what I came up with we're not gonna do this because it gets messy but we'll use that as a base and here's what I came up with okay so I'm gonna make a new container call it I'll go Lea result and then in this container this was gonna be a Flex container as well and it's gonna contain a spend and what am I gonna put in here I'm gonna put the name so this right here and gonna put that in variable and the next item I can't use em it in here it's gonna be the price so if I just copy that we want a dollar sign suggestion the price but we're gonna divide by 100 because it's incense and we want it in dollars and we can use the two fixed to make sure there's always two decimal places and it's close that span and Wiser's quickly they're probably because we're not returning it return markup okay let's see if this works this should be I didn't do the CSS yet so it should look weird and doesn't work missing oh sorry I forgot a bracket here there you go okay let's see this works okay it's not styled yet I have to style this so if I could I'll call ya CSS and I add a new one down here for that container we just made so it was how cool he was what I named it uncle e result and we're in display flex justify content space between and a line items center and this should look exactly like it did before it does cool we have to tell her it's working so you're probably wondering what did that do so what this allowed me to do is it allowed me to add another row which is what we're gonna do now let's add another div class equals I would call your details and we should wrap it in a span and we can just do this but instead of the name we can do the details and close that close the div and that should do the trick now we should have another row with the details and we do cool but as you see it's not highlighting the text were typing anymore that's just a CSS issue which is right here I think we don't want it to be the direct descendant so we can take that out we don't want it to be the first child so let's take that out and we don't need this anymore let's see if that works I just wanted to highlight it doesn't work see what is going on oh sorry you don't need that comma okay let's try it again see the highlights and it does let's see if it highlights it does cool so another cool feature that I want to add is maybe have the image just a really small image show up here so we can do that as well back here we can just add another flex item in here which is just an image tag and we'll worry about the SRC in a second put the alt tag in there let's give it a class so we can control it with CSS so how are we gonna get the source we already have that since we have the image here we just have to prepend the URL so let's go and do that so the source is going to be window the location that origin slash suggestion dot image and that should do it now it might be a giant image for now but let's just check if it works and it does so all we have to do is just change this here self of this so it's not gigantic I also want to maybe change the text of this detail section to be a bit lighter so let's go ahead and do those two things in our CSS so I'll go the thumb and let's just give it a max width and a max I'd so 35 pixels and same with the height oops max idea and for the details this just change the color color I just picked a random lighter gray and let's see if this works hard refer it did not work did I spell that right let's check if they're okay so the details tax changed but what's going on here Oh forgot an opening quote here awesome there you go it looks pretty good actually you see how there's three items and they're being justified with the equal amount of space I sort of want this to be on the left side here close to the image and I think I structured my HTML yeah so I want this to be inside of this spend so there's only two flex items just like that and then put the image right here and that should do it there you go that looks much nicer TV okay cool so there you have it guys we've managed to use our Golia to make our search experience that much better please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one kay thanks bye [Music]

Channel: Andre Madarang

Views: 22,894

Keywords: laravel ecommerce, laravel e-commerce, drehimself, andre madarang, laravel search, search laravel, laravel search products, laravel search tutorial, laravel search form, laravel search results, laravel text search, laravel column search, laravel algolia, algolia laravel, laravel algolia search, laravel algolia tutorial, algolia autocomplete example, laravel algolia autocomplete, algolia autocomplete, laravel scout search, laravel scout tutorial, laravel scout

Id: Sa0R_2aHICw

Length: 38min 59sec (2339 seconds)

Published: Fri Mar 09 2018