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>
Chương trình học
Các bài học
Bài học trước Bài học tiếp theo
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
Bài học trước Bài học tiếp theo