604 lines
37 KiB
PHP
604 lines
37 KiB
PHP
@extends('layouts.landing', ['title' => 'Checkout v.2 - Thank You Page'])
|
|
|
|
@section('content')
|
|
@include('layouts.partials/offcanvas2')
|
|
|
|
<!-- Delivey options offcanvas -->
|
|
<div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
|
|
aria-labelledby="deliveryOptionsLabel" style="width: 500px">
|
|
|
|
<!-- Header with nav tabs -->
|
|
<div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
|
|
<div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
|
|
<h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<ul class="nav nav-pills nav-justified w-100" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
|
|
data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
|
|
aria-selected="true">
|
|
<i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
|
|
Delivery
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
|
|
data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
|
|
aria-selected="false">
|
|
<i class="ci-box fs-base ms-n1 me-2"></i>
|
|
Pickup
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="offcanvas-body tab-content py-2 py-sm-3">
|
|
|
|
<!-- Delivery tab -->
|
|
<div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">
|
|
|
|
<!-- Address options collapse -->
|
|
<div class="collapse delivery-address show" id="deliveryAddressOptions">
|
|
<div class="mt-n3">
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="address-1" name="delivery-address" checked>
|
|
<label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
|
|
Apt B12 Sacramento, 95829</label>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="address-2" name="delivery-address">
|
|
<div class="d-flex w-100">
|
|
<label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge Cir.
|
|
Shiloh, Hawaii, 81063</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="address-3" name="delivery-address">
|
|
<div class="d-flex w-100">
|
|
<label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
|
|
Utica, Pennsylvania, 57867</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add new address collapse -->
|
|
<div class="collapse delivery-address" id="deliveryAddressAdd">
|
|
<div class="nav mb-4">
|
|
<a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
|
|
aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
|
|
<i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
|
|
<span class="animate-target">Back to my addresses</span>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
|
|
<h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
|
|
<a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
|
|
<i class="ci-map-pin fs-base ms-n1 me-1"></i>
|
|
Find on map
|
|
</a>
|
|
</div>
|
|
<div class="mb-3 mb-lg-4">
|
|
<label class="form-label">State *</label>
|
|
<select class="form-select form-select-lg rounded-pill"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
|
|
}
|
|
}'
|
|
aria-label="Large pill select">
|
|
<option value="">Select state</option>
|
|
<option value="Arizona">Arizona</option>
|
|
<option value="California">California</option>
|
|
<option value="Montana">Montana</option>
|
|
<option value="Nevada">Nevada</option>
|
|
<option value="New Mexico">New Mexico</option>
|
|
<option value="Texas">Texas</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3 mb-lg-4">
|
|
<label for="my-postcode" class="form-label">Postcode *</label>
|
|
<input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
|
|
</div>
|
|
<div class="mb-3 mb-lg-4">
|
|
<label class="form-label">City *</label>
|
|
<select class="form-select form-select-lg rounded-pill"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
|
|
}
|
|
}'
|
|
aria-label="Large pill select">
|
|
<option value="">Select city</option>
|
|
<option value="Austin">Austin</option>
|
|
<option value="Helena">Helena</option>
|
|
<option value="Sacramento">Sacramento</option>
|
|
<option value="Santa Fe">Santa Fe</option>
|
|
<option value="Las Vegas">Las Vegas</option>
|
|
<option value="Phoenix">Phoenix</option>
|
|
</select>
|
|
</div>
|
|
<label for="my-address" class="form-label">Street address *</label>
|
|
<input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
|
|
</div>
|
|
|
|
<!-- Add address collapse toggle -->
|
|
<div class="nav">
|
|
<a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
|
|
href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
|
|
aria-controls="deliveryAddressOptions deliveryAddressAdd">
|
|
<span class="animate-target">Add delivery address</span>
|
|
<i class="ci-plus fs-base ms-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pickup tab -->
|
|
<div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
|
|
|
|
<!-- Pickup store options collapse -->
|
|
<div class="collapse pickup-options show" id="pickupStoreOptions">
|
|
<div class="mt-n3">
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
|
|
<div>
|
|
<div class="d-flex w-100 pb-2 mb-1">
|
|
<label for="store-1"
|
|
class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
|
|
Supercenter</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove"></button>
|
|
</div>
|
|
<div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-2" name="pickup-store">
|
|
<div>
|
|
<div class="d-flex w-100 pb-2 mb-1">
|
|
<label for="store-2"
|
|
class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
|
|
Supercenter</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove"></button>
|
|
</div>
|
|
<div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-3" name="pickup-store">
|
|
<div>
|
|
<div class="d-flex w-100 pb-2 mb-1">
|
|
<label for="store-3"
|
|
class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
|
|
Supercenter</label>
|
|
<button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
|
|
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
|
aria-label="Remove"></button>
|
|
</div>
|
|
<div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add new pickup store collapse -->
|
|
<div class="collapse pickup-options" id="pickupStoreAdd">
|
|
<div class="nav mb-4">
|
|
<a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
|
|
aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
|
|
<i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
|
|
<span class="animate-target">Back to my stores</span>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
|
|
<h5 class="h6 mb-0 me-3">Select a suitable store</h5>
|
|
<a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
|
|
<i class="ci-map-pin fs-base ms-n1 me-1"></i>
|
|
Find on map
|
|
</a>
|
|
</div>
|
|
<div class="mb-3 mb-lg-4">
|
|
<label class="form-label">State *</label>
|
|
<select class="form-select form-select-lg rounded-pill"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
|
|
}
|
|
}'
|
|
aria-label="Large pill select">
|
|
<option value="">Select state</option>
|
|
<option value="Arizona">Arizona</option>
|
|
<option value="California" selected>California</option>
|
|
<option value="Montana">Montana</option>
|
|
<option value="Nevada">Nevada</option>
|
|
<option value="New Mexico">New Mexico</option>
|
|
<option value="Texas">Texas</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="form-label">City *</label>
|
|
<select class="form-select form-select-lg rounded-pill"
|
|
data-select='{
|
|
"classNames": {
|
|
"containerInner": ["form-select", "form-select-lg", "rounded-pill"]
|
|
}
|
|
}'
|
|
aria-label="Large pill select">
|
|
<option value="">Select city</option>
|
|
<option value="Austin">Austin</option>
|
|
<option value="Helena">Helena</option>
|
|
<option value="Sacramento" selected>Sacramento</option>
|
|
<option value="Santa Fe">Santa Fe</option>
|
|
<option value="Las Vegas">Las Vegas</option>
|
|
<option value="Phoenix">Phoenix</option>
|
|
</select>
|
|
</div>
|
|
<div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-4" name="found-store">
|
|
<div>
|
|
<label for="store-4"
|
|
class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
|
|
Supercenter</label>
|
|
<div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-5" name="found-store">
|
|
<div>
|
|
<label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
|
|
Sacramento Supercenter</label>
|
|
<div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-check border-bottom py-4 m-0">
|
|
<input type="radio" class="form-check-input" id="store-6" name="found-store">
|
|
<div>
|
|
<label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
|
|
Cordova Supercenter</label>
|
|
<div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
|
|
<div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add address collapse toggle -->
|
|
<div class="nav">
|
|
<a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
|
|
href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
|
|
aria-controls="pickupStoreOptions pickupStoreAdd">
|
|
<span class="animate-target">Add store address</span>
|
|
<i class="ci-plus fs-base ms-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="offcanvas-header">
|
|
<button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Site menu offcanvas -->
|
|
@include('layouts.partials/menu-offcanvas')
|
|
|
|
@include('layouts.partials/checkout-navbar')
|
|
|
|
<!-- Page content -->
|
|
<main class="content-wrapper">
|
|
|
|
<!-- Thank you message -->
|
|
<section class="container pt-3 pt-sm-4 pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
|
|
<div class="position-relative overflow-hidden rounded-5 p-4 p-sm-5"
|
|
style="background-color: var(--cz-success-border-subtle)">
|
|
<div class="position-relative z-2 text-center py-4 py-md-5 my-md-2 my-lg-5 mx-auto"
|
|
style="max-width: 536px">
|
|
<h1 class="pt-xl-4 mb-4">Thank you for your order!</h1>
|
|
<p class="text-dark-emphasis pb-3 pb-sm-4">Your order <span class="fw-semibold">#234000</span>
|
|
accepted and will be processed shortly. Expect our courier <span class="fw-semibold">today (Sunday,
|
|
May 9) at 12:00 - 14:00.</span></p>
|
|
<a class="btn btn-lg btn-dark rounded-pill mb-xl-4" href="{{ route('second', ['shop', 'catalog-grocery']) }}">Continue
|
|
shopping</a>
|
|
</div>
|
|
<img src="/img/shop/grocery/thankyou-bg-1.png"
|
|
class="animate-up-down position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
|
|
alt="Background image">
|
|
<img src="/img/shop/grocery/thankyou-bg-2.png"
|
|
class="animate-down-up position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
|
|
alt="Background image">
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Similar products carousel -->
|
|
<section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
|
|
<h2 class="h3 text-center mb-4">You may also like</h2>
|
|
<!-- Slider -->
|
|
<div class="swiper"
|
|
data-swiper='{
|
|
"slidesPerView": 2,
|
|
"spaceBetween": 24,
|
|
"pagination": {
|
|
"el": ".swiper-pagination",
|
|
"clickable": true
|
|
},
|
|
"breakpoints": {
|
|
"500": {
|
|
"slidesPerView": 3
|
|
},
|
|
"768": {
|
|
"slidesPerView": 4
|
|
},
|
|
"1100": {
|
|
"slidesPerView": 5
|
|
}
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
|
|
<!-- Product -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<span
|
|
class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-1 mt-sm-2 ms-1 ms-sm-2">-30%</span>
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/02.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
|
|
aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$3.12 <del
|
|
class="fs-sm fw-normal text-body-tertiary ms-1">$4.05</del></div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh
|
|
orange Klementina, Spain</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/03.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
|
|
aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$0.80</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Pepsi
|
|
soda classic, can</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">330ml</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/04.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
|
|
aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$2.99</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal"
|
|
href="{{ route('second', ['shop', 'product-grocery']) }}">Mozzarella mini cheese Granaloro</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">250g</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/05.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
|
|
aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$1.24</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Coconut,
|
|
Indonesia</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 coconut</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card product-card h-100 bg-transparent border-0 shadow-none">
|
|
<div class="position-relative z-2">
|
|
<button type="button"
|
|
class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
|
|
aria-label="Add to Wishlist">
|
|
<i class="ci-heart animate-target"></i>
|
|
</button>
|
|
<a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
|
|
<img src="/img/shop/grocery/06.png" alt="Image">
|
|
</div>
|
|
</a>
|
|
<div class="position-absolute w-100 start-0 bottom-0">
|
|
<div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
|
|
<div
|
|
class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
|
|
<button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
|
|
aria-label="Decrement quantity">
|
|
<i class="ci-minus fs-sm"></i>
|
|
</button>
|
|
<input type="number"
|
|
class="form-control form-control-sm bg-primary text-white w-100"
|
|
value="0" min="0" readonly>
|
|
<button type="button"
|
|
class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
|
|
data-increment aria-label="Increment quantity">
|
|
<span data-count-input-value></span>
|
|
<i class="ci-plus fs-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
|
|
<div class="h6 mb-2">$3.95</div>
|
|
<h3 class="fs-sm lh-base mb-0">
|
|
<a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto
|
|
sauce Barilla with parmesan and basil</a>
|
|
</h3>
|
|
</div>
|
|
<div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">200g</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination (Bullets) -->
|
|
<div class="swiper-pagination position-static mt-3"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
@include('layouts.partials/footer2')
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@endsection
|