Laravel 8 E-Commerce - Shopping Cart

In this video, we will learn about creating a shopping cart.

Let's see how we can achieve this. For creating a shopping cart, we will use a shopping cart package.

First, let's install the shopping cart package. For that, switch to the command prompt and type the following command:

composer require hardevine/shoppingcart

Now, switch to the project and let's configure this package.

For that, just open the config\app.php file and inside the providers array, add the following:

Gloudemans\Shoppingcart\ShoppingcartServiceProvider::class, 

Now, inside the aliases array, add the following:

'Cart' => Gloudemans\Shoppingcart\Facades\Cart::class,

Next, let's publish the configuration:

php artisan vendor:publish --provider="Gloudemans\Shoppingcart\ShoppingcartServiceProvider" --tag="config"

Now, open the ShopComponent class file and let's create a function for storing products into the cart:

public function store($product_id,$product_name,$product_price)
    {
        Cart::instance('cart')->add($product_id,$product_name,1,$product_price)->associate('App\Models\Product');              
        session()->flash('success_message','Item added in Cart');
        return redirect()->route('product.cart');
    }   

Now, let's open the shop-component.blade.php view file:

<a href="#" class="btn add-to-cart" wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})">Add To Cart</a>

Next, open the cart-component.blade.php view file and let's make things dynamic on this cart page. Inside the div.wrap-iten-in-cart, add the following:

@if(Cart::instance('cart')->count() > 0)
	<div class="wrap-iten-in-cart">
		@if(Session::has('success_message'))
			<div class="alert alert-success">
				<strong>Success</strong> {{Session::get('success_message')}}
			</div>
		@endif
		@if(Cart::instance('cart')->count() > 0)
		<h3 class="box-title">Products Name</h3>
		<ul class="products-cart">
			@foreach (Cart::instance('cart')->content() as $item)                    
			<li class="pr-cart-item">
				<div class="product-image">
					<figure><img src="{{ ('assets/images/products') }}/{{$item->model->image}}" alt="{{$item->model->name}}"></figure>
				</div>
				<div class="product-name">
					<a class="link-to-product" href="{{route('product.details',['slug'=>$item->model->slug])}}">{{$item->model->name}}</a>
				</div>
				<div class="price-field produtc-price"><p class="price">${{$item->model->regular_price}}</p></div>
				<div class="quantity">
					<div class="quantity-input">
						<input type="text" name="product-quatity" value="{{$item->qty}}" data-max="120" pattern="[0-9]*" >									
						<a class="btn btn-increase" href="#"></a>
						<a class="btn btn-reduce" href="#"></a>                                
					</div>  
					<p class="text-center"><a href="#">Save For Later</a></p>                                                                                  
				</div>
				<div class="price-field sub-total"><p class="price">${{$item->subtotal}}</p></div>
				
				<div class="delete">
					<a href="#" class="btn btn-delete" title="">
						<span>Delete from your cart</span>
						<i class="fa fa-times-circle" aria-hidden="true"></i>
					</a>
				</div>
			</li> 
			@endforeach                   										
		</ul>
		@else
			<p>No item in cart</p>
		@endif
	</div>

Now, inside the div.order-summary, write the following code:

<div class="order-summary">
	<h4 class="title-box">Order Summary</h4>
	<p class="summary-info"><span class="title">Subtotal</span><b class="index">${{Cart::instance('cart')->subtotal()}}</b></p>
	@if(Session::has('coupon'))
		<p class="summary-info"><span class="title">Discount ({{Session::get('coupon')['code']}}) <a href="#" wire:click.prevent= "removeCoupon"><i class="fa fa-times text-danger"></i></a></span></span><b class="index"> -${{number_format($discount,2)}}</b></p>
		<p class="summary-info"><span class="title">Subtotal with Discount</span></span><b class="index">${{number_format($subtotalAfterDiscount,2)}}</b></p>
		<p class="summary-info"><span class="title">Tax ({{config('cart.tax')}}%)</span></span><b class="index">${{number_format($taxAfterDiscount,2)}}</b></p>                        
		<p class="summary-info total-info "><span class="title">Total</span><b class="index">${{number_format($totalAfterDiscount,2)}}</b></p>
	@else
		<p class="summary-info"><span class="title">Tax</span><b class="index">${{Cart::instance('cart')->tax()}}</b></p>
		<p class="summary-info"><span class="title">Shipping</span><b class="index">Free Shipping</b></p>
		<p class="summary-info total-info "><span class="title">Total</span><b class="index">${{Cart::instance('cart')->total()}}</b></p>
	@endif                   
</div>    

And now, inside the order summary, you can configure the tax rate from the cart configuration file. For getting the cart configuration file, go to app->config->cart.php, and here you can see the default tax rate is 21 percent. You can also configure the number format.

Now, let's display the success message inside the cart component view file. For that, just write the following:

Now, open the DetailsComponent.php class file and create a function:

public function store($product_id,$product_name,$product_price)
    {
        Cart::instance('cart')->add($product_id,$product_name,$this->qty,$product_price)->associate('App\Models\Product');
        session()->flash('success_message','Item added in Cart');
        return redirect()->route('product.cart');
    }

Now, open the details-component.blade.php view file and here, just call the function from the add to cart button:

<a href="#" class="btn add-to-cart" wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})">Add to Cart</a>

Now, it's done. Let's check it. So, switch to the browser and just go to the shop page and now add any product to the cart. And on the cart page, you can see that the product has been added.

Now, let's add a product to the cart from the details page. So, first, click on any product, and here is the product details page. Now, click on add to cart. You can see that the product has been added.

Now, let's show the number of products in the cart on the header. For that, just open the base.blade.php layout file.

And inside this file, let's add the following code:

<div class="wrap-icon-section minicart">
    <a href="{{route('product.cart')}}" class="link-direction">
        <i class="fa fa-shopping-basket" aria-hidden="true"></i>
        <div class="left-info">	
            @if(Cart::instance('cart')->count() > 0)									
            <span class="index">{{Cart::instance('cart')->count()}} items</span>	
            @endif									
            <span class="title">CART</span>
        </div>
    </a>
</div>

Now, it's done. So, let's check. Switch to the browser and just refresh the page, and here you can see the number of products in the cart.

Now, let's add a new product to the cart. You can see the number of products.

So, in this way, you can create a shopping cart in Laravel 8 e-commerce.