Laravel 8 E-Commerce - Create Shop, Cart, and Checkout Page

In this video, we will create the Shop, Cart, and Checkout pages for our e-commerce website. Let's see how we can create these pages.

First, we need to create a Livewire component for each page. To do this, switch to the command prompt and run the following command:

php artisan make:livewire ShopComponent
php artisan make:livewire CartComponent
php artisan make:livewire CheckoutComponent

Next, let's create the routes for these components. Open the web.php file and create the routes as follows:

Route::get('/shop',ShopComponent::class);
Route::get('/cart',CartComponent::class);
Route::get('/checkout',CheckoutComponent::class);

Now, let's open the three component class files and the layout file:

public function render()
{
	return view('livewire.shop-component')->layout("layouts.base");
}

public function render()
{
	return view('livewire.cart-component')->layout("layouts.base");
}

public function render()
{
	return view('livewire.checkout-component')->layout("layouts.base");
}

Open the Shop component view file, which is located in the resources/views/livewire directory. The file name is shop-component.blade.php.

Go to the HTML template directory and open the shop.html file in a text editor. Copy the main section from this file and paste it into the shop-component.blade.php view file.

Modify the image URLs by adding the {{asset('url_here')}} syntax.

Repeat the same steps for the Cart and Checkout pages. Open the cart.html and checkout.html files in a text editor, copy the main section, and paste it into the corresponding view files (cart-component.blade.php and checkout-component.blade.php).

Modify the image URLs in these files as well.

Finally, let's add the route links to the navigation bar. Open the base.blade.php layout file and add the links as follows:

<li class="menu-item home-icon">
	<a href="/" class="link-term mercado-item-title"><i class="fa fa-home" aria-hidden="true"></i></a>
</li>
<li class="menu-item">
	<a href="/shop" class="link-term mercado-item-title">Shop</a>
</li>
<li class="menu-item">
	<a href="/cart" class="link-term mercado-item-title">Cart</a>
</li>

That's it! Let's check our work. Switch to the browser and refresh the page. Click on the "Shop" link, and you should see the Shop page. Click on the "Cart" link, and you should see the Cart page. Finally, click on the "Checkout" link, and you should see the Checkout page.

In this way, you can create the Shop, Cart, and Checkout pages for your e-commerce website.