Laravel 8 E-Commerce - Cart Settings for Checkout

In this video, we are going to learn about Cart Settings for Checkout.

So, let's see how we can configure cart settings for checkout.

First, switch to your project and open the CartComponent.php class file.

Now, inside this file, let's create a function for checkout and add the following code:

public function checkout()
{
	if(Auth::check())
	{
		return redirect()->route('checkout');            
	}
	else
	{
		return redirect()->route('login');
	}
}

Also, import the Auth class by adding the following code before the class:

use Illuminate\Support\Facades\Auth;

Next, go to the cart-component.blade.php file.

Inside this file, find the checkout link and add the following code to call the checkout function:

<a class="btn btn-checkout" href="#" wire:click.prevent="checkout">Check out</a>   

When the cart is empty, we want to hide the cart summary and checkout link.

To do this, make the following changes to the code:

 @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="#" wire:click.prevent="increaseQuantity('{{$item->rowId}}')"></a>
					<a class="btn btn-reduce" href="#" wire:click.prevent="decreaseQuantity('{{$item->rowId}}')"></a>                                
				</div>  
				<p class="text-center"><a href="#" wire:click.prevent="switchToSaveForLater('{{$item->rowId}}')">Save For Later</a></p>                                                                                  
			</div>
			<div class="price-field sub-total"><p class="price">${{$item->subtotal}}</p></div>
			
			<div class="delete">
				<a href="#" wire:click.prevent="destroy('{{$item->rowId}}')" 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>

<div class="summary">
	<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>                             
		<div class="checkout-info">
			@if(!Session::has('coupon'))  
				<label class="checkbox-field">
					<input class="frm-input " name="have-code" id="have-code" value="1" type="checkbox" wire:model="haveCouponCode"><span>I have coupon code</span>
				</label>
				@if($haveCouponCode == 1)
					<div class="summary-item">
						<form wire:submit.prevent="applyCouponCode">
							<h4 class="title-box">Coupon Code</h4>
							@if(Session::has('coupon_message'))
								<div class="alert alert-danger" role="danger">{{Session::get('coupon_message')}}</div>
							@endif
							<p class="row-in-form">
								<label for="coupon-code">Enter your coupon code:</label>
								<input type="text" name="coupon-code" wire:model="couponCode" />
							</p>
							<button type="submit" class="btn btn-small">Apply</button>
						</form>
					</div>
				@endif
			@endif
			<a class="btn btn-checkout" href="#" wire:click.prevent="checkout">Check out</a>                    
			<a class="link-to-shop" href="shop.html">Continue Shopping<i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
		</div>
	<div class="update-clear">
		<a class="btn btn-clear" href="#" wire:click.prevent="destroyAll()">Clear Shopping Cart</a>
		<a class="btn btn-update" href="#">Update Shopping Cart</a>
	</div>
</div>
@else
	<div class="text-center" style="padding:30px 0;">
			<h1>Your cart is empty!</h1>
			<p>Add items to it now</p>
			<a href="/shop" class="btn btn-success">Shop Now</a>
	</div> 
@endif 

Now, go back to the CartComponent.php class file and create a function to calculate the discount.

First, check if a coupon is applied, and if so, put the discounted price into the session.

Otherwise, put the normal price into the session.

public function setAmountForCheckout()
{ 
	if(!Cart::instance('cart')->count() > 0)
	{
		session()->forget('checkout');
		return;
	}    

	if(session()->has('coupon'))
	{
		session()->put('checkout',[
			'discount' => $this->discount,
			'subtotal' => $this->subtotalAfterDiscount,
			'tax' => $this->taxAfterDiscount,
			'total' => $this->totalAfterDiscount
		]);
	}
	else
	{
		session()->put('checkout',[
			'discount' => 0,
			'subtotal' => Cart::instance('cart')->subtotal(),
			'tax' => Cart::instance('cart')->tax(),
			'total' => Cart::instance('cart')->total()
		]);
	}
}

Next, call this function inside the render method:

$this->setAmountForCheckout();

Now, let's test it out.

Switch to your browser and refresh the page.

Since the cart is empty, the cart summary and checkout link should not be visible.

Let's add a product to the cart.

Click on the link and add the product to the cart.

Now, you should see the cart item, cart summary, and checkout link.

Note that we are not logged in at this time.

If we click on the checkout link, it should redirect us to the login page.

Let's click on the checkout link and see what happens.

As expected, we are redirected to the login page.

Now, let's enter our user email and password, and click on login.

Once logged in, go back to the cart page and click on checkout.

This time, you should see the checkout page.

And that's it!

In this way, you can configure Cart Settings for Checkout.