list product, show list filter category, gender
This commit is contained in:
parent
64892821d9
commit
e0e853e2b8
|
|
@ -2,18 +2,50 @@
|
|||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Items;
|
||||
use App\Repositories\Catalog\CategoryRepository;
|
||||
use App\Repositories\Catalog\GenderRepository;
|
||||
use App\Repositories\Catalog\ProductRepository;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class ProductController extends Controller
|
||||
{
|
||||
public function index(Request $request)
|
||||
{
|
||||
|
||||
$page = $request->page ?? 1;
|
||||
|
||||
$filters = $request->filter ?? [];
|
||||
$sortBy = $request->sort_by ?? 'relevance';
|
||||
|
||||
$genderRepository = new GenderRepository;
|
||||
$categoryRepository = new CategoryRepository;
|
||||
|
||||
$genders = $genderRepository->getList([]);
|
||||
$categories = $categoryRepository->getList([]);
|
||||
|
||||
$productRepository = new ProductRepository;
|
||||
$products = $productRepository->getList([
|
||||
'limit' => 20,
|
||||
'sort_by' => $sortBy,
|
||||
]);
|
||||
|
||||
|
||||
|
||||
return view('shop.catalog-fashion', [
|
||||
'filters' => $filters,
|
||||
'genders' => $genders,
|
||||
'categories' => $categories,
|
||||
|
||||
'products' => $products,
|
||||
'page' => $page,
|
||||
]);
|
||||
}
|
||||
|
||||
public function detail($slug, Request $request, ProductRepository $productRepository)
|
||||
{
|
||||
|
||||
$product = $productRepository->show($slug);
|
||||
|
||||
|
||||
$complete_look_products_data = $productRepository->getList([
|
||||
'category_id' => $product->category1_id,
|
||||
'limit' => 4,
|
||||
|
|
@ -21,11 +53,10 @@ class ProductController extends Controller
|
|||
|
||||
$complete_look_products = collect($complete_look_products_data->items())->chunk(2);
|
||||
|
||||
|
||||
return view('shop.product-fashion',[
|
||||
'product' => $product,
|
||||
return view('shop.product-fashion', [
|
||||
'product' => $product,
|
||||
'complete_look_products' => $complete_look_products,
|
||||
|
||||
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,4 +22,6 @@ class StoreCategory extends Model
|
|||
{
|
||||
return $this->hasMany(StoreCapacity::class);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
'categories' => 'Categories',
|
||||
'genders' => 'Genders',
|
||||
'price' => 'Price',
|
||||
'filter' => 'Filter',
|
||||
'sort_by' => 'Sort by',
|
||||
'sort_relevance' => 'Relevance',
|
||||
'sort_popularity' => 'Popularity',
|
||||
'sort_price_low_to_high' => 'Price: Low to High',
|
||||
'sort_price_high_to_low' => 'Price: High to Low',
|
||||
'sort_newest_arrivals' => 'Newest Arrivals',
|
||||
];
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
'categories' => 'Kategori',
|
||||
'genders' => 'Gender',
|
||||
'price' => 'Harga',
|
||||
'filter' => 'Filter',
|
||||
'sort_by' => 'Urutkan',
|
||||
'sort_relevance' => 'Relevan',
|
||||
'sort_popularity' => 'Popularitas',
|
||||
'sort_price_low_to_high' => 'Harga: Dari Rendah ke Tinggi',
|
||||
'sort_price_high_to_low' => 'Harga: Dari Tinggi ke Rendah',
|
||||
'sort_newest_arrivals' => 'Terbaru',
|
||||
];
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
@foreach ($chunks as $chunk)
|
||||
<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="{{ route('second', ['shop', 'catalog-fashion']) }}">{{ $chunk->name }}</a>
|
||||
href="{{ route('product.index', ['filter[category]' => $chunk->name, 'filter[gender]' => $gender->name]) }}">{{ $chunk->name }}</a>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
|
|
|
|||
|
|
@ -218,50 +218,65 @@
|
|||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
|
||||
data-bs-target="#filterSidebar" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body flex-column pt-2 py-lg-0">
|
||||
|
||||
<!-- Selected filters + Sorting -->
|
||||
<div class="pb-4 mb-2 mb-xl-3">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<h4 class="h6 mb-0">Filter</h4>
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline p-0 ms-2">
|
||||
Clear all
|
||||
</button>
|
||||
<div class="offcanvas-body flex-column pt-2 py-lg-0">
|
||||
@if (count($filters) > 0)
|
||||
<!-- Selected filters + Sorting -->
|
||||
<div class="pb-4 mb-2 mb-xl-3">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<h4 class="h6 mb-0">Filter</h4>
|
||||
<a type="button" href="{{ route('product.index') }}"
|
||||
class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline p-0 ms-2">
|
||||
Clear all
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@foreach ($filters as $key => $filter)
|
||||
<button type="button" class="btn btn-sm btn-secondary">
|
||||
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
||||
{{ $filter }}
|
||||
</button>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<button type="button" class="btn btn-sm btn-secondary">
|
||||
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
||||
Sale
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary">
|
||||
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
||||
Adidas
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary">
|
||||
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
||||
Bilabong
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary">
|
||||
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
||||
Size: XXS
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary">
|
||||
<i class="ci-close fs-sm ms-n1 me-1"></i>
|
||||
$40 - $150
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<!-- Genders -->
|
||||
<div class="accordion-item border-0 pb-1 pb-xl-2">
|
||||
<h4 class="accordion-header" id="headingGenders">
|
||||
<button type="button" class="accordion-button p-0 pb-3"
|
||||
data-bs-toggle="collapse" data-bs-target="#genders" aria-expanded="true"
|
||||
aria-controls="genders">
|
||||
{{ __('catalog_fashion.genders') }}
|
||||
</button>
|
||||
</h4>
|
||||
<div class="accordion-collapse collapse show" id="genders"
|
||||
aria-labelledby="headingGenders">
|
||||
<div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
|
||||
<div style="height: 220px" data-simplebar data-simplebar-auto-hide="false">
|
||||
<ul class="nav flex-column gap-2 pe-3">
|
||||
@foreach ($genders as $gender)
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="{{ route('product.index', array_merge(request()->except('filter[gender]'), ['filter[gender]' => $gender->name])) }}">
|
||||
{{ $gender->name }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Categories -->
|
||||
<div class="accordion-item border-0 pb-1 pb-xl-2">
|
||||
<h4 class="accordion-header" id="headingCategories">
|
||||
<button type="button" class="accordion-button p-0 pb-3"
|
||||
data-bs-toggle="collapse" data-bs-target="#categories" aria-expanded="true"
|
||||
aria-controls="categories">
|
||||
Categories
|
||||
{{ __('catalog_fashion.categories') }}
|
||||
</button>
|
||||
</h4>
|
||||
<div class="accordion-collapse collapse show" id="categories"
|
||||
|
|
@ -269,111 +284,13 @@
|
|||
<div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
|
||||
<div style="height: 220px" data-simplebar data-simplebar-auto-hide="false">
|
||||
<ul class="nav flex-column gap-2 pe-3">
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Blazers & Suits<span
|
||||
class="fs-xs text-body-secondary ms-1">(235)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Blouses<span
|
||||
class="fs-xs text-body-secondary ms-1">(235)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Cardigans & Jumpers<span
|
||||
class="fs-xs text-body-secondary ms-1">(107)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Dresses<span class="fs-xs text-body-secondary ms-1">(93)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Hoodie & Sweatshirts<span
|
||||
class="fs-xs text-body-secondary ms-1">(122)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Jackets & Coats<span
|
||||
class="fs-xs text-body-secondary ms-1">(116)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Jeans<span class="fs-xs text-body-secondary ms-1">(215)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Lingerie<span
|
||||
class="fs-xs text-body-secondary ms-1">(150)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Maternity Wear<span
|
||||
class="fs-xs text-body-secondary ms-1">(8)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Nightwear<span
|
||||
class="fs-xs text-body-secondary ms-1">(26)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Shirts & Tops<span
|
||||
class="fs-xs text-body-secondary ms-1">(164)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Shorts<span class="fs-xs text-body-secondary ms-1">(147)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Socks & Tights<span
|
||||
class="fs-xs text-body-secondary ms-1">(139)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Sportswear<span
|
||||
class="fs-xs text-body-secondary ms-1">(65)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Swimwear<span
|
||||
class="fs-xs text-body-secondary ms-1">(18)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
T-shirts & Vests<span
|
||||
class="fs-xs text-body-secondary ms-1">(209)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Trousers<span
|
||||
class="fs-xs text-body-secondary ms-1">(105)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="#!">
|
||||
Underwear<span
|
||||
class="fs-xs text-body-secondary ms-1">(87)</span>
|
||||
</a>
|
||||
</li>
|
||||
@foreach ($categories as $category)
|
||||
<li class="nav-item mb-1">
|
||||
<a class="nav-link d-block fw-normal p-0" href="{{ route('product.index', array_merge(request()->except('filter[category]'), ['filter[category]' => $category->name])) }}">
|
||||
{{ $category->name }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -417,7 +334,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Brands -->
|
||||
<div class="accordion-item border-0 pb-1 pb-xl-2">
|
||||
{{-- <div class="accordion-item border-0 pb-1 pb-xl-2">
|
||||
<h4 class="accordion-header" id="headingBrands">
|
||||
<button type="button" class="accordion-button p-0 pb-3"
|
||||
data-bs-toggle="collapse" data-bs-target="#brands" aria-expanded="true"
|
||||
|
|
@ -593,10 +510,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<!-- Size -->
|
||||
<div class="accordion-item border-0 pb-1 pb-xl-2">
|
||||
{{-- <div class="accordion-item border-0 pb-1 pb-xl-2">
|
||||
<h4 class="accordion-header" id="headingSize">
|
||||
<button type="button" class="accordion-button p-0 pb-3"
|
||||
data-bs-toggle="collapse" data-bs-target="#size" aria-expanded="true"
|
||||
|
|
@ -642,10 +559,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<!-- Color -->
|
||||
<div class="accordion-item border-0 pb-1 pb-xl-2">
|
||||
{{-- <div class="accordion-item border-0 pb-1 pb-xl-2">
|
||||
<h4 class="accordion-header" id="headingColor">
|
||||
<button type="button" class="accordion-button p-0 pb-3"
|
||||
data-bs-toggle="collapse" data-bs-target="#color" aria-expanded="true"
|
||||
|
|
@ -696,7 +613,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<!-- Status -->
|
||||
<div class="accordion-item border-0">
|
||||
|
|
@ -742,11 +659,11 @@
|
|||
|
||||
<!-- Sorting -->
|
||||
<div class="d-sm-flex align-items-center justify-content-between mt-n2 mb-3 mb-sm-4">
|
||||
<div class="fs-sm text-body-emphasis text-nowrap">Found <span class="fw-semibold">32</span>
|
||||
<div class="fs-sm text-body-emphasis text-nowrap">Found <span class="fw-semibold">{{ count($products) }}</span>
|
||||
items
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-nowrap">
|
||||
<label class="form-label fw-semibold mb-0 me-2">Sort by:</label>
|
||||
<label class="form-label fw-semibold mb-0 me-2">{{ __('catalog_fashion.sort_by') }}:</label>
|
||||
<div style="width: 190px">
|
||||
<select class="form-select border-0 rounded-0 px-1"
|
||||
data-select='{
|
||||
|
|
@ -754,12 +671,13 @@
|
|||
"classNames": {
|
||||
"containerInner": ["form-select", "border-0", "rounded-0", "px-1"]
|
||||
}
|
||||
}'>
|
||||
<option value="Relevance">Relevance</option>
|
||||
<option value="Popularity">Popularity</option>
|
||||
<option value="Price: Low to High">Price: Low to High</option>
|
||||
<option value="Price: High to Low">Price: High to Low</option>
|
||||
<option value="Newest Arrivals">Newest Arrivals</option>
|
||||
}'
|
||||
onchange="window.location.href='{{ route('product.index') }}?sort_by='+this.value+'&{{ http_build_query(request()->except('sort_by')) }}'">
|
||||
<option value="relevance" {{ request('sort_by') == 'relevance' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_relevance') }}</option>
|
||||
<option value="popularity" {{ request('sort_by') == 'popularity' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_popularity') }}</option>
|
||||
<option value="price_low_to_high" {{ request('sort_by') == 'price_low_to_high' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_price_low_to_high') }}</option>
|
||||
<option value="price_high_to_low" {{ request('sort_by') == 'price_high_to_low' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_price_high_to_low') }}</option>
|
||||
<option value="newest_arrivals" {{ request('sort_by') == 'newest_arrivals' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_newest_arrivals') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -767,327 +685,17 @@
|
|||
|
||||
<div class="row gy-4 gy-md-5 pb-4 pb-md-5">
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<span
|
||||
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">Sale</span>
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/01.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
|
||||
<div class="nav">
|
||||
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Denim midi skirt with pockets</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$126.50 <del class="fs-sm fw-normal text-body-tertiary">$156.00</del>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-1" id="color-1-1" checked>
|
||||
<label for="color-1-1" class="btn btn-color fs-base" style="color: #284971">
|
||||
<span class="visually-hidden">Dark denim</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-1" id="color-1-2">
|
||||
<label for="color-1-2" class="btn btn-color fs-base" style="color: #8b9bc4">
|
||||
<span class="visually-hidden">Light denim</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@foreach ($products as $key => $value)
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<x-home.product-card :product="$value" />
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/02.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
|
||||
<div class="nav">
|
||||
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">+1</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Cotton lace blouse with necklace</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$54.00</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-2" id="color-2-1"
|
||||
checked>
|
||||
<label for="color-2-1" class="btn btn-color fs-base" style="color: #dcb1b1">
|
||||
<span class="visually-hidden">Pink</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-2" id="color-2-2">
|
||||
<label for="color-2-2" class="btn btn-color fs-base" style="color: #ced6f0">
|
||||
<span class="visually-hidden">Blue</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-2" id="color-2-3">
|
||||
<label for="color-2-3" class="btn btn-color fs-base" style="color: #e1e0cf">
|
||||
<span class="visually-hidden">Mustard</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/03.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
|
||||
<div class="nav">
|
||||
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Sneakers with a massive sole</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$86.50</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-3" id="color-3-1"
|
||||
checked>
|
||||
<label for="color-3-1" class="btn btn-color fs-base" style="color: #e0e5eb">
|
||||
<span class="visually-hidden">White</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-3" id="color-3-2">
|
||||
<label for="color-3-2" class="btn btn-color fs-base" style="color: #364254">
|
||||
<span class="visually-hidden">Black</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/04.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Knitted bag with a wooden handle</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$105.00</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-4" id="color-4-1"
|
||||
checked>
|
||||
<label for="color-4-1" class="btn btn-color fs-base" style="color: #e7ddb4">
|
||||
<span class="visually-hidden">Beige</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-4" id="color-4-2">
|
||||
<label for="color-4-2" class="btn btn-color fs-base" style="color: #8b9bc4">
|
||||
<span class="visually-hidden">Blue</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<span
|
||||
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-17%</span>
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/05.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Polarized sunglasses for men</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$96.00 <del
|
||||
class="fs-sm fw-normal text-body-tertiary">$112.00</del>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-5" id="color-5-1"
|
||||
checked>
|
||||
<label for="color-5-1" class="btn btn-color fs-base" style="color: #8cc4ac">
|
||||
<span class="visually-hidden">Green</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-5" id="color-5-2">
|
||||
<label for="color-5-2" class="btn btn-color fs-base" style="color: #8cb7c4">
|
||||
<span class="visually-hidden">Blue</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-5" id="color-5-3">
|
||||
<label for="color-5-3" class="btn btn-color fs-base" style="color: #ccb782">
|
||||
<span class="visually-hidden">Brown</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/06.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Classic cotton men's shirt</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$27.00</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+3 colors</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-6" id="color-6-1"
|
||||
checked>
|
||||
<label for="color-6-1" class="btn btn-color fs-base" style="color: #c1cde7">
|
||||
<span class="visually-hidden">Blue</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-6" id="color-6-2">
|
||||
<label for="color-6-2" class="btn btn-color fs-base" style="color: #526f99">
|
||||
<span class="visually-hidden">Dark blue</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-6" id="color-6-3">
|
||||
<label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
|
||||
<span class="visually-hidden">White</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-6" id="color-6-4">
|
||||
<label for="color-6-4" class="btn btn-color fs-base" style="color: #364254">
|
||||
<span class="visually-hidden">Black</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Banner -->
|
||||
<div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0">
|
||||
{{-- <div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0">
|
||||
<div
|
||||
class="position-relative bg-body-tertiary text-center rounded-4 p-4 p-sm-5 py-md-4 py-xl-5">
|
||||
<p class="fs-xs text-body-secondary mb-1">Sweatshirts</p>
|
||||
|
|
@ -1125,228 +733,16 @@
|
|||
href="{{ route('second', ['shop', 'product-fashion']) }}">Shop
|
||||
now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/07.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
|
||||
<div class="nav">
|
||||
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Black massive women's boots</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$160.00</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-7" id="color-7-1"
|
||||
checked>
|
||||
<label for="color-7-1" class="btn btn-color fs-base" style="color: #364254">
|
||||
<span class="visually-hidden">Black</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-7" id="color-7-2">
|
||||
<label for="color-7-2" class="btn btn-color fs-base" style="color: #e0e5eb">
|
||||
<span class="visually-hidden">White</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/08.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">8</span>
|
||||
<div class="nav">
|
||||
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Leather sneakers with golden laces</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$74.00</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-8" id="color-8-1"
|
||||
checked>
|
||||
<label for="color-8-1" class="btn btn-color fs-base" style="color: #b1aa9b">
|
||||
<span class="visually-hidden">Cream</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-8" id="color-8-2">
|
||||
<label for="color-8-2" class="btn btn-color fs-base" style="color: #496c33">
|
||||
<span class="visually-hidden">Dark green</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-8" id="color-8-3">
|
||||
<label for="color-8-3" class="btn btn-color fs-base" style="color: #364254">
|
||||
<span class="visually-hidden">Black</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/09.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
|
||||
<span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
|
||||
<div class="nav">
|
||||
<a class="nav-link fs-xs text-body-tertiary py-1 px-2"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">White cotton blouse with necklace</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$38.50</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-9" id="color-9-1"
|
||||
checked>
|
||||
<label for="color-9-1" class="btn btn-color fs-base" style="color: #e0e5eb">
|
||||
<span class="visually-hidden">White</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-9" id="color-9-2">
|
||||
<label for="color-9-2" class="btn btn-color fs-base" style="color: #364254">
|
||||
<span class="visually-hidden">Black</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item -->
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="animate-underline hover-effect-opacity">
|
||||
<div class="position-relative mb-3">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
||||
aria-label="Add to Wishlist">
|
||||
<i class="ci-heart animate-target"></i>
|
||||
</button>
|
||||
<a class="d-flex bg-body-tertiary rounded p-3"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
|
||||
<img src="/img/shop/fashion/10.png" alt="Image">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav mb-2">
|
||||
<a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
|
||||
href="{{ route('second', ['shop', 'product-fashion']) }}">
|
||||
<span class="text-truncate">Leather handbag for women</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="h6 mb-2">$140.00</div>
|
||||
<div class="position-relative">
|
||||
<div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
|
||||
<div
|
||||
class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
|
||||
<input type="radio" class="btn-check" name="colors-10" id="color-10-1"
|
||||
checked>
|
||||
<label for="color-10-1" class="btn btn-color fs-base" style="color: #869286">
|
||||
<span class="visually-hidden">Olive</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-10" id="color-10-2">
|
||||
<label for="color-10-2" class="btn btn-color fs-base" style="color: #364254">
|
||||
<span class="visually-hidden">Black</span>
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="colors-10" id="color-10-3">
|
||||
<label for="color-10-3" class="btn btn-color fs-base" style="color: #526f99">
|
||||
<span class="visually-hidden">Blue</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Show more button -->
|
||||
<button type="button" class="btn btn-lg btn-outline-secondary w-100">
|
||||
<a href="{{ route('product.index', array_merge(request()->except('page'), ['page' => $page + 1])) }}" type="button" class="btn btn-lg btn-outline-secondary w-100">
|
||||
Show more
|
||||
<i class="ci-chevron-down fs-xl ms-2 me-n1"></i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1423,8 +819,7 @@
|
|||
|
||||
<button type="button"
|
||||
class="fixed-bottom z-sticky w-100 btn btn-lg btn-dark border-0 border-top border-light border-opacity-10 rounded-0 pb-4 d-lg-none"
|
||||
data-bs-toggle="offcanvas" data-bs-target="#filterSidebar" aria-controls="filterSidebar"
|
||||
data-bs-theme="light">
|
||||
data-bs-toggle="offcanvas" data-bs-target="#filterSidebar" aria-controls="filterSidebar" data-bs-theme="light">
|
||||
<i class="ci-filter fs-base me-2"></i>
|
||||
Filters
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -23,4 +23,5 @@ Route::post('/locale/switch', [LocaleController::class, 'switch'])->name('locale
|
|||
|
||||
Route::get('/', [HomeController::class, 'index'])->name('home');
|
||||
|
||||
Route::get('/products',[ProductController::class, 'index'])->name('product.index');
|
||||
Route::get('/product/{slug}',[ProductController::class, 'detail'])->name('product.detail');
|
||||
Loading…
Reference in New Issue