Laravel 8 E-Commerce - Admin Making On Sale Carousel Dynamic

In this video, we will learn about how to make the On Sale Carousel dynamic.

You can see the On Sale Carousel on the home page. Now, let's see how we can make it dynamic.

Switch to the project and open the HomeComponent.php class file. Inside the render method, let's fetch the products that are on sale:

$sproducts = Product::where('sale_price','>',0)->inRandomOrder()->get()->take(8);

Now, let's return these sale products to the view:

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

Open the home-component.blade.php view file. Inside this file, find the On Sale Carousel and add the following code:

@if($sproducts->count() > 0)
<div class="wrap-show-advance-info-box style-1 has-countdown">
	<h3 class="title-box">On Sale</h3>
	<div class="wrap-countdown mercado-countdown" data-expire="2021/02/27 12:34:56"></div>
	<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 ($sproducts as $sproduct)
		<div class="product product-style-2 equal-elem ">
			<div class="product-thumnail">
				<a href="{{route('product.details',['slug'=>$sproduct->slug])}}" title="{{$sproduct->name}}">
					<figure><img src="{{ asset('assets/images/products') }}/{{$sproduct->image}}" width="800" height="800" alt=""></figure>
				</a>
				<div class="group-flash">
					<span class="flash-item sale-label">sale</span>
				</div>                        
			</div>
			<div class="product-info">
				<a href="{{route('product.details',['slug'=>$sproduct->slug])}}" class="product-name"><span>{{$sproduct->name}}</span></a>
				<div class="wrap-price"><ins><p class="product-price">${{$sproduct->sale_price}}</p></ins> <del><p class="product-price">${{$sproduct->regular_price}}</p></del></div>
			</div>
		</div>
		@endforeach
	</div>
</div>
@endif

Now, everything is set up. Let's check it. Switch to the browser and refresh the page.

You can see that the On Sale Carousel is empty. Let's edit a product and add a sale price. First, log in with admin credentials.

Click on "All Products" and edit the first product. Add a sale price of 120 and click on "Update".

Now, let's show the sale price on the All Products page. Open the admin-product-component.blade.php view file and add a header to the table:

<th>SalePrice</th>

Inside the table body, add the following code:

<td>{{$product->sale_price}}

Save it and switch to the browser. Refresh the page, and you can see the sale price inside the table.

Edit more products and add sale prices to some of them. After adding sale prices to some products, let's check the carousel on the home page.

Click on the "Home" link, and you can see that the products are now showing in the On Sale Carousel.

Click on any product inside the On Sale Carousel. Inside the product details page, you can see that the sale price is not showing, only the regular price.

Let's make some changes to the product details component view file. Open the details-component.blade.php file and add the following code:

@if($product->sale_price > 0)
	<div class="wrap-price"><span class="product-price">${{$product->sale_price}}</span>
	<del><span class="product-price salep">${{$product->regular_price}}</span></del></div>
@else
	<div class="wrap-price"><span class="product-price">${{$product->regular_price}}</span></div>
@endif

Add some CSS for the sale price:

<style>
.salep {
    font-family: 'Lato', san-serif;
    font-weight: 300;
    font-size: 13px !important;
    color: #aaaaaa !important;
    text-decoration: line-through;
    padding-left:10px; 
}
</style>

Now, everything is set up. Let's check it. Switch to the browser and refresh the page.

You can see the sale price now. Try another product, and everything should work as expected.

In the next tutorial, we will make the On Sale timer dynamic.

So, in this way, you can make the On Sale Carousel dynamic.