In this video we are going to learn about how to show latest products on homepage.
So let see how can we show latest products inside the carousel on home page.
For that Switch to the project and lets open the HomeComponent.php class file.
And inside the render method lets fetch the latest product.
Now return the $lproducts.
Now open the home-component.blade.php View File.
And inside this view file lets find the latest product carousel and add the following code.
Now its done, so lets check it.
So switch to browser and refresh the page.
Here you can see the latest product.
Now lets create a new product.
So for creating new product first login with admin credentials.
Now go to the admin menu and click on all products.
Now click on add new.
And here lets enter the product details.
Now click on submit.
Now lest check inside the latest product carousel on home page.
So click on homepage link.
And here you can see the newly create .
So in this way you can show latest products as carousel on home page.
So let see how can we show latest products inside the carousel on home page.
For that Switch to the project and lets open the HomeComponent.php class file.
And inside the render method lets fetch the latest product.
$lproducts = Product::orderBy('created_at','DESC')->get()->take(8);
Now return the $lproducts.
return view('livewire.home-component',['lproducts'=>$lproducts])->layout('layouts.base');
Now open the home-component.blade.php View File.
And inside this view file lets find the latest product carousel and add the following code.
<div class=\"wrap-show-advance-info-box style-1\">
<h3 class=\"title-box\">Latest Products</h3>
<div class=\"wrap-top-banner\">
<a href=\"#\" class=\"link-banner banner-effect-2\">
<figure><img src=\"{{ asset('assets/images/digital-electronic-banner.jpg') }}\" width=\"1170\" height=\"240\" alt=\"\"></figure>
</a>
</div>
<div class=\"wrap-products\">
<div class=\"wrap-product-tab tab-style-1\">
<div class=\"tab-contents\">
<div class=\"tab-content-item active\" id=\"digital_1a\">
<div class=\"wrap-products slide-carousel owl-carousel style-nav-1 equal-container\" data-items=\"5\" data-loop=\"false\" data-nav=\"true\" data-dots=\"false\" data-responsive='{\"0\":{\"items\":\"1\"},\"480\":{\"items\":\"2\"},\"768\":{\"items\":\"3\"},\"992\":{\"items\":\"4\"},\"1200\":{\"items\":\"5\"}}' >
@foreach ($lproducts as $lproduct)
<div class=\"product product-style-2 equal-elem \">
<div class=\"product-thumnail\">
<a href=\"{{route('product.details',['slug'=>$lproduct->slug])}}\" title=\"{{$lproduct->name}}\">
<figure><img src=\"{{ asset('assets/images/products') }}/{{$lproduct->image}}\" width=\"800\" height=\"800\" alt=\"{{$lproduct->name}}\"></figure>
</a>
</div>
<div class=\"product-info\">
<a href=\"{{route('product.details',['slug'=>$lproduct->slug])}}\" class=\"product-name\"><span>{{$lproduct->name}}</span></a>
<div class=\"wrap-price\"><span class=\"product-price\">${{$lproduct->regular_price}}</span></div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
Now its done, so lets check it.
So switch to browser and refresh the page.
Here you can see the latest product.
Now lets create a new product.
So for creating new product first login with admin credentials.
Now go to the admin menu and click on all products.
Now click on add new.
And here lets enter the product details.
Now click on submit.
Now lest check inside the latest product carousel on home page.
So click on homepage link.
And here you can see the newly create .
So in this way you can show latest products as carousel on home page.
