In this video we will Create Shop, Cart and Checkout Page
So lets see how can we create these pages.
For creating these pages lets create livewire component first
So Switch to command prompt and
For creating the livewire component just type the command


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


All right now switch to the project and lets create the route for these components
So just open the web.php file and here just create the route.

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


Now lets open these three Component Class file and the layout

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\");
}


Now open the shop component view file
So just go inside the resources directory then views and then livewire and from here just open shop-component.blade.php file.
Go to the html template directory and and open shop.html file in text editor
Now just copy this main section from here and paste inside the shop-component.blade.php view file
Now modify the all image url and just add like {{asset('url_here')}}

Now open the cart.html page into text editor and copy this main section and and paste inside the cart-component.blade.php view file.
Now modify the all image url and just add like {{asset('url_here')}}.
Now open the checkout.html in text editor and copy this main section from here and paste inside the checkout-component.blade.php
Now modify the all image url and just add like {{asset('url_here')}}.
Now lets add the route link inside the navigation bar. So just open the base.blade.php layout file add the link as following.


<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>


All done so lets check this. So switch to browser and just refresh the page.
And now click on shop and here you can see the shop page.
Now click on cart , this is cart page and this is checkout page.
So in this way you can create Shop, Cart, Checkout Page.