299.00 dh
Sale price
299.00 dh
Regular price
/*
VELORIA — Popup commande custom v2
Compatible thème Horizon Shopify
Fichier : assets/veloria-popup.js
*/
var veloriaState = {
variantId: null,
productTitle: '',
productImage: '',
priceNew: '',
priceOld: '',
selectedColor: '',
selectedSize: ''
};
document.addEventListener('DOMContentLoaded', function() {
veloriaBindAllButtons();
veloriaWatchDynamicButtons();
});
function veloriaBindAllButtons() {
var selectors = [
'button[name="checkout"]',
'button.sticky-add-to-cart__button',
'button.add-to-cart-button',
'[data-veloria-buy]',
'.veloria-buy-btn'
];
selectors.forEach(function(sel) {
document.querySelectorAll(sel).forEach(function(btn) {
if (btn.dataset.veloriaBound) return;
btn.dataset.veloriaBound = 'true';
btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
veloriaOpenPopup();
}, true);
});
});
}
function veloriaWatchDynamicButtons() {
var observer = new MutationObserver(function() {
veloriaBindAllButtons();
});
observer.observe(document.body, { childList: true, subtree: true });
}
function veloriaOpenPopup() {
var overlay = document.getElementById('veloria-overlay');
if (!overlay) return;
veloriaCollectProductInfo();
overlay.style.display = 'flex';
document.body.style.overflow = 'hidden';
veloriaResetForm();
setTimeout(function() {
var nom = document.getElementById('vel-nom');
if (nom) nom.focus();
}, 200);
}
function veloriaClosePopup() {
var overlay = document.getElementById('veloria-overlay');
if (overlay) overlay.style.display = 'none';
document.body.style.overflow = '';
}
document.addEventListener('click', function(e) {
var overlay = document.getElementById('veloria-overlay');
if (overlay && e.target === overlay) veloriaClosePopup();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') veloriaClosePopup();
});
function veloriaCollectProductInfo() {
var img = document.querySelector('.product__media img, [data-product-featured-image], .product-media-gallery img');
veloriaState.productImage = img ? (img.src || '') : '';
var titleEl = document.querySelector('h1.product__title, .product-single__title, h1[data-product-title], h1');
veloriaState.productTitle = titleEl ? titleEl.innerText.trim() : '';
var variantInput = document.querySelector('input[name="id"]:checked, select[name="id"], input[name="id"]');
if (variantInput) veloriaState.variantId = variantInput.value;
var priceEl = document.querySelector('.price-item--sale, [data-product-price], .product__price .price');
veloriaState.priceNew = priceEl ? priceEl.innerText.trim() : '';
var priceOldEl = document.querySelector('.price-item--regular, [data-compare-price], .product__price s');
veloriaState.priceOld = priceOldEl ? priceOldEl.innerText.trim() : '';
// Couleur — Horizon stocke la sélection dans le label visible
var colorEl = document.querySelector('[data-option-index="0"] .selected, .variant-picker [data-index="0"] .active, input[name="Color"]:checked, input[name="Couleur"]:checked');
veloriaState.selectedColor = colorEl ? (colorEl.innerText || colorEl.value || '').trim() : '';
var sizeEl = document.querySelector('[data-option-index="1"] .selected, .variant-picker [data-index="1"] .active, input[name="Size"]:checked, input[name="Pointure"]:checked, input[name="Taille"]:checked');
veloriaState.selectedSize = sizeEl ? (sizeEl.innerText || sizeEl.value || '').trim() : '';
// Fallback via sticky bar
if (!veloriaState.selectedColor || !veloriaState.selectedSize) {
var variantTitle = document.querySelector('.sticky-add-to-cart__variant, [data-variant-title], .product__variant-title');
if (variantTitle && variantTitle.innerText) {
var parts = variantTitle.innerText.split('/');
if (parts[0] && !veloriaState.selectedColor) veloriaState.selectedColor = parts[0].trim();
if (parts[1] && !veloriaState.selectedSize) veloriaState.selectedSize = parts[1].trim();
}
}
veloriaUpdateSummary();
}
function veloriaUpdateSummary() {
var imgEl = document.getElementById('veloria-prod-img');
if (imgEl && veloriaState.productImage) imgEl.src = veloriaState.productImage;
var nameEl = document.getElementById('veloria-prod-name');
if (nameEl) nameEl.textContent = veloriaState.productTitle || 'Produit sélectionné';
var variantsEl = document.getElementById('veloria-variants');
if (variantsEl) {
variantsEl.innerHTML = '';
var s = 'font-size:11px;padding:2px 8px;border-radius:20px;background:#2d5a27;color:#fff;margin-right:4px;display:inline-block;';
if (veloriaState.selectedColor) {
var t1 = document.createElement('span'); t1.style.cssText = s; t1.textContent = veloriaState.selectedColor; variantsEl.appendChild(t1);
}
if (veloriaState.selectedSize) {
var t2 = document.createElement('span'); t2.style.cssText = s; t2.textContent = 'Pointure ' + veloriaState.selectedSize; variantsEl.appendChild(t2);
}
}
var pn = document.getElementById('veloria-price-new');
if (pn) pn.textContent = veloriaState.priceNew;
var po = document.getElementById('veloria-price-old');
if (po) po.textContent = veloriaState.priceOld;
}
function velValidate(input, errId, type) {
var val = input.value.trim();
var errEl = document.getElementById(errId);
var valid = type === 'phone'
? /^(06|07|05)\d{8}$/.test(val.replace(/[\s\-\.]/g,''))
: val.length > 0;
input.style.borderColor = (!valid && val.length > 0) ? '#e24b4a' : (val.length > 0 ? '#2d5a27' : '#ddd');
if (errEl) errEl.style.display = (!valid && val.length > 0) ? 'block' : 'none';
return valid;
}
function veloriaSubmit() {
var nom = document.getElementById('vel-nom');
var tel = document.getElementById('vel-tel');
var adr = document.getElementById('vel-adr');
var vil = document.getElementById('vel-vil');
var email = document.getElementById('vel-email');
var ok = velValidate(nom,'vel-nom-err','text')
& velValidate(tel,'vel-tel-err','phone')
& velValidate(adr,'vel-adr-err','text')
& velValidate(vil,'vel-vil-err','text');
if (!ok) return;
var note = [
'Nom: '+nom.value.trim(),
'Tel: '+tel.value.trim(),
'Adresse: '+adr.value.trim(),
'Ville: '+vil.value.trim(),
email.value.trim()?'Email: '+email.value.trim():'',
veloriaState.selectedColor?'Couleur: '+veloriaState.selectedColor:'',
veloriaState.selectedSize?'Pointure: '+veloriaState.selectedSize:''
].filter(Boolean).join(' | ');
var btn = document.getElementById('vel-submit-btn');
btn.textContent = 'Traitement...';
btn.style.background = '#888';
btn.disabled = true;
var addStep = veloriaState.variantId
? fetch('/cart/add.js',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:parseInt(veloriaState.variantId),quantity:1})})
: Promise.resolve();
addStep.then(function(){
return fetch('/cart/update.js',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({note:note})});
}).then(function(){
btn.textContent = 'Redirection...';
btn.style.background = '#1D9E75';
window.location.href = '/checkout'
+'?checkout[email]='+encodeURIComponent(email.value.trim())
+'&checkout[shipping_address][first_name]='+encodeURIComponent(nom.value.trim())
+'&checkout[shipping_address][phone]='+encodeURIComponent(tel.value.trim())
+'&checkout[shipping_address][address1]='+encodeURIComponent(adr.value.trim())
+'&checkout[shipping_address][city]='+encodeURIComponent(vil.value.trim())
+'&checkout[shipping_address][country]=MA';
}).catch(function(){
btn.textContent = 'Erreur — Réessayer';
btn.style.background = '#e24b4a';
btn.disabled = false;
});
}
function veloriaResetForm() {
['vel-nom','vel-tel','vel-adr','vel-vil','vel-email'].forEach(function(id){
var el=document.getElementById(id); if(el){el.value='';el.style.borderColor='#ddd';}
});
['vel-nom-err','vel-tel-err','vel-adr-err','vel-vil-err'].forEach(function(id){
var el=document.getElementById(id); if(el) el.style.display='none';
});
var btn=document.getElementById('vel-submit-btn');
if(btn){btn.textContent='Confirmer ma commande';btn.style.background='#2d5a27';btn.disabled=false;}
}
