Merge branch 'feature-product' into development
This commit is contained in:
commit
55d9172f79
|
|
@ -359,6 +359,9 @@ class Items extends Model
|
||||||
|
|
||||||
public function isWishlist() : bool
|
public function isWishlist() : bool
|
||||||
{
|
{
|
||||||
|
if (auth()->user()?->customer?->id == null) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
return $this->hasOne(Wishlist::class, 'item_id', 'id')->where('customer_id', auth()->user()->customer->id)->exists();
|
return $this->hasOne(Wishlist::class, 'item_id', 'id')->where('customer_id', auth()->user()->customer->id)->exists();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ namespace App\View\Components\Grocery;
|
||||||
|
|
||||||
use App\Repositories\Catalog\CategoryRepository;
|
use App\Repositories\Catalog\CategoryRepository;
|
||||||
use App\Repositories\Catalog\GenderRepository;
|
use App\Repositories\Catalog\GenderRepository;
|
||||||
|
use App\Repositories\Catalog\BrandRepository;
|
||||||
use Closure;
|
use Closure;
|
||||||
use Illuminate\Contracts\View\View;
|
use Illuminate\Contracts\View\View;
|
||||||
use Illuminate\View\Component;
|
use Illuminate\View\Component;
|
||||||
|
|
@ -13,13 +14,15 @@ class HeaderGenderDropdown extends Component
|
||||||
|
|
||||||
protected $categories = [];
|
protected $categories = [];
|
||||||
protected $genders = [];
|
protected $genders = [];
|
||||||
|
protected $brands = [];
|
||||||
/**
|
/**
|
||||||
* Create a new component instance.
|
* Create a new component instance.
|
||||||
*/
|
*/
|
||||||
public function __construct(CategoryRepository $categoryRepository, GenderRepository $genderRepository)
|
public function __construct(CategoryRepository $categoryRepository, GenderRepository $genderRepository, BrandRepository $brandRepository)
|
||||||
{
|
{
|
||||||
$this->categories = $categoryRepository->getList([]);
|
$this->categories = $categoryRepository->getList([]);
|
||||||
$this->genders = $genderRepository->getList([]);
|
$this->genders = $genderRepository->getList([]);
|
||||||
|
$this->brands = $brandRepository->getList([]);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -31,6 +34,7 @@ class HeaderGenderDropdown extends Component
|
||||||
return view('components.grocery.header-gender-dropdown', [
|
return view('components.grocery.header-gender-dropdown', [
|
||||||
'categories' => $this->categories,
|
'categories' => $this->categories,
|
||||||
'genders' => $this->genders,
|
'genders' => $this->genders,
|
||||||
|
'brands' => $this->brands,
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,18 @@
|
||||||
<div class="container-xxl navbar-nav px-3 d-none d-lg-flex">
|
<div class="container-xxl navbar-nav px-0 d-none d-lg-flex">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@foreach ($categories as $key => $value)
|
@foreach ($categories as $key => $value)
|
||||||
<div class="dropdown position-static pb-lg-2">
|
<div class="dropdown position-static" style="{{ $key == 0 ? 'background:#14a751;' : '' }}">
|
||||||
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0"
|
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase" data-bs-toggle="dropdown"
|
||||||
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
|
data-bs-auto-close="outside" aria-expanded="false">
|
||||||
aria-expanded="false">
|
|
||||||
|
|
||||||
<span class="animate-target">{{ $value->name }}</span>
|
<span class="animate-target" style="{{ $key == 0 ? 'color:white;' : '' }}">{{ $value->name }}</span>
|
||||||
</button>
|
</button>
|
||||||
<div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
|
<div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
|
||||||
|
|
||||||
<!-- Nav tabs -->
|
<!-- Nav tabs -->
|
||||||
<ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
|
{{-- <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
|
||||||
<li class="nav-item" role="presentation">
|
<li class="nav-item" role="presentation">
|
||||||
<button type="button" class="nav-link text-uppercase active" id="womens-tab"
|
<button type="button" class="nav-link text-uppercase active" id="womens-tab"
|
||||||
data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab"
|
data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab"
|
||||||
|
|
@ -35,7 +34,7 @@
|
||||||
Kids'
|
Kids'
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul> --}}
|
||||||
|
|
||||||
<!-- Tab panes -->
|
<!-- Tab panes -->
|
||||||
<div class="tab-content pb-xl-4">
|
<div class="tab-content pb-xl-4">
|
||||||
|
|
@ -46,41 +45,20 @@
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
<div class="col-lg-2">
|
<div class="col-lg-2">
|
||||||
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
href="shop-catalog-fashion.html">
|
href="{{ route('product.index') }}">
|
||||||
<span class="animate-target">Clothing</span>
|
<span class="animate-target">Brand</span>
|
||||||
</a>
|
</a>
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
<ul class="nav flex-column gap-2 mt-0">
|
||||||
|
@foreach ($brands as $brand)
|
||||||
<li class="d-flex w-100 pt-1">
|
<li class="d-flex w-100 pt-1">
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
||||||
href="shop-catalog-fashion.html">Shirts & Tops</a>
|
href="{{ route('product.index', ['filter[brand]', $brand->id, 'filter[category]', $value->id]) }}">{{ $brand->name }}</a>
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Underwear</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sweatshirts</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Dresses</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Swimwear</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">View all</a>
|
|
||||||
</li>
|
</li>
|
||||||
|
@endforeach
|
||||||
|
<
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-2">
|
{{-- <div class="col-lg-2">
|
||||||
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
||||||
href="shop-catalog-fashion.html">
|
href="shop-catalog-fashion.html">
|
||||||
<span class="animate-target">Shoes</span>
|
<span class="animate-target">Shoes</span>
|
||||||
|
|
@ -187,308 +165,55 @@
|
||||||
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
||||||
alt="Image">
|
alt="Image">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> --}}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Men's tab -->
|
|
||||||
<div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
|
|
||||||
<div class="row g-4">
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
|
||||||
href="shop-catalog-fashion.html">
|
|
||||||
<span class="animate-target">Clothing</span>
|
|
||||||
</a>
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">T-Shirts</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Jeans</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sweatshirts</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Underwear</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Pants</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
|
||||||
href="shop-catalog-fashion.html">
|
|
||||||
<span class="animate-target">Shoes</span>
|
|
||||||
</a>
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sneakers</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Oxfords</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Loafers</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sandals</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Boots</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Slippers</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
|
||||||
href="shop-catalog-fashion.html">
|
|
||||||
<span class="animate-target">Accessories</span>
|
|
||||||
</a>
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Backpacks</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sunglasses</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Bags</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Watches</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Hats</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Belts</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<div class="h6 mb-2">Specialty Shops</div>
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Active Wear</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sports Clothing</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Athletic Shoes</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
|
|
||||||
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
|
|
||||||
<div
|
|
||||||
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
|
|
||||||
<div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-sm btn-dark stretched-link"
|
|
||||||
href="shop-catalog-fashion.html" data-bs-theme="dark">Shop now</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<img src="assets/img/mega-menu/fashion/02.jpg"
|
|
||||||
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
|
||||||
alt="Image">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Kids' tab -->
|
|
||||||
<div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
|
|
||||||
<div class="row g-4">
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
|
||||||
href="shop-catalog-fashion.html">
|
|
||||||
<span class="animate-target">Boys</span>
|
|
||||||
</a>
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Pants</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sneakers</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sweatshirts</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Boots</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Shorts</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
|
||||||
href="shop-catalog-fashion.html">
|
|
||||||
<span class="animate-target">Girls</span>
|
|
||||||
</a>
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Shirts & Tops</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Dresses</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sneakers</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Hoodies</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Sandals</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Coats & Outerwear</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
|
|
||||||
href="shop-catalog-fashion.html">
|
|
||||||
<span class="animate-target">Accessories</span>
|
|
||||||
</a>
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Backpacks</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Gloves</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Shoe Laces</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Scarves</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Hats</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Belts</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-2">
|
|
||||||
<div class="h6 mb-2">Shop by Age</div>
|
|
||||||
<ul class="nav flex-column gap-2 mt-0">
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Infant</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Toddler</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Little Kid</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex w-100 pt-1">
|
|
||||||
<a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
|
|
||||||
href="shop-catalog-fashion.html">Big Kid</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
|
|
||||||
<div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
|
|
||||||
<div
|
|
||||||
class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
|
|
||||||
<div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
|
|
||||||
<div>
|
|
||||||
<a class="btn btn-sm btn-dark stretched-link"
|
|
||||||
href="shop-catalog-fashion.html" data-bs-theme="light">Shop now</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<img src="assets/img/mega-menu/fashion/03.jpg"
|
|
||||||
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
|
|
||||||
alt="Image">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
|
|
||||||
|
<div class="dropdown position-static" style="background:red;">
|
||||||
|
<button type="button" class="nav-link animate-underline fw-semibold text-uppercase"
|
||||||
|
data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
||||||
|
|
||||||
|
<span class="animate-target" style="color:white">SALE</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const dropdowns = document.querySelectorAll('.dropdown.position-static');
|
||||||
|
|
||||||
|
dropdowns.forEach(function(dropdown) {
|
||||||
|
const button = dropdown.querySelector('[data-bs-toggle="dropdown"]');
|
||||||
|
const menu = dropdown.querySelector('.dropdown-menu');
|
||||||
|
|
||||||
|
if (button && menu) {
|
||||||
|
// Show dropdown on hover
|
||||||
|
dropdown.addEventListener('mouseenter', function() {
|
||||||
|
const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(button);
|
||||||
|
dropdownInstance.show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide dropdown on mouse leave
|
||||||
|
dropdown.addEventListener('mouseleave', function() {
|
||||||
|
const dropdownInstance = bootstrap.Dropdown.getInstance(button);
|
||||||
|
if (dropdownInstance) {
|
||||||
|
dropdownInstance.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent dropdown from closing when clicking inside
|
||||||
|
menu.addEventListener('click', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Products grid -->
|
<!-- Products grid -->
|
||||||
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-5 row-cols-xxl-6 g-4">
|
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-5 row-cols-xxl-6">
|
||||||
|
|
||||||
@foreach ($products as $key => $value)
|
@foreach ($products as $key => $value)
|
||||||
<!-- Item -->
|
<!-- Item -->
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
aria-label="Add to Wishlist">
|
aria-label="Add to Wishlist">
|
||||||
<i class="ci-heart animate-target"></i>
|
<i class="ci-heart animate-target"></i>
|
||||||
</button> --}}
|
</button> --}}
|
||||||
<a class="d-block p-2 p-lg-3" href="{{ route('product.detail', [$value->slug]) }}">
|
<a class="d-block" href="{{ route('product.detail', [$value->slug]) }}">
|
||||||
<div class="ratio" style="--cz-aspect-ratio: calc(191 / 191 * 100%)">
|
<div class="ratio" style="--cz-aspect-ratio: calc(191 / 191 * 100%)">
|
||||||
<img src="{{ $value->image_url }}" alt="Image" loading="lazy">
|
<img src="{{ $value->image_url }}" alt="Image" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -82,7 +82,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div> --}}
|
</div> --}}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
<div class="card-body px-0 pt-2 pb-2">
|
||||||
<div class="h6 mb-2">{{ $value->display_price_currency }}</div>
|
<div class="h6 mb-2">{{ $value->display_price_currency }}</div>
|
||||||
<h3 class="fs-sm lh-base mb-0">
|
<h3 class="fs-sm lh-base mb-0">
|
||||||
<a class="hover-effect-underline fw-normal"
|
<a class="hover-effect-underline fw-normal"
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
@if ($value->variants->count() > 1)
|
@if ($value->variants->count() > 1)
|
||||||
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">
|
<div class="fs-xs text-body-secondary pb-2 pb-md-3">
|
||||||
+{{ $value->variants->count() - 1 }} Varian</div>
|
+{{ $value->variants->count() - 1 }} Varian</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
aria-label="Add to Wishlist">
|
aria-label="Add to Wishlist">
|
||||||
<i class="ci-heart animate-target"></i>
|
<i class="ci-heart animate-target"></i>
|
||||||
</button> --}}
|
</button> --}}
|
||||||
<a class="d-block p-2 p-lg-3" href="{{ route('product.detail', $value->slug) }}">
|
<a class="d-block" href="{{ route('product.detail', $value->slug) }}">
|
||||||
<div class="ratio" style="--cz-aspect-ratio: calc(191 / 191 * 100%)">
|
<div class="ratio" style="--cz-aspect-ratio: calc(191 / 191 * 100%)">
|
||||||
<img src="{{ $value->image_url }}" alt="Image">
|
<img src="{{ $value->image_url }}" alt="Image">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -95,7 +95,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div> --}}
|
</div> --}}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
<div class="card-body px-0 pt-3 pb-2">
|
||||||
<div class="h6 mb-2">{{ $value->display_price_currency }}</div>
|
<div class="h6 mb-2">{{ $value->display_price_currency }}</div>
|
||||||
<h3 class="fs-sm lh-base mb-0">
|
<h3 class="fs-sm lh-base mb-0">
|
||||||
<a class="hover-effect-underline fw-normal"
|
<a class="hover-effect-underline fw-normal"
|
||||||
|
|
@ -103,7 +103,7 @@
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
@if ($value->variants->count() > 1)
|
@if ($value->variants->count() > 1)
|
||||||
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">
|
<div class="fs-xs text-body-secondary pb-2 pb-md-3">
|
||||||
+{{ $value->variants->count() - 1 }} Varian</div>
|
+{{ $value->variants->count() - 1 }} Varian</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
aria-label="Add to Wishlist">
|
aria-label="Add to Wishlist">
|
||||||
<i class="ci-heart animate-target"></i>
|
<i class="ci-heart animate-target"></i>
|
||||||
</button>
|
</button>
|
||||||
<a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('product.detail', $product->slug ?? $product->id ?? '0') }}">
|
<a class="d-flex bg-body-tertiary rounded" href="{{ route('product.detail', $product->slug ?? $product->id ?? '0') }}">
|
||||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||||
<img src="{{ $product->image_url }}" loading="lazy" class="w-100 h-100 object-cover">
|
<img src="{{ $product->image_url }}" loading="lazy" class="w-100 h-100 object-cover">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue