1186 lines
72 KiB
PHP
1186 lines
72 KiB
PHP
@extends('layouts.landing', ['title' => $product->name ?? 'Detail'])
|
|
|
|
@section('content')
|
|
<x-layout.header-grocery />
|
|
|
|
<main class="content-wrapper">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="container pt-2 pt-xxl-3 my-3 my-md-4" aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('home') }}">Product</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">{{ $product->name ?? 'Detail' }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
|
|
<!-- Product gallery and details -->
|
|
<section class="container">
|
|
<div class="row">
|
|
|
|
<!-- Gallery -->
|
|
<div class="col-md-6 pb-4 pb-md-0 mb-2 mb-sm-3 mb-md-0">
|
|
|
|
<div class="position-relative">
|
|
|
|
@if ($product->display_discount_price > 0)
|
|
<span
|
|
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-3 mt-sm-4 ms-3 ms-sm-4">Sale</span>
|
|
@endif
|
|
<button type="button"
|
|
class="btn btn-icon btn-secondary animate-pulse fs-lg bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-2 mt-sm-3 me-2 me-sm-3"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
|
|
data-bs-title="Add to Wishlist" aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden mb-3 mb-sm-4 mb-md-3 mb-lg-4"
|
|
href="{{ $product->image_url ?? '' }}" data-glightbox data-gallery="product-gallery">
|
|
<i
|
|
class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
<div class="ratio hover-effect-target bg-body-tertiary rounded"
|
|
style="--cz-aspect-ratio: calc(706 / 636 * 100%)">
|
|
<img src="{{ $product->image_url ?? '' }}" class="product-main-image" alt="Image">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="collapse d-md-block" id="morePictures">
|
|
|
|
|
|
<div class="row row-cols-2 g-3 g-sm-4 g-md-3 g-lg-4 pb-3 pb-sm-4 pb-md-0">
|
|
|
|
@foreach ($product->image_urls as $key => $url)
|
|
@if ($key == 0)
|
|
@continue
|
|
@endif
|
|
<div class="col">
|
|
<a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden"
|
|
href="{{ $url }}" data-glightbox data-gallery="product-gallery">
|
|
<i
|
|
class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
<div class="ratio hover-effect-target bg-body-tertiary rounded"
|
|
style="--cz-aspect-ratio: calc(342 / 306 * 100%)">
|
|
<img src="{{ $url }}" alt="Image">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-lg btn-outline-secondary w-100 collapsed d-md-none"
|
|
data-bs-toggle="collapse" data-bs-target="#morePictures" data-label-collapsed="Show more pictures"
|
|
data-label-expanded="Show less pictures" aria-expanded="false" aria-controls="morePictures"
|
|
aria-label="Show / hide pictures">
|
|
<i class="collapse-toggle-icon ci-chevron-down fs-lg ms-2 me-n2"></i>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<!-- Product details and options -->
|
|
<div class="col-md-6">
|
|
<div class="ps-md-4 ps-xl-5">
|
|
|
|
<!-- Reviews -->
|
|
{{-- <a class="d-none d-md-flex align-items-center gap-2 text-decoration-none mb-3" href="#reviews">
|
|
<div class="d-flex gap-1 fs-sm">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star text-body-tertiary opacity-75"></i>
|
|
</div>
|
|
<span class="text-body-tertiary fs-sm">23 reviews</span>
|
|
</a> --}}
|
|
|
|
<!-- Title -->
|
|
<div class="d-flex gap-3">
|
|
<div class=" flex-1">
|
|
<h1 class="h3">{{ $product->name }}</h1>
|
|
</div>
|
|
|
|
|
|
{{-- wishlist/love button --}}
|
|
<button type="button"
|
|
class="btn btn-outline-danger gap-2"
|
|
style="height: 50px;"
|
|
id="wishlist-btn"
|
|
data-item-id="{{ $product->id }}"
|
|
data-is-wishlist="{{ $product->isWishlist() ? 'true' : 'false' }}">
|
|
<i class="{{ $product->isWishlist() == true ? 'ci-heart-filled' : 'ci-heart' }}"></i>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- add category --}}
|
|
<div class="mb-4 gap-2">
|
|
<a href="{{ route('product.index', ['filter[category_id]' => $product->category->id]) }}"
|
|
class="text-decoration-none text-body-emphasis animate-underline text-xs border border-secondary rounded-pill px-2 py-1"
|
|
style="font-size:10pt;">{{ $product->category->name }}</a>
|
|
|
|
<a href="{{ route('product.index', ['filter[brand_id]' => $product->brand->id]) }}"
|
|
class="text-decoration-none text-body-emphasis animate-underline text-xs border border-secondary rounded-pill px-2 py-1"
|
|
style="font-size:10pt;">{{ $product->brand->name }}</a>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p class="fs-sm mb-0">{!! nl2br(Str::limit($product->description, 500)) !!}</p>
|
|
<div class="collapse" id="moreDescription">
|
|
<div class="fs-sm pt-3">
|
|
@if (strlen($product->description) > 500)
|
|
<p>{!! nl2br(substr($product->description, 500)) !!}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price -->
|
|
@if (strlen($product->description) > 500)
|
|
<a class="d-inline-block fs-sm fw-medium text-dark-emphasis collapsed mt-1"
|
|
href="#moreDescription" data-bs-toggle="collapse" aria-expanded="false"
|
|
aria-controls="moreDescription" data-label-collapsed="Read more"
|
|
data-label-expanded="Show less" aria-label="Show / hide description"></a>
|
|
@endif
|
|
<div class="h4 d-flex align-items-center my-4">
|
|
<span class="display_price">Rp {{ number_format($product->display_price, 0, ',', '.') }}</span>
|
|
|
|
|
|
|
|
<del class="display_discount_price fs-sm fw-normal text-body-tertiary ms-2"
|
|
style="display: {{ $product->display_discount_price ? 'inline' : 'none' }};">{{ $product->display_discount_price ? ' Rp ' . number_format($product->display_discount_price, 0, ',', '.') : '' }}</del>
|
|
</div>
|
|
|
|
<!-- Color options -->
|
|
<div class="mb-4">
|
|
<label class="form-label fw-semibold pb-1 mb-2">Varian: <span class="text-body fw-normal"
|
|
id="variantOption">{{ $product->variants->first()->description ?? '' }}</span></label>
|
|
<div class="d-flex flex-wrap gap-2" data-binded-label="#variantOption">
|
|
|
|
@foreach ($product->variants as $key => $variant)
|
|
<input type="radio" class="btn-check" name="colors"
|
|
value="{{ $variant->reference->id }}" id="variant-id-{{ $variant->id }}"
|
|
{{ $key == 0 ? 'checked' : '' }}>
|
|
<label for="variant-id-{{ $variant->id }}" class="btn btn-image p-0"
|
|
data-label="{{ $variant->description }}"
|
|
data-price="Rp {{ number_format($product->display_price, 0, ',', '.') }}"
|
|
data-discount-price="{{ $product->display_discount_price ? 'Rp ' . number_format($product->display_discount_price, 0, ',', '.') : '' }}"
|
|
data-image="{{ $variant->image_url ?? $product->image_url }}">
|
|
<img src="{{ $variant->image_url ?? $product->image_url }}" width="56"
|
|
alt="{{ $variant->name }}">
|
|
<span class="visually-hidden">{{ $variant->name }}</span>
|
|
</label>
|
|
@endforeach
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{{--
|
|
<br>
|
|
<br> --}}
|
|
|
|
<!-- Size select -->
|
|
{{-- <div class="mb-3">
|
|
<div class="d-flex align-items-center justify-content-between mb-1">
|
|
<label class="form-label fw-semibold mb-0">Size</label>
|
|
<div class="nav">
|
|
<a class="nav-link animate-underline fw-normal px-0" href="#sizeGuide"
|
|
data-bs-toggle="modal">
|
|
<i class="ci-ruler fs-lg me-2"></i>
|
|
<span class="animate-target">Size guide</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<select class="form-select form-select-lg"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg"]
|
|
}
|
|
}'
|
|
aria-label="Material select">
|
|
<option value="">Choose a size</option>
|
|
<option value="xs">6-8 (XS)</option>
|
|
<option value="s">8-10 (S)</option>
|
|
<option value="m">10-12 (M)</option>
|
|
<option value="l">12-14 (L)</option>
|
|
<option value="xl">14-16 (XL)</option>
|
|
</select>
|
|
</div> --}}
|
|
|
|
<!-- Count input + Add to cart button -->
|
|
<x-shop.add-to-cart :item_reference_id="$product->variants->first()->id" />
|
|
|
|
<!-- Info list -->
|
|
{{-- <ul class="list-unstyled gap-3 pb-3 pb-lg-4 mb-3">
|
|
<li class="d-flex flex-wrap fs-sm">
|
|
<span class="d-flex align-items-center fw-medium text-dark-emphasis me-2">
|
|
<i class="ci-clock fs-base me-2"></i>
|
|
Estimated delivery:
|
|
</span>
|
|
15 - 27 Mar, 2024
|
|
</li>
|
|
<li class="d-flex flex-wrap fs-sm">
|
|
<span class="d-flex align-items-center fw-medium text-dark-emphasis me-2">
|
|
<i class="ci-delivery fs-base me-2"></i>
|
|
Free shipping & returns:
|
|
</span>
|
|
On all orders over $100.00
|
|
</li>
|
|
</ul> --}}
|
|
|
|
<!-- Stock status -->
|
|
{{-- <div class="d-flex flex-wrap justify-content-between fs-sm mb-3">
|
|
<span class="fw-medium text-dark-emphasis me-2">🔥 Hurry up! The sale is coming to an
|
|
end</span>
|
|
<span><span class="fw-medium text-dark-emphasis">6</span> items in stock!</span>
|
|
</div>
|
|
<div class="progress" role="progressbar" aria-label="Left in stock" aria-valuenow="25"
|
|
aria-valuemin="0" aria-valuemax="100" style="height: 4px">
|
|
<div class="progress-bar rounded-pill" style="width: 25%"></div>
|
|
</div> --}}
|
|
|
|
{{-- add button wishlist --}}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Sticky product preview + Add to cart CTA -->
|
|
{{-- <section class="sticky-product-banner sticky-top" data-sticky-element>
|
|
<div class="sticky-product-banner-inner pt-5">
|
|
<div class="navbar container flex-nowrap align-items-center bg-body pt-4 pt-lg-5 mt-lg-n2">
|
|
<div class="d-flex align-items-center min-w-0 ms-lg-2 me-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
|
|
<img src="{{ $product->image_url ?? '' }}" class="product-main-image" alt="Image">
|
|
</div>
|
|
<h4 class="h6 fw-medium d-none d-lg-block ps-3 mb-0 variantOption">{{ $product->name }}</h4>
|
|
<div class="w-100 min-w-0 d-lg-none ps-2">
|
|
<h4 class="fs-sm fw-medium text-truncate mb-1 variantOption">{{ $product->name }}</h4>
|
|
<div class="h6 mb-0">$126.50 <del class="fs-xs fw-normal text-body-tertiary">$156.00</del>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="h4 d-none d-lg-block mb-0 ms-auto me-4 display_price">Rp
|
|
{{ number_format($product->display_price, 0, ',', '.') }} <del
|
|
class="fs-sm fw-normal text-body-tertiary display_discount_price"
|
|
style="display: {{ $product->display_discount_price ? 'inline' : 'none' }};">Rp
|
|
{{ number_format($product->display_discount_price, 0, ',', '.') }}</del></div>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-icon btn-secondary animate-pulse"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart fs-base animate-target"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-dark ms-auto d-none d-md-inline-flex px-4">Add to
|
|
cart</button>
|
|
<button type="button" class="btn btn-icon btn-dark animate-slide-end ms-auto d-md-none"
|
|
aria-label="Add to Cart">
|
|
<i class="ci-shopping-cart fs-base animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> --}}
|
|
|
|
|
|
<!-- Product details tabs -->
|
|
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-underline flex-nowrap border-bottom" role="tablist">
|
|
<li class="nav-item me-md-1" role="presentation">
|
|
<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">
|
|
{{ __('product_fashion.description') }}
|
|
</button>
|
|
</li>
|
|
{{-- <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"> instructions</span>
|
|
</button>
|
|
</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">
|
|
{{ __('product_fashion.delivery') }}<span
|
|
class="d-none d-md-inline"> {{ __('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">
|
|
{{ __('product_fashion.review') }}<span class="d-none d-md-inline"> (23)</span>
|
|
</button>
|
|
</li> --}}
|
|
</ul>
|
|
|
|
<div class="tab-content pt-4 mt-sm-1 mt-md-3">
|
|
|
|
<!-- Description tab -->
|
|
<div class="tab-pane fade show active" id="description-tab-pane" role="tabpanel"
|
|
aria-labelledby="description-tab">
|
|
<div class="row">
|
|
<div class="col-lg-6 fs-sm">
|
|
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="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">
|
|
<i class="ci-feather fs-3 text-body-emphasis mb-2 mb-md-3"></i>
|
|
<h6 class="fs-sm mb-2">Lightweight</h6>
|
|
<p class="fs-sm mb-0">Designed with lightweight European fabrics, perfect for life
|
|
on the go.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="py-md-1 py-lg-2 ps-sm-2">
|
|
<i class="ci-hanger fs-3 text-body-emphasis mb-2 mb-md-3"></i>
|
|
<h6 class="fs-sm mb-2">Perfect fit</h6>
|
|
<p class="fs-sm mb-0">Our clothing is designed to fit any body type, find your
|
|
perfect look!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="py-md-1 py-lg-2 pe-sm-2">
|
|
<i class="ci-delivery-2 fs-3 text-body-emphasis mb-2 mb-md-3"></i>
|
|
<h6 class="fs-sm mb-2">Free delivery</h6>
|
|
<p class="fs-sm mb-0">Get free door-to-door delivery for all orders over $250.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="py-md-1 py-lg-2 ps-sm-2">
|
|
<i class="ci-leaf fs-3 text-body-emphasis mb-2 mb-md-3"></i>
|
|
<h6 class="fs-sm mb-2">Sustainability</h6>
|
|
<p class="fs-sm mb-0">We are proud to offer a Lifetime Guarantee on all products.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Washing instructions tab -->
|
|
<div class="tab-pane fade fs-sm" id="washing-tab-pane" role="tabpanel" aria-labelledby="washing-tab">
|
|
<p>Following below washing instructions can help prolong the life of your denim skirt and keep it
|
|
looking its best for longer.</p>
|
|
<div class="row row-cols-1 row-cols-md-2">
|
|
<div class="col mb-3 mb-md-0">
|
|
<dl class="pe-lg-2 pe-xl-3 mb-0">
|
|
<dt>Machine wash cold</dt>
|
|
<dd>Turn the denim midi skirt inside out before placing it in the washing machine. Use cold
|
|
water to help preserve the color and fabric integrity.</dd>
|
|
<dt>Gentle cycle</dt>
|
|
<dd>Select the gentle or delicate cycle on your washing machine to prevent excessive
|
|
agitation, which can cause unnecessary wear and tear on the denim.</dd>
|
|
<dt>Mild detergent</dt>
|
|
<dd>Use a mild detergent specifically formulated for denim or delicate fabrics. Avoid using
|
|
bleach or harsh chemicals, as they can damage the denim fibers.</dd>
|
|
<dt>Avoid overloading</dt>
|
|
<dd class="mb-0">Do not overcrowd the washing machine with too many garments. This can
|
|
lead to inadequate cleaning and may cause friction that damages the denim skirt.</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="col">
|
|
<dl class="ps-lg-2 ps-xl-3 mb-0">
|
|
<dt>Wash separately</dt>
|
|
<dd>Wash the denim midi skirt separately from items with zippers, buttons, or other sharp
|
|
accessories that could snag or damage the fabric.</dd>
|
|
<dt>Skip fabric softener</dt>
|
|
<dd>Avoid using fabric softener, as it can leave a residue on the denim and reduce its
|
|
natural stiffness, which is characteristic of denim garments.</dd>
|
|
<dt>Air dry or tumble dry low</dt>
|
|
<dd>After washing, reshape the skirt and either lay it flat to air dry or tumble dry on a
|
|
low heat setting. Avoid high heat, as it can shrink or distort the denim.</dd>
|
|
<dt>Ironing</dt>
|
|
<dd class="mb-0">If necessary, iron the denim midi skirt inside out using a low to
|
|
medium heat setting. Avoid ironing directly on any embellishments or pockets to prevent
|
|
damage.</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delivery and returns tab -->
|
|
<div class="tab-pane fade fs-sm" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">
|
|
<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>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>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>
|
|
</div>
|
|
|
|
<!-- Reviews tab -->
|
|
<div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab">
|
|
|
|
<!-- Heading + Add review button -->
|
|
<div class="d-sm-flex align-items-center justify-content-between border-bottom pb-2 pb-sm-3">
|
|
<div class="mb-3 me-sm-3">
|
|
<h2 class="h5 pb-2 mb-1">Customer reviews</h2>
|
|
<div class="d-flex align-items-center text-body-secondary fs-sm">
|
|
<div class="d-flex gap-1 me-2">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star text-body-tertiary opacity-75"></i>
|
|
</div>
|
|
Based on 23 reviews
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-dark mb-3" data-bs-toggle="modal"
|
|
data-bs-target="#reviewForm">Leave a review</button>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="border-bottom py-4">
|
|
<div class="row py-sm-2">
|
|
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
|
|
<div class="d-flex h6 mb-2">
|
|
Rafael Marquez
|
|
<i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
|
|
</div>
|
|
<div class="fs-sm mb-2 mb-md-3">June 25, 2024</div>
|
|
<div class="d-flex gap-1 fs-sm">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-lg-9">
|
|
<p class="mb-md-4">Absolutely love this chair! It's exactly what I was looking for to
|
|
complete my Scandinavian-themed living room. The wooden legs add a touch of warmth and
|
|
the design is timeless. Comfortable and sturdy, couldn't be happier with my purchase!
|
|
</p>
|
|
<div class="d-sm-flex justify-content-between">
|
|
<div
|
|
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
|
|
<i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
|
|
Yes, I recommend this product
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
|
|
0
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="border-bottom py-4">
|
|
<div class="row py-sm-2">
|
|
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
|
|
<div class="d-flex h6 mb-2">
|
|
Bessie Cooper
|
|
<i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
|
|
</div>
|
|
<div class="fs-sm mb-2 mb-md-3">April 8, 2024</div>
|
|
<div class="d-flex gap-1 fs-sm">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star text-body-tertiary opacity-75"></i>
|
|
<i class="ci-star text-body-tertiary opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-lg-9">
|
|
<p class="mb-md-4">While the design of the chair is nice and it does add a touch of retro
|
|
vibe to my space, I found the quality to be lacking. After just a few weeks of use, one
|
|
of the legs started to wobble, and the seat isn't as comfortable as I had hoped.
|
|
Disappointed with the durability. Additionally, the assembly process was a bit
|
|
frustrating as some of the screws didn't align properly with the holes, requiring extra
|
|
effort to secure them in place. Overall, while it looks good, I expected better quality
|
|
for the price.</p>
|
|
<div class="d-sm-flex justify-content-between">
|
|
<div
|
|
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
|
|
<i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
|
|
No, I don't recommend this product
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
|
|
3
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="border-bottom py-4">
|
|
<div class="row py-sm-2">
|
|
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
|
|
<div class="d-flex h6 mb-2">Savannah Nguyen</div>
|
|
<div class="fs-sm mb-2 mb-md-3">March 30, 2024</div>
|
|
<div class="d-flex gap-1 fs-sm">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star text-body-tertiary opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-lg-9">
|
|
<p class="mb-md-4">Great addition to our dining room! The chair looks fantastic and is
|
|
quite comfortable for short sits. Assembly was a breeze, and the quality seems decent
|
|
for the price. Overall, satisfied with the purchase.</p>
|
|
<div class="d-sm-flex justify-content-between">
|
|
<div
|
|
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
|
|
<i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
|
|
Yes, I recommend this product
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
|
|
7
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="border-bottom py-4">
|
|
<div class="row py-sm-2">
|
|
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
|
|
<div class="d-flex h6 mb-2">Daniel Adams</div>
|
|
<div class="fs-sm mb-2 mb-md-3">March 16, 2024</div>
|
|
<div class="d-flex gap-1 fs-sm">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-lg-9">
|
|
<p class="mb-md-4">Couldn't be happier with this chair! It's not only stylish but also
|
|
incredibly comfortable. The size is perfect for our space, and the wooden legs feel
|
|
sturdy. Definitely recommend it to anyone looking for a chic and functional seating
|
|
option.</p>
|
|
<div class="d-sm-flex justify-content-between">
|
|
<div
|
|
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
|
|
<i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
|
|
Yes, I recommend this product
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
|
|
14
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="border-bottom py-4">
|
|
<div class="row py-sm-2">
|
|
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
|
|
<div class="d-flex h6 mb-2">Kristin Watson</div>
|
|
<div class="fs-sm mb-2 mb-md-3">February 7, 2024</div>
|
|
<div class="d-flex gap-1 fs-sm">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star text-body-tertiary opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-lg-9">
|
|
<p class="mb-md-4">The chair is nice, but it's not the most comfortable for extended
|
|
periods of sitting. The wooden legs give it a nice aesthetic, but they seem a bit
|
|
fragile. It's a decent chair for occasional use, but I wouldn't recommend it for daily
|
|
use or long sitting sessions.</p>
|
|
<div class="d-sm-flex justify-content-between">
|
|
<div
|
|
class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
|
|
<i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
|
|
Yes, I recommend this product
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
|
|
<button type="button" class="btn btn-sm btn-secondary">
|
|
<i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
|
|
9
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav class="mt-3 pt-2 pt-md-3" aria-label="Reviews pagination">
|
|
<ul class="pagination">
|
|
<li class="page-item active" aria-current="page">
|
|
<span class="page-link">
|
|
1
|
|
<span class="visually-hidden">(current)</span>
|
|
</span>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#!">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#!">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#!">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<span class="page-link pe-none">...</span>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#!">6</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Complete look (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">Complete your look</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="lookPrev"
|
|
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="lookNext" aria-label="Next">
|
|
<i class="ci-chevron-right fs-lg animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 order-md-2 mb-4 mb-md-0">
|
|
|
|
<!-- Slider -->
|
|
<div class="swiper"
|
|
data-swiper='{
|
|
"slidesPerView": 1,
|
|
"spaceBetween": 40,
|
|
"loop": true,
|
|
"navigation": {
|
|
"prevEl": "#lookPrev",
|
|
"nextEl": "#lookNext"
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
|
|
@foreach ($complete_look_products as $key => $value)
|
|
<div class="swiper-slide">
|
|
<div class="row row-cols-2">
|
|
|
|
@foreach ($value as $key2 => $value2)
|
|
<div class="col">
|
|
<x-home.product-card :product="$value2" />
|
|
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product image -->
|
|
<div class="col-md-6 order-md-1">
|
|
<img src="{{ $product->image_url ?? '' }}" class="d-block bg-body-tertiary rounded" alt="Image">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<x-shop.viewed-products :except_ids="[$product->id]" />
|
|
|
|
|
|
<!-- Instagram feed -->
|
|
<x-home.instagram-feed />
|
|
</main>
|
|
|
|
{{-- <footer class="footer pt-5 pb-4">
|
|
<div class="container pt-sm-2 pt-md-3 pt-lg-4">
|
|
<div class="row pb-5 mb-lg-3">
|
|
|
|
<!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
|
|
<div class="col-md-8 col-xl-7 pb-2 pb-md-0 mb-4 mb-md-0 mt-n3 mt-sm-0">
|
|
<div class="accordion" id="footerLinks">
|
|
<div class="row row-cols-1 row-cols-sm-3">
|
|
<div class="accordion-item col border-0">
|
|
<h6 class="accordion-header" id="categoriesHeading">
|
|
<span class="text-dark-emphasis d-none d-sm-block">Categories</span>
|
|
<button type="button" class="accordion-button collapsed py-3 d-sm-none"
|
|
data-bs-toggle="collapse" data-bs-target="#categoriesLinks" aria-expanded="false"
|
|
aria-controls="categoriesLinks">Categories</button>
|
|
</h6>
|
|
<div class="accordion-collapse collapse d-sm-block" id="categoriesLinks"
|
|
aria-labelledby="categoriesHeading" data-bs-parent="#footerLinks">
|
|
<ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-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="#!">For women</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="#!">For men</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="#!">Home clothes</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="#!">Accessories</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="#!">Sale</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<hr class="d-sm-none my-0">
|
|
</div>
|
|
<div class="accordion-item col border-0">
|
|
<h6 class="accordion-header" id="accountHeading">
|
|
<span class="text-dark-emphasis d-none d-sm-block">Account</span>
|
|
<button type="button" class="accordion-button collapsed py-3 d-sm-none"
|
|
data-bs-toggle="collapse" data-bs-target="#accountLinks" aria-expanded="false"
|
|
aria-controls="accountLinks">Account</button>
|
|
</h6>
|
|
<div class="accordion-collapse collapse d-sm-block" id="accountLinks"
|
|
aria-labelledby="accountHeading" data-bs-parent="#footerLinks">
|
|
<ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-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="#!">Your account</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="#!">Shipping & policies</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="#!">Refunds & replacements</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="#!">Order tracking</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="#!">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="#!">Taxes & fees</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<hr class="d-sm-none my-0">
|
|
</div>
|
|
<div class="accordion-item col border-0">
|
|
<h6 class="accordion-header" id="customerHeading">
|
|
<span class="text-dark-emphasis d-none d-sm-block">Customer service</span>
|
|
<button type="button" class="accordion-button collapsed py-3 d-sm-none"
|
|
data-bs-toggle="collapse" data-bs-target="#customerLinks" aria-expanded="false"
|
|
aria-controls="customerLinks">Customer service</button>
|
|
</h6>
|
|
<div class="accordion-collapse collapse d-sm-block" id="customerLinks"
|
|
aria-labelledby="customerHeading" data-bs-parent="#footerLinks">
|
|
<ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-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="#!">Payment methods</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="#!">Money back guarantee</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="#!">Refunds & replacements</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="#!">Product returns</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="#!">Support center</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="#!">Shipping</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<hr class="d-sm-none my-0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subscription -->
|
|
<div class="col-md-4 offset-xl-1">
|
|
<h6 class="mb-4">Join us and stay up to date</h6>
|
|
<form class="needs-validation" novalidate>
|
|
<div class="form-check form-check-inline">
|
|
<input type="checkbox" class="form-check-input" id="check-woman" checked>
|
|
<label for="check-woman" class="form-check-label">Woman</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input type="checkbox" class="form-check-input" id="check-man">
|
|
<label for="check-man" class="form-check-label">Man</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input type="checkbox" class="form-check-input" id="check-sale">
|
|
<label for="check-sale" class="form-check-label">Sale</label>
|
|
</div>
|
|
<div class="position-relative mt-3">
|
|
<input type="email" class="form-control form-control-lg bg-image-none text-start"
|
|
placeholder="Enter email" aria-label="Your email address" required>
|
|
<div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
|
|
<button type="submit"
|
|
class="btn btn-icon btn-ghost fs-xl btn-secondary border-0 position-absolute top-0 end-0 mt-1 me-1"
|
|
aria-label="Submit your email address">
|
|
<i class="ci-arrow-up-right"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social account links -->
|
|
<div class="d-flex justify-content-center justify-content-lg-start gap-2 mt-n2 mt-md-0">
|
|
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
|
|
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
|
|
title="YouTube" aria-label="Follow us on YouTube">
|
|
<i class="ci-youtube"></i>
|
|
</a>
|
|
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
|
|
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
|
|
title="Facebook" aria-label="Follow us on Facebook">
|
|
<i class="ci-facebook"></i>
|
|
</a>
|
|
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
|
|
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
|
|
title="Instagram" aria-label="Follow us on Instagram">
|
|
<i class="ci-instagram"></i>
|
|
</a>
|
|
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
|
|
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
|
|
title="Telegram" aria-label="Follow us on Telegram">
|
|
<i class="ci-telegram"></i>
|
|
</a>
|
|
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
|
|
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
|
|
title="Pinterest" aria-label="Follow us on Pinterest">
|
|
<i class="ci-pinterest"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Copyright + Payment methods -->
|
|
<div class="d-lg-flex align-items-center border-top pt-4 mt-3">
|
|
<div class="d-flex gap-2 gap-sm-3 justify-content-center ms-lg-auto mb-3 mb-md-4 mb-lg-0 order-lg-2">
|
|
<div>
|
|
<img src="/img/payment-methods/visa-light-mode.svg" class="d-none-dark" alt="Visa">
|
|
<img src="/img/payment-methods/visa-dark-mode.svg" class="d-none d-block-dark" alt="Visa">
|
|
</div>
|
|
<div>
|
|
<img src="/img/payment-methods/paypal-light-mode.svg" class="d-none-dark" alt="PayPal">
|
|
<img src="/img/payment-methods/paypal-dark-mode.svg" class="d-none d-block-dark" alt="PayPal">
|
|
</div>
|
|
<div>
|
|
<img src="/img/payment-methods/mastercard.svg" alt="Mastercard">
|
|
</div>
|
|
<div>
|
|
<img src="/img/payment-methods/google-pay-light-mode.svg" class="d-none-dark" alt="Google Pay">
|
|
<img src="/img/payment-methods/google-pay-dark-mode.svg" class="d-none d-block-dark"
|
|
alt="Google Pay">
|
|
</div>
|
|
<div>
|
|
<img src="/img/payment-methods/apple-pay-light-mode.svg" class="d-none-dark" alt="Apple Pay">
|
|
<img src="/img/payment-methods/apple-pay-dark-mode.svg" class="d-none d-block-dark"
|
|
alt="Apple Pay">
|
|
</div>
|
|
</div>
|
|
<div class="d-md-flex justify-content-center order-lg-1">
|
|
<ul class="nav justify-content-center gap-4 order-md-3 mb-4 mb-md-0">
|
|
<li class="animate-underline">
|
|
<a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Privacy</a>
|
|
</li>
|
|
<li class="animate-underline">
|
|
<a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Affiliates</a>
|
|
</li>
|
|
<li class="animate-underline">
|
|
<a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Terms of use</a>
|
|
</li>
|
|
</ul>
|
|
<div class="vr text-body-secondary opacity-25 mx-4 d-none d-md-inline-block order-md-2"></div>
|
|
<p class="fs-xs text-center text-lg-start mb-0 order-md-1">
|
|
© All rights reserved. Made by <span class="animate-underline"><a
|
|
class="animate-target text-dark-emphasis text-decoration-none"
|
|
href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes
|
|
Studio</a></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer> --}}
|
|
|
|
|
|
@include('layouts.partials.footer2')
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const radios = document.querySelectorAll('input[name="colors"]');
|
|
radios.forEach(radio => {
|
|
radio.addEventListener('change', function() {
|
|
const label = document.querySelector(`label[for="${this.id}"]`);
|
|
const price = label.getAttribute('data-price');
|
|
const discountPrice = label.getAttribute('data-discount-price');
|
|
const image = label.getAttribute('data-image');
|
|
const labelText = label.getAttribute('data-label');
|
|
|
|
document.querySelector('.display_price').textContent = price;
|
|
const discountSpan = document.querySelector('.display_discount_price');
|
|
if (discountPrice) {
|
|
discountSpan.textContent = ' ' + discountPrice;
|
|
discountSpan.style.display = 'inline';
|
|
} else {
|
|
discountSpan.style.display = 'none';
|
|
}
|
|
document.querySelector('.product-main-image').src = image;
|
|
document.querySelector('.variantOption').textContent = labelText;
|
|
|
|
// Update AddToCart component with new variant ID
|
|
const addToCartBtn = document.querySelector('[data-item-id]');
|
|
if (addToCartBtn) {
|
|
console.log(this.value);
|
|
var item_id = this.value;
|
|
addToCartBtn.setAttribute('data-item-id', item_id);
|
|
}
|
|
});
|
|
});
|
|
// Trigger change for initially checked radio
|
|
const checkedRadio = document.querySelector('input[name="colors"]:checked');
|
|
if (checkedRadio) {
|
|
checkedRadio.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
|
|
// Wishlist button functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const wishlistBtn = document.getElementById('wishlist-btn');
|
|
if (wishlistBtn) {
|
|
wishlistBtn.addEventListener('click', function() {
|
|
const itemId = this.getAttribute('data-item-id');
|
|
const isWishlist = this.getAttribute('data-is-wishlist') === 'true';
|
|
const icon = this.querySelector('i');
|
|
const text = this.querySelector('span');
|
|
|
|
// Get CSRF token
|
|
const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
|
|
if (isWishlist) {
|
|
// Remove from wishlist
|
|
fetch('/account/wishlist/' + itemId, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': token,
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Update button state
|
|
this.setAttribute('data-is-wishlist', 'false');
|
|
icon.className = 'ci-heart';
|
|
text.textContent = 'Add to Wishlist';
|
|
|
|
// Show success message
|
|
const successAlert = document.createElement('div');
|
|
successAlert.className = 'alert alert-success alert-dismissible fade show position-fixed';
|
|
successAlert.style.css = 'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
|
|
successAlert.innerHTML = `
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert">×</button>
|
|
Item removed from wishlist!
|
|
`;
|
|
document.body.appendChild(successAlert);
|
|
|
|
// Auto-hide after 3 seconds
|
|
setTimeout(() => {
|
|
if (successAlert.parentNode) {
|
|
successAlert.parentNode.removeChild(successAlert);
|
|
}
|
|
}, 3000);
|
|
} else {
|
|
console.error('Failed to remove from wishlist:', data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error removing from wishlist:', error);
|
|
});
|
|
} else {
|
|
// Add to wishlist
|
|
fetch('/account/wishlist', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': token,
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
body: JSON.stringify({
|
|
item_id: itemId
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Update button state
|
|
this.setAttribute('data-is-wishlist', 'true');
|
|
icon.className = 'ci-heart-filled';
|
|
text.textContent = 'In Wishlist';
|
|
|
|
// Show success message
|
|
const successAlert = document.createElement('div');
|
|
successAlert.className = 'alert alert-success alert-dismissible fade show position-fixed';
|
|
successAlert.style.css = 'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
|
|
successAlert.innerHTML = `
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert">×</button>
|
|
Item added to wishlist!
|
|
`;
|
|
document.body.appendChild(successAlert);
|
|
|
|
// Auto-hide after 3 seconds
|
|
setTimeout(() => {
|
|
if (successAlert.parentNode) {
|
|
successAlert.parentNode.removeChild(successAlert);
|
|
}
|
|
}, 3000);
|
|
} else {
|
|
console.error('Failed to add to wishlist:', data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error adding to wishlist:', error);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|