index()
: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); } ... }
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>
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>
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>
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'); });
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>
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!