Add to basket button component with Laravel Livewire

okay so we are now in our arts - basket button view templates if the first thing we need to do is to bind some properties and actions for the input we're going to use wire and then we're gonna go from model which will be represented by a QT Y for the quantity and for the button what we going to do is wire and click what we want to do is call our method if we now save it open our way not to basket button first of all what we need to do is add this property quantity so public it's going to be represented by the integer but at this point live wire it doesn't support type it's like properties so we can simply use integer and then quantity we have to just use the variable to serve the property names or quantity and then we're going to associate one to start with let's just block this way okay so quantity and obviously we have this action art so public function art it will not return anything so void let's talk blocks art product to the basket turn void and for the time being that's all we going to have let's just save it and preview it in a browser refresh the page if we go back to the products as you can see the basket up to basket button is still there but now it's actually displaying one which is being fetched from within our add to basket button class and its property quantity if I was to change it to five that will also be reflected on the front end as you can see okay so let's go back to one now we are going to be using session to store our baskets content during this course but we will create the repository together with its own interface so if you want to use anything else database anything else you may come up with you'll be able to create your own implementation files okay so what we're going to start with under the app we're going to create a new directory called repositories and here I'm going to go for another directory called contracts and within contracts I'm going to create an interface called basket repository contract and the namespace for this one is going to be up there we have repositories and last these contracts okay and the first method that we need at this particular time is the method called art so public function at oops it's not let's just go back one because it's not a class it's actually interface it's a public function not which will return void but it will take it will take integer idea of the product and integer quantity for that given product let's just own dog blocks and let's say art item to the basket return void as well with this so that's our contract now we are going to have another director and the repositories this one will be for the session one and he I'm going to have basket repository namespace again up come on not just up it's going to be up repositories and in session and this one will implement our basket repository contract so let's add this method stop for the add method and from here first of all obviously because we're using session I'm going to use a constructor here on this basket repository and I will inject in the session instance so session it's not a facade it's their contract session session let's update dog blocks and it's initialize the property so we pulling the session from the from the container as well that will be automatically resolved and now for the add method what we're going to do I'm going to add here dog books as well but other than these ones I'm just going to use inherit dogs from the contract and for the up method I'm going to just go through this session put and this identity ID and then we're going to have quantity as the volume so identity method let's just quickly create this one it is going to be a private one which is fine it's going to return string takes ID and now it's going to be get item identity I'm using item here being using product in the other place up to you how you want to call this so identity is simply going to be return it's going to have a string basket concatenate it with ID so in the basket we're going to have array basket we represent array of products represented by key and the quantity which will represent the value for that given product that's identity so that will add the basket basket index to the session with in this basket we'll just show you maybe it's something like this basket we're going to have if the product ID is 1 and the quantity 3 then that's what is going to be represented as ok so we have our add method now what we need to do obviously is to be able to access this particular repository from within I component but before we do this we need to obviously register this repository and to do this we are going to use our service provider yeah are we going to create the proper team which will be other public visibility single tones because that's what we need our session doesn't have to be reinitiated every time we call it so it's just a single tone and it's going to take basket repository contract class when we are calling for it give us basket repository instance and obviously if you create your own implementation then no it's the only the only thing you're gonna have to do is basically replace whatever is associated with this contract to resolve it through the container later on okay so that's our singles is that not that's now been registered so it's going to be available from within a container now one thing about live way again is we we can inject the service we can inject the class which is going to be solved three contain about if it's going to be private and I wouldn't want it to be public because everything public all public properties from within a component are then visible with responses to the client and obviously I wouldn't want to show the service class here on the repository class a all private on are only available on the first call when we actually mounting the component later on when we are refreshing the component doubt property is unavailable which means that obviously we would lose the ability to interact with this repository so in order for us to be able to access this repository what I'm going to do is create a helper another helper function under our helpers which you'll find as I've shown that previous video under the app directory and this time this one is going to be simply called basket I'm going to copy duplicate what we have here for this is in today decimal I'm going to rename it to basket it will not take anything it's going to be empty for the arguments and from here I'm just simply going to use up helper and now resolve the basket repository contract which will give me the instance of the currently bound in implementation of this of this contract it's not audience I just want to import it so there we go so whenever I'm going to call basket function dad's going to pool their baskets implementation from the container so that's fine so what we can do now if I just save and close this repository and a contract as well we go back to our add method and what I'm going to do here I simply start with quantity equals and now we need another property which will store the initial value quantity when the page has been reloaded Wald's the the current quantity for this product in a basket so I'm going to call it a current quantity public again current quantity and by default I'm going to set it to null so if we go back to our art I'm going to use this current quantity plus and we are parsing this we are casting this to integer this quantity whatever we receive from for this given product obviously from within our component here so that's our quantity now we check if quantity is less than one if someone went down to zero they shouldn't be able if they use the interface because minimum here is one so if I just go back to the interface here see if I start going down one is the least that you can specify but obviously if someone wanted so they could obviously overcome this limitation and just put minus ten or whatever so we're just going to double check here if the quantity is minus is less than one then we simply return and terminate the execution of this method then we're gonna go for a basket our freshly created basket function art because this is giving us access obviously to the methods on this contract or an implementation in our case is going to be this session basket a repository and now we need idea of the product and the quantity we want to add so idea of the product we take from the product ID property and then the Quan which we just calculated here next what we're going to do is reset the quantity on the basket so quantity will set it to one so if we say chose four of them we click on add basket that's going to add the items four items in the basket and we set this to just one and lastly what we want to do is omit the event this omit and we're going to omit the event called basket update it and now this event later on will be caught by the other two so by this button and by our basket once this event is immediate from within the basket button both of these components will make a fresh call to the session to our repository and fetch updated a number of items and now we see the products themselves as well so the the number will be updated here obviously number of products will the products in the basket will also be refreshed and their associated quantity plus the total recalculated okay so that's our AB methods one other thing we want to do if I just go back to livewire documentation and we check the lifecycle hooks first one the amount which we have already in place runs only once and it's immediately and it runs immediately after the component is instantiated but before the render is called which means that obviously before we actually return the view back to the client now hydrate methods however runs on every request immediately after the component is hydrated but before an action is performed or render is cold so what we need to do before we actually add item to the basket we need to make sure that we have fresh quantity of the given product from the basket unload obvious because we might already have this basket in this item in the basket in which case we obviously need to have the quantity the current quantity set because at the moment by default is set to zero so what I'm going to do is use this hydrate hydrate hook to make sure that we fetch it directly from the basket so public function hydrate and this one hydrate and this one is void as well I'm gonna say hydrate compound and return turn void there we go and what we're going to do here is simply as this current quantity equals basket and then we're gonna go for the method which we don't have yet is going to say get current quantity and we pass the idea of the product which is product ID so that's what we need to make sure that this add method actually does what it's supposed to now before we go any further let's go back to our contract and let's add this I'm going to split screen here let's add this get current quantity method so let's just add it after this add one public function a get current quantity integer for ID of the product and it will in turn the integer as well let's just say get items stick to items here I get item mass current quantity okay so now that we have it in a in our contract we need to add it to our implementation get current quantity and again I'm going to use inherit docks here for the dog block inherit dock and from within here let me just quickly check what I've put and we are going for return this session get and we using this identity again method to get the right product ID and by default if the get method we won't find the product by this ID we are going to return zero okay if we save it let's now try and preview everything browser I'm just hoping that's gonna work so whoops something's happen let's see what we are getting here with the request two basket that seemed to be working and it's returning everything the way should obviously nothing's updating because we haven't got these two components implemented yet but let's just if we go back to the view let's chance D D session Oh like this directive fresh the page and here we have our session basket as you can see product IDs two and we have three of these products already obviously that the styling has already is already messed up but but it seems to be working as you can see we have product ID and three items which have added to the basket so I'm just going to remove this for now so that's our arts two basket button component completed in the next video we're going to start working on our basket button which is displayed right at the top here

Channel: SSD Tutorials

Views: 1,366

Keywords: laravel livewire, laravel, livewire

Id: MPOOLrg0qRk

Length: 16min 13sec (973 seconds)

Published: Sun Jun 21 2020