Laravel E-Commerce Project - Show Processing Message When Placing an Order

In this video, we will learn how to show a processing message when placing an order.

Let's explore how to achieve this. To start, switch to the project and open the CheckoutComponent view file.

In this file, add the following code before the "Place Order Now" button:

@if($errors->isEmpty())
	<div wire:ignore id="processing" style="font-size:22px; margin-bottom:20px;padding-left:37px;color:green;display:none;">
		<i class="fa fa-spinner fa-pulse fa-fw"></i>
		<span>Processing...</span>
	</div>
@endif

Next, add the following code to the form:

<form wire:submit.prevent="placeOrder" onsubmit="$('#processing').show();">

That's it! Let's test the functionality.

Switch to the browser and add some products to the cart. Then, click on "Checkout". If you click on "Place Order Now" without entering any details, you will see a validation error message, and the processing icon will disappear.

Now, let's enter the details and click on "Place Order Now". You will see the processing message, and the order will be placed successfully.

In this way, you can show a processing message when placing an order.