forked from alaguraj/odoo-testing-addons
add container names to docker-compose and implement unified checkout address UI with delivery/pickup selection
This commit is contained in:
Alaguraj0361
parent
6584bf5a87
commit
3a1f6d0729
@ -20,22 +20,35 @@
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- 3. Morphing Address Form (Pickup vs Delivery) -->
|
||||
<template id="chennora_address_morphing" inherit_id="website_sale.address" name="Chennora Address Morphing" priority="99">
|
||||
<!-- 3. MAIN FORM: Optimized Pickup/Delivery Layout -->
|
||||
<template id="chennora_address_unified" inherit_id="website_sale.address" name="Chennora Address Unified" priority="99">
|
||||
|
||||
<!-- Remove the default 'Billing address' title -->
|
||||
<xpath expr="//h2[contains(@class, 'oe_cart')]" position="attributes">
|
||||
<attribute name="class" add="d-none" separator=" "/>
|
||||
</xpath>
|
||||
|
||||
<!-- Inject the Selection Cards and Time Picker -->
|
||||
<xpath expr="//form" position="before">
|
||||
<style>
|
||||
.order-type-card { border: 2px solid #eee; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; padding: 20px; text-align: center; height: 100%; }
|
||||
.order-type-card.active { border-color: #00A67E; background-color: #f0fffb; }
|
||||
.order-type-card { border: 2px solid #eee; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; padding: 20px; text-align: center; height: 100%; position: relative; overflow: hidden; }
|
||||
.order-type-card.active { border-color: #00A67E; background-color: #f0fffb; box-shadow: 0 4px 15px rgba(0,166,126,0.1); }
|
||||
.order-type-card i { font-size: 2rem; margin-bottom: 10px; color: #666; }
|
||||
.order-type-card.active i { color: #00A67E; }
|
||||
.order-type-card h5 { margin-bottom: 5px; font-weight: bold; }
|
||||
.order-type-card p { font-size: 0.85rem; color: #888; margin: 0; }
|
||||
.section-header { font-weight: bold; margin: 25px 0 15px 0; padding-bottom: 5px; border-bottom: 1px solid #eee; }
|
||||
|
||||
.active-mark { display: none; position: absolute; top: 10px; right: 10px; color: #00A67E; font-size: 1.2rem; }
|
||||
.order-type-card.active .active-mark { display: block; }
|
||||
|
||||
.section-header { font-weight: bold; margin: 30px 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid #f8f9fa; font-size: 1.1rem; }
|
||||
.uber-feedback { border-radius: 8px; padding: 12px; font-weight: 500; }
|
||||
</style>
|
||||
|
||||
<div class="row mb-4 g-3 mt-2">
|
||||
<div class="row mb-4 g-3 mt-1">
|
||||
<div class="col-6">
|
||||
<div id="card_delivery" class="order-type-card active" onclick="setOrderType('delivery')">
|
||||
<i class="active-mark fa fa-check-circle"></i>
|
||||
<i class="fa fa-truck"></i>
|
||||
<h5>Delivery</h5>
|
||||
<p>Deliver to my address</p>
|
||||
@ -43,6 +56,7 @@
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div id="card_pickup" class="order-type-card" onclick="setOrderType('pickup')">
|
||||
<i class="active-mark fa fa-check-circle"></i>
|
||||
<i class="fa fa-shopping-basket"></i>
|
||||
<h5>Store Pickup</h5>
|
||||
<p>Pick up at the restaurant</p>
|
||||
@ -52,99 +66,107 @@
|
||||
|
||||
<input type="hidden" name="fulfilment_type" id="hidden_fulfilment_type" value="delivery"/>
|
||||
|
||||
<div class="section-header">Select Time</div>
|
||||
<div class="section-header"><i class="fa fa-clock-o me-2"></i>Preferred Greeting / Timing</div>
|
||||
<div class="mb-4">
|
||||
<input type="datetime-local" name="delivery_time" id="delivery_time_input" class="form-control"/>
|
||||
<p class="text-muted small mt-1">Please select your preferred time.</p>
|
||||
<label class="form-label text-muted small mb-1">When would you like your order?</label>
|
||||
<input type="datetime-local" name="delivery_time" id="delivery_time_input" class="form-control form-control-lg border-0 bg-light" required="required"/>
|
||||
</div>
|
||||
|
||||
<div id="uber_message" class="alert d-none my-3" role="alert"></div>
|
||||
<div id="address_section_label" class="section-header">Delivery Address Details</div>
|
||||
<div id="uber_message" class="uber-feedback d-none my-3 alert" role="alert"></div>
|
||||
<div id="contact_info_header" class="section-header mt-4"><i class="fa fa-user me-2"></i>Contact Details</div>
|
||||
</xpath>
|
||||
|
||||
<!-- No wrapper needed, we use JS to target the div_street, div_city, etc. -->
|
||||
<!-- Hide the 'Ship to same address' radio button as we are unifying everything -->
|
||||
<xpath expr="//div[label[contains(., 'Ship to the same address')]]" position="attributes">
|
||||
<attribute name="class" add="d-none" separator=" "/>
|
||||
</xpath>
|
||||
|
||||
<!-- JS for unified logic -->
|
||||
<xpath expr="//form" position="after">
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
function initAddressLogic() {
|
||||
function initUnifiedForm() {
|
||||
const hiddenType = document.getElementById('hidden_fulfilment_type');
|
||||
const msgDiv = document.getElementById('uber_message');
|
||||
const addressHeader = document.getElementById('address_section_label');
|
||||
const btn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
|
||||
const addressHeader = document.createElement('div');
|
||||
addressHeader.className = 'section-header';
|
||||
addressHeader.id = 'address_section_label';
|
||||
addressHeader.innerHTML = '<i class="fa fa-map-marker me-2"></i>Delivery Address';
|
||||
|
||||
const submitBtn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
|
||||
|
||||
// Address fields to toggle
|
||||
const addressDivs = [
|
||||
const addrDivs = [
|
||||
document.getElementById('div_street'),
|
||||
document.getElementById('div_city'),
|
||||
document.getElementById('div_zip'),
|
||||
document.getElementById('div_country'),
|
||||
document.querySelector('div[id*="div_state"]') // Handle potential different IDs for state
|
||||
document.querySelector('div[id*="div_state"]')
|
||||
].filter(el => el != null);
|
||||
|
||||
// Insert address header before street div
|
||||
const streetDiv = document.getElementById('div_street');
|
||||
if (streetDiv && !document.getElementById('address_section_label')) {
|
||||
streetDiv.parentNode.insertBefore(addressHeader, streetDiv);
|
||||
}
|
||||
|
||||
window.setOrderType = function(type) {
|
||||
hiddenType.value = type;
|
||||
document.getElementById('card_delivery').classList.toggle('active', type === 'delivery');
|
||||
document.getElementById('card_pickup').classList.toggle('active', type === 'pickup');
|
||||
|
||||
const header = document.getElementById('address_section_label');
|
||||
if (type === 'pickup') {
|
||||
addressDivs.forEach(div => div.classList.add('d-none'));
|
||||
if (addressHeader) addressHeader.classList.add('d-none');
|
||||
addrDivs.forEach(div => div.classList.add('d-none'));
|
||||
if (header) header.classList.add('d-none');
|
||||
if (msgDiv) msgDiv.classList.add('d-none');
|
||||
if (btn) btn.disabled = false;
|
||||
if (submitBtn) submitBtn.disabled = false;
|
||||
} else {
|
||||
addressDivs.forEach(div => div.classList.remove('d-none'));
|
||||
if (addressHeader) addressHeader.classList.remove('d-none');
|
||||
checkUber();
|
||||
addrDivs.forEach(div => div.classList.remove('d-none'));
|
||||
if (header) header.classList.remove('d-none');
|
||||
checkUberRange();
|
||||
}
|
||||
};
|
||||
|
||||
function checkUber() {
|
||||
function checkUberRange() {
|
||||
if (hiddenType.value !== 'delivery') return;
|
||||
const street = document.querySelector('input[name="street"]')?.value;
|
||||
const zip = document.querySelector('input[name="zip"]')?.value;
|
||||
if (!street || !zip) return;
|
||||
const streetInput = document.querySelector('input[name="street"]');
|
||||
const zipInput = document.querySelector('input[name="zip"]');
|
||||
|
||||
if (!streetInput?.value || !zipInput?.value) return;
|
||||
|
||||
const addressData = {
|
||||
street: street,
|
||||
const data = {
|
||||
street: streetInput.value,
|
||||
city: document.querySelector('input[name="city"]')?.value,
|
||||
zip: zip,
|
||||
zip: zipInput.value,
|
||||
country: document.querySelector('select[name="country_id"] option:checked')?.text || 'Canada'
|
||||
};
|
||||
|
||||
fetch('/shop/uber/quote', {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ params: { address_data: addressData } })
|
||||
}).then(r => r.json()).then(data => {
|
||||
if (data.result && data.result.success) {
|
||||
body: JSON.stringify({ params: { address_data: data } })
|
||||
}).then(r => r.json()).then(res => {
|
||||
if (res.result && res.result.success) {
|
||||
msgDiv.classList.remove('d-none', 'alert-danger');
|
||||
msgDiv.classList.add('alert-success');
|
||||
msgDiv.innerText = "✓ Uber covers this area! Delivery fee: " + data.result.fee + "$";
|
||||
if (btn) btn.disabled = false;
|
||||
msgDiv.innerText = "✓ Covered! Delivery charge: " + res.result.fee + "$";
|
||||
if (submitBtn) submitBtn.disabled = false;
|
||||
} else {
|
||||
msgDiv.classList.remove('d-none', 'alert-success');
|
||||
msgDiv.classList.add('alert-danger');
|
||||
msgDiv.innerText = "✕ Not covered: " + (data.result?.error || "Area not supported.");
|
||||
if (btn) btn.disabled = true;
|
||||
msgDiv.innerText = "✕ Oh no! " + (res.result?.error || "We don't deliver to this area yet.");
|
||||
if (submitBtn) submitBtn.disabled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Event listeners for Uber check
|
||||
const streetInput = document.querySelector('input[name="street"]');
|
||||
const zipInput = document.querySelector('input[name="zip"]');
|
||||
if (streetInput) streetInput.addEventListener('blur', checkUber);
|
||||
if (zipInput) zipInput.addEventListener('blur', checkUber);
|
||||
document.querySelector('input[name="street"]')?.addEventListener('blur', checkUberRange);
|
||||
document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUberRange);
|
||||
|
||||
// Initial state
|
||||
setOrderType('delivery');
|
||||
// Load initial state
|
||||
if (hiddenType.value === 'pickup') setOrderType('pickup'); else setOrderType('delivery');
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initAddressLogic);
|
||||
} else {
|
||||
initAddressLogic();
|
||||
}
|
||||
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initUnifiedForm); } else { initUnifiedForm(); }
|
||||
})();
|
||||
</script>
|
||||
</xpath>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user