state cart null
This commit is contained in:
parent
156978e669
commit
9a23e75f5b
|
|
@ -79,4 +79,18 @@ class CartController extends Controller
|
|||
|
||||
return redirect()->route('cart.index');
|
||||
}
|
||||
|
||||
public function clear(MemberCartRepository $repository)
|
||||
{
|
||||
$repository->clearAll();
|
||||
|
||||
if (request()->expectsJson()) {
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Cart cleared successfully'
|
||||
]);
|
||||
}
|
||||
|
||||
return redirect()->route('cart.index');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,14 @@ class MemberCartRepository
|
|||
->sum('qty');
|
||||
}
|
||||
|
||||
static public function clearAll($locationId = null)
|
||||
{
|
||||
$location = $locationId ?? session('location_id', 22);
|
||||
return Cart::where('user_id', auth()->user()->id)
|
||||
->where('location_id', $location)
|
||||
->delete();
|
||||
}
|
||||
|
||||
|
||||
|
||||
public function getList($request)
|
||||
|
|
|
|||
|
|
@ -56,29 +56,44 @@
|
|||
<th scope="col" class="py-0 px-0">
|
||||
<div class="nav justify-content-end">
|
||||
<button type="button"
|
||||
class="nav-link d-inline-block text-decoration-underline text-nowrap py-3 px-0">Clear
|
||||
class="nav-link d-inline-block text-decoration-underline text-nowrap py-3 px-0"
|
||||
onclick="clearCart()">Clear
|
||||
cart</button>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="align-middle">
|
||||
|
||||
@foreach ($carts as $key => $cart)
|
||||
<tr data-cart-id="{{ $cart->id }}">
|
||||
<td class="py-3 ps-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<a class="flex-shrink-0"
|
||||
href="{{ route('second', ['shop', 'product-general-electronics']) }}">
|
||||
<img src="{{ $cart->itemReference->item->image_url ?? '' }}" width="110"
|
||||
alt="{{ $cart->name ?? 'Product' }}">
|
||||
@if ($carts->count() == 0)
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-5">
|
||||
<div class="py-4">
|
||||
<i class="ci-shopping-bag text-muted" style="font-size: 3rem;"></i>
|
||||
<h5 class="mt-3 mb-2">Your cart is empty</h5>
|
||||
<p class="text-muted mb-4">Looks like you haven't added any items to your
|
||||
cart yet.</p>
|
||||
<a href="{{ route('home') }}" class="btn btn-primary">
|
||||
<i class="ci-shopping-bag me-2"></i>Start Shopping
|
||||
</a>
|
||||
<div class="w-100 min-w-0 ps-2 ps-xl-3">
|
||||
<h5 class="d-flex animate-underline mb-2">
|
||||
<a class="d-block fs-sm fw-medium text-truncate animate-target"
|
||||
href="{{ $cart->itemVariant->item->slug != null ? route('product.detail', [$cart->item->slug]) : '#' }}">{{ $cart->itemVariant->display_name ?? $cart->itemVariant->description ?? 'Product Name' }}</a>
|
||||
</h5>
|
||||
{{-- <ul class="list-unstyled gap-1 fs-xs mb-0">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@else
|
||||
@foreach ($carts as $key => $cart)
|
||||
<tr data-cart-id="{{ $cart->id }}">
|
||||
<td class="py-3 ps-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<a class="flex-shrink-0"
|
||||
href="{{ route('product.detail', $cart->itemVariant->item->slug) }}">
|
||||
<img src="{{ $cart->itemReference->item->image_url ?? '' }}"
|
||||
width="110" alt="{{ $cart->name ?? 'Product' }}">
|
||||
</a>
|
||||
<div class="w-100 min-w-0 ps-2 ps-xl-3">
|
||||
<h5 class="d-flex animate-underline mb-2">
|
||||
<a class="d-block fs-sm fw-medium text-truncate animate-target"
|
||||
href="{{ $cart->itemVariant->item->slug != null ? route('product.detail', [$cart->item->slug]) : '#' }}">{{ $cart->itemVariant->display_name ?? ($cart->itemVariant->description ?? 'Product Name') }}</a>
|
||||
</h5>
|
||||
{{-- <ul class="list-unstyled gap-1 fs-xs mb-0">
|
||||
<li><span class="text-body-secondary">Color:</span> <span
|
||||
class="text-dark-emphasis fw-medium">{{ $cart->color ?? 'N/A' }}</span></li>
|
||||
<li><span class="text-body-secondary">Model:</span> <span
|
||||
|
|
@ -88,56 +103,64 @@
|
|||
<span class="text-dark-emphasis fw-medium">${{ number_format($cart->itemReference->display_price ?? 0, 2) }}</span>
|
||||
</li>
|
||||
</ul> --}}
|
||||
<div class="count-input rounded-2 d-md-none mt-3">
|
||||
<button type="button" class="btn btn-sm btn-icon" data-decrement
|
||||
aria-label="Decrement quantity">
|
||||
<i class="ci-minus"></i>
|
||||
</button>
|
||||
<input type="number" class="form-control form-control-sm"
|
||||
value="{{ $cart->qty ?? 1 }}" readonly>
|
||||
<button type="button" class="btn btn-sm btn-icon" data-increment
|
||||
aria-label="Increment quantity">
|
||||
<i class="ci-plus"></i>
|
||||
</button>
|
||||
<div class="count-input rounded-2 d-md-none mt-3">
|
||||
<button type="button" class="btn btn-sm btn-icon"
|
||||
data-decrement aria-label="Decrement quantity">
|
||||
<i class="ci-minus"></i>
|
||||
</button>
|
||||
<input type="number" class="form-control form-control-sm"
|
||||
value="{{ $cart->qty ?? 1 }}" readonly>
|
||||
<button type="button" class="btn btn-sm btn-icon"
|
||||
data-increment aria-label="Increment quantity">
|
||||
<i class="ci-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="h6 py-3 d-none d-xl-table-cell" >
|
||||
<input type="hidden" id="price_{{ $cart->id }}" value="{{ $cart->itemVariant->display_price ?? 0 }}">
|
||||
Rp {{ number_format($cart->itemVariant->display_price ?? 0, 0,",",".") }}</td>
|
||||
<td class="py-3 d-none d-md-table-cell">
|
||||
<div class="count-input">
|
||||
<button type="button" class="btn btn-icon" data-decrement
|
||||
aria-label="Decrement quantity" onclick="updateCartItem({{ $cart->id }}, 'decrement', this)">
|
||||
<i class="ci-minus"></i>
|
||||
</button>
|
||||
<input type="number" class="form-control" value="{{ $cart->qty ?? 1 }}" readonly>
|
||||
<button type="button" class="btn btn-icon" data-increment
|
||||
aria-label="Increment quantity" onclick="updateCartItem({{ $cart->id }}, 'increment', this)">
|
||||
<i class="ci-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="h6 py-3 d-none d-md-table-cell total-row">Rp {{ number_format(($cart->display_price ?? 0) * ($cart->qty ?? 1), 0,",",".") }}</td>
|
||||
<td class="text-end py-3 px-0">
|
||||
<form action="{{ route('cart.delete', $cart->id) }}" method="POST" onsubmit="deleteCartItem(event, this, {{ $cart->id }})">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn-close fs-sm" data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
||||
aria-label="Remove from cart"></button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</td>
|
||||
<td class="h6 py-3 d-none d-xl-table-cell">
|
||||
<input type="hidden" id="price_{{ $cart->id }}"
|
||||
value="{{ $cart->itemVariant->display_price ?? 0 }}">
|
||||
Rp {{ number_format($cart->itemVariant->display_price ?? 0, 0, ',', '.') }}
|
||||
</td>
|
||||
<td class="py-3 d-none d-md-table-cell">
|
||||
<div class="count-input">
|
||||
<button type="button" class="btn btn-icon" data-decrement
|
||||
aria-label="Decrement quantity"
|
||||
onclick="updateCartItem({{ $cart->id }}, 'decrement', this)">
|
||||
<i class="ci-minus"></i>
|
||||
</button>
|
||||
<input type="number" class="form-control"
|
||||
value="{{ $cart->qty ?? 1 }}" readonly>
|
||||
<button type="button" class="btn btn-icon" data-increment
|
||||
aria-label="Increment quantity"
|
||||
onclick="updateCartItem({{ $cart->id }}, 'increment', this)">
|
||||
<i class="ci-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="h6 py-3 d-none d-md-table-cell total-row">Rp
|
||||
{{ number_format(($cart->display_price ?? 0) * ($cart->qty ?? 1), 0, ',', '.') }}
|
||||
</td>
|
||||
<td class="text-end py-3 px-0">
|
||||
<form action="{{ route('cart.delete', $cart->id) }}" method="POST"
|
||||
onsubmit="deleteCartItem(event, this, {{ $cart->id }})">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn-close fs-sm" data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
|
||||
aria-label="Remove from cart"></button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="nav position-relative z-2 mb-4 mb-lg-0">
|
||||
<a class="nav-link animate-underline px-0"
|
||||
href="{{ route('home') }}">
|
||||
<a class="nav-link animate-underline px-0" href="{{ route('home') }}">
|
||||
<i class="ci-chevron-left fs-lg me-1"></i>
|
||||
<span class="animate-target">Continue shopping</span>
|
||||
</a>
|
||||
|
|
@ -147,77 +170,82 @@
|
|||
|
||||
|
||||
<!-- Order summary (sticky sidebar) -->
|
||||
<aside class="col-lg-4" style="margin-top: -100px">
|
||||
<div class="position-sticky top-0" style="padding-top: 100px">
|
||||
<div class="bg-body-tertiary rounded-5 p-4 mb-3">
|
||||
<div class="p-sm-2 p-lg-0 p-xl-2">
|
||||
<h5 class="border-bottom pb-4 mb-4">Order summary</h5>
|
||||
<ul class="list-unstyled fs-sm gap-3 mb-0">
|
||||
<li class="d-flex justify-content-between">
|
||||
<div>Subtotal (<span class="cart-count">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span> items):</div>
|
||||
<span class="text-dark-emphasis fw-medium" id="cart-subtotal">Rp 0</span>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between">
|
||||
Saving:
|
||||
<span class="text-danger fw-medium">Rp 0</span>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between" id="tax-row" style="display: none;">
|
||||
Tax collected:
|
||||
<span class="text-dark-emphasis fw-medium">Rp 0</span>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between">
|
||||
Shipping:
|
||||
<span class="text-dark-emphasis fw-medium">Calculated at checkout</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="border-top pt-4 mt-4">
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<span class="fs-sm">Estimated total:</span>
|
||||
<span class="h5 mb-0" id="cart-estimated-total">$0.00</span>
|
||||
</div>
|
||||
<a class="btn btn-lg btn-primary w-100"
|
||||
href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">
|
||||
Proceed to checkout
|
||||
<i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
|
||||
</a>
|
||||
{{-- <div class="nav justify-content-center fs-sm mt-3">
|
||||
@if ($carts->count() > 0)
|
||||
<aside class="col-lg-4" style="margin-top: -100px">
|
||||
<div class="position-sticky top-0" style="padding-top: 100px">
|
||||
<div class="bg-body-tertiary rounded-5 p-4 mb-3">
|
||||
<div class="p-sm-2 p-lg-0 p-xl-2">
|
||||
<h5 class="border-bottom pb-4 mb-4">Order summary</h5>
|
||||
<ul class="list-unstyled fs-sm gap-3 mb-0">
|
||||
<li class="d-flex justify-content-between">
|
||||
<div>Subtotal (<span
|
||||
class="cart-count">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
|
||||
items):</div>
|
||||
<span class="text-dark-emphasis fw-medium" id="cart-subtotal">Rp 0</span>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between">
|
||||
Saving:
|
||||
<span class="text-danger fw-medium">Rp 0</span>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between" id="tax-row" style="display: none;">
|
||||
Tax collected:
|
||||
<span class="text-dark-emphasis fw-medium">Rp 0</span>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between">
|
||||
Shipping:
|
||||
<span class="text-dark-emphasis fw-medium">Calculated at checkout</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="border-top pt-4 mt-4">
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<span class="fs-sm">Estimated total:</span>
|
||||
<span class="h5 mb-0" id="cart-estimated-total">$0.00</span>
|
||||
</div>
|
||||
<a class="btn btn-lg btn-primary w-100"
|
||||
href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">
|
||||
Proceed to checkout
|
||||
<i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
|
||||
</a>
|
||||
{{-- <div class="nav justify-content-center fs-sm mt-3">
|
||||
<a class="nav-link text-decoration-underline p-0 me-1" href="#authForm"
|
||||
data-bs-toggle="offcanvas" role="button">Create an account</a>
|
||||
and get
|
||||
<span class="text-dark-emphasis fw-medium ms-1">239 bonuses</span>
|
||||
</div> --}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion bg-body-tertiary rounded-5 p-4">
|
||||
<div class="accordion-item border-0">
|
||||
<h3 class="accordion-header" id="promoCodeHeading">
|
||||
<button type="button"
|
||||
class="accordion-button animate-underline collapsed py-0 ps-sm-2 ps-lg-0 ps-xl-2"
|
||||
data-bs-toggle="collapse" data-bs-target="#promoCode" aria-expanded="false"
|
||||
aria-controls="promoCode">
|
||||
<i class="ci-percent fs-xl me-2"></i>
|
||||
<span class="animate-target me-2">Apply promo code</span>
|
||||
</button>
|
||||
</h3>
|
||||
<div class="accordion-collapse collapse" id="promoCode"
|
||||
aria-labelledby="promoCodeHeading">
|
||||
<div class="accordion-body pt-3 pb-2 ps-sm-2 px-lg-0 px-xl-2">
|
||||
<form class="needs-validation d-flex gap-2" novalidate>
|
||||
<div class="position-relative w-100">
|
||||
<input type="text" class="form-control" placeholder="Enter promo code"
|
||||
required>
|
||||
<div class="invalid-tooltip bg-transparent py-0">Enter a valid promo code!
|
||||
<div class="accordion bg-body-tertiary rounded-5 p-4">
|
||||
<div class="accordion-item border-0">
|
||||
<h3 class="accordion-header" id="promoCodeHeading">
|
||||
<button type="button"
|
||||
class="accordion-button animate-underline collapsed py-0 ps-sm-2 ps-lg-0 ps-xl-2"
|
||||
data-bs-toggle="collapse" data-bs-target="#promoCode" aria-expanded="false"
|
||||
aria-controls="promoCode">
|
||||
<i class="ci-percent fs-xl me-2"></i>
|
||||
<span class="animate-target me-2">Apply promo code</span>
|
||||
</button>
|
||||
</h3>
|
||||
<div class="accordion-collapse collapse" id="promoCode"
|
||||
aria-labelledby="promoCodeHeading">
|
||||
<div class="accordion-body pt-3 pb-2 ps-sm-2 px-lg-0 px-xl-2">
|
||||
<form class="needs-validation d-flex gap-2" novalidate>
|
||||
<div class="position-relative w-100">
|
||||
<input type="text" class="form-control"
|
||||
placeholder="Enter promo code" required>
|
||||
<div class="invalid-tooltip bg-transparent py-0">Enter a valid promo
|
||||
code!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-dark">Apply</button>
|
||||
</form>
|
||||
<button type="submit" class="btn btn-dark">Apply</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</aside>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -728,249 +756,477 @@
|
|||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Clear Cart Confirmation Modal -->
|
||||
<div class="modal fade" id="clearCartModal" tabindex="-1" aria-labelledby="clearCartModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0">
|
||||
<h5 class="modal-title" id="clearCartModalLabel">Clear Cart</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center py-4">
|
||||
<div class="mb-4">
|
||||
<i class="ci-trash text-danger" style="font-size: 3rem;"></i>
|
||||
</div>
|
||||
<h6 class="mb-3">Are you sure you want to clear your entire cart?</h6>
|
||||
<p class="text-muted mb-4">This action cannot be undone. All items will be removed from your cart.</p>
|
||||
</div>
|
||||
<div class="modal-footer border-0 justify-content-center">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmClearCart">Clear Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Item Confirmation Modal -->
|
||||
<div class="modal fade" id="deleteItemModal" tabindex="-1" aria-labelledby="deleteItemModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0">
|
||||
<h5 class="modal-title" id="deleteItemModalLabel">Remove Item</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center py-4">
|
||||
<div class="mb-4">
|
||||
<i class="ci-trash text-warning" style="font-size: 3rem;"></i>
|
||||
</div>
|
||||
<h6 class="mb-3">Are you sure you want to remove this item from cart?</h6>
|
||||
<p class="text-muted mb-4">This action cannot be undone. The item will be removed from your cart.</p>
|
||||
</div>
|
||||
<div class="modal-footer border-0 justify-content-center">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-warning" id="confirmDeleteItem">Remove Item</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('layouts.partials/footer')
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
// JavaScript number formatting function
|
||||
function number_format(number, decimals, dec_point, thousands_sep) {
|
||||
number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
|
||||
var n = !isFinite(+number) ? 0 : +number;
|
||||
var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
|
||||
var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep;
|
||||
var dec = (typeof dec_point === 'undefined') ? '.' : dec_point;
|
||||
<script>
|
||||
// JavaScript number formatting function
|
||||
function number_format(number, decimals, dec_point, thousands_sep) {
|
||||
number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
|
||||
var n = !isFinite(+number) ? 0 : +number;
|
||||
var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
|
||||
var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep;
|
||||
var dec = (typeof dec_point === 'undefined') ? '.' : dec_point;
|
||||
|
||||
var s = '';
|
||||
var toFixedFix = function (n, prec) {
|
||||
var k = Math.pow(10, prec);
|
||||
return '' + Math.round(n * k) / k;
|
||||
};
|
||||
var s = '';
|
||||
var toFixedFix = function(n, prec) {
|
||||
var k = Math.pow(10, prec);
|
||||
return '' + Math.round(n * k) / k;
|
||||
};
|
||||
|
||||
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
|
||||
if (thousands_sep) {
|
||||
var re = /(-?\d+)(\d{3})/;
|
||||
while (re.test(s[0])) {
|
||||
s[0] = s[0].replace(re, '$1' + sep + '$2');
|
||||
}
|
||||
}
|
||||
|
||||
if ((s[1] || '').length < prec) {
|
||||
s[1] = s[1] || '';
|
||||
s[1] += new Array(prec - s[1].length + 1).join('0');
|
||||
}
|
||||
|
||||
return s.join(dec);
|
||||
}
|
||||
|
||||
async function updateCartItem(cartId, action, button) {
|
||||
const container = button.closest('.count-input');
|
||||
const input = container.querySelector('input[type="number"]');
|
||||
let currentQty = parseInt(input.value);
|
||||
|
||||
if (action === 'increment') {
|
||||
currentQty++;
|
||||
} else if (action === 'decrement' && currentQty > 1) {
|
||||
currentQty--;
|
||||
}
|
||||
|
||||
// input.value = currentQty;
|
||||
|
||||
try {
|
||||
const response = await fetch(`cart/${cartId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
qty: currentQty
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
// Update total price display
|
||||
const row = button.closest('tr');
|
||||
const totalCell = row.querySelector('.total-row');
|
||||
const priceInput = document.getElementById(`price_${cartId}`);
|
||||
const price = parseFloat(priceInput.value);
|
||||
totalCell.innerHTML = `Rp ${number_format(price * currentQty, 0, ',', '.')}`;
|
||||
|
||||
// Update mobile quantity input
|
||||
const mobileInput = row.querySelector('td:first-child .count-input input');
|
||||
if (mobileInput) {
|
||||
mobileInput.value = currentQty;
|
||||
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
|
||||
if (thousands_sep) {
|
||||
var re = /(-?\d+)(\d{3})/;
|
||||
while (re.test(s[0])) {
|
||||
s[0] = s[0].replace(re, '$1' + sep + '$2');
|
||||
}
|
||||
|
||||
// Update cart count in header
|
||||
updateCartCount();
|
||||
}
|
||||
} else {
|
||||
console.error('Error updating cart:', await response.json());
|
||||
|
||||
if ((s[1] || '').length < prec) {
|
||||
s[1] = s[1] || '';
|
||||
s[1] += new Array(prec - s[1].length + 1).join('0');
|
||||
}
|
||||
|
||||
return s.join(dec);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Network error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteCartItem(event, form, cartId) {
|
||||
event.preventDefault();
|
||||
async function updateCartItem(cartId, action, button) {
|
||||
const container = button.closest('.count-input');
|
||||
const input = container.querySelector('input[type="number"]');
|
||||
let currentQty = parseInt(input.value);
|
||||
|
||||
if (!confirm('Are you sure you want to remove this item from cart?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`cart/${cartId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||
'Accept': 'application/json'
|
||||
if (action === 'increment') {
|
||||
currentQty++;
|
||||
} else if (action === 'decrement' && currentQty > 1) {
|
||||
currentQty--;
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
// Remove the row from the table
|
||||
const row = form.closest('tr');
|
||||
row.remove();
|
||||
// input.value = currentQty;
|
||||
|
||||
// Update cart count in header
|
||||
updateCartCount();
|
||||
try {
|
||||
const response = await fetch(`cart/${cartId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
||||
'content'),
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
qty: currentQty
|
||||
})
|
||||
});
|
||||
|
||||
// Optionally reload the page to update cart summary
|
||||
// window.location.reload();
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
// Update total price display
|
||||
const row = button.closest('tr');
|
||||
const totalCell = row.querySelector('.total-row');
|
||||
const priceInput = document.getElementById(`price_${cartId}`);
|
||||
const price = parseFloat(priceInput.value);
|
||||
totalCell.innerHTML = `Rp ${number_format(price * currentQty, 0, ',', '.')}`;
|
||||
|
||||
// Update mobile quantity input
|
||||
const mobileInput = row.querySelector('td:first-child .count-input input');
|
||||
if (mobileInput) {
|
||||
mobileInput.value = currentQty;
|
||||
}
|
||||
|
||||
// Update cart count in header
|
||||
updateCartCount();
|
||||
}
|
||||
} else {
|
||||
console.error('Error updating cart:', await response.json());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Network error:', error);
|
||||
}
|
||||
} else {
|
||||
console.error('Error deleting cart item:', await response.json());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Network error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to update cart count in header
|
||||
async function updateCartCount() {
|
||||
try {
|
||||
const response = await fetch('cart/count', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
async function deleteCartItem(event, form, cartId) {
|
||||
event.preventDefault();
|
||||
|
||||
// Store the cart ID and form for later use
|
||||
window.pendingDelete = {
|
||||
cartId,
|
||||
form
|
||||
};
|
||||
|
||||
// Show Bootstrap modal instead of native confirm
|
||||
showDeleteItemModal();
|
||||
}
|
||||
|
||||
// Function to show the delete item modal
|
||||
function showDeleteItemModal() {
|
||||
// Try to use Bootstrap Modal if available
|
||||
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
|
||||
const modal = new bootstrap.Modal(document.getElementById('deleteItemModal'));
|
||||
modal.show();
|
||||
} else {
|
||||
// Fallback: manually show the modal
|
||||
const modalElement = document.getElementById('deleteItemModal');
|
||||
if (modalElement) {
|
||||
modalElement.style.display = 'block';
|
||||
modalElement.classList.add('show');
|
||||
modalElement.setAttribute('aria-modal', 'true');
|
||||
modalElement.setAttribute('role', 'dialog');
|
||||
|
||||
// Add backdrop
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'modal-backdrop fade show';
|
||||
backdrop.id = 'deleteItemBackdrop';
|
||||
document.body.appendChild(backdrop);
|
||||
|
||||
// Handle close buttons
|
||||
const closeButtons = modalElement.querySelectorAll('[data-bs-dismiss="modal"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.onclick = hideDeleteItemModal;
|
||||
});
|
||||
|
||||
// Handle backdrop click
|
||||
backdrop.onclick = hideDeleteItemModal;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
const cartCountElements = document.querySelectorAll('.cart-count');
|
||||
cartCountElements.forEach(element => {
|
||||
element.textContent = result.count;
|
||||
// Function to hide the delete item modal
|
||||
function hideDeleteItemModal() {
|
||||
const modalElement = document.getElementById('deleteItemModal');
|
||||
const backdrop = document.getElementById('deleteItemBackdrop');
|
||||
|
||||
if (modalElement) {
|
||||
modalElement.style.display = 'none';
|
||||
modalElement.classList.remove('show');
|
||||
modalElement.removeAttribute('aria-modal');
|
||||
modalElement.removeAttribute('role');
|
||||
}
|
||||
|
||||
if (backdrop) {
|
||||
backdrop.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Function to actually delete the item (called when confirm button is clicked)
|
||||
async function executeDeleteItem() {
|
||||
if (!window.pendingDelete) return;
|
||||
|
||||
const {
|
||||
cartId,
|
||||
form
|
||||
} = window.pendingDelete;
|
||||
|
||||
try {
|
||||
const response = await fetch(`cart/${cartId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
||||
'content'),
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
// Hide modal first
|
||||
hideDeleteItemModal();
|
||||
|
||||
// Remove the row from the table
|
||||
const row = form.closest('tr');
|
||||
row.remove();
|
||||
|
||||
// Update cart count in header
|
||||
updateCartCount();
|
||||
|
||||
// Recalculate totals
|
||||
calculateCartTotals();
|
||||
|
||||
// Clear pending delete
|
||||
window.pendingDelete = null;
|
||||
}
|
||||
} else {
|
||||
console.error('Error deleting cart item:', await response.json());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Network error:', error);
|
||||
}
|
||||
}
|
||||
async function updateCartCount() {
|
||||
try {
|
||||
const response = await fetch('cart/count', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
const cartCountElements = document.querySelectorAll('.cart-count');
|
||||
cartCountElements.forEach(element => {
|
||||
element.textContent = result.count;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating cart count:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to calculate and update cart totals
|
||||
function calculateCartTotals() {
|
||||
let subtotal = 0;
|
||||
let itemCount = 0;
|
||||
|
||||
// Get all cart item rows
|
||||
const cartRows = document.querySelectorAll('tbody tr[data-cart-id]');
|
||||
|
||||
console.log('Found cart rows:', cartRows.length);
|
||||
|
||||
cartRows.forEach(row => {
|
||||
const cartId = row.dataset.cartId;
|
||||
const priceInput = document.getElementById(`price_${cartId}`);
|
||||
const quantityInput = row.querySelector('input[type="number"]');
|
||||
|
||||
console.log('Processing cart ID:', cartId, 'Price input:', priceInput, 'Quantity input:',
|
||||
quantityInput);
|
||||
|
||||
if (priceInput && quantityInput) {
|
||||
const price = parseFloat(priceInput.value);
|
||||
const quantity = parseInt(quantityInput.value);
|
||||
subtotal += price * quantity;
|
||||
itemCount += quantity;
|
||||
|
||||
console.log('Price:', price, 'Quantity:', quantity, 'Running subtotal:', subtotal);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Final subtotal:', subtotal, 'Item count:', itemCount);
|
||||
|
||||
// Update subtotal display
|
||||
const subtotalElement = document.getElementById('cart-subtotal');
|
||||
if (subtotalElement) {
|
||||
subtotalElement.textContent = `Rp ${number_format(subtotal, 0, ',', '.')}`;
|
||||
console.log('Updated subtotal element:', subtotalElement.textContent);
|
||||
}
|
||||
|
||||
// Calculate estimated total (subtotal - savings + tax)
|
||||
const savings = 0; // Fixed savings amount
|
||||
const tax = 0; // Fixed tax amount
|
||||
const estimatedTotal = subtotal - savings + tax;
|
||||
|
||||
// Show/hide tax row based on tax amount
|
||||
const taxRow = document.getElementById('tax-row');
|
||||
if (taxRow) {
|
||||
if (tax > 0) {
|
||||
taxRow.style.display = 'flex';
|
||||
taxRow.querySelector('span').textContent = `Rp ${number_format(tax, 0, ',', '.')}`;
|
||||
} else {
|
||||
taxRow.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Update estimated total display
|
||||
const estimatedTotalElement = document.getElementById('cart-estimated-total');
|
||||
if (estimatedTotalElement) {
|
||||
estimatedTotalElement.textContent = `Rp ${number_format(estimatedTotal, 0, ',', '.')}`;
|
||||
console.log('Updated estimated total element:', estimatedTotalElement.textContent);
|
||||
}
|
||||
|
||||
// Update items count
|
||||
const cartCalcElement = document.getElementById('cart-calc');
|
||||
if (cartCalcElement) {
|
||||
cartCalcElement.textContent = itemCount;
|
||||
console.log('Updated item count:', cartCalcElement.textContent);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating cart count:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to calculate and update cart totals
|
||||
function calculateCartTotals() {
|
||||
let subtotal = 0;
|
||||
let itemCount = 0;
|
||||
// Initialize cart totals on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
calculateCartTotals();
|
||||
|
||||
// Get all cart item rows
|
||||
const cartRows = document.querySelectorAll('tbody tr[data-cart-id]');
|
||||
// Add event listener for clear cart confirm button
|
||||
const confirmClearButton = document.getElementById('confirmClearCart');
|
||||
if (confirmClearButton) {
|
||||
confirmClearButton.addEventListener('click', executeClearCart);
|
||||
}
|
||||
|
||||
console.log('Found cart rows:', cartRows.length);
|
||||
// Add event listener for delete item confirm button
|
||||
const confirmDeleteButton = document.getElementById('confirmDeleteItem');
|
||||
if (confirmDeleteButton) {
|
||||
confirmDeleteButton.addEventListener('click', executeDeleteItem);
|
||||
}
|
||||
});
|
||||
|
||||
cartRows.forEach(row => {
|
||||
const cartId = row.dataset.cartId;
|
||||
const priceInput = document.getElementById(`price_${cartId}`);
|
||||
const quantityInput = row.querySelector('input[type="number"]');
|
||||
// Update cart totals when cart items are updated
|
||||
const originalUpdateCartItem = updateCartItem;
|
||||
window.updateCartItem = async function(cartId, action, button) {
|
||||
await originalUpdateCartItem(cartId, action, button);
|
||||
|
||||
console.log('Processing cart ID:', cartId, 'Price input:', priceInput, 'Quantity input:', quantityInput);
|
||||
|
||||
if (priceInput && quantityInput) {
|
||||
const price = parseFloat(priceInput.value);
|
||||
const quantity = parseInt(quantityInput.value);
|
||||
subtotal += price * quantity;
|
||||
itemCount += quantity;
|
||||
|
||||
console.log('Price:', price, 'Quantity:', quantity, 'Running subtotal:', subtotal);
|
||||
// Recalculate totals after successful update
|
||||
setTimeout(() => {
|
||||
calculateCartTotals();
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Final subtotal:', subtotal, 'Item count:', itemCount);
|
||||
// Update cart totals when cart items are deleted
|
||||
const originalDeleteCartItem = deleteCartItem;
|
||||
window.deleteCartItem = async function(event, form, cartId) {
|
||||
await originalDeleteCartItem(event, form, cartId);
|
||||
|
||||
// Update subtotal display
|
||||
const subtotalElement = document.getElementById('cart-subtotal');
|
||||
if (subtotalElement) {
|
||||
subtotalElement.textContent = `Rp ${number_format(subtotal, 0, ',', '.')}`;
|
||||
console.log('Updated subtotal element:', subtotalElement.textContent);
|
||||
}
|
||||
|
||||
// Calculate estimated total (subtotal - savings + tax)
|
||||
const savings = 0; // Fixed savings amount
|
||||
const tax = 0; // Fixed tax amount
|
||||
const estimatedTotal = subtotal - savings + tax;
|
||||
|
||||
// Show/hide tax row based on tax amount
|
||||
const taxRow = document.getElementById('tax-row');
|
||||
if (taxRow) {
|
||||
if (tax > 0) {
|
||||
taxRow.style.display = 'flex';
|
||||
taxRow.querySelector('span').textContent = `Rp ${number_format(tax, 0, ',', '.')}`;
|
||||
} else {
|
||||
taxRow.style.display = 'none';
|
||||
// Recalculate totals after successful deletion
|
||||
setTimeout(() => {
|
||||
calculateCartTotals();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Update estimated total display
|
||||
const estimatedTotalElement = document.getElementById('cart-estimated-total');
|
||||
if (estimatedTotalElement) {
|
||||
estimatedTotalElement.textContent = `Rp ${number_format(estimatedTotal, 0, ',', '.')}`;
|
||||
console.log('Updated estimated total element:', estimatedTotalElement.textContent);
|
||||
}
|
||||
// Function to clear entire cart
|
||||
function clearCart() {
|
||||
// Show Bootstrap modal instead of native confirm
|
||||
showModal();
|
||||
}
|
||||
|
||||
// Update items count
|
||||
const cartCalcElement = document.getElementById('cart-calc');
|
||||
if (cartCalcElement) {
|
||||
cartCalcElement.textContent = itemCount;
|
||||
console.log('Updated item count:', cartCalcElement.textContent);
|
||||
}
|
||||
}
|
||||
// Function to show the clear cart modal
|
||||
function showModal() {
|
||||
// Try to use Bootstrap Modal if available
|
||||
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
|
||||
const modal = new bootstrap.Modal(document.getElementById('clearCartModal'));
|
||||
modal.show();
|
||||
} else {
|
||||
// Fallback: manually show the modal
|
||||
const modalElement = document.getElementById('clearCartModal');
|
||||
if (modalElement) {
|
||||
modalElement.style.display = 'block';
|
||||
modalElement.classList.add('show');
|
||||
modalElement.setAttribute('aria-modal', 'true');
|
||||
modalElement.setAttribute('role', 'dialog');
|
||||
|
||||
// Initialize cart totals on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
calculateCartTotals();
|
||||
});
|
||||
// Add backdrop
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'modal-backdrop fade show';
|
||||
backdrop.id = 'clearCartBackdrop';
|
||||
document.body.appendChild(backdrop);
|
||||
|
||||
// Update cart totals when cart items are updated
|
||||
const originalUpdateCartItem = updateCartItem;
|
||||
window.updateCartItem = async function(cartId, action, button) {
|
||||
await originalUpdateCartItem(cartId, action, button);
|
||||
// Handle close buttons
|
||||
const closeButtons = modalElement.querySelectorAll('[data-bs-dismiss="modal"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.onclick = hideModal;
|
||||
});
|
||||
|
||||
// Recalculate totals after successful update
|
||||
setTimeout(() => {
|
||||
calculateCartTotals();
|
||||
}, 500);
|
||||
}
|
||||
// Handle backdrop click
|
||||
backdrop.onclick = hideModal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update cart totals when cart items are deleted
|
||||
const originalDeleteCartItem = deleteCartItem;
|
||||
window.deleteCartItem = async function(event, form, cartId) {
|
||||
await originalDeleteCartItem(event, form, cartId);
|
||||
// Function to hide the clear cart modal
|
||||
function hideModal() {
|
||||
const modalElement = document.getElementById('clearCartModal');
|
||||
const backdrop = document.getElementById('clearCartBackdrop');
|
||||
|
||||
// Recalculate totals after successful deletion
|
||||
setTimeout(() => {
|
||||
calculateCartTotals();
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
if (modalElement) {
|
||||
modalElement.style.display = 'none';
|
||||
modalElement.classList.remove('show');
|
||||
modalElement.removeAttribute('aria-modal');
|
||||
modalElement.removeAttribute('role');
|
||||
}
|
||||
|
||||
if (backdrop) {
|
||||
backdrop.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Function to actually clear the cart (called when confirm button is clicked)
|
||||
async function executeClearCart() {
|
||||
try {
|
||||
const response = await fetch('cart/clear', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
||||
'content'),
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
// Hide modal first
|
||||
hideModal();
|
||||
|
||||
// Remove all cart rows from the table
|
||||
const cartRows = document.querySelectorAll('tbody tr[data-cart-id]');
|
||||
cartRows.forEach(row => row.remove());
|
||||
|
||||
// Update cart count in header
|
||||
updateCartCount();
|
||||
|
||||
// Recalculate totals (should be zero now)
|
||||
calculateCartTotals();
|
||||
|
||||
// Optionally show a success message
|
||||
console.log('Cart cleared successfully');
|
||||
}
|
||||
} else {
|
||||
console.error('Error clearing cart:', await response.json());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Network error:', error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -258,15 +258,16 @@
|
|||
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
|
||||
<i class="ci-shopping-bag animate-target me-1"></i>
|
||||
</button> --}}
|
||||
<a type="button"
|
||||
href="{{ route('cart.index') }}"
|
||||
<a type="button" href="{{ route('cart.index') }}"
|
||||
class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
|
||||
aria-label="Shopping cart">
|
||||
<span
|
||||
class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2 cart-count"
|
||||
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
|
||||
@if (auth()->check() && \App\Repositories\Member\Cart\MemberCartRepository::getCount() > 0)
|
||||
<span
|
||||
class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2 cart-count"
|
||||
style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
|
||||
@endif
|
||||
<i class="ci-shopping-bag animate-target me-1"></i>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ Route::middleware(['auth'])->prefix('/cart')->group(function () {
|
|||
Route::get('/', [CartController::class, 'index'])->name('cart.index');
|
||||
Route::post('/', [CartController::class, 'add'])->name('cart.add');
|
||||
Route::put('/{id}', [CartController::class, 'update'])->name('cart.update');
|
||||
Route::delete('/clear', [CartController::class, 'clear'])->name('cart.clear');
|
||||
Route::delete('/{id}', [CartController::class, 'delete'])->name('cart.delete');
|
||||
Route::get('/count', [CartController::class, 'count'])->name('cart.count');
|
||||
});
|
||||
Loading…
Reference in New Issue