SMG_DEV
/
ECOMMERCE
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

checkout fix

This commit is contained in:
Bayu Lukman Yusuf 2026-03-02 09:24:10 +07:00
parent f78819c9b9
commit 0aec36908b
9 changed files with 217 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lang/en/checkout.php
View File

@ -68,4 +68,6 @@ return [
'shipping' => 'Shipping:',
'estimated_total' => 'Estimated total:',
'proceed_to_checkout' => 'Proceed to checkout',
'order_summary' => 'Order summary',
'calculated_at_checkout' => 'Calculated at checkout',
];

5
lang/en/navbar.php
View File

@ -14,5 +14,8 @@ return [
'sign_up' => 'Sign Up',
'contact' => 'Contact',
'terms_conditions' => 'Terms & Conditions',
'categories' => 'Categories'
'categories' => 'Categories',
'delivery' => 'Delivery',
'set_your_address' => 'Set your address',
'gender' => 'Gender',
];

2
lang/id/checkout.php
View File

@ -68,4 +68,6 @@ return [
'shipping' => 'Pengiriman:',
'estimated_total' => 'Total estimasi:',
'proceed_to_checkout' => 'Lanjut ke checkout',
'order_summary' => 'Ringkasan pesanan',
'calculated_at_checkout' => 'Dihitung di checkout',
];

3
lang/id/navbar.php
View File

@ -15,4 +15,7 @@ return [
'contact' => 'Kontak',
'terms_conditions' => 'Syarat & Ketentuan',
'categories' => 'Kategori',
'delivery' => 'Pengiriman',
'set_your_address' => 'Atur alamat Anda',
'gender' => 'Gender',
];

21
resources/views/checkout/v1-cart.blade.php
View File

@ -42,7 +42,7 @@
</div> --}}
<!-- Table of items -->
<table class="table position-relative z-2 mb-4">
<table class="table z-2 mb-4">
<thead>
<tr>
<th scope="col" class="fs-sm fw-normal py-3 ps-0"><span
@ -79,7 +79,9 @@
</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"
@ -105,9 +107,10 @@
</li>
</ul> --}}
<input type="hidden" id="price_{{ $cart->id }}"
value="{{ $cart->itemVariant->display_price ?? 0 }}">
Rp {{ number_format($cart->itemVariant->display_price ?? 0, 0, ',', '.') }}
<input type="hidden" id="price_{{ $cart->id }}"
value="{{ $cart->itemVariant->display_price ?? 0 }}">
Rp
{{ number_format($cart->itemVariant->display_price ?? 0, 0, ',', '.') }}
<div class="count-input rounded-2 d-md-none mt-3">
<button type="button" class="btn btn-sm btn-icon"
@ -177,7 +180,7 @@
<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>
<h5 class="border-bottom pb-4 mb-4">{{ __('checkout.order_summary') }}</h5>
<ul class="list-unstyled fs-sm gap-3 mb-0">
<li class="d-flex justify-content-between">
<div>Subtotal (<span
@ -187,7 +190,8 @@
</li>
<li class="d-flex justify-content-between">
{{ __('checkout.saving') }}
<span class="text-danger fw-medium">Rp {{ number_format(session('use_point') ?? 0,0,",",".") }}</span>
<span class="text-danger fw-medium">Rp
{{ number_format(session('use_point') ?? 0, 0, ',', '.') }}</span>
</li>
{{-- <li class="d-flex justify-content-between" id="tax-row" style="display: none;">
Tax collected:
@ -195,7 +199,7 @@
</li> --}}
<li class="d-flex justify-content-between">
{{ __('checkout.shipping') }}
<span class="text-dark-emphasis fw-medium">Calculated at checkout</span>
<span class="text-dark-emphasis fw-medium">{{ __('checkout.calculated_at_checkout') }}</span>
</li>
</ul>
<div class="border-top pt-4 mt-4">
@ -203,8 +207,7 @@
<span class="fs-sm">{{ __('checkout.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('checkout.delivery') }}">
<a class="btn btn-lg btn-primary w-100" href="{{ route('checkout.delivery') }}">
{{ __('checkout.proceed_to_checkout') }}
<i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
</a>

109
resources/views/checkout/v1-delivery-1.blade.php
View File

@ -1,5 +1,10 @@
@extends('layouts.landing', ['title' => 'Checkout'])
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
@endpush
@section('content')
<x-layout.header-grocery />
@ -128,6 +133,12 @@
</div>
<div class="mt-3">
<div id="address-map"
style="height: 300px; width: 100%; border-radius: 8px; overflow: hidden;">
</div>
</div>
@ -191,8 +202,7 @@
<!-- Order summary (sticky sidebar) -->
<aside class="col-lg-4 offset-xl-1" style="margin-top: -100px">
<div class="position-sticky top-0" style="padding-top: 100px">
<x-checkout.order-summary :subtotal="$subtotal" :total="$total"
:showEdit="true" :editUrl="route('cart.index')" />
<x-checkout.order-summary :subtotal="$subtotal" :total="$total" :showEdit="true" :editUrl="route('cart.index')" />
</div>
</aside>
</div>
@ -203,6 +213,8 @@
@endsection
@section('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Delivery method selection
@ -309,6 +321,9 @@
document.getElementById('longitude').textContent = selectedOption.dataset.longitude || '';
document.getElementById('zip').textContent = selectedOption.dataset.postcode || '';
// Update map with coordinates
updateAddressMap(selectedOption.dataset.latitude, selectedOption.dataset.longitude);
// Update order summary with postcode
if (selectedOption.dataset.postcode) {
updateOrderSummaryWithShipping();
@ -316,6 +331,69 @@
}
}
// Initialize map
let map = null;
let marker = null;
function initializeMap() {
if (typeof L !== 'undefined' && document.getElementById('address-map')) {
// Get initial coordinates from selected address or default to Jakarta
const addressSelect = document.getElementById('addressSelect');
let initialLat = -6.2088; // Default Jakarta latitude
let initialLng = 106.8456; // Default Jakarta longitude
let initialZoom = 13;
if (addressSelect && addressSelect.value && addressSelect.value !== 'new') {
const selectedOption = addressSelect.options[addressSelect.selectedIndex];
const lat = selectedOption.dataset.latitude;
const lng = selectedOption.dataset.longitude;
if (lat && lng) {
initialLat = parseFloat(lat);
initialLng = parseFloat(lng);
initialZoom = 15; // Zoom in closer for specific address
}
}
// Initialize map with address coordinates
map = L.map('address-map').setView([initialLat, initialLng], initialZoom);
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: ' OpenStreetMap contributors'
}).addTo(map);
// Add initial marker if we have coordinates
if (initialLat !== -6.2088 || initialLng !== 106.8456) {
marker = L.marker([initialLat, initialLng]).addTo(map);
}
}
}
function updateAddressMap(lat, lng) {
if (!map || !lat || !lng) return;
const coordinates = [parseFloat(lat), parseFloat(lng)];
// Remove existing marker if any
if (marker) {
map.removeLayer(marker);
}
// Add new marker
marker = L.marker(coordinates).addTo(map);
// Center map on new coordinates
map.setView(coordinates, 15);
}
function clearAddressMap() {
if (marker && map) {
map.removeLayer(marker);
marker = null;
}
}
// Populate on page load
populateAddressForm();
// Set initial address ID
@ -338,33 +416,22 @@
document.getElementById('latitude').textContent = '';
document.getElementById('longitude').textContent = '';
document.getElementById('zip').textContent = '';
// Clear map
clearAddressMap();
// Clear address ID input
document.getElementById('addressIdInput').value = '';
} else {
// Populate form fields with selected address
document.getElementById('firstName').textContent = selectedOption.dataset
.firstName || '';
// document.getElementById('lastName').value = selectedOption.dataset.lastName || '';
document.getElementById('address').textContent = selectedOption.dataset.address ||
'';
document.getElementById('city').textContent = selectedOption.dataset.city || '';
document.getElementById('state').textContent = selectedOption.dataset.state || '';
document.getElementById('zip').textContent = selectedOption.dataset.postcode || '';
document.getElementById('phone').textContent = selectedOption.dataset.phone || '';
document.getElementById('latitude').textContent = selectedOption.dataset.latitude ||
'';
document.getElementById('longitude').textContent = selectedOption.dataset
.longitude || '';
document.getElementById('zip').textContent = selectedOption.dataset.postcode || '';
populateAddressForm();
// Update address ID input
document.getElementById('addressIdInput').value = this.value;
// Update order summary with postcode
if (selectedOption.dataset.postcode) {
updateOrderSummaryWithShipping();
}
}
});
// Initialize map on page load
initializeMap();
}
// Auto-update order summary when postcode changes

6
resources/views/components/grocery/header-category-dropdown.blade.php
View File

@ -2,13 +2,13 @@
<button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="ci-grid fs-lg me-2 ms-n1"></i>
Categories
{{ __('navbar.categories') }}
<i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
</button>
<div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
<div class="d-flex gap-4">
<div style="min-width: 170px">
<div class="h6">Kategori</div>
<div class="h6">{{ __('navbar.categories') }}</div>
<ul class="nav flex-column gap-2 mt-n2">
@foreach ($categories as $category)
@ -24,7 +24,7 @@
</div>
<div style="min-width: 170px">
<div class="h6">Gender</div>
<div class="h6">{{ __('navbar.gender') }}</div>
<ul class="nav flex-column gap-2 mt-n2">
@foreach ($genders as $gender)
<li class="d-flex w-100 pt-1">

4
resources/views/components/layout/header-grocery.blade.php
View File

@ -57,9 +57,9 @@
<div class="nav me-4 me-xxl-5 d-none d-xl-block">
<a class="nav-link flex-column align-items-start animate-underline p-0" href="{{ route('addresses') }}">
<div class="h6 fs-sm mb-0">Delivery</div>
<div class="h6 fs-sm mb-0">{{ __('navbar.delivery') }}</div>
<div class="d-flex align-items-center fs-sm fw-normal text-body">
<span class="animate-target text-nowrap">{{ auth()->user()->primary_address->label ?? 'Set your address' }}</span>
<span class="animate-target text-nowrap">{{ auth()->user()->primary_address->label ?? __('navbar.set_your_address') }}</span>
<i class="ci-chevron-down fs-base ms-1"></i>
</div>
</a>

171
resources/views/shop/product-fashion.blade.php
View File

@ -102,12 +102,9 @@
{{-- wishlist/love button --}}
<button type="button"
class="btn btn-outline-danger gap-2"
style="height: 50px;"
id="wishlist-btn"
data-item-id="{{ $product->id }}"
data-is-wishlist="{{ $product->isWishlist() ? 'true' : 'false' }}">
<button type="button" class="btn btn-outline-danger gap-2" style="height: 50px;"
id="wishlist-btn" data-item-id="{{ $product->id }}"
data-is-wishlist="{{ $product->isWishlist() ? 'true' : 'false' }}">
<i class="{{ $product->isWishlist() == true ? 'ci-heart-filled' : 'ci-heart' }}"></i>
</button>
</div>
@ -118,9 +115,11 @@
class="text-decoration-none text-body-emphasis animate-underline text-xs border border-secondary rounded-pill px-2 py-1"
style="font-size:10pt;">{{ $product->category->name }}</a>
<a href="{{ route('product.index', ['filter[brand_id]' => $product->brand->id]) }}"
class="text-decoration-none text-body-emphasis animate-underline text-xs border border-secondary rounded-pill px-2 py-1"
style="font-size:10pt;">{{ $product->brand->name }}</a>
@if ($product->brand?->id != null)
<a href="{{ route('product.index', ['filter[brand_id]' => $product->brand->id]) }}"
class="text-decoration-none text-body-emphasis animate-underline text-xs border border-secondary rounded-pill px-2 py-1"
style="font-size:10pt;">{{ $product->brand->name }}</a>
@endif
</div>
@ -209,8 +208,9 @@
</div> --}}
<!-- Count input + Add to cart button -->
<x-shop.add-to-cart :item_reference_id="$product->variants->first()->id" />
@if ($product->variants->first()->reference)
<x-shop.add-to-cart :item_reference_id="$product->variants->first()->reference->id" />
@endif
<!-- Info list -->
{{-- <ul class="list-unstyled gap-3 pb-3 pb-lg-4 mb-3">
<li class="d-flex flex-wrap fs-sm">
@ -1061,14 +1061,14 @@
discountSpan.style.display = 'none';
}
document.querySelector('.product-main-image').src = image;
document.querySelector('.variantOption').textContent = labelText;
// document.querySelector('.variantOption').textContent = labelText;
// Update AddToCart component with new variant ID
const addToCartBtn = document.querySelector('[data-item-id]');
const addToCartBtn = document.querySelector('[data-item-reference-id]');
if (addToCartBtn) {
console.log(this.value);
var item_id = this.value;
addToCartBtn.setAttribute('data-item-id', item_id);
addToCartBtn.setAttribute('data-item-reference-id', item_id);
}
});
});
@ -1090,93 +1090,98 @@
const text = this.querySelector('span');
// Get CSRF token
const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute(
'content');
if (isWishlist) {
// Remove from wishlist
fetch('/account/wishlist/' + itemId, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Update button state
this.setAttribute('data-is-wishlist', 'false');
icon.className = 'ci-heart';
text.textContent = 'Add to Wishlist';
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Update button state
this.setAttribute('data-is-wishlist', 'false');
icon.className = 'ci-heart';
text.textContent = 'Add to Wishlist';
// Show success message
const successAlert = document.createElement('div');
successAlert.className = 'alert alert-success alert-dismissible fade show position-fixed';
successAlert.style.css = 'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
successAlert.innerHTML = `
// Show success message
const successAlert = document.createElement('div');
successAlert.className =
'alert alert-success alert-dismissible fade show position-fixed';
successAlert.style.css =
'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
successAlert.innerHTML = `
<button type="button" class="btn-close" data-bs-dismiss="alert">&times;</button>
Item removed from wishlist!
`;
document.body.appendChild(successAlert);
document.body.appendChild(successAlert);
// Auto-hide after 3 seconds
setTimeout(() => {
if (successAlert.parentNode) {
successAlert.parentNode.removeChild(successAlert);
}
}, 3000);
} else {
console.error('Failed to remove from wishlist:', data.message);
}
})
.catch(error => {
console.error('Error removing from wishlist:', error);
});
// Auto-hide after 3 seconds
setTimeout(() => {
if (successAlert.parentNode) {
successAlert.parentNode.removeChild(successAlert);
}
}, 3000);
} else {
console.error('Failed to remove from wishlist:', data.message);
}
})
.catch(error => {
console.error('Error removing from wishlist:', error);
});
} else {
// Add to wishlist
fetch('/account/wishlist', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({
item_id: itemId
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({
item_id: itemId
})
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Update button state
this.setAttribute('data-is-wishlist', 'true');
icon.className = 'ci-heart-filled';
text.textContent = 'In Wishlist';
.then(response => response.json())
.then(data => {
if (data.success) {
// Update button state
this.setAttribute('data-is-wishlist', 'true');
icon.className = 'ci-heart-filled';
text.textContent = 'In Wishlist';
// Show success message
const successAlert = document.createElement('div');
successAlert.className = 'alert alert-success alert-dismissible fade show position-fixed';
successAlert.style.css = 'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
successAlert.innerHTML = `
// Show success message
const successAlert = document.createElement('div');
successAlert.className =
'alert alert-success alert-dismissible fade show position-fixed';
successAlert.style.css =
'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
successAlert.innerHTML = `
<button type="button" class="btn-close" data-bs-dismiss="alert">&times;</button>
Item added to wishlist!
`;
document.body.appendChild(successAlert);
document.body.appendChild(successAlert);
// Auto-hide after 3 seconds
setTimeout(() => {
if (successAlert.parentNode) {
successAlert.parentNode.removeChild(successAlert);
}
}, 3000);
} else {
console.error('Failed to add to wishlist:', data.message);
}
})
.catch(error => {
console.error('Error adding to wishlist:', error);
});
// Auto-hide after 3 seconds
setTimeout(() => {
if (successAlert.parentNode) {
successAlert.parentNode.removeChild(successAlert);
}
}, 3000);
} else {
console.error('Failed to add to wishlist:', data.message);
}
})
.catch(error => {
console.error('Error adding to wishlist:', error);
});
}
});
}