Laravel E-Commerce - Search w/ Algolia (Vue) - Part 23

what's up guys welcome back and in this video I'd like to explore how to use al Kolya with VJ s now I'm pretty happy with our current vanilla J s implementation and I'm going to stick with that for the master branch of our github repo so for this video I'll make a new branch and you can just check out that one if you want to see the view specific code so let me just make a new branch here let's call it view I'll go Lea okay so if you remember we have two of the plugins that I'll go Lea has we have this instant search here and we have this autocomplete here now I'll go Lea only has a view library for instant search so we'll make use of that first but for autocomplete it doesn't have one so we'll just make a custom view component for that alright so let's go ahead and started into my code and the first thing I wanna do is just get view installed so let me just go to my layout file I have to wrap everything in the idea app so like that and then here and now I'm gonna go to my search results i'll kulia view file and I'm gonna add what's gonna be the compiled JavaScript sorry I spelled that wrong script it's gonna be just a purchase now just go to our app is in our resources file and let's uncomment this will make use of this now let's go back to our view file and it's add the example components some are up here let's just put it right here all right let me just do npm install and now let me do a watch all right let's see if that appeared as an error somewhere mmm for some reason it can't find view loader not sure why okay so I deleted my package lock dot JSON file and I also deleted my node modules folder and I redid the NPM install and after that it seemed to work and here's our example component here so we know we have view working now let's go ahead and install this view component for instant search okay so this is to this NPM install the library let me just stop this and then we'll run the watcher again when it's done and we can import it in our app file so in our app ijs right up here let's just put it here actually and we can use it let's put it right here and let's run our watcher again okay so this seems to have broken our functionality let's go back to my code into the view I think I have to put the app above our JavaScript asleep that works okay so it's back to normal and that's just see how to use this view component okay so we can just actually grab this we don't need the templates cuz we're just gonna use it straight from within the view the blade file I mean so right here we don't need this anymore and we can just paste that in and see if that works and there we go now this is using their index so let me just put my credentials in here so let me just grab it from here app ID is this API key is this and the index names products and there is our index cool we'll worry about the CSS later let's just worry about getting all the components on the page for now so we have this search box we have the hits and now let's do this stats container so let's see your stats right here there we go so it's just this and we're just using the default settings so that should be all see if that works I'm not sure what happened I'm sorry I have to go within this a is index there you go that's where right there I didn't put that below the search box myself okay next is this refinement list so back here refinement list okay and the attribute name if you remember the last video is called the categories so let's put this refinement list on top of the search results right underneath the stats let me just put some space in here and categories and there it is it's the same as these ones down here you take this out epsilon nine ten nine thirty a yep it's just this one is ordered I actually did this behind the scenes after the last video let me show you what I did there so which one was that it was a refinement list yeah I just added this sort by name ascending so if we go back to the late file let's check out the documentation so refinement list here this so sort by we just add this as a prop in our view component and we can just add a name ascending there so we can just do this sort by as a prop equals name ascending and that should sort it cool so now it's in the alphabetical order next is pagination so pagination the frit there it is okay and I think I'm just using the defaults here so that should be it pagination is put it under the results and there is pagination does it work yes it does work okay cool you can see how easy that was using the view plugin now let me just replace this with our view version it's about our code so we're going to need to wrap this a is index here and it's close it out after this is done right here and then we can begin replacing each component so search box was in here so we no longer need that one cool and the stats container is this one okay refinement list is this cool and then in the other right side of the column we have our hits and that corresponds to our results here and the pagination as well so I'll just replace these and that should do it now we don't need this stuff up here and as he Forks it does lions okay cool now the HTML that it produces for some reason it's different than the vanilla JavaScript library that's why it looks weird pagination is all messed up but we can since we have custom CSS for our results we can actually make that work so let me show you how to do that so if you go into the template for the results in our original video or is it right here is the template that we came up with for the search result and we can basically do the same thing and we grab this HR as well so for our view component you can see that the template lives right here right here you just read that this so if I just put jibbers in here that should be what shows up cool so if I just paste it that in from we had before but we have to wrap it in a div because it has to have a root tag and now we have to replace a few things here so for the anchor tag I don't know why they disarray I don't need this origin I just need a relative URL so I can just do something like this I'm gonna use template strings here I can just do slash sharp slash and the result is the thing coming in and we need to slug and that should do it same with the image source actually I have to bind this now so I'll just do that it's the same with a source don't need this we can just use a template string again so storage and result that image so that should work and for these it's just the value coming in so name details and price and I erased it but if you want the highlight coming in it should be somewhere here where's it and I yes highlight right here we just need something like this let me just copy this and we can use this for the name and names correct you want this for the details let's go to details and for price there's no highlight but we can just do something like this since we're using since we're in a blade file we have to put at actually let me just do from scratch so we want a dollar sign you have to put at because we're in blade and we want to use the double curly brace so I'm gonna do result that price divided by a hundred not to fixed - and that should do it let's see if that worked and they didn't work okay just not showing why is it not showing I probably have an error somewhere that's a warning oh sorry result that image should do it there you go why isn't it okay like I said earlier the HTML that comes back is a bit different than the vanilla JavaScript version which screws up this CSS bíró so if you just look at this we have this instant search result class which I styled correctly last time so let me just look at my CSS and here it is I'm I'm nesting it under this a is hits item but I don't think that exists here it doesn't so let's change that to a is results so this is changes to or is it a is just - results and that should do it and watch her running yes it is and there you go now it looks like how was before well at least sort of and the rest of this stuff is just CSS and I'm not gonna go through that because that's gonna take too long and also the pagination is a bit messed up I think you just have to like maybe change to display flex and it will go in a row but yeah the HTML that comes back from this library is different so it affects the CSS so just spend some time and make it look like how it was before with your awesome CSS skills okay now let's work on this autocomplete plugin and like I said earlier there is no I'll go Lea plugin for view for this so let's just make a custom one for ourselves Center a code and I forgot what I called that okay so it's partials that search okay and this is the autocomplete markup let me just cut that and let me just put the example component here just to make sure it works cool so let's go ahead and make a new one I'm gonna call it I'll go here audio autocomplete and we will make a new component so what's going to that where are we resources assets components let's just duplicate this one let's call it our kolya autocomplete dot view and let's just do this let's go to our app is let's just duplicate this just call it I would call the auto complete and I'll call the autocomplete save it and that should do it right there okay cool okay so let's take a look at our original JavaScript which is here in that al-khali is actually no it's uh just paste the mark up and that should show now okay and there it is like it was before let me go back to the blade file now this appears on several pages but I'm just gonna do it for this particular page so this is the search results of ghoulia blade file and here is where we're calling it so I'm going to comment this out because we in replaces with our view code so this shouldn't work obviously okay okay so here is the JavaScript that makes it work so if I just copy everything in here go to my view component and just stick it in the mounted method then theoretically that should work let me just and then it looks decent say that it builds its refresh and it works but now we're using a view component but this isn't exactly the cleanest solution let's make it a bit more robust so if we go back into our other component we just did so if it's going to here and we can see that we're doing this index over here and we're passing in the app ID API key and the index name so let's do something similar for our custom component so we have to pass in props so we can do that here props and usually you might be used to passing in an array but you can actually pass in an object like this and we can pass in those three things so app ID and we can actually make them required here so type is string and required is true we can do the same for the other ones just copy this and so one for API key and one for index name and now instead of defining it here we can do we can just reference the prop so we can just do this the app ID they start API key and this store index name and back where we call it where is it in this search I think yeah so we can pass some props here and let me just grab it from here it's exactly the same thing cool and see if that works its refresh and it still works cool one more thing something similar say we want to pass in the place holder from here so like this place holder equals search with out Golia because right now it's hard-coded and we don't want that so where am I see right now it's hard coded in here in the template and we don't want that so we can just use a prop like this and just reference it using placeholder and we'll add that as a prop right any right here and we can actually set a default here so if we don't pass in the prop it will just default it to this but if we do pass in then it'll use that so that worked so it uses the properly passed in but if I take that out sorry it's in search I don't pass in the placeholder then it will just use the default there we go cool now this component can be cleaned up a lot more for example we can split this up into different methods and one thing I never got around to doing was extracting this tool maybe like a slot a custom slot or name slot or scope slot within view so we can put this in a template similar to how we do it in the other here let me show you area here so it has a scope slot here and the template for a result is right here I haven't looked into it that much on how to do that so I'm not gonna do that here but if I do just check out the github repo and that should be in there and like I said before we only did it for this page let's see if it still works okay but we see it doesn't show up here cuz we didn't add it for this page for the rest of the pages where this autocomplete appears so this is the product page let's go - let me just scribble is it yes this sorry it's this app guess and let's call it a product page and you can just add it right here and that should work hopefully and there it is does it work it does work and this Dajjal the script slower yeah the other JavaScript still works cool and so just add that on the other pages the cart and wherever else it this autocomplete appears so there you have it guys we've managed to extract our vanilla JSL Golia plugins into view components if you want to use view instead like I said earlier I'm gonna keep this in a separate branch and just go with the vanilla J's implementation we did before 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: 8,167

Keywords: laravel ecommerce, laravel e-commerce, drehimself, andre madarang, laravel search, search laravel, laravel search tutorial, laravel search results, laravel algolia, algolia laravel, laravel algolia search, laravel algolia tutorial, laravel algolia autocomplete, algolia autocomplete, laravel algolia instantsearch, algolia instantsearch, algolia instant search, algolia instant search example, vue instantsearch, vue algolia, algolia vue, vue algolia instantsearch

Id: OAdOlPH-uPo

Length: 28min 49sec (1729 seconds)

Published: Fri Mar 16 2018