// Constants and Configuration const CONF = { DEBOUNCE_DELAY: 1000, MIN_NAME_LENGTH: 2, MIN_ADDRESS_LENGTH: 4, MIN_PASSWORD_LENGTH: 4, FILE_UPLOAD_LIMIT: 8, PHONE_MIN_DEFAULT: 6, PHONE_MAX_DEFAULT: 14, }; const LANGUAGE_CODES = { AR: "AR", EN: "EN", FR: "FR", }; // Utility functions const Utils = { validateEmail: (email) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email), validatePhone: ( phone, min = CONF.PHONE_MIN_DEFAULT, max = CONF.PHONE_MAX_DEFAULT ) => { if (!phone) return false; const cleanPhone = phone.replace(/[^0-9\u0660-\u0669+]/g, ""); return ( cleanPhone.length >= parseInt(min) && cleanPhone.length <= parseInt(max) ); }, tokenDecode: (token) => { try { if ( !/^[A-Za-z0-9-_=]+\.[A-Za-z0-9-_=]+\.[A-Za-z0-9-_.+/=]*$/.test(token) || token.split(".").length <= 1 ) { return null; } const data = token.split(".")[1]; const decodedData = atob(data); const text = decodeURIComponent(escape(decodedData)); return JSON.parse(text); } catch (error) { console.warn("Token decode failed:", error); return null; } }, cookieToObject: (cookie) => { if (!cookie) return {}; try { return cookie.split(";").reduce((result, item) => { const [key, ...valueParts] = item.split("="); if (key && valueParts.length) { result[key.trim()] = valueParts.join("=").trim(); } return result; }, {}); } catch (error) { console.warn("Cookie parsing failed:", error); return {}; } }, hexToRgb: (hex) => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16), } : { r: 0, g: 0, b: 0 }; }, getPixel: (order) => { const pixel = { content_ids: order.details.map((d) => d.product._id), contents: order.details.map((d) => ({ name: d.product.name.replace("&", "and"), id: d.product._id, price: d.product.price.salePrice, quantity: d.quantity, })), total: order.total, fbParams: {}, ttParams: {}, oaiParams: {}, }; if (order._id) pixel.fbParams.eventID = order._id; // Meta advanced matching (guest purchases) — the CAPI handler normalizes and // sha256-hashes each value, so raw values go here. Meta used to get the email and // nothing else, and COD orders rarely carry one, so Purchase reached Events // Manager with no customer data at all — that is the "set up manual advanced // matching" diagnostic. TikTok and OpenAI below already send the full set. const fbAddress = (order.shipping && order.shipping.address) ? order.shipping.address : null; if (order.customer && order.customer.email) pixel.fbParams.user_email = order.customer.email; if (fbAddress && fbAddress.phone) pixel.fbParams.user_phone = fbAddress.phone; if (fbAddress && fbAddress.firstname) pixel.fbParams.user_firstname = fbAddress.firstname; if (fbAddress && fbAddress.lastname) pixel.fbParams.user_lastname = fbAddress.lastname; if (fbAddress && fbAddress.country && fbAddress.country.code) pixel.fbParams.user_country = fbAddress.country.code; if (fbAddress && fbAddress.city && fbAddress.city.name) pixel.fbParams.user_city = fbAddress.city.name; // TikTok advanced matching (guest purchases) — backend sha256-hashes these if (order.customer && order.customer.email) pixel.ttParams.user_email = order.customer.email; if (order.shipping && order.shipping.address && order.shipping.address.phone) pixel.ttParams.user_phone = order.shipping.address.phone; // OpenAI advanced matching (guest purchases) — the backend normalizes each value per // OpenAI's rules and sha256-hashes it, so raw values go here. These are read on // whichever thanks page the order lands on (the theme's own, or checkout-stores). const oaAddress = (order.shipping && order.shipping.address) ? order.shipping.address : null; if (order.customer && order.customer.email) pixel.oaiParams.user_email = order.customer.email; if (oaAddress && oaAddress.phone) pixel.oaiParams.user_phone = oaAddress.phone; if (oaAddress && oaAddress.firstname) pixel.oaiParams.user_firstname = oaAddress.firstname; if (oaAddress && oaAddress.lastname) pixel.oaiParams.user_lastname = oaAddress.lastname; if (oaAddress && oaAddress.country && oaAddress.country.code) pixel.oaiParams.user_country = oaAddress.country.code.toLowerCase(); if (oaAddress && oaAddress.city && oaAddress.city.name) pixel.oaiParams.user_city = oaAddress.city.name; // encodeURIComponent, not encodeURI: encodeURI leaves `+`, `&` and `#` literal, and // vue-router turns a literal `+` into a space when it parses the query — which // silently corrupted every phone number carried in here. return encodeURIComponent(JSON.stringify(pixel)); }, sortedObject: (unordered) => { return Object.keys(unordered) .sort() .reduce((obj, key) => { obj[key] = unordered[key]; return obj; }, {}); }, deepClone: (obj) => JSON.parse(JSON.stringify(obj)), debounce: (func, delay) => { let timeoutId; return function (...args) { const context = this; // Capture this clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); }; }, }; // Translation utilities const Translations = { method: { [LANGUAGE_CODES.AR]: { Hyperpay: "Hyperpay", CashOnDelivery: "الدفع عند الاستلام", PayPal: "الدفع عبر بايبال", transfer: "تحويل بنكي", Stripe: "الدفع ببطاقة الائتمان", "Paypal-Credit-Card": "الدفع ببطاقة الائتمان", cmi: "الدفع ببطاقة الائتمان مغربية", paytech: "Paytech", cashplus: "كاش بلوس", "payzone-cash": "Payzone Cash", }, [LANGUAGE_CODES.EN]: { Hyperpay: "Hyperpay", CashOnDelivery: "Cash on delivery", PayPal: "PayPal", transfer: "Bank transfer", Stripe: "Credit Card", "Paypal-Credit-Card": "Credit Card", cmi: "Credit Card Moroccan", cashplus: "Cash Plus", paytech: "Paytech", "payzone-cash": "Payzone Cash", }, [LANGUAGE_CODES.FR]: { Hyperpay: "Hyperpay", CashOnDelivery: "Paiement à la livraison", PayPal: "PayPal", transfer: "Transfert bancaire", Stripe: "Carte bancaire", "Paypal-Credit-Card": "Carte bancaire", cmi: "Carte bancaire Marocain", cashplus: "Cash Plus", paytech: "Paytech", "payzone-cash": "Payzone Cash", }, }, getMethodTranslation: (value, lang) => { return Translations.method[lang]?.[value] || value; }, getCancelText: (langCode) => { const translations = { [LANGUAGE_CODES.AR]: "إلغاء", [LANGUAGE_CODES.EN]: "Cancel", [LANGUAGE_CODES.FR]: "Annuler", }; return translations[langCode] || translations[LANGUAGE_CODES.EN]; }, getFreeShippingText: (langCode) => { const translations = { [LANGUAGE_CODES.AR]: "التوصيل بالمجان", [LANGUAGE_CODES.EN]: "Free Shipping", [LANGUAGE_CODES.FR]: "Livraison gratuite", }; return translations[langCode] || translations[LANGUAGE_CODES.EN]; }, // OTP verification texts (defaults; can be overridden from settings) otp: { [LANGUAGE_CODES.AR]: { title: "تأكيد رقم الهاتف", subtitle: "أدخل رمز التحقق الذي أرسلناه إلى", placeholder: "رمز التحقق", verify: "تأكيد", verifying: "جاري التحقق...", resend: "إعادة إرسال الرمز", resendIn: "إعادة الإرسال خلال", sending: "جاري إرسال الرمز...", sent: "تم إرسال رمز التحقق", invalid: "رمز غير صحيح، يرجى المحاولة مرة أخرى", sendFailed: "تعذر إرسال الرمز، يرجى المحاولة مرة أخرى", cancel: "إلغاء", seconds: "ثانية", }, [LANGUAGE_CODES.EN]: { title: "Verify your phone number", subtitle: "Enter the verification code we sent to", placeholder: "Verification code", verify: "Verify", verifying: "Verifying...", resend: "Resend code", resendIn: "Resend in", sending: "Sending code...", sent: "Verification code sent", invalid: "Invalid code, please try again", sendFailed: "Could not send the code, please try again", cancel: "Cancel", seconds: "s", }, [LANGUAGE_CODES.FR]: { title: "Vérifiez votre numéro de téléphone", subtitle: "Saisissez le code de vérification envoyé au", placeholder: "Code de vérification", verify: "Vérifier", verifying: "Vérification...", resend: "Renvoyer le code", resendIn: "Renvoyer dans", sending: "Envoi du code...", sent: "Code de vérification envoyé", invalid: "Code invalide, veuillez réessayer", sendFailed: "Impossible d'envoyer le code, veuillez réessayer", cancel: "Annuler", seconds: "s", }, }, getOtpText: (key, langCode) => { const pack = Translations.otp[langCode] || Translations.otp[LANGUAGE_CODES.EN]; return pack[key]; }, }; // Global handler management let currentProductHandler = null; // Main Vue instance const vm = new StoreinoApp({ el: "#app_expresscheckout", data() { return { // Configuration and tools config: __DATA__, tools: { getPixel: Utils.getPixel, validateEmail: Utils.validateEmail, validatePhone: Utils.validatePhone, tokenDecode: Utils.tokenDecode, cookieToObject: Utils.cookieToObject, }, // UI State showCaptcha: false, sending: false, displayMap: false, isPaypalToCheckoutActive: false, isOpen: false, open: false, manualTrigger: false, // Data products: [], items: [], preferredCountries: [], imagesToUpload: [], attachments: [], relatedProductds: [], collectionsRelated: [], selectedProduct: [], // Store state store: { state: { cart: [], language: { code: LANGUAGE_CODES.EN, name: "English" }, currency: { code: "USD", symbol: "$" }, }, }, // Loading states loading: { zones: true, cart: true, zoneTimes: 0, }, // Settings and configuration settings: null, subSeller: null, errors: {}, // UI visibility show: { products: false, coupon: false, }, // Map configuration map: null, marker: null, localization: { position: {}, zoom: 12, center: [51.505, -0.09], url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution: '© OpenStreetMap contributors', markerPos: [51.505, -0.09], }, // Local state locals: { create_account: false, ship_to_different_address: false, mobileSummary: false, openSelect: null, // Which custom-select dropdown is open (string key or null) shippers: [], shipper: null, methods: [], method: null, subtotal: 0, shipping: 0, discount: { type: "percentage", value: 0, price: 0 }, tva: { type: "Percentage", value: 0, price: 0 }, total: 0, variants: [], }, // Location data singular: { countries: "country", provinces: "province", cities: "city" }, shipLocations: { countries: [], provinces: [], cities: [] }, locations: { countries: [], provinces: [], cities: [] }, // Customer data customer: { firstname: "", lastname: "", fullname: "", password: "", email: "", phone: "", token: undefined, ipAddress: undefined, address: { address1: "", address2: "", country: null, province: null, city: { name: "", _id: undefined }, }, }, // Order data order: { customer: { firstname: "", lastname: "", fullname: "", email: "" }, shipping: { zone: null, shipper: null, price: 0, address: { firstname: "", lastname: "", fullname: "", address1: "", address2: "", phone: "", country: null, province: null, city: { name: "", _id: undefined }, }, }, discount: null, details: [], customerNote: "", method: null, }, // Additional state details: null, pickedColle: "", packPrice: false, fromInitCart: false, isAffiliate: false, isLoggedIn: false, countEvent: 0, thanksPath: "#", ctk: null, // OTP verification state (code is sent server-side on customer create) otp: { show: false, // modal visibility verified: false, // becomes true once the code is validated code: "", // code typed by the customer verifying: false, // verify request in flight error: null, // localized error message to display info: null, // localized info message (e.g. "code sent") }, activeCountry: { code: "ma" }, selectedIndex: null, typeToFindInput: "", typeToFindTimer: null, }; }, // Computed properties for better performance computed: { contactFields() { return [ { key: "email", map: this.customer, type: "email" }, { key: "password", map: this.customer, type: "password" }, { key: "phone", map: this.customer, type: "text" }, { key: "address1", map: this.customer.address, type: "text" }, { key: "address2", map: this.customer.address, type: "text" }, ].filter((e) => { if (this.isLoggedIn && (e.key === "email" || e.key === "password")) return false; return this.settings?.checkout_required_fields?.[`show_${e.key}`]; }); }, locationFields() { return ["countries", "provinces", "cities"].filter( (e) => !this.settings?.checkout_defaults?.[`has_${this.singular[e]}`] ); }, shippingFields() { return [ { key: "firstname", type: "text" }, { key: "lastname", type: "text" }, { key: "fullname", type: "text" }, { key: "phone", type: "text" }, { key: "address1", type: "text" }, { key: "address2", type: "text" }, ].filter( (e) => this.settings?.checkout_required_fields?.[`show_${e.key}`] ); }, shouldShowShipping() { return ( (this.loading.zoneTimes > 3 && this.locals.shippers.length > 1) || this.locals.shippers.length > 1 || (this.loading.zoneTimes > 3 && this.errors.shipping) ); }, isFreeShipping() { const defaults = this.settings?.checkout_defaults; if (!defaults?.has_min_price_freeshipping) return false; const freeshippingConfig = defaults.min_price_freeshipping; if ( typeof freeshippingConfig === "object" && freeshippingConfig[this.store.state.currency.code] ) { const minPrice = freeshippingConfig[this.store.state.currency.code].value; return this.locals.subtotal > minPrice; } return this.locals.subtotal > freeshippingConfig; }, // Shipping is free only when every product in the cart is flagged // freeShipping — one regular product and the order pays shipping. // Mirrors isFreeShippingOrder() on the API side. The length guard keeps an // empty cart (items.every() === true) from reading as free while it loads. isFreeShippingOrder() { return ( this.items.length > 0 && this.items.every((item) => item.freeShipping) ); }, bankDetails() { return window.$nuxt?.$store?.state?.settings?.store?.transfer; }, // OTP is active only when the merchant enabled it in checkout settings isOtpEnabled() { return !!this.settings?.checkout_required_fields?.active_OTP; }, }, // Watchers with optimized performance watch: { "store.state.cart": { handler() { this.calculate("fromWatch"); }, deep: true, }, "localization.position": { deep: true, handler(value) { this.localization.position = value; this.localization.markerPos = [value.lat, value.lng]; this.$emit("input", value); }, }, locals: { handler() { this.calculate("fromLocal"); }, deep: true, }, order: { handler() { this.debouncedAbandonmentCart(); }, deep: true, }, customer: { handler() { this.debouncedAbandonmentCart(); }, deep: true, }, "customer.address": { handler(val) { this.handleAddressChange(val); }, deep: true, }, "order.shipping.address.country": { handler() { this.handleShippingLocationChange("country"); }, deep: true, }, "order.shipping.address.province": { handler() { this.handleShippingLocationChange("province"); }, deep: true, }, "order.shipping.address.city": { handler() { this.handleShippingLocationChange("city"); }, deep: true, }, "locals.ship_to_different_address"(val) { if (!val) { this.syncShippingWithBilling(); } }, // Invalidate a previous OTP verification if the phone number is edited "customer.phone"() { if (this.otp.verified) { this.otp.verified = false; this.otp.code = ""; } }, }, // Lifecycle hooks created() { this.cleanupEventListeners(); // Create debounced abandonment cart method this.debouncedAbandonmentCart = Utils.debounce(() => { this.abandonmentCart(); }, 500); // Create debounced getZones method }, async mounted() { try { await this.initializeApp(); } catch (error) { console.error("App initialization failed:", error); window.sentryLog?.captureException(error); } // Close any open custom-select when clicking outside this._ckOutsideClick = (e) => { if (!this.locals.openSelect) return; const target = e.target; if (target.closest && target.closest(".ck-customselect")) return; this.locals.openSelect = null; }; document.addEventListener("mousedown", this._ckOutsideClick); document.addEventListener("touchstart", this._ckOutsideClick); // Autofill / prefilled-value label sync — some browsers (Safari, Firefox) // don't update :placeholder-shown when a value is set programmatically or // by autofill, so the floating label sits on top of the value until first // focus. We toggle .is-filled on the wrapping .ck-label to force the float. this._ckLabelSync = () => { document.querySelectorAll(".ck-checkout .ck-label").forEach((label) => { const input = label.querySelector(".ck-input"); if (!input) return; if (input.value && input.value.length > 0) { label.classList.add("is-filled"); } else { label.classList.remove("is-filled"); } }); }; // Run once after Vue paints, again after a tick for late-arriving autofill this.$nextTick(this._ckLabelSync); setTimeout(this._ckLabelSync, 200); setTimeout(this._ckLabelSync, 800); // Also catch WebKit autofill via the CSS animation trick above this._ckAutofillListener = (e) => { if (e.animationName === "ck-autofill") this._ckLabelSync(); }; document.addEventListener("animationstart", this._ckAutofillListener, true); // And run on every input event so the class is always in sync this._ckInputListener = (e) => { if (e.target && e.target.classList && e.target.classList.contains("ck-input")) { this._ckLabelSync(); // First real interaction with the checkout form → fire InitiateCheckout once. this.fireInitiateCheckout(); } }; document.addEventListener("input", this._ckInputListener, true); document.addEventListener("change", this._ckInputListener, true); }, destroyed() { this.cleanupEventListeners(); if (this._ckOutsideClick) { document.removeEventListener("mousedown", this._ckOutsideClick); document.removeEventListener("touchstart", this._ckOutsideClick); } if (this._ckAutofillListener) { document.removeEventListener("animationstart", this._ckAutofillListener, true); } if (this._ckInputListener) { document.removeEventListener("input", this._ckInputListener, true); document.removeEventListener("change", this._ckInputListener, true); } }, // Filters filters: { method: Translations.getMethodTranslation, formatPrice: (value) => Number(value).toFixed(2), }, // Methods methods: { // Initialization methods async initializeApp() { try { // First, always load the initial data (settings) await this.loadInitialData(); // Only setup event handlers AFTER settings are loaded this.setupEventHandlers(); // Continue with the rest of initialization await this.setupConfiguration(); await this.loadResources(); this.finalizeInitialization(); } catch (error) { console.error("App initialization failed:", error); window.sentryLog?.captureException(error); } }, setupEventHandlers() { currentProductHandler = (e) => this.handleCurrentProduct(e); window.addEventListener("CURRENT_PRODUCT", currentProductHandler, true); }, cleanupEventListeners() { if (currentProductHandler) { window.removeEventListener( "CURRENT_PRODUCT", currentProductHandler, true ); currentProductHandler = null; } }, async loadInitialData() { // Initialize products if (!window.products) window.products = []; this.products = window.products; // Load settings this.settings = await this.getSettings(); }, async setupConfiguration() { // Setup currency this.setupCurrency(); this.normalizeSettings(); this.setDefaultColors(); // Detect logged-in customer from CUSTOMER cookie this.detectLoggedInCustomer(); // Reset city selections if manual typing is disabled if (!this.settings.checkout_required_fields.typing_city_manually) { this.order.shipping.address.city = null; this.customer.address.city = null; } }, detectLoggedInCustomer() { const customerToken = Utils.cookieToObject(document.cookie).CUSTOMER; if (!customerToken) return; const decoded = Utils.tokenDecode(customerToken); if (!decoded || !decoded.customer || !decoded.customer._id) return; this.isLoggedIn = true; this.ctk = customerToken; const c = decoded.customer; if (c.firstname) this.customer.firstname = c.firstname; if (c.lastname) this.customer.lastname = c.lastname; if (c.firstname || c.lastname) { this.customer.fullname = [c.firstname, c.lastname].filter(Boolean).join(" "); } if (c.email) this.customer.email = c.email; this.order.customer._id = c._id; this.order.customer.firstname = c.firstname || ""; this.order.customer.lastname = c.lastname || ""; if (c.email) this.order.customer.email = c.email; }, setupCurrency() { const defaultCurrency = this.settings?.store_currencies?.find( (currency) => currency.default ); if (defaultCurrency) { this.store.state.currency = defaultCurrency; } if (window.$nuxt?.$store?.state?.currency) { this.store.state.currency = window.$nuxt.$store.state.currency; } }, setDefaultColors() { const headlines = this.settings.checkout_headlines; const defaults = { buy_now_color: "#40c11f", text_color: "#444444", price_color: "#ff3344", bg_color: "#ffffff", page_bg_color: "#eeeeee", }; Object.entries(defaults).forEach(([key, value]) => { if (!headlines[key]) { this.$set(headlines, key, value); } }); }, async loadResources() { // Load methods and locations await Promise.all([ this.getMethods(), this.getLocations("world", undefined), ]); // Load country info this.getCountriesInfo(); if ( this.settings.checkout_required_fields.show_ship_to_different_address ) { this.shipLocations = Utils.deepClone(this.locations); } }, finalizeInitialization() { this.checkMethods(); // Load optional resources if (this.settings.checkout_required_fields.show_captcha) { this.loadScript("https://www.google.com/recaptcha/api.js", "recaptcha") .then(() => { console.log("reCAPTCHA script loaded successfully"); }) .catch((error) => { console.error("Failed to load reCAPTCHA:", error); }); } // Auto-apply coupon if configured — keep the panel collapsed on load, // the user opens it manually via the "Coupon Code" toggle. if ( this.settings.checkout_required_fields.auto_coupon && this.settings.checkout_headlines.auto_code_coupon ) { this.locals.discount.code = this.settings.checkout_headlines.auto_code_coupon; this.applyCoupon(); } // Setup variants if (this.settings.checkout_required_fields.show_variant_on_checkout) { this.locals.variants = window.products?.[0]?.variants ?? []; } // Dispatch app loaded event - this tells the theme the checkout is ready window.dispatchEvent(new CustomEvent("APP_LOADER")); // Request product info from theme (in case event was dispatched before we were ready) window.dispatchEvent(new CustomEvent("REQUEST_CURRENT_PRODUCT")); }, // Utility methods hexToRgb: Utils.hexToRgb, formatTotal(total) { const n = Number(total); if (!isFinite(n)) return "0"; return Number.isInteger(n) ? n : n.toFixed(2); }, // ============================================================ // Custom dropdown helpers (replace native

Sneakers

Mocassins

Chelsea Boots

Derby Shoes

Filtres

Collections

Prix

Tailles

Couleurs

Tags

Marques

Filtres

Trier Par

Trier Par

Aucun produit trouvé

Velvet Black

Marmi Grigio Sneakers