Laravel 8 E-Commerce - Admin Apply Coupons
In this tutorial, we are going to learn about applying coupons on the cart.
So, let's see how we can apply these coupons on the cart.
On the cart page, you can see a checkbox with the text "I have a promo code".
Now, let's change the text here and also add a text box for accepting the coupon code.
For that, switch to the project and let's open the cart-component.blade.php view file and add the following code:
<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>
Now, go to the CartComponent.php class file and add the following properties:
public $haveCouponCode;
public $couponCode;
public $discount;
public $subtotalAfterDiscount;
public $taxAfterDiscount;
public $totalAfterDiscount;
Now, let's create the following functions: one for applying a coupon, second for calculating a discount, and third for removing a coupon.
public function applyCouponCode()
{
$coupon = Coupon::where('code',$this->couponCode)->where('cart_value','<=',Cart::instance('cart')->subtotal())->first();
if(!$coupon)
{
session()->flash('coupon_message','Coupon code is invalid!');
return;
}
session()->put('coupon',[
'code' => $coupon->code,
'type' => $coupon->type,
'value' => $coupon->value,
'cart_value' => $coupon->cart_value
]);
}
public function calculateDiscounts()
{
if(session()->has('coupon'))
{
if(session()->get('coupon')['type'] == 'fixed')
{
$this->discount = session()->get('coupon')['value'];
}
else
{
$this->discount = (Cart::instance('cart')->subtotal() * session()->get('coupon')['value'])/100;
}
$this->subtotalAfterDiscount = Cart::instance('cart')->subtotal() - $this->discount;
$this->taxAfterDiscount = ($this->subtotalAfterDiscount * config('cart.tax'))/100;
$this->totalAfterDiscount = $this->subtotalAfterDiscount +$this->taxAfterDiscount;
}
}
public function removeCoupon()
{
session()->forget('coupon');
}
Now, go to the cart-component.blade.php file and make changes inside the order-summary div:
<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>
Now, save it and let's check this.
So, switch to the browser and refresh the page.
And here, you can see that the coupon code textbox is not showing.
Now, let's check this checkbox.
And now, you can see the coupon code textbox and the apply button.
Now, let's add some products to the cart.
In the cart, you can see one product and the cart value is $230.
Now, let's try to add any coupon for a discount.
So, here we have two coupons: first is OFF100, which is a fixed type and will give a $100 discount if the cart value is greater than or equal to $1000.
And second, we have a coupon OFF10, which is a percent type and will give a 10% discount if the cart value is greater than or equal to $1200.
Now, let's apply these coupon codes on the cart.
So, go to the cart page and here, let's add the coupon code OFF100.
And here, you can see an error message.
Because the cart value does not fulfill the condition.
Now, let's add more products to the cart.
Now, let's apply the coupon.
And here, you can see that the coupon has been applied.
Discount: -$100.
With the discount, the subtotal and total price are updated.
Now, let's check the remove coupon feature.
Now, remove this coupon by clicking here.
And you can see that the coupon has been removed.
Now, let's apply this coupon for a percent off.
So, type here OFF10 and click on apply.
And you can see that this coupon has been applied, which is a 10% discount.
Now, let's remove some products from the cart.
And now, you can see that the coupon is automatically removed due to the cart value not fulfilling the coupon code cart value criteria.
So, in this way, you can apply coupons. That's all about applying coupons.