added cartCount in the Trolley

This commit is contained in:
hafifierahman
2024-12-09 22:44:37 +08:00
parent 73874d99b4
commit fa08131cb3
2 changed files with 63 additions and 23 deletions
+59
View File
@@ -0,0 +1,59 @@
async function fetchCartCount() {
try {
// Replace with your API endpoint
const response = await fetch('/showcarts-available');
if (!response.ok) {
throw new Error('Failed to fetch cart count');
}
const data = await response.json();
console.log(data.status_koop);
let totalcount = 0;
totalcount += (data.status_koop === 'PENDING') ? 1 : 0;
totalcount += (data.status_pkb === 'PENDING') ? 1 : 0;
// Assuming the API returns a JSON object with a `count` property
const cartCount = totalcount || 0;
updateCartCount(cartCount);
} catch (error) {
console.error('Error fetching cart count:', error);
// Optionally, handle error (e.g., show default value or retry)
updateCartCount(0);
}
}
function updateCartCount(itemCount) {
const cartCountElement = document.getElementById('cart-count');
if (itemCount > 0) {
cartCountElement.textContent = itemCount; // Show the number of items
cartCountElement.classList.remove('d-none'); // Ensure it is visible
} else {
cartCountElement.textContent = ''; // Clear the content
cartCountElement.classList.add('d-none'); // Hide the element if the cart is empty
}
}
function redirectTrolley() {
let form = document.createElement('form');
form.method = 'POST';
form.action = routetrolley;
let csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = '_token';
csrfInput.value = csrftoken;
form.appendChild(csrfInput);
let redirectInput = document.createElement('input');
redirectInput.type = 'hidden';
redirectInput.name = 'redirect_trolley';
redirectInput.value = 'trolley';
form.appendChild(redirectInput);
document.body.appendChild(form);
form.submit();
}
fetchCartCount();
@@ -61,6 +61,9 @@
</div>
</div>
</div> -->
<script> let routetrolley = '{{ route("payment.action") }}';let csrftoken = '{{ csrf_token() }}';</script>
<script src="{{ asset('js/miscellaneous/navigation-trolley.js') }}"></script>
<div class="container position-sticky z-index-sticky top-0">
<div class="row">
<div class="col-12">
@@ -111,30 +114,8 @@
<li class="nav-item ms-lg-auto">
<a class="nav-link nav-link-icon me-2 cursor-pointer" onclick="redirectTrolley()">
<i class="fa fa-shopping-cart"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Troli">Troli</p>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Troli">Troli <span id="cart-count" class="badge bg-danger ms-1">0</span></p>
</a>
<script>
function redirectTrolley(){
let form = document.createElement('form');
form.method = 'POST';
form.action = '{{ route("payment.action") }}';
let csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = '_token';
csrfInput.value = '{{ csrf_token() }}';
form.appendChild(csrfInput);
let redirectInput = document.createElement('input');
redirectInput.type = 'hidden';
redirectInput.name = 'redirect_trolley';
redirectInput.value = 'trolley';
form.appendChild(redirectInput);
document.body.appendChild(form);
form.submit();
}
</script>
</li>
<li class="nav-item my-auto ms-3 ms-lg-0">
<a href="{{ route('logout') }}" class="btn btn-sm bg-white border mb-0 me-1 mt-2 mt-md-0" onclick="event.preventDefault();document.getElementById('logout-form').submit();">