In this video we are going to learn about making On Sale Timer Working.
You can see here this is on Sale Caroesel and here is the timer.
Now let see how can make working this on Sale Timer.
So For that first of all lets add bootstrap-datetimepicker cdn into our project.
So switch to the browser and open new tab.
And inside google simple search bootstrap-datetimepicker 4 cdn
Now click on cdn website link
Alright Now from here just copy bootstrap-datetimepicker.js and bootstrap-datetimepicker.css cdn
So first copy the css.
And now switch to project and from here just open base.blade.php layout file.
Now inside the head section after this
Just paste here the bootstrap-datetimepicker.css cdn
Now copy the js cdn
And on the bottom of the page just paste before the closing body tag.
Alright now add one more cdn moment js cdn.
So in google just search moment js cdn.
Now click on moment js cdn link.
And just copy this moment.min.js cdn and paste before this bootstrap-datetimepicker.js cdn.
Alright now save it.
Ok, now lets create a new model.
So switch to the command prompt
And for creating the new model run the command.
Now switch to the project and lets open the create_sales_table migration and add the following code.
Now lets migrate the migration.
So switch to command prompt.
And for migrating the migration run the command.
Now lets create open the table so go to the browser and open phpmyadmin.
Now open database which is laravel8commercedb.
And here you can se the sale table.
Now browse it.
And lets insert one record.
So click on insert.
Now lets enter here sales data and time in sale_date column and also enter 1 in status.
Now lets create a new livewire component.
So switch to the command prompt.
And for creating the livewire component run the command.
Now switch to project lets create the route for the AdminSaleComponent
So open the web.php and inside the Admin Middleware route lets create new route
Now open the AdminSaleComponent Class File and lets add the following code.
Now lets open the admin-sale-component.blade.php view file and here the following code.
Now lets add the link inside the admin menu.
So open base.blade.php layout file inside the admin menu add the link.
Ok now lets check this form
So first of all run the application so switch to command prompt and run the command.
Now switch to the browser.
And refresh the page.
Now login with the admin credentials.
So click on login link.
And enter the admin email and password.
Now click on login
Now inside the admin menu you can see the manage sale link.
Now click on it.
And here you can see the sataus and sale date.
Now lets change the staus and date and click on update.
Now you can see here record has been updated.
Now lets use open HomeComponent.php Calss File.
And first lets fetch the sale date and status.
So inside the render method write the following code.
Now return this $sale to the view.
Now go to the home-component.blade.php file add the following code inside the onsale caresouel.
And now open the DetailsComponent.php class file and here first fetch he sale date and status.
So inside the render method write the following code.
Now return $sale to the view
Now open the details-component.blade.php view file.
Inside this if directive add the following code.
Now just copy this if directive and paste before the this addtocart link.
Now its done so lets check it.
Switch to the browser and refresh the page.
Now you can see here the sale timer.
Now if change the date and set here the date.
Lets add the previous date.
Now save it.
Now go to the hompage.
And you can see here onsale caresoul is not showing
Now change the date again.
And now go to home page.
This time you can see the on sale caresouel and this timer.
Now change the status to inactive.
Sale carosel is not showing.
If status is active onsale caresoule is showing.
Now lets click on any product.
And view product details.
You can see here the sale price.
If change the status to inactive.
You can see here now its showing the regular price.
So in this way you can use sales timer with on sale products so that's all about Admin On Sale Timer.
You can see here this is on Sale Caroesel and here is the timer.
Now let see how can make working this on Sale Timer.
So For that first of all lets add bootstrap-datetimepicker cdn into our project.
So switch to the browser and open new tab.
And inside google simple search bootstrap-datetimepicker 4 cdn
Now click on cdn website link
Alright Now from here just copy bootstrap-datetimepicker.js and bootstrap-datetimepicker.css cdn
So first copy the css.
And now switch to project and from here just open base.blade.php layout file.
Now inside the head section after this
Just paste here the bootstrap-datetimepicker.css cdn
Now copy the js cdn
And on the bottom of the page just paste before the closing body tag.
Alright now add one more cdn moment js cdn.
So in google just search moment js cdn.
Now click on moment js cdn link.
And just copy this moment.min.js cdn and paste before this bootstrap-datetimepicker.js cdn.
Alright now save it.
Ok, now lets create a new model.
So switch to the command prompt
And for creating the new model run the command.
php artisan make:model Sale -m
Now switch to the project and lets open the create_sales_table migration and 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');
}
}
Now lets migrate the migration.
So switch to command prompt.
And for migrating the migration run the command.
php artisan migrate
Now lets create open the table so go to the browser and open phpmyadmin.
Now open database which is laravel8commercedb.
And here you can se the sale table.
Now browse it.
And lets insert one record.
So click on insert.
Now lets enter here sales data and time in sale_date column and also enter 1 in status.
Now lets create a new livewire component.
So switch to the command prompt.
And for creating the livewire component run the command.
php artisan make:livewire admin/AdminSaleComponent
Now switch to project lets create the route for the AdminSaleComponent
So open the web.php and inside the Admin Middleware route lets create new route
Route::Get('/admin/sale',AdminSaleComponent::class)->name('admin.onsale');
Now open the AdminSaleComponent Class File and lets 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');
}
}
Now lets open the admin-sale-component.blade.php view file and here 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
Now lets add the link inside the admin menu.
So open base.blade.php layout file inside the admin menu add the link.
<li>
<a href=“{{route(‘admin.sale’)}}”>Manage Sale</a>
</li>
Ok now lets check this form
So first of all run the application so switch to command prompt and run the command.
php artisan serve
Now switch to the browser.
And refresh the page.
Now login with the admin credentials.
So click on login link.
And enter the admin email and password.
Now click on login
Now inside the admin menu you can see the manage sale link.
Now click on it.
And here you can see the sataus and sale date.
Now lets change the staus and date and click on update.
Now you can see here record has been updated.
Now lets use open HomeComponent.php Calss File.
And first lets fetch the sale date and status.
So inside the render method write the following code.
$sale = Sale::find(1);
Now return this $sale to the view.
Now go to the home-component.blade.php file add the following code inside the onsale caresouel.
@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
And now open the DetailsComponent.php class file and here first fetch he sale date and status.
So inside the render method write the following code.
$sale = Sale::find(1);
Now return $sale to the view
Now open the details-component.blade.php view file.
Inside this if directive add the following code.
@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
Now just copy this if directive and paste before the this addtocart 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 its done so lets check it.
Switch to the browser and refresh the page.
Now you can see here the sale timer.
Now if change the date and set here the date.
Lets add the previous date.
Now save it.
Now go to the hompage.
And you can see here onsale caresoul is not showing
Now change the date again.
And now go to home page.
This time you can see the on sale caresouel and this timer.
Now change the status to inactive.
Sale carosel is not showing.
If status is active onsale caresoule is showing.
Now lets click on any product.
And view product details.
You can see here the sale price.
If change the status to inactive.
You can see here now its showing the regular price.
So in this way you can use sales timer with on sale products so that's all about Admin On Sale Timer.
