Step 1: hiệu chỉnh action
Hiệu chỉnh code action index():
- Bổ sung query lấy danh sách loại, hình ảnh liên quan
Hiệu chỉnh file app/Http/Controllers/Frontend/FrontendController.php
<?php
namespace App\Http\Controllers\Frontend;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Loai;
use App\Mau;
use App\Sanpham;
use DB;
use Mail;
use App\Mail\ContactMailer;
class FrontendController extends Controller
{
/**
* Action hiển thị view Trang chủ
* GET /
*/
public function index(Request $request)
{
// Query top 3 loại sản phẩm (có sản phẩm) mới nhất
$ds_top3_newest_loaisanpham = DB::table('cusc_loai')
->join('cusc_sanpham', 'cusc_loai.l_ma', '=', 'cusc_sanpham.l_ma')
->orderBy('l_capNhat')->take(3)->get();
// Query tìm danh sách sản phẩm
$danhsachsanpham = $this->searchSanPham($request);
// Query Lấy các hình ảnh liên quan của các Sản phẩm đã được lọc
$danhsachhinhanhlienquan = DB::table('cusc_hinhanh')
->whereIn('sp_ma', $danhsachsanpham->pluck('sp_ma')->toArray())
->get();
// Query danh sách Loại
$danhsachloai = Loai::all();
// Query danh sách màu
$danhsachmau = Mau::all();
// Hiển thị view `frontend.index` với dữ liệu truyền vào
return view('frontend.index')
->with('ds_top3_newest_loaisanpham', $ds_top3_newest_loaisanpham)
->with('danhsachsanpham', $danhsachsanpham)
->with('danhsachhinhanhlienquan', $danhsachhinhanhlienquan)
->with('danhsachmau', $danhsachmau)
->with('danhsachloai', $danhsachloai);
}
...
}
Step 2: tạo widget product
Hiệu chỉnh widget resources/views/frontend/widgets/product-list.blade.php
<div class="bg0 m-t-23 p-b-140">
<div class="container">
<div class="flex-w flex-sb-m p-b-52">
<div class="flex-w flex-l-m filter-tope-group m-tb-10">
<button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 how-active1" data-filter="*">
Tất cả
</button>
@foreach($danhsachloai as $loai)
<button class="stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5" data-filter=".loai-{{ $loai->l_ma }}">
{{ $loai->l_ten }}
</button>
@endforeach
</div>
<div class="flex-w flex-c-m m-tb-10">
<div class="flex-c-m stext-106 cl6 size-104 bor4 pointer hov-btn3 trans-04 m-r-8 m-tb-4 js-show-filter">
<i class="icon-filter cl2 m-r-6 fs-15 trans-04 zmdi zmdi-filter-list"></i>
<i class="icon-close-filter cl2 m-r-6 fs-15 trans-04 zmdi zmdi-close dis-none"></i>
Filter
</div>
<div class="flex-c-m stext-106 cl6 size-105 bor4 pointer hov-btn3 trans-04 m-tb-4 js-show-search">
<i class="icon-search cl2 m-r-6 fs-15 trans-04 zmdi zmdi-search"></i>
<i class="icon-close-search cl2 m-r-6 fs-15 trans-04 zmdi zmdi-close dis-none"></i>
Search
</div>
</div>
<!-- Search product -->
<div class="dis-none panel-search w-full p-t-10 p-b-15">
<div class="bor8 dis-flex p-l-15">
<button class="size-113 flex-c-m fs-16 cl2 hov-cl1 trans-04">
<i class="zmdi zmdi-search"></i>
</button>
<input class="mtext-107 cl2 size-114 plh2 p-r-15" type="text" name="search-product" placeholder="Search">
</div>
</div>
<!-- Filter -->
<div class="dis-none panel-filter w-full p-t-10">
<div class="wrap-filter flex-w bg6 w-full p-lr-40 p-t-27 p-lr-15-sm">
<div class="filter-col1 p-r-15 p-b-27">
<div class="mtext-102 cl2 p-b-15">
Sort By
</div>
<ul>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
Default
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
Popularity
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
Average rating
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04 filter-link-active">
Newness
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
Price: Low to High
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
Price: High to Low
</a>
</li>
</ul>
</div>
<div class="filter-col2 p-r-15 p-b-27">
<div class="mtext-102 cl2 p-b-15">
Price
</div>
<ul>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04 filter-link-active">
All
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
$0.00 - $50.00
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
$50.00 - $100.00
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
$100.00 - $150.00
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
$150.00 - $200.00
</a>
</li>
<li class="p-b-6">
<a href="#" class="filter-link stext-106 trans-04">
$200.00+
</a>
</li>
</ul>
</div>
<div class="filter-col3 p-r-15 p-b-27">
<div class="mtext-102 cl2 p-b-15">
Color
</div>
<ul>
<li class="p-b-6">
<span class="fs-15 lh-12 m-r-6" style="color: #222;">
<i class="zmdi zmdi-circle"></i>
</span>
<a href="#" class="filter-link stext-106 trans-04">
Black
</a>
</li>
<li class="p-b-6">
<span class="fs-15 lh-12 m-r-6" style="color: #4272d7;">
<i class="zmdi zmdi-circle"></i>
</span>
<a href="#" class="filter-link stext-106 trans-04 filter-link-active">
Blue
</a>
</li>
<li class="p-b-6">
<span class="fs-15 lh-12 m-r-6" style="color: #b3b3b3;">
<i class="zmdi zmdi-circle"></i>
</span>
<a href="#" class="filter-link stext-106 trans-04">
Grey
</a>
</li>
<li class="p-b-6">
<span class="fs-15 lh-12 m-r-6" style="color: #00ad5f;">
<i class="zmdi zmdi-circle"></i>
</span>
<a href="#" class="filter-link stext-106 trans-04">
Green
</a>
</li>
<li class="p-b-6">
<span class="fs-15 lh-12 m-r-6" style="color: #fa4251;">
<i class="zmdi zmdi-circle"></i>
</span>
<a href="#" class="filter-link stext-106 trans-04">
Red
</a>
</li>
<li class="p-b-6">
<span class="fs-15 lh-12 m-r-6" style="color: #aaa;">
<i class="zmdi zmdi-circle-o"></i>
</span>
<a href="#" class="filter-link stext-106 trans-04">
White
</a>
</li>
</ul>
</div>
<div class="filter-col4 p-b-27">
<div class="mtext-102 cl2 p-b-15">
Tags
</div>
<div class="flex-w p-t-4 m-r--5">
<a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
Fashion
</a>
<a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
Lifestyle
</a>
<a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
Denim
</a>
<a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
Streetstyle
</a>
<a href="#" class="flex-c-m stext-107 cl6 size-301 bor7 p-lr-15 hov-tag1 trans-04 m-r-5 m-b-5">
Crafts
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row isotope-grid">
@foreach($data as $index=>$sp)
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item loai-{{ $sp->l_ma }}">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="{{ asset('storage/photos/' . $sp->sp_hinh) }}" alt="IMG-PRODUCT">
<a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal" data-sp-ma="{{ $sp->sp_ma }}">
Xem nhanh
</a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
{{ $sp->sp_ten }}
</a>
<span class="stext-105 cl3">
{{ $sp->sp_giaBan }}
</span>
</div>
</div>
</div>
<!-- Modal quick view -->
@include('frontend.widgets.product-quick-view', ['sp' => $sp, 'hinhanhlienquan' => $danhsachhinhanhlienquan])
</div>
@endforeach
</div>
<!-- Load more -->
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
</div>
Thêm mới widget resources/views/frontend/widgets/product-info.blade.php
<div class="container">
<div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
<button class="how-pos3 hov3 trans-04 js-hide-modal" data-sp-ma="{{ $sp->sp_ma }}">
<img src="{{ asset('themes/cozastore/images/icons/icon-close.png') }}" alt="CLOSE">
</button>
<div class="row">
<div class="col-md-6 col-lg-7 p-b-30">
<div class="p-l-25 p-r-30 p-lr-0-lg">
<div class="wrap-slick3 flex-sb flex-w">
<div class="wrap-slick3-dots"></div>
<div class="wrap-slick3-arrows flex-sb-m flex-w"></div>
<div class="slick3 gallery-lb">
<div class="item-slick3" data-thumb="{{ asset('storage/photos/' . $sp->sp_hinh) }}">
<div class="wrap-pic-w pos-relative">
<img src="{{ asset('storage/photos/' . $sp->sp_hinh) }}" alt="IMG-PRODUCT">
<a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="{{ asset('storage/photos/' . $sp->sp_hinh) }}">
<i class="fa fa-expand"></i>
</a>
</div>
</div>
<?php
// Lọc các hình ảnh liên quan đến sản phẩm
$id = $sp->sp_ma;
$hinhanhlienquan = $hinhanhlienquan->toArray();
$filteredItems = array_filter($hinhanhlienquan, function ($item) use ($id) {
return $item->sp_ma == $id;
});
?>
@foreach($filteredItems as $hinhanh)
<div class="item-slick3" data-thumb="{{ asset('storage/photos/' . $hinhanh->ha_ten) }}">
<div class="wrap-pic-w pos-relative">
<img src="{{ asset('storage/photos/' . $hinhanh->ha_ten) }}" alt="IMG-PRODUCT">
<a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="{{ asset('storage/photos/' . $hinhanh->ha_ten) }}">
<i class="fa fa-expand"></i>
</a>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-5 p-b-30">
<div class="p-r-50 p-t-5 p-lr-0-lg">
<h4 class="mtext-105 cl2 js-name-detail p-b-14">
<a href="{{ route('frontend.productDetail', ['id' => $sp->sp_ma]) }}">{{ $sp->sp_ten }}</a>
</h4>
<span class="mtext-106 cl2">
{{ $sp->sp_giaBan }}
</span>
<p class="stext-102 cl3 p-t-23">
{{ $sp->sp_thongTin }}
</p>
<!-- -->
<div class="p-t-33">
<div class="flex-w flex-r-m p-b-10">
<div class="size-203 flex-c-m respon6">
Màu sắc
</div>
<div class="size-204 respon6-next">
<div class="rs1-select2 bor8 bg0">
<select class="js-select2" name="time">
<option>Chọn màu</option>
@foreach($danhsachmau as $mau)
<option value="{{ $mau->m_ma }}">{{ $mau->m_ten }}</option>
@endforeach
</select>
<div class="dropDownSelect2"></div>
</div>
</div>
</div>
<div class="flex-w flex-r-m p-b-10">
<div class="size-204 flex-w flex-m respon6-next">
<ngcart-addtocart template-url="{{ asset('vendor/ngCart/template/ngCart/addtocart.html') }}" id="{{ $sp->sp_ma }}" name="{{ $sp->sp_ten }}" price="{{ $sp->sp_giaBan }}" quantity="1" quantity-max="30" data="{ sp_hinh_url: '{{ asset('storage/photos/' . $sp->sp_hinh) }}' }">Thêm vào giỏ hàng</ngcart-addtocart>
</div>
</div>
</div>
<!-- -->
<div class="flex-w flex-m p-l-100 p-t-40 respon7">
<div class="flex-m bor9 p-r-10 m-r-11">
<a href="#" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 js-addwish-detail tooltip100" data-tooltip="Add to Wishlist">
<i class="zmdi zmdi-favorite"></i>
</a>
</div>
<a href="#" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100" data-tooltip="Facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100" data-tooltip="Twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100" data-tooltip="Google Plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Thêm mới widget resources/views/frontend/widgets/product-quick-view.blade.php
<div class="wrap-modal1 js-modal-{{ $sp->sp_ma }} p-t-60 p-b-20">
<div class="overlay-modal1 js-hide-modal" data-sp-ma="{{ $sp->sp_ma }}"></div>
<!-- Product info -->
@include('frontend.widgets.product-info', ['sp' => $sp, 'hinhanhlienquan' => $danhsachhinhanhlienquan])
</div>
Step 3: hiệu chỉnh js hiển thị popup Quick view
Hiệu chỉnh file public/theme/cozastore/js/main.js`
/*==================================================================
[ Show modal ]*/
$('.js-show-modal').on('click',function(e){
e.preventDefault();
var sp_ma = $(this).data('sp-ma');
$(`.js-modal-${sp_ma}`).addClass('show-modal1');
});
$('.js-hide-modal').on('click',function(){
var sp_ma = $(this).data('sp-ma');
$(`.js-modal-${sp_ma}`).removeClass('show-modal1');
});
Step 4: hiệu chỉnh template nút Add to cart
Hiệu chỉnh file public/vendor/ngCart/template/ngCart/addtocart.html
<div ng-hide="attrs.id">
<button class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail"
ng-disabled="true" ng-transclude>
</button>
</div>
<div ng-show="attrs.id"></div>
<span ng-show="quantityMax">
<select class="form-control" name="quantity" id="quantity" ng-model="q" ng-options=" v for v in qtyOpt"></select>
</span>
<button class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail mt-2"
ng-click="ngCart.addItem(id, name, price, q, data)"
ng-transclude>
</button>
<mark ng-show="inCart()">
Sản phẩm đã có trong giỏ hàng. <a ng-click="ngCart.removeItemById(id)" style="cursor: pointer;">Xóa</a>
</mark>
</div>
|