component viewed products, navbar description, delivery retur

This commit is contained in:
Bayu Lukman Yusuf 2026-01-05 16:18:06 +07:00
parent 695494a2d9
commit ddcea440af
10 changed files with 454 additions and 1049 deletions

View File

@ -11,13 +11,7 @@ class ProductController extends Controller
public function detail($slug, Request $request, ProductRepository $productRepository)
{
$product = Items::where('slug', $slug)->first();
if ($product == null) {
abort(404);
}
$product = $productRepository->show($slug);
$complete_look_products_data = $productRepository->getList([
@ -25,14 +19,13 @@ class ProductController extends Controller
'limit' => 4,
]);
$complete_look_products = collect($complete_look_products_data->items())->chunk(2);
return view('shop.product-fashion',[
'product' => $product,
'complete_look_products' => $complete_look_products
'complete_look_products' => $complete_look_products,
]);
}
}

View File

@ -30,29 +30,29 @@ class ProductRepository
( discounts.valid_at is null or discounts.expired_at >= now())
order by item_id, discounts.created_at desc
) as d"),"d.item_id","=","items.id")
->when(true, function($query) use ($event, $sort){
if ($event){
$query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
->when(true, function($query) use ($event, $sort){
if ($event){
$query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
$query->orderBy("percent", "desc");
}else{
$query->orderBy("percent", "desc");
}else{
/* if ($event == "special-offer"){
$query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
} */
/* if ($event == "special-offer"){
$query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
} */
if ($sort == "new"){
\Log::info($sort);
if ($sort == "new"){
\Log::info($sort);
$query->orderByRaw("case when category1 in ('CLUBS','CLUB','COMPONENT HEAD') and brand = 'PXG' then 1 else 2 end ASC");
}else{
$query->orderByRaw("case when d.created_at is not null then 1 else 2 end ASC, random()");
}
$query->orderByRaw("case when category1 in ('CLUBS','CLUB','COMPONENT HEAD') and brand = 'PXG' then 1 else 2 end ASC");
}else{
$query->orderByRaw("case when d.created_at is not null then 1 else 2 end ASC, random()");
}
// $query->orderByRaw("items.created_at desc NULLS LAST");
}
// $query->orderByRaw("items.created_at desc NULLS LAST");
}
})
})
->where("is_publish", true)
->when($search, function ($query) use ($search) {
$query->where(function ($query) use ($search) {
@ -94,4 +94,34 @@ if ($sort == "new"){
return $builder->paginate($limit);
}
public function show($slug)
{
$product = Items::where('slug', $slug)->first();
if ($product == null) {
abort(404);
}
$all = session()->get('viewed_products', []);
$all[] = $product->id;
session()->put('viewed_products', array_unique($all));
return $product;
}
public function viewed_products($except_ids = [])
{
$ids = session()->get('viewed_products', []);
if (empty($ids)) {
return collect();
}
// Remove except_ids from the list
$ids = array_diff($ids, (array)$except_ids);
return Items::whereIn('id', $ids)->inRandomOrder()->take(10)->get();
}
}

View File

@ -0,0 +1,25 @@
<?php
namespace App\View\Components\Layout;
use Illuminate\View\Component;
use Illuminate\View\View;
class NavbarMenu extends Component
{
/**
* Create a new component instance.
*/
public function __construct()
{
//
}
/**
* Get the view/contents that represent the component.
*/
public function render(): View
{
return view('components.layout.navbar-menu');
}
}

View File

@ -0,0 +1,34 @@
<?php
namespace App\View\Components\Shop;
use App\Repositories\Catalog\ProductRepository;
use Illuminate\View\Component;
use Illuminate\View\View;
use Illuminate\Support\Collection;
class ViewedProducts extends Component
{
public $except_ids = [];
public Collection $viewedProducts;
/**
* Create a new component instance.
*/
public function __construct($except_ids = [])
{
$productRepository = new ProductRepository();
$this->viewedProducts = $productRepository->viewed_products($except_ids);
}
/**
* Get the view/contents that represent the component.
*/
public function render(): View
{
return view('components.shop.viewed-products');
}
}

View File

@ -0,0 +1,8 @@
<?php
return [
'description' => 'Description',
'delivery' => 'Delivery',
'and_returns' => 'and Returns',
'review' => 'Review'
];

View File

@ -0,0 +1,8 @@
<?php
return [
'description' => 'Deskripsi',
'delivery' => 'Pengiriman',
'and_returns' => 'dan Retur',
'review' => 'Ulasan'
];

View File

@ -0,0 +1,222 @@
<!-- Navbar nav -->
<ul class="navbar-nav position-relative me-xl-n5">
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link" href="{{ route('home') }}">Home</a>
</li>
{{-- <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
<span class="fw-medium">Electronics Store</span>
<span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
<span class="fw-medium">Fashion Store v.1</span>
<span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
<span class="fw-medium">Fashion Store v.2</span>
<span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
<span class="fw-medium">Furniture Store</span>
<span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
<span class="fw-medium">Grocery Store</span>
<span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
<span class="fw-medium">Marketplace</span>
<span class="d-block fs-xs text-body-secondary">Product showcase + Category grid</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
</ul>
</li> --}}
<li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
<div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
<div class="row g-4">
<div class="col-lg-3">
<h6 class="fs-base mb-3">Shop pages</h6>
<ul class="nav flex-column">
<li><a class="nav-link px-0 py-1" href="{{ route('root') }}">Shop Grid</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'list']) }}">Shop List</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'map']) }}">Shop with Map</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'no-sidebar']) }}">Shop No Sidebar</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'wide']) }}">Shop Wide</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'single-product']) }}">Single Product</a></li>
</ul>
</div>
<div class="col-lg-3">
<h6 class="fs-base mb-3">Product pages</h6>
<ul class="nav flex-column">
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-fashion']) }}">Product - Fashion</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-electronics']) }}">Product - Electronics</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-furniture']) }}">Product - Furniture</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-grocery']) }}">Product - Grocery</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-marketplace']) }}">Product - Marketplace</a></li>
</ul>
</div>
<div class="col-lg-3">
<h6 class="fs-base mb-3">Shop features</h6>
<ul class="nav flex-column">
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'cart']) }}">Cart</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'checkout']) }}">Checkout</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'order-completed']) }}">Order Completed</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'wishlist']) }}">Wishlist</a></li>
<li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'compare']) }}">Compare</a></li>
</ul>
</div>
<div class="col-lg-3 d-none d-lg-block">
<img class="rounded-3" src="/img/mega-menu/shop.jpg" alt="Shop">
</div>
</div>
</div>
</li>
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Account</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Order History</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'profile']) }}">Profile Settings</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Address Book</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'tickets']) }}">Support Tickets</a></li>
</ul>
</li>
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Pages</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['shop', 'cart']) }}">Cart</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['shop', 'checkout']) }}">Checkout</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['shop', 'order-completed']) }}">Order Completed</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['shop', 'wishlist']) }}">Wishlist</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['shop', 'compare']) }}">Compare</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Account</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Order History</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'profile']) }}">Profile Settings</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Address Book</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'tickets']) }}">Support Tickets</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Vendor</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['vendor', 'store']) }}">Store Homepage</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['vendor', 'products']) }}">Store Products</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['vendor', 'orders']) }}">Store Orders</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['vendor', 'reviews']) }}">Store Reviews</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['vendor', 'settings']) }}">Store Settings</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid']) }}">Blog Grid</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">Blog List</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single']) }}">Single Post</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Gallery</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['gallery', 'grid']) }}">Gallery Grid</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['gallery', 'masonry']) }}">Gallery Masonry</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['gallery', 'single']) }}">Single Project</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Utilities</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['utilities', 'overview']) }}">Overview</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['utilities', 'typography']) }}">Typography</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['utilities', 'colors']) }}">Colors</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['utilities', 'components']) }}">Components</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['utilities', 'forms']) }}">Forms</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
</ul>
</li>
</ul>

View File

@ -0,0 +1,52 @@
@if (count($viewedProducts) > 0)
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
<div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
<h2 class="mb-0 me-3">Viewed products</h2>
<!-- Slider prev/next buttons -->
<div class="d-flex gap-2">
<button type="button"
class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
id="viewedPrev" aria-label="Prev">
<i class="ci-chevron-left fs-lg animate-target"></i>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
id="viewedNext" aria-label="Next">
<i class="ci-chevron-right fs-lg animate-target"></i>
</button>
</div>
</div>
<!-- Slider -->
<div class="swiper"
data-swiper='{
"slidesPerView": 2,
"spaceBetween": 24,
"loop": true,
"navigation": {
"prevEl": "#viewedPrev",
"nextEl": "#viewedNext"
},
"breakpoints": {
"768": {
"slidesPerView": 3
},
"992": {
"slidesPerView": 4
}
}
}'>
<div class="swiper-wrapper">
@foreach ($viewedProducts as $key => $product)
<!-- Item -->
<div class="swiper-slide">
<x-home.product-card :product="$product"/>
</div>
@endforeach
</div>
</div>
</section>
@endif

View File

@ -689,289 +689,7 @@
</div>
<!-- Navbar nav -->
<ul class="navbar-nav position-relative me-xl-n5">
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
<span class="fw-medium">Electronics Store</span>
<span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
<span class="fw-medium">Fashion Store v.1</span>
<span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
<span class="fw-medium">Fashion Store v.2</span>
<span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
<span class="fw-medium">Furniture Store</span>
<span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
<span class="fw-medium">Grocery Store</span>
<span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
<span class="fw-medium">Marketplace</span>
<span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
<span class="fw-medium">Single Product Store</span>
<span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/single-store-light.jpg" alt="Single Product Store">
<img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/single-store-dark.jpg" alt="Single Product Store">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
<div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
<div class="d-flex flex-column flex-lg-row gap-4">
<div style="min-width: 190px">
<div class="h6 mb-2">Electronics Store</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="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</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="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</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="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</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="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Fashion Store</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="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Furniture Store</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="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</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="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
</li>
</ul>
</div>
<div style="min-width: 190px">
<div class="h6 mb-2">Grocery Store</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="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Marketplace</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="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</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="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</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="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
</li>
</ul>
</div>
<div style="min-width: 190px">
<div class="h6 mb-2">Checkout v.1</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="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</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="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</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="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</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="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</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="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</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="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Checkout v.2</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="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</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="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</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="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</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="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth Pages</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop User</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Marketplace User</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Contact</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
</ul>
</li>
</ul>
<x-layout.navbar-menu />
<!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
<button type="button" class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex" style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox">

View File

@ -1231,439 +1231,7 @@
</div>
<!-- Navbar nav -->
<ul class="navbar-nav position-relative me-xl-n5">
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
<span class="fw-medium">Electronics Store</span>
<span class="d-block fs-xs text-body-secondary">Megamenu + Hero
slider</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark"
src="/img/mega-menu/demo-preview/electronics-light.jpg"
alt="Electronics Store">
<img class="position-relative z-2 d-none d-block-dark"
src="/img/mega-menu/demo-preview/electronics-dark.jpg"
alt="Electronics Store">
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
<span class="fw-medium">Fashion Store v.1</span>
<span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark"
src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
alt="Fashion Store v.1">
<img class="position-relative z-2 d-none d-block-dark"
src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
alt="Fashion Store v.1">
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
<span class="fw-medium">Fashion Store v.2</span>
<span class="d-block fs-xs text-body-secondary">Hero banner with
hotspots</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark"
src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
alt="Fashion Store v.2">
<img class="position-relative z-2 d-none d-block-dark"
src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
alt="Fashion Store v.2">
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
<span class="fw-medium">Furniture Store</span>
<span class="d-block fs-xs text-body-secondary">Fancy product
carousel</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark"
src="/img/mega-menu/demo-preview/furniture-light.jpg"
alt="Furniture Store">
<img class="position-relative z-2 d-none d-block-dark"
src="/img/mega-menu/demo-preview/furniture-dark.jpg"
alt="Furniture Store">
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
<span class="fw-medium">Grocery Store</span>
<span class="d-block fs-xs text-body-secondary">Hero slider + Category
cards</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark"
src="/img/mega-menu/demo-preview/grocery-light.jpg"
alt="Grocery Store">
<img class="position-relative z-2 d-none d-block-dark"
src="/img/mega-menu/demo-preview/grocery-dark.jpg"
alt="Grocery Store">
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
<span class="fw-medium">Marketplace</span>
<span class="d-block fs-xs text-body-secondary">Multi-vendor, digital
goods</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark"
src="/img/mega-menu/demo-preview/marketplace-light.jpg"
alt="Marketplace">
<img class="position-relative z-2 d-none d-block-dark"
src="/img/mega-menu/demo-preview/marketplace-dark.jpg"
alt="Marketplace">
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
<li class="hover-effect-opacity px-2 mx-n2">
<a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
<span class="fw-medium">Single Product Store</span>
<span class="d-block fs-xs text-body-secondary">Single product / mono
brand</span>
<div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
<img class="position-relative z-2 d-none-dark"
src="/img/mega-menu/demo-preview/single-store-light.jpg"
alt="Single Product Store">
<img class="position-relative z-2 d-none d-block-dark"
src="/img/mega-menu/demo-preview/single-store-dark.jpg"
alt="Single Product Store">
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
<span
class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle active" aria-current="page" href="#"
role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Shop</a>
<div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
<div class="d-flex flex-column flex-lg-row gap-4">
<div style="min-width: 190px">
<div class="h6 mb-2">Electronics Store</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="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</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="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side
Filters</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="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General
Info</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="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
Details</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="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
Reviews</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Fashion Store</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="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Furniture Store</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="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top
Filters</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="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
</li>
</ul>
</div>
<div style="min-width: 190px">
<div class="h6 mb-2">Grocery Store</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="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</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="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Marketplace</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="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top
Filters</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="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</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="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
</li>
</ul>
</div>
<div style="min-width: 190px">
<div class="h6 mb-2">Checkout v.1</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="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</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="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</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="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</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="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</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="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</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="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
</li>
</ul>
<div class="h6 pt-4 mb-2">Checkout v.2</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="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</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="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</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="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</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="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
aria-expanded="false">Account</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Auth Pages</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Shop User</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders
History</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment
Methods</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a>
</li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Marketplace User</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
<li><a class="dropdown-item"
href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post
v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post
v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Contact</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics
v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics
v.2</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help
Single Article v.1</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help
Single Article v.2</a></li>
</ul>
</li>
<li class="dropend">
<a class="dropdown-item dropdown-toggle" href="#!" role="button"
data-bs-toggle="dropdown" data-bs-trigger="hover"
aria-expanded="false">404 Error</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404
Electronics</a></li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a>
</li>
<li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp;
Conditions</a></li>
</ul>
</li>
</ul>
<x-layout.navbar-menu />
<!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
<button type="button"
@ -1960,28 +1528,28 @@
<button type="button" class="nav-link active" id="description-tab" data-bs-toggle="tab"
data-bs-target="#description-tab-pane" role="tab" aria-controls="description-tab-pane"
aria-selected="true">
Description
{{ __('product_fashion.description') }}
</button>
</li>
<li class="nav-item me-md-1" role="presentation">
{{-- <li class="nav-item me-md-1" role="presentation">
<button type="button" class="nav-link" id="washing-tab" data-bs-toggle="tab"
data-bs-target="#washing-tab-pane" role="tab" aria-controls="washing-tab-pane"
aria-selected="false">
Washing<span class="d-none d-md-inline">&nbsp;instructions</span>
</button>
</li>
</li> --}}
<li class="nav-item me-md-1" role="presentation">
<button type="button" class="nav-link" id="delivery-tab" data-bs-toggle="tab"
data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
aria-selected="false">
Delivery<span class="d-none d-md-inline">&nbsp;and returns</span>
{{ __('product_fashion.delivery') }}<span class="d-none d-md-inline">&nbsp;{{ __('product_fashion.and_returns') }}</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link" id="reviews-tab" data-bs-toggle="tab"
data-bs-target="#reviews-tab-pane" role="tab" aria-controls="reviews-tab-pane"
aria-selected="false">
Reviews<span class="d-none d-md-inline">&nbsp;(23)</span>
{{ __('product_fashion.review') }}<span class="d-none d-md-inline">&nbsp;(23)</span>
</button>
</li>
</ul>
@ -1993,9 +1561,22 @@
aria-labelledby="description-tab">
<div class="row">
<div class="col-lg-6 fs-sm">
{!! nl2br($product->description) !!}
Pastikan apakah stock tersedia dengan terlebih dahulu KIRIM PESAN - TANYA kepada kami,
<br>
<br>
Segera lakukan pembayaran saat melakukan checkout produk agar system order bisa langusung terima dan proses kemas,
<br>
<br>
- Layanan Pengiriman "Instant" tersedia (Prioritas) kami upayakan proses langsung,
<br>
- Layanan Pengiriman "Sameday" Maksimal order masuk pukul 15.00 Wib karna maksimal Request pick up yang di tentukan oleh tokopedia pukul 16.00 Wib,.
<br>
- Layanan pengiriman "Regullar - Yes - Cargo" Kami pastikan produk terkirim status berubah terkirim pada Sore menjelang petan karna kami hanya tersedia 1x pengiriman ke jasa pengiriman dalam 1 hari
<br>
<br>
Pesanan masuk pukul 18.00 Wib ke atas kemungkinan akan kami proses kirim dan ikut pengiriman ke jasa pengiriman ke esokan harinya,.
</div>
<div class="col-lg-6 col-xl-5 offset-xl-1">
{{-- <div class="col-lg-6 col-xl-5 offset-xl-1">
<div class="row row-cols-2 g-4 my-0 my-lg-n2">
<div class="col">
<div class="py-md-1 py-lg-2 pe-sm-2">
@ -2029,7 +1610,7 @@
</div>
</div>
</div>
</div>
</div> --}}
</div>
</div>
@ -2081,33 +1662,41 @@
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-3 mb-md-0">
<div class="pe-lg-2 pe-xl-3">
<h6>Delivery</h6>
<p>We strive to deliver your denim midi skirt with pockets to you as quickly as possible.
Our estimated delivery times are as follows:</p>
<ul class="list-unstyled">
<li>Standard delivery: <span class="text-dark-emphasis fw-semibold">Within 3-7
business days</span></li>
<li>Express delivery: <span class="text-dark-emphasis fw-semibold">Within 1-3 business
days</span></li>
</ul>
<p>Please note that delivery times may vary depending on your location and any ongoing
promotions or holidays. You can track your order using the provided tracking number once
your package has been dispatched.</p>
<h6>Pengiriman</h6>
<p>Kami bekerja sama dengan berbagai penyedia jasa pengiriman terpercaya untuk memastikan proses pengiriman pesanan berjalan dengan aman dan efisien.
<br>
<br>
Pelanggan diberikan kebebasan untuk memilih layanan pengiriman yang paling sesuai dengan kebutuhan, baik dari segi kecepatan maupun biaya.
<br>
<br>
Estimasi waktu pengiriman dapat berbeda-beda tergantung pada jenis layanan yang dipilih, lokasi tujuan, serta kebijakan dan kondisi operasional dari masing-masing penyedia jasa pengiriman.
<br>
<br>
Perlu diperhatikan bahwa keterlambatan yang disebabkan oleh faktor di luar kendali kami merupakan tanggung jawab penyedia jasa terkait.
<br>
<br>
Meskipun demikian, kami akan senantiasa membantu memantau status pengiriman guna memastikan pesanan sampai ke tangan pelanggan dengan baik.</p>
</div>
</div>
<div class="col">
<div class="ps-lg-2 ps-xl-3">
<h6>Returns</h6>
<p>We want you to be completely satisfied with your denim midi skirt with pockets. If for
any reason you are not happy with your purchase, you can return it within 30 days of
receiving your order for a full refund or exchange.</p>
<p>To be eligible for a return, the skirt must be unused, unwashed, and in its original
condition with tags attached. Please ensure that all packaging is intact when returning
the item.</p>
<p class="mb-0">To initiate a return, please contact our customer service team with your
order number and reason for the return. We will provide you with a return shipping label
and instructions on how to proceed. Please note that shipping fees are non-refundable.
</p>
<h6>Return Barang</h6>
<p>Kami memberikan kesempatan kepada pelanggan untuk mengajukan permohonan retur atas produk yang diterima apabila terdapat ketidaksesuaian atau kendala tertentu. Proses pengajuan retur dapat dilakukan dengan menghubungi customer service resmi kami melalui WhatsApp.
<br>
<br>
Untuk keperluan verifikasi, pelanggan diwajibkan mengirimkan informasi detail transaksi pembelian, foto produk yang diterima, serta bukti video unboxing yang jelas dan tidak terputus.
<br>
<br>
Permohonan retur akan ditinjau sesuai dengan ketentuan dan kebijakan yang berlaku.
<br>
<br>
Setelah proses verifikasi selesai dan disetujui, kami akan memberikan informasi lebih lanjut terkait tahapan pengembalian barang maupun solusi yang dapat diberikan kepada pelanggan.
<br>
<br>
Kami berkomitmen untuk menyelesaikan setiap permohonan retur dengan cepat dan profesional sesuai dengan standar pelayanan kami.
<br>
<br>
Untuk informasi lebih lanjut, pelanggan dapat menghubungi customer service kami melalui WhatsApp.</p>
</div>
</div>
</div>
@ -2426,281 +2015,7 @@
</section>
<!-- Viewed products (carousel) -->
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
<div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
<h2 class="mb-0 me-3">Viewed products</h2>
<!-- Slider prev/next buttons -->
<div class="d-flex gap-2">
<button type="button"
class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
id="viewedPrev" aria-label="Prev">
<i class="ci-chevron-left fs-lg animate-target"></i>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
id="viewedNext" aria-label="Next">
<i class="ci-chevron-right fs-lg animate-target"></i>
</button>
</div>
</div>
<!-- Slider -->
<div class="swiper"
data-swiper='{
"slidesPerView": 2,
"spaceBetween": 24,
"loop": true,
"navigation": {
"prevEl": "#viewedPrev",
"nextEl": "#viewedNext"
},
"breakpoints": {
"768": {
"slidesPerView": 3
},
"992": {
"slidesPerView": 4
}
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<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="#!">
<div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
<img src="/img/shop/fashion/11.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="#!">+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="#!">
<span class="text-truncate">Warm sweatshirts without a hoodie</span>
</a>
</div>
<div class="h6 mb-2">$32.99</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-11" id="color-11-1"
checked>
<label for="color-11-1" class="btn btn-color fs-base" style="color: #42675f">
<span class="visually-hidden">Green</span>
</label>
<input type="radio" class="btn-check" name="colors-11" id="color-11-2">
<label for="color-11-2" class="btn btn-color fs-base" style="color: #476585">
<span class="visually-hidden">Blue</span>
</label>
<input type="radio" class="btn-check" name="colors-11" id="color-11-3">
<label for="color-11-3" class="btn btn-color fs-base" style="color: #724c74">
<span class="visually-hidden">Purple</span>
</label>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<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="swiper-slide">
<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="swiper-slide">
<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="swiper-slide">
<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>
</div>
</section>
<x-shop.viewed-products :except_ids="[$product->id]" />
<!-- Instagram feed -->