forked from alaguraj/odoo-testing-addons
implement unified checkout address layout with dynamic delivery/pickup selection and Uber fee integration
This commit is contained in:
parent
db88add5f3
commit
d06d252b94
@ -23,7 +23,7 @@
|
|||||||
<!-- 3. MAIN FORM: Optimized Pickup/Delivery Layout -->
|
<!-- 3. MAIN FORM: Optimized Pickup/Delivery Layout -->
|
||||||
<template id="chennora_address_unified" inherit_id="website_sale.address" name="Chennora Address Unified" priority="99">
|
<template id="chennora_address_unified" inherit_id="website_sale.address" name="Chennora Address Unified" priority="99">
|
||||||
|
|
||||||
<!-- Safely hide the 'Billing address' title by targeting any H2/H3 header at the top of the cart -->
|
<!-- Safely hide the 'Billing address' title -->
|
||||||
<xpath expr="//div[contains(@class, 'oe_cart')]//*[self::h2 or self::h3][1]" position="attributes">
|
<xpath expr="//div[contains(@class, 'oe_cart')]//*[self::h2 or self::h3][1]" position="attributes">
|
||||||
<attribute name="class" add="d-none" separator=" "/>
|
<attribute name="class" add="d-none" separator=" "/>
|
||||||
</xpath>
|
</xpath>
|
||||||
@ -65,7 +65,6 @@
|
|||||||
|
|
||||||
<div class="section-header"><i class="fa fa-clock-o me-2"></i>Preferred Greeting / Timing</div>
|
<div class="section-header"><i class="fa fa-clock-o me-2"></i>Preferred Greeting / Timing</div>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<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"/>
|
<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>
|
||||||
|
|
||||||
@ -73,7 +72,7 @@
|
|||||||
<div id="contact_info_header" class="section-header mt-4"><i class="fa fa-user me-2"></i>Contact Details</div>
|
<div id="contact_info_header" class="section-header mt-4"><i class="fa fa-user me-2"></i>Contact Details</div>
|
||||||
</xpath>
|
</xpath>
|
||||||
|
|
||||||
<!-- Hide the 'Ship to same address' section if it exists -->
|
<!-- Hide the 'Ship to same address' section -->
|
||||||
<xpath expr="//label[contains(., 'Ship to the same address')]/ancestor::div[1]" position="attributes">
|
<xpath expr="//label[contains(., 'Ship to the same address')]/ancestor::div[1]" position="attributes">
|
||||||
<attribute name="style">display: none !important;</attribute>
|
<attribute name="style">display: none !important;</attribute>
|
||||||
<attribute name="class" add="d-none" separator=" "/>
|
<attribute name="class" add="d-none" separator=" "/>
|
||||||
@ -88,22 +87,31 @@
|
|||||||
const msgDiv = document.getElementById('uber_message');
|
const msgDiv = document.getElementById('uber_message');
|
||||||
const submitBtn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
|
const submitBtn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
|
||||||
|
|
||||||
const addrDivs = [
|
// Select all address-related field containers for aggressive hiding
|
||||||
document.getElementById('div_street'),
|
function getAddressContainers() {
|
||||||
document.getElementById('div_city'),
|
const addressNames = ['street', 'street2', 'city', 'zip', 'country_id', 'state_id'];
|
||||||
document.getElementById('div_zip'),
|
let containers = [];
|
||||||
document.getElementById('div_country'),
|
addressNames.forEach(name => {
|
||||||
document.querySelector('div[id*="div_state"]')
|
const input = document.querySelector(`[name="${name}"]`);
|
||||||
].filter(el => el != null);
|
if (input) {
|
||||||
|
// Go up until we hit a col- or the parent with mb- class
|
||||||
|
const container = input.closest('div[class*="col-"]') || input.closest('.mb-3') || input.closest('.mb-4');
|
||||||
|
if (container) containers.push(container);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return [...new Set(containers)]; // Unique containers
|
||||||
|
}
|
||||||
|
|
||||||
// Dynamic Address Header
|
// Dynamic Address Header
|
||||||
let addrHeader = document.getElementById('dynamic_address_header');
|
let addrHeader = document.getElementById('dynamic_address_header');
|
||||||
if (!addrHeader && document.getElementById('div_street')) {
|
if (!addrHeader && document.querySelector('[name="street"]')) {
|
||||||
addrHeader = document.createElement('div');
|
addrHeader = document.createElement('div');
|
||||||
addrHeader.id = 'dynamic_address_header';
|
addrHeader.id = 'dynamic_address_header';
|
||||||
addrHeader.className = 'section-header';
|
addrHeader.className = 'section-header';
|
||||||
addrHeader.innerHTML = '<i class="fa fa-map-marker me-2"></i>Delivery Address';
|
addrHeader.innerHTML = '<i class="fa fa-map-marker me-2"></i>Delivery Address';
|
||||||
document.getElementById('div_street').parentNode.insertBefore(addrHeader, document.getElementById('div_street'));
|
const streetInput = document.querySelector('[name="street"]');
|
||||||
|
const streetContainer = streetInput.closest('div[class*="col-"]') || streetInput.parentNode;
|
||||||
|
streetContainer.parentNode.insertBefore(addrHeader, streetContainer);
|
||||||
}
|
}
|
||||||
|
|
||||||
window.setOrderType = function(type) {
|
window.setOrderType = function(type) {
|
||||||
@ -111,14 +119,16 @@
|
|||||||
document.getElementById('card_delivery').classList.toggle('active', type === 'delivery');
|
document.getElementById('card_delivery').classList.toggle('active', type === 'delivery');
|
||||||
document.getElementById('card_pickup').classList.toggle('active', type === 'pickup');
|
document.getElementById('card_pickup').classList.toggle('active', type === 'pickup');
|
||||||
|
|
||||||
|
const containers = getAddressContainers();
|
||||||
if (type === 'pickup') {
|
if (type === 'pickup') {
|
||||||
addrDivs.forEach(div => div.classList.add('d-none'));
|
containers.forEach(c => c.style.display = 'none');
|
||||||
if (addrHeader) addrHeader.classList.add('d-none');
|
if (addrHeader) addrHeader.style.display = 'none';
|
||||||
if (msgDiv) msgDiv.classList.add('d-none');
|
if (msgDiv) msgDiv.style.display = 'none';
|
||||||
if (submitBtn) submitBtn.disabled = false;
|
if (submitBtn) submitBtn.disabled = false;
|
||||||
} else {
|
} else {
|
||||||
addrDivs.forEach(div => div.classList.remove('d-none'));
|
containers.forEach(c => c.style.display = '');
|
||||||
if (addrHeader) addrHeader.classList.remove('d-none');
|
if (addrHeader) addrHeader.style.display = '';
|
||||||
|
if (msgDiv) msgDiv.style.display = '';
|
||||||
checkUber();
|
checkUber();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -139,21 +149,24 @@
|
|||||||
} } })
|
} } })
|
||||||
}).then(r => r.json()).then(data => {
|
}).then(r => r.json()).then(data => {
|
||||||
if (data.result && data.result.success) {
|
if (data.result && data.result.success) {
|
||||||
msgDiv.classList.remove('d-none', 'alert-danger');
|
msgDiv.className = 'alert alert-success my-3';
|
||||||
msgDiv.classList.add('alert-success');
|
msgDiv.style.display = '';
|
||||||
msgDiv.innerText = "✓ Covered! Delivery charge: " + data.result.fee + "$";
|
msgDiv.innerText = "✓ Covered! Delivery charge: " + data.result.fee + "$";
|
||||||
if (submitBtn) submitBtn.disabled = false;
|
if (submitBtn) submitBtn.disabled = false;
|
||||||
} else {
|
} else {
|
||||||
msgDiv.classList.remove('d-none', 'alert-success');
|
msgDiv.className = 'alert alert-danger my-3';
|
||||||
msgDiv.classList.add('alert-danger');
|
msgDiv.style.display = '';
|
||||||
msgDiv.innerText = "✕ Not covered: " + (data.result?.error || "Distance too far.");
|
msgDiv.innerText = "✕ Not covered: " + (data.result?.error || "Distance too far.");
|
||||||
if (submitBtn) submitBtn.disabled = true;
|
if (submitBtn) submitBtn.disabled = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelector('input[name="street"]')?.addEventListener('blur', checkUber);
|
// Event handlers
|
||||||
document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUber);
|
const triggers = document.querySelectorAll('input[name="street"], input[name="zip"]');
|
||||||
|
triggers.forEach(t => t.addEventListener('blur', checkUber));
|
||||||
|
|
||||||
|
// Force initial refresh
|
||||||
setOrderType('delivery');
|
setOrderType('delivery');
|
||||||
}
|
}
|
||||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initUnifiedForm); else initUnifiedForm();
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initUnifiedForm); else initUnifiedForm();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user