Laravel 8 E-Commerce - Admin Making On Sale Timer Working
In this video, we will learn about making the On Sale Timer work.
You can see the On Sale Carousel and the timer here. Now, let's see how we can make the On Sale Timer work.
First, let's add the Bootstrap DateTimePicker CDN to our project. Switch to the browser and open a new tab. Search for "bootstrap-datetimepicker 4 CDN" on Google.
Click on the CDN website link, and copy the Bootstrap DateTimePicker.js and Bootstrap DateTimePicker.css CDNs. First, copy the CSS CDN and switch to the project. Open the base.blade.php layout file and paste the CSS CDN inside the head section.
Now, copy the JS CDN and paste it at the bottom of the page, before the closing body tag. Also, add the Moment.js CDN. Search for "Moment.js CDN" on Google, copy the Moment.min.js CDN, and paste it before the Bootstrap DateTimePicker.js CDN.
Save it. Now, let's create a new model. Switch to the command prompt and run the command:
php artisan make:model Sale -m
Now, switch to the project and open the create_sales_table migration. Add the following code:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateSalesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('sales', function (Blueprint $table) {
$table->id();
$table->dateTime('sale_date');
$table->boolean('status');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('sales');
}
}
Migrate the migration by running the command:
php artisan migrate
Open the table in phpMyAdmin and insert one record. Enter the sales data and time in the sale_date column, and enter 1 in the status column.
Create a new Livewire component by running the command:
php artisan make:livewire admin/AdminSaleComponent
Create a route for the AdminSaleComponent by opening the web.php file and adding a new route:
Route::Get('/admin/sale',AdminSaleComponent::class)->name('admin.onsale');
Open the AdminSaleComponent class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Sale;
use Livewire\Component;
class AdminSaleComponent extends Component
{
public $sale_date;
public $status;
public function mount()
{
$sale = Sale::find(1);
$this->sale_date = $sale->sale_date;
$this->status = $sale->status;
}
public function updateSale()
{
$sale = Sale::find(1);
$sale->sale_date = $this->sale_date;
$sale->status = $this->status;
$sale->save();
session()->flash('message','Record has been updated successfully!');
}
public function render()
{
return view('livewire.admin.admin-sale-component')->layout('layouts.base');
}
}
Open the admin-sale-component.blade.php view file and add the following code:
<div>
<div class="container" style="padding: 30px 0;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Sale Setting
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" wire:submit.prevent="updateSale">
<div class="form-group">
<label class="col-md-4 control-label">Status</label>
<div class="col-md-4">
<select class="form-control" wire:model="status">
<option value="0">Inactive</option>
<option value="1">Active</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Sale Date</label>
<div class="col-md-4">
<input type="text" id="sale-date" placeholder="YYYY/MM/DD H:M:S" class="form-control input-md" wire:model="sale_date" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
$(function(){
$('#sale-date').datetimepicker({
format : 'Y-MM-DD h:m:s',
})
.on('dp.change',function(ev){
var data = $('#sale-date').val();
@this.set('sale_date',data);
});
});
</script>
@endpush
Add a link inside the admin menu by opening the base.blade.php layout file and adding the link:
<li>
<a href="{{route('admin.sale')}}">Manage Sale</a>
</li>
Now, let's check the form. Run the application by running the command:
php artisan serve
Switch to the browser, refresh the page, and log in with admin credentials. Click on the "Manage Sale" link, and you can see the status and sale date. Change the status and date, and click on "Update".
Now, let's use the HomeComponent.php class file. Fetch the sale date and status inside the render method:
$sale = Sale::find(1);
Return the $sale to the view. Open the home-component.blade.php file and add the following code inside the On Sale Carousel:
@if($sproducts->count() > 0 && $sale->status == 1 && $sale->sale_date > Carbon\Carbon::now() )
<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="{{ Carbon\Carbon::parse($sale->sale_date)->format('Y/m/d h:m:s') }}"></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
Open the DetailsComponent.php class file and fetch the sale date and status inside the render method:
$sale = Sale::find(1);
Return the $sale to the view. Open the details-component.blade.php view file and add the following code inside the if directive:
@if($product->sale_price > 0 && $sale->status == 1 && $sale->sale_date > Carbon\Carbon::now())
<div class="wrap-price">
<span class="product-price">${{$product->sale_price}}</span>
<del><span class="product-price regprice">${{$product->regular_price}}</span></del>
</div>
@else
<div class="wrap-price"><span class="product-price">${{$product->regular_price}}</span></div>
@endif
Copy the if directive and paste it before the "Add to Cart" link:
@if($product->sale_price > 0 && $sale->status == 1 && $sale->sale_date > Carbon\Carbon::now())
<a href="#" class="btn add-to-cart" wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->sale_price}})">Add to Cart</a>
@else
<a href="#" class="btn add-to-cart" wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})">Add to Cart</a>
@endif
Now, everything is set up. Let's check it. Switch to the browser and refresh the page. You can see the sale timer now.
If you change the date and set it to a previous date, the On Sale Carousel will not show. Change the date again, and the On Sale Carousel will show. Change the status to inactive, and the On Sale Carousel will not show.
Click on any product and view the product details. You can see the sale price. If you change the status to inactive, you can see the regular price.
So, in this way, you can use the sales timer with On Sale products.
