1512 lines
92 KiB
PHP
1512 lines
92 KiB
PHP
@extends('layouts.landing', ['title' => 'Fashion Store - Product Page'])
|
|
|
|
@section('content')
|
|
<div class="modal fade" id="reviewForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="reviewFormLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
|
<form class="modal-content needs-validation" novalidate>
|
|
<div class="modal-header border-0">
|
|
<h5 class="modal-title" id="reviewFormLabel">Leave a review</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body pb-3 pt-0">
|
|
<div class="mb-3">
|
|
<label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="review-name" required>
|
|
<div class="invalid-feedback">Please enter your name!</div>
|
|
<small class="form-text">Will be displayed on the comment.</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
|
|
<input type="email" class="form-control" id="review-email" required>
|
|
<div class="invalid-feedback">Please provide a valid email address!</div>
|
|
<small class="form-text">Authentication only - we won't spam you.</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Rating <span class="text-danger">*</span></label>
|
|
<select class="form-select"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": "form-select"
|
|
},
|
|
"placeholderValue": "Choose rating",
|
|
"choices": [
|
|
{
|
|
"value": "",
|
|
"label": "Choose rating",
|
|
"placeholder": true
|
|
},
|
|
{
|
|
"value": "1",
|
|
"label": "<span class=\"visually-hidden\">1 star</span>",
|
|
"customProperties": {
|
|
"icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
|
|
"selected": "1 star"
|
|
}
|
|
},
|
|
{
|
|
"value": "2",
|
|
"label": "<span class=\"visually-hidden\">2 stars</span>",
|
|
"customProperties": {
|
|
"icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
|
|
"selected": "2 stars"
|
|
}
|
|
},
|
|
{
|
|
"value": "3",
|
|
"label": "<span class=\"visually-hidden\">3 stars</span>",
|
|
"customProperties": {
|
|
"icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
|
|
"selected": "3 stars"
|
|
}
|
|
},
|
|
{
|
|
"value": "4",
|
|
"label": "<span class=\"visually-hidden\">4 stars</span>",
|
|
"customProperties": {
|
|
"icon": "<span class=\"d-flex gap-1 py-1\"><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></span>",
|
|
"selected": "4 stars"
|
|
}
|
|
},
|
|
{
|
|
"value": "5",
|
|
"label": "<span class=\"visually-hidden\">5 stars</span>",
|
|
"customProperties": {
|
|
"icon": "<span class=\"d-flex gap-1 py-1\"><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></span>",
|
|
"selected": "5 stars"
|
|
}
|
|
}
|
|
]
|
|
}'
|
|
data-select-template="true" required></select>
|
|
<div class="invalid-feedback">Please choose your rating!</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="review-text">Review <span class="text-danger">*</span></label>
|
|
<textarea class="form-control" rows="4" id="review-text" required></textarea>
|
|
<div class="invalid-feedback">Please write a review!</div>
|
|
<small class="form-text">Your review must be at least 50 characters.</small>
|
|
</div>
|
|
<div>
|
|
<div class="form-check form-check-inline">
|
|
<input type="radio" class="form-check-input" id="yes" name="recommend" checked>
|
|
<label for="yes" class="form-check-label">Yes, I recommend</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input type="radio" class="form-check-input" id="no" name="recommend">
|
|
<label for="no" class="form-check-label">No, I don't recommend</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer flex-nowrap gap-3 border-0 px-4">
|
|
<button type="reset" class="btn btn-secondary w-100 m-0" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-dark w-100 m-0">Submit review</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="sizeGuide" tabindex="-1" aria-labelledby="reviewFormLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-body-tertiary border-0 py-2 ps-2 pe-4">
|
|
<ul class="nav nav-tabs flex-nowrap text-nowrap py-2" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#womens" id="womens-sizes" data-bs-toggle="tab" role="tab"
|
|
aria-controls="mens" aria-selected="true">Women's sizes</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#mens" id="mens-sizes" data-bs-toggle="tab" role="tab"
|
|
aria-controls="womens" aria-selected="false" tabindex="-1">Men's sizes</a>
|
|
</li>
|
|
</ul>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="womens" role="tabpanel"
|
|
aria-labelledby="womens-sizes">
|
|
<div class="table-responsive">
|
|
<table class="table fs-sm text-center mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="align-middle">US<br>Sizes</th>
|
|
<th scope="col" class="align-middle">Euro<br>Sizes</th>
|
|
<th scope="col" class="align-middle">UK<br>Sizes</th>
|
|
<th scope="col" class="align-middle">Inches</th>
|
|
<th scope="col" class="align-middle">CM</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">4</td>
|
|
<td>35</td>
|
|
<td>2</td>
|
|
<td>8.1875"</td>
|
|
<td>20.8</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">4.5</td>
|
|
<td>35</td>
|
|
<td>2.5</td>
|
|
<td>8.375"</td>
|
|
<td>21.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">5</td>
|
|
<td>35-36</td>
|
|
<td>3</td>
|
|
<td>8.5"</td>
|
|
<td>21.6</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">5.5</td>
|
|
<td>36</td>
|
|
<td>3.5</td>
|
|
<td>8.75"</td>
|
|
<td>22.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">6</td>
|
|
<td>36-37</td>
|
|
<td>4</td>
|
|
<td>8.875"</td>
|
|
<td>22.5</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">6.5</td>
|
|
<td>37</td>
|
|
<td>4.5</td>
|
|
<td>9.0625"</td>
|
|
<td>23</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">7</td>
|
|
<td>37-38</td>
|
|
<td>5</td>
|
|
<td>9.25"</td>
|
|
<td>23.5</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">7.5</td>
|
|
<td>38</td>
|
|
<td>5.5</td>
|
|
<td>9.375"</td>
|
|
<td>23.8</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">8</td>
|
|
<td>38-39</td>
|
|
<td>6</td>
|
|
<td>9.5"</td>
|
|
<td>24.1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">8.5</td>
|
|
<td>39</td>
|
|
<td>6.5</td>
|
|
<td>9.6875"</td>
|
|
<td>24.6</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">9</td>
|
|
<td>39-40</td>
|
|
<td>7</td>
|
|
<td>9.875"</td>
|
|
<td>25.1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">9.5</td>
|
|
<td>40</td>
|
|
<td>7.5</td>
|
|
<td>10"</td>
|
|
<td>25.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">10</td>
|
|
<td>40-41</td>
|
|
<td>8</td>
|
|
<td>10.1875"</td>
|
|
<td>25.9</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">10.5</td>
|
|
<td>41</td>
|
|
<td>8.5</td>
|
|
<td>10.3125"</td>
|
|
<td>26.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">11</td>
|
|
<td>41-42</td>
|
|
<td>9</td>
|
|
<td>10.5"</td>
|
|
<td>26.7</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">11.5</td>
|
|
<td>42</td>
|
|
<td>9.5</td>
|
|
<td>10.6875"</td>
|
|
<td>27.1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">12</td>
|
|
<td>42-43</td>
|
|
<td>10</td>
|
|
<td>10.875"</td>
|
|
<td>27.6</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="mens" role="tabpanel" aria-labelledby="mens-sizes">
|
|
<div class="table-responsive">
|
|
<table class="table fs-sm text-center mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="align-middle">US<br>Sizes</th>
|
|
<th scope="col" class="align-middle">Euro<br>Sizes</th>
|
|
<th scope="col" class="align-middle">UK<br>Sizes</th>
|
|
<th scope="col" class="align-middle">Inches</th>
|
|
<th scope="col" class="align-middle">CM</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">6</td>
|
|
<td>39</td>
|
|
<td>5.5</td>
|
|
<td>9.25"</td>
|
|
<td>23.5</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">6.5</td>
|
|
<td>39</td>
|
|
<td>6</td>
|
|
<td>9.5"</td>
|
|
<td>24.1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">7</td>
|
|
<td>40</td>
|
|
<td>6.5</td>
|
|
<td>9.625"</td>
|
|
<td>24.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">7.5</td>
|
|
<td>40-41</td>
|
|
<td>7</td>
|
|
<td>9.75"</td>
|
|
<td>24.8</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">8</td>
|
|
<td>41</td>
|
|
<td>7.5</td>
|
|
<td>9.9375"</td>
|
|
<td>25.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">8.5</td>
|
|
<td>41-42</td>
|
|
<td>8</td>
|
|
<td>10.125"</td>
|
|
<td>25.7</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">9</td>
|
|
<td>42</td>
|
|
<td>8.5</td>
|
|
<td>10.25"</td>
|
|
<td>26</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">9.5</td>
|
|
<td>42-43</td>
|
|
<td>9</td>
|
|
<td>10.4375"</td>
|
|
<td>26.7</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">10</td>
|
|
<td>43</td>
|
|
<td>9.5</td>
|
|
<td>10.5625"</td>
|
|
<td>27</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">10.5</td>
|
|
<td>43-44</td>
|
|
<td>10</td>
|
|
<td>10.75"</td>
|
|
<td>27.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">11</td>
|
|
<td>44</td>
|
|
<td>10.5</td>
|
|
<td>10.9375"</td>
|
|
<td>27.9</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">11.5</td>
|
|
<td>44-45</td>
|
|
<td>11</td>
|
|
<td>11.125"</td>
|
|
<td>28.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">12</td>
|
|
<td>45</td>
|
|
<td>11.5</td>
|
|
<td>11.25"</td>
|
|
<td>28.6</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">13</td>
|
|
<td>46</td>
|
|
<td>12.5</td>
|
|
<td>11.5625"</td>
|
|
<td>29.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">14</td>
|
|
<td>47</td>
|
|
<td>13.5</td>
|
|
<td>11.875"</td>
|
|
<td>30.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">15</td>
|
|
<td>48</td>
|
|
<td>14.5</td>
|
|
<td>12.1875"</td>
|
|
<td>31</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">16</td>
|
|
<td>49</td>
|
|
<td>15.5</td>
|
|
<td>12.5"</td>
|
|
<td>31.8</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<x-layout.header />
|
|
|
|
<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">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 -->
|
|
<h1 class="h3">{{ $product->name }}</h1>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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> --}}
|
|
</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 -->
|
|
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
|
|
<div class="text-center pt-1 pb-2 pb-md-3">
|
|
<h2 class="pb-2 mb-1">
|
|
<span class="animate-underline">
|
|
<a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#AsiaGolf</a>
|
|
</span>
|
|
</h2>
|
|
<p>Find more inspiration on our Instagram</p>
|
|
</div>
|
|
<div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
|
|
<div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
|
|
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
href="#!">
|
|
<span
|
|
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
<i
|
|
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
<div class="hover-effect-target ratio ratio-1x1">
|
|
<img src="/img/instagram/01.jpg" alt="Instagram image">
|
|
</div>
|
|
</a>
|
|
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
href="#!">
|
|
<span
|
|
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
<i
|
|
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
<div class="hover-effect-target ratio ratio-1x1">
|
|
<img src="/img/instagram/02.jpg" alt="Instagram image">
|
|
</div>
|
|
</a>
|
|
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
href="#!">
|
|
<span
|
|
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
<i
|
|
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
<div class="hover-effect-target ratio ratio-1x1">
|
|
<img src="/img/instagram/03.jpg" alt="Instagram image">
|
|
</div>
|
|
</a>
|
|
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
href="#!">
|
|
<span
|
|
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
<i
|
|
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
<div class="hover-effect-target ratio ratio-1x1">
|
|
<img src="/img/instagram/04.jpg" alt="Instagram image">
|
|
</div>
|
|
</a>
|
|
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
href="#!">
|
|
<span
|
|
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
<i
|
|
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
<div class="hover-effect-target ratio ratio-1x1">
|
|
<img src="/img/instagram/05.jpg" alt="Instagram image">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</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>
|
|
@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-reference-id]');
|
|
if (addToCartBtn) {
|
|
console.log(this.value);
|
|
var item_reference_id = this.value;
|
|
addToCartBtn.setAttribute('data-item-reference-id', item_reference_id);
|
|
}
|
|
});
|
|
});
|
|
// Trigger change for initially checked radio
|
|
const checkedRadio = document.querySelector('input[name="colors"]:checked');
|
|
if (checkedRadio) {
|
|
checkedRadio.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|