implement order fulfillment selection and Uber delivery integration on checkout page and update docker-compose container naming.

This commit is contained in:
Alaguraj0361 2026-04-06 22:19:07 +05:30
parent 3d05b8642f
commit 6584bf5a87

View File

@ -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,65 +52,62 @@
<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="row mb-4">
<div class="col-12">
<div class="section-header">Select Time</div> <div class="section-header">Select Time</div>
<input type="datetime-local" name="delivery_time" id="delivery_time" class="form-control" required="required"/> <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>
</div> </div>
</div>
<div class="section-header">Contact &amp; 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 addressHeader = document.getElementById('address_section_label');
const btn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary'); const btn = document.querySelector('button[type="submit"]') || document.querySelector('.btn-primary');
// Address fields to toggle
const addressDivs = [
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
].filter(el => el != null);
window.setOrderType = function(type) { window.setOrderType = function(type) {
hiddenType.value = type; hiddenType.value = type;
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');
// Toggle address fields
if (type === 'pickup') { if (type === 'pickup') {
wrap.classList.add('d-none'); addressDivs.forEach(div => div.classList.add('d-none'));
msgDiv.classList.add('d-none'); if (addressHeader) addressHeader.classList.add('d-none');
if (msgDiv) msgDiv.classList.add('d-none');
if (btn) btn.disabled = false; if (btn) btn.disabled = false;
} else { } else {
wrap.classList.remove('d-none'); addressDivs.forEach(div => div.classList.remove('d-none'));
if (addressHeader) addressHeader.classList.remove('d-none');
checkUber(); checkUber();
} }
}; };
function checkUber() { function checkUber() {
if (hiddenType.value !== 'delivery') return; if (hiddenType.value !== 'delivery') return;
const street = document.querySelector('input[name="street"]')?.value;
const street = document.querySelector('input[name="street"]').value; const zip = document.querySelector('input[name="zip"]')?.value;
const zip = document.querySelector('input[name="zip"]').value;
if (!street || !zip) return; if (!street || !zip) return;
const addressData = { const addressData = {
street: street, street: street,
city: document.querySelector('input[name="city"]').value, city: document.querySelector('input[name="city"]')?.value,
zip: zip, zip: zip,
country: document.querySelector('select[name="country_id"] option:checked')?.text || 'Canada' country: document.querySelector('select[name="country_id"] option:checked')?.text || 'Canada'
}; };
@ -123,7 +119,7 @@
if (data.result &amp;&amp; data.result.success) { if (data.result &amp;&amp; data.result.success) {
msgDiv.classList.remove('d-none', 'alert-danger'); msgDiv.classList.remove('d-none', 'alert-danger');
msgDiv.classList.add('alert-success'); msgDiv.classList.add('alert-success');
msgDiv.innerText = "✓ Covered! Delivery charge: " + data.result.fee + "$"; msgDiv.innerText = "✓ Uber covers this area! Delivery fee: " + data.result.fee + "$";
if (btn) btn.disabled = false; if (btn) btn.disabled = false;
} else { } else {
msgDiv.classList.remove('d-none', 'alert-success'); msgDiv.classList.remove('d-none', 'alert-success');
@ -134,9 +130,21 @@
}); });
} }
// Watch address fields // Event listeners for Uber check
document.querySelector('input[name="street"]')?.addEventListener('blur', checkUber); const streetInput = document.querySelector('input[name="street"]');
document.querySelector('input[name="zip"]')?.addEventListener('blur', checkUber); 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>