MongoDB Laravel | Make E-commerce #78: Shopping Cart (III) | Update Cart Items Quantity via Ajax

Описание: ►Laravel 11 Tutorial (with MongoDB):    • Laravel 11 Tutorial (with MongoDB)  

This is Part 78 of the Laravel 11 Tutorial in which we are building the e-commerce website with Laravel as the front end and MongoDB as the back end. We will continue working on the Laravel shopping cart page where we will show cart items.

From this video, we will work on updating the quantity of Shopping Cart Items via Ajax.

1) Create cart_items.blade.php file:-
First of all, create a cart_items.blade.php file at path /front/products/ and move all app-content code along with foreach loop of cart items to there.

2) Update cart.blade.php file:-
Include cart_items.blade.php file inside cart.blade.php file and embed it in div with id appendCartItems.

Now check once if the cart page is coming fine and the product is added correctly in the cart so that we can move further.

3) Update cart_items.blade.php file:-
Now update the cart_items.blade.php file and add class updateCartItem qtyMinus for the Quantity minus button and add class updateCartItem qtyPlus for the Quantity plus button. And pass the cart id in the data-cartid attribute and the current quantity of product in the data-qty attribute.

4) Update custom.js file:-
Now add a jQuery function for updating cart items in the custom.js file which we will call on click of updateCartItem class where we will get cart id and current product qty and will check if the user clicks on the plus or minus button. If the user clicks on the plus button, then we increment the qty by 1 and if the user clicks on the minus button then we decrement the qty by 1 but make sure to add a check if qty is less than 1.

We will use jQuery syntax a lot in this part so watch below jQuery playlist to learn more about jQuery:-
   • jQuery Basics for Beginners  

5) Create Route :-
Now we will create Post route for updating cart item quantity in web.php file like below:

6) Create updateCartItemQty function :-
Now we will create updateCartItemQty function in ProductController to get the product id and desired qty by the customer via Ajax. We will first debug whether the output is correct.

7) Update updateCartItemQty function:-
Update the updateCartItemQty function at Front/ProductController to get the cart ID and new quantity of cart item via Ajax to update the cart item quantity and return cart items view via Ajax.

8) Add Header Statement:-
Add below header statement at top of ProductController:-
use Illuminate\Support\Facades\View;

9) Update custom.js file :-
Update the custom.js file once again to get a response in Ajax and show updated cart items by calling it within the success function.

Now you can see we are able to update the quantity of cart items with Ajax without refreshing the page.

In the next video, we will add some necessary checks and show error/success messages.

In the next video, we will continue working on updating cart items quantity with Ajax.

►Click here to subscribe for Laravel & other updates -    / stackdevelopers  

Popular Stack Developers Series that can help you:-

►Laravel 10 Tutorial Playlist:    • Laravel 10 Tutorial: Make Admin Panel / E-...  

►Laravel Multi-Vendor E-commerce Website -    • Laravel Multi Vendor Tutorial  

►React JS Tutorial for Beginners with Laravel -    • React JS Tutorial with Laravel for Beginners  

►Laravel Tutorial for Beginners -    • Laravel Tutorial for Beginners | Advance E...  

►GIT Tutorial for Beginners -    • Git Tutorial for Beginners | Create your F...  

►Laravel API Tutorial -    • Laravel API Tutorial | Create API from Scr...  

►Laravel Interview Questions -    • Laravel Interview Questions & Answers | 20...  

►jQuery Tutorial -    • jQuery Tutorial  

►Laravel Basic E-commerce Series -    • Make Admin Panel / E-commerce Website in L...  

►Laravel Dating Series -    • Make Dating / Social Networking Website in...  

►Join this channel to get the complete source code of all series:
   / @stackdevelopers  

Follow Stack Developers on Social Media to get updates and resolve your queries
►Like Facebook Page to get updates -   / stackdevelopers2  
►Join Facebook Group to resolve your queries -   / stackdevelopers  

#laravel11 #laravel11tutorial #mongodb