Laravel 8 E-Commerce - Admin Show Latest Products On Homepage

In this video, we will learn about how to show the latest products on the homepage.

Let's see how we can display the latest products inside a carousel on the home page. To do this, switch to the project and open the HomeComponent.php class file.

Inside the render method, let's fetch the latest products:

$lproducts = Product::orderBy('created_at','DESC')->get()->take(8);

Now, return the $lproducts variable:

return view('livewire.home-component',['lproducts'=>$lproducts])->layout('layouts.base');

Next, open the home-component.blade.php view file. Inside this view file, 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, everything is set up. Let's check it. Switch to the browser and refresh the page.

Here, you can see the latest products. Now, let's create a new product. To do this, first log in with admin credentials.

Go to the admin menu and click on "All Products". Then, click on "Add New" and enter the product details.

Click on "Submit" to create the new product. Now, let's check the latest product carousel on the home page.

Click on the "Homepage" link, and here you can see the newly created product.

So, in this way, you can show the latest products as a carousel on the home page.