This is the part 2 for the earlier post Drag and drop with Emberjs. In this post, our objective is to:
- Update the Total cart price when a product is dropped into the cart
- List the products added in the cart
When a product is dropped over the cart, we need some kind of array into which we’d push the record.
So, lets set the
line_items array in the controller to hold the cart products.
Create a controller file:
Now whenever a product is dropped into the cart, lets push that object.
So now our cart view looks:
1 2 3 4 5 6 7 8 9
To list the items added into the cart, we need to update our cart template.
1 2 3 4 5 6 7
Now, whenever a product is dropped into the basket, the item is listed in the view.
To keep the track of the total price, we need to declare a computed property into the controller that computes the total price of the basket.
So, in the cart template, lets add
1 2 3 4 5 6 7 8 9 10 11 12
And add this into the index controller.
1 2 3 4 5 6 7 8 9 10
This concludes the bare minimum we can do to achieve the drag and drop functionality with Emberjs. There are many things that can be added to extend the functionality of this app, but its out of the scope of this post.
I’ve updated the repo where it has thing like, filtering the items and its quantity with some styles.
In the next post, I’ll be writing on how to deploy the ember app built with rapid development workflow onto heroku as node app to host the production app.
To stay updated, just follow @nepalonrails