forked from alaguraj/odoo-testing-addons
implement order fulfillment selection and Uber delivery integration on checkout page and update docker-compose container naming.
This commit is contained in:
parent
3d05b8642f
commit
6584bf5a87
@ -13,16 +13,15 @@
|
|||||||
</xpath>
|
</xpath>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 2. Hide Uber fee from cart product list -->
|
<!-- 2. Hide Uber fee from cart summary -->
|
||||||
<template id="chennora_cart_summary_uber_hide" inherit_id="website_sale.checkout_layout" name="Chennora Cart Summary Uber Hide">
|
<template id="chennora_cart_summary_uber_hide" inherit_id="website_sale.checkout_layout" name="Chennora Cart Summary Uber Hide">
|
||||||
<xpath expr="//table[@id='cart_products']//tr" position="attributes">
|
<xpath expr="//table[@id='cart_products']//tr" position="attributes">
|
||||||
<attribute name="t-if">line.product_id.name != 'Uber Delivery Fee'</attribute>
|
<attribute name="t-if">line.product_id.name != 'Uber Delivery Fee'</attribute>
|
||||||
</xpath>
|
</xpath>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 3. MAIN FORM CHANGES: Morphing Address Form (Pickup vs Delivery) -->
|
<!-- 3. Morphing Address Form (Pickup vs Delivery) -->
|
||||||
<template id="chennora_address_morphing" inherit_id="website_sale.address" name="Chennora Address Morphing" priority="99">
|
<template id="chennora_address_morphing" inherit_id="website_sale.address" name="Chennora Address Morphing" priority="99">
|
||||||
<!-- Add the Selection Cards at the top of the form -->
|
|
||||||
<xpath expr="//form" position="before">
|
<xpath expr="//form" position="before">
|
||||||
<style>
|
<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 { border: 2px solid #eee; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; padding: 20px; text-align: center; height: 100%; }
|
||||||
@ -34,7 +33,7 @@
|
|||||||
.section-header { font-weight: bold; margin: 25px 0 15px 0; padding-bottom: 5px; border-bottom: 1px solid #eee; }
|
.section-header { font-weight: bold; margin: 25px 0 15px 0; padding-bottom: 5px; border-bottom: 1px solid #eee; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="row mb-4 g-3">
|
<div class="row mb-4 g-3 mt-2">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<div id="card_delivery" class="order-type-card active" onclick="setOrderType('delivery')">
|
<div id="card_delivery" class="order-type-card active" onclick="setOrderType('delivery')">
|
||||||
<i class="fa fa-truck"></i>
|
<i class="fa fa-truck"></i>
|
||||||
@ -53,90 +52,99 @@
|
|||||||
|
|
||||||
<input type="hidden" name="fulfilment_type" id="hidden_fulfilment_type" value="delivery"/>
|
<input type="hidden" name="fulfilment_type" id="hidden_fulfilment_type" value="delivery"/>
|
||||||
|
|
||||||
<!-- Select Time Section -->
|
<div class="section-header">Select Time</div>
|
||||||
<div class="row mb-4">
|
<div class="mb-4">
|
||||||
<div class="col-12">
|
<input type="datetime-local" name="delivery_time" id="delivery_time_input" class="form-control"/>
|
||||||
<div class="section-header">Select Time</div>
|
<p class="text-muted small mt-1">Please select your preferred time.</p>
|
||||||
<input type="datetime-local" name="delivery_time" id="delivery_time" class="form-control" required="required"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section-header">Contact & Details</div>
|
|
||||||
|
|
||||||
<div id="uber_message" class="alert d-none my-3" role="alert"></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>
|
||||||
</xpath>
|
</xpath>
|
||||||
|
|
||||||
<!-- Wrap Address Fields for Toggling -->
|
<!-- No wrapper needed, we use JS to target the div_street, div_city, etc. -->
|
||||||
<xpath expr="//div[@id='div_street']" position="before">
|
|
||||||
<div id="address_fields_wrapper">
|
|
||||||
<div class="section-header">Address Details</div>
|
|
||||||
</xpath>
|
|
||||||
|
|
||||||
<xpath expr="//div[@id='div_country']" position="after">
|
|
||||||
</div> <!-- End of address_fields_wrapper -->
|
|
||||||
</xpath>
|
|
||||||
|
|
||||||
<!-- Script for Dynamic UI and Uber Integration -->
|
|
||||||
<xpath expr="//form" position="after">
|
<xpath expr="//form" position="after">
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
(function() {
|
(function() {
|
||||||
const wrap = document.getElementById('address_fields_wrapper');
|
function initAddressLogic() {
|
||||||
const hiddenType = document.getElementById('hidden_fulfilment_type');
|
const hiddenType = document.getElementById('hidden_fulfilment_type');
|
||||||
const msgDiv = document.getElementById('uber_message');
|
const msgDiv = document.getElementById('uber_message');
|
||||||
const btn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
|
const addressHeader = document.getElementById('address_section_label');
|
||||||
|
const btn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
|
||||||
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');
|
|
||||||
|
|
||||||
// Toggle address fields
|
// Address fields to toggle
|
||||||
if (type === 'pickup') {
|
const addressDivs = [
|
||||||
wrap.classList.add('d-none');
|
document.getElementById('div_street'),
|
||||||
msgDiv.classList.add('d-none');
|
document.getElementById('div_city'),
|
||||||
if (btn) btn.disabled = false;
|
document.getElementById('div_zip'),
|
||||||
} else {
|
document.getElementById('div_country'),
|
||||||
wrap.classList.remove('d-none');
|
document.querySelector('div[id*="div_state"]') // Handle potential different IDs for state
|
||||||
checkUber();
|
].filter(el => el != null);
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function checkUber() {
|
window.setOrderType = function(type) {
|
||||||
if (hiddenType.value !== 'delivery') return;
|
hiddenType.value = type;
|
||||||
|
document.getElementById('card_delivery').classList.toggle('active', type === 'delivery');
|
||||||
const street = document.querySelector('input[name="street"]').value;
|
document.getElementById('card_pickup').classList.toggle('active', type === 'pickup');
|
||||||
const zip = document.querySelector('input[name="zip"]').value;
|
|
||||||
|
if (type === 'pickup') {
|
||||||
if (!street || !zip) return;
|
addressDivs.forEach(div => div.classList.add('d-none'));
|
||||||
|
if (addressHeader) addressHeader.classList.add('d-none');
|
||||||
const addressData = {
|
if (msgDiv) msgDiv.classList.add('d-none');
|
||||||
street: street,
|
|
||||||
city: document.querySelector('input[name="city"]').value,
|
|
||||||
zip: zip,
|
|
||||||
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) {
|
|
||||||
msgDiv.classList.remove('d-none', 'alert-danger');
|
|
||||||
msgDiv.classList.add('alert-success');
|
|
||||||
msgDiv.innerText = "✓ Covered! Delivery charge: " + data.result.fee + "$";
|
|
||||||
if (btn) btn.disabled = false;
|
if (btn) btn.disabled = false;
|
||||||
} else {
|
} else {
|
||||||
msgDiv.classList.remove('d-none', 'alert-success');
|
addressDivs.forEach(div => div.classList.remove('d-none'));
|
||||||
msgDiv.classList.add('alert-danger');
|
if (addressHeader) addressHeader.classList.remove('d-none');
|
||||||
msgDiv.innerText = "✕ Not covered: " + (data.result?.error || "Area not supported.");
|
checkUber();
|
||||||
if (btn) btn.disabled = true;
|
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
}
|
|
||||||
|
|
||||||
// Watch address fields
|
function checkUber() {
|
||||||
document.querySelector('input[name="street"]')?.addEventListener('blur', checkUber);
|
if (hiddenType.value !== 'delivery') return;
|
||||||
document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUber);
|
const street = document.querySelector('input[name="street"]')?.value;
|
||||||
|
const zip = document.querySelector('input[name="zip"]')?.value;
|
||||||
|
if (!street || !zip) return;
|
||||||
|
|
||||||
|
const addressData = {
|
||||||
|
street: street,
|
||||||
|
city: document.querySelector('input[name="city"]')?.value,
|
||||||
|
zip: zip,
|
||||||
|
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) {
|
||||||
|
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;
|
||||||
|
} 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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// Initial state
|
||||||
|
setOrderType('delivery');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', initAddressLogic);
|
||||||
|
} else {
|
||||||
|
initAddressLogic();
|
||||||
|
}
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
</xpath>
|
</xpath>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user