{"id":10,"date":"2026-06-23T20:41:13","date_gmt":"2026-06-23T20:41:13","guid":{"rendered":"http:\/\/francerezy.cluster015.ovh.net\/?page_id=10"},"modified":"2026-08-19T23:09:58","modified_gmt":"2026-08-19T23:09:58","slug":"demander-une-expedition","status":"publish","type":"page","link":"https:\/\/www.antsound.net\/index.php\/demander-une-expedition\/","title":{"rendered":"Exp\u00e9dition unique"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n<style>\n  \/* Conteneur g\u00e9n\u00e9ral *\/\n  .ml-form {\n    max-width: 650px;\n    margin: 0 auto;\n    padding: 10px 5px;\n  }\n\n  \/* Titres *\/\n  .ml-form h2, .ml-form h3 {\n    margin-top: 20px;\n    margin-bottom: 8px;\n    font-size: 20px;\n  }\n\n  \/* Champs *\/\n  .ml-input,\n  .ml-form input,\n  .ml-form select {\n    width: 100%;\n    padding: 9px 12px;\n    font-size: 15px;\n    border: 1px solid #ccc;\n    border-radius: 6px;\n    margin-bottom: 10px;\n    box-sizing: border-box;\n  }\n\n  \/* Lignes flexibles *\/\n  .ml-row {\n    display: flex;\n    gap: 10px;\n    margin-bottom: 10px;\n  }\n\n  .ml-row .ml-input,\n  .ml-row input {\n    flex: 1;\n  }\n\n  \/* Bouton *\/\n  #submitBoxtal {\n    padding: 12px 16px;\n    font-size: 16px;\n    background: #007bff;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    width: 100%;\n    margin-top: 15px;\n  }\n\n  #submitBoxtal:hover {\n    background: #005fcc;\n  }\n\n  \/* Zone des offres *\/\n  #boxtal_offers {\n    margin-top: 20px;\n    font-size: 15px;\n  }\n<\/style>\n\n<div class=\"ml-form\">\n\n  <h2>Exp\u00e9diteur<\/h2>\n\n  <div class=\"ml-row\">\n    <input id=\"senderFirstName\" class=\"ml-input\" placeholder=\"Pr\u00e9nom\">\n    <input id=\"senderLastName\" class=\"ml-input\" placeholder=\"Nom\">\n  <\/div>\n\n  <div class=\"ml-row\">\n    <input id=\"senderEmail\" class=\"ml-input\" placeholder=\"Email\">\n    <input id=\"senderPhone\" class=\"ml-input\" placeholder=\"T\u00e9l\u00e9phone\">\n  <\/div>\n\n  <div class=\"ml-address-group\">\n    <input id=\"senderAddress\" class=\"ml-input\" placeholder=\"Adresse\">\n    <input id=\"senderAddress2\" class=\"ml-input\" placeholder=\"Compl\u00e9ment d'adresse (optionnel)\">\n    <div id=\"senderAddress_suggestions\" class=\"ml-suggestions\"><\/div>\n  <\/div>\n\n  <div class=\"ml-row\">\n    <input id=\"senderZip\" class=\"ml-input\" placeholder=\"Code postal\">\n    <input id=\"senderCity\" class=\"ml-input\" placeholder=\"Ville\">\n    <input id=\"senderCountry\" class=\"ml-input\" placeholder=\"Pays\" value=\"FR\">\n  <\/div>\n\n\n  <h2>Destinataire<\/h2>\n\n  <div class=\"ml-row\">\n    <input id=\"recipientFirstName\" class=\"ml-input\" placeholder=\"Pr\u00e9nom\">\n    <input id=\"recipientLastName\" class=\"ml-input\" placeholder=\"Nom\">\n  <\/div>\n\n  <div class=\"ml-row\">\n    <input id=\"recipientEmail\" class=\"ml-input\" placeholder=\"Email\">\n    <input id=\"recipientPhone\" class=\"ml-input\" placeholder=\"T\u00e9l\u00e9phone\">\n  <\/div>\n\n  <div class=\"ml-address-group\">\n    <input id=\"recipientAddress\" class=\"ml-input\" placeholder=\"Adresse\">\n    <input id=\"recipientAddress2\" class=\"ml-input\" placeholder=\"Compl\u00e9ment d'adresse (optionnel)\">\n    <div id=\"recipientAddress_suggestions\" class=\"ml-suggestions\"><\/div>\n  <\/div>\n\n  <div class=\"ml-row\">\n    <input id=\"recipientZip\" class=\"ml-input\" placeholder=\"Code postal\">\n    <input id=\"recipientCity\" class=\"ml-input\" placeholder=\"Ville\">\n    <input id=\"recipientCountry\" class=\"ml-input\" placeholder=\"Pays\" value=\"FR\">\n  <\/div>\n\n\n  <h2>Colis<\/h2>\n\n  <div class=\"ml-row\">\n    <input id=\"parcelWeight\" class=\"ml-input\" type=\"number\" step=\"0.1\" placeholder=\"Poids (kg)\">\n    <input id=\"parcelLength\" class=\"ml-input\" type=\"number\" placeholder=\"Longueur (cm)\">\n    <input id=\"parcelWidth\" class=\"ml-input\" type=\"number\" placeholder=\"Largeur (cm)\">\n    <input id=\"parcelHeight\" class=\"ml-input\" type=\"number\" placeholder=\"Hauteur (cm)\">\n  <\/div>\n\n  <h3>Mode d'exp\u00e9dition<\/h3>\n  <select id=\"shippingMode\" class=\"ml-input\">\n    <option value=\"\">S\u00e9lectionnez...<\/option>\n    <option value=\"carrier\">Transporteur (livraison \u00e0 domicile)<\/option>\n    <option value=\"relay\">Point relais<\/option>\n  <\/select>\n\n  <br><br>\n\n  <button id=\"submitBoxtal\" type=\"button\">Voir les transporteurs<\/button>\n\n  <div id=\"boxtal_map_container\" style=\"margin-top:20px; display:none;\"><\/div>\n  <div id=\"boxtal_offers\" style=\"margin-top:20px;\"><\/div>\n\n<\/div>\n\n<style>\n.ml-form { max-width: 700px; margin: auto; }\n.ml-input { width: 100%; padding: 12px; margin-bottom: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; }\n.ml-row { display: flex; gap: 10px; }\n.ml-row .ml-input { flex: 1; }\n\n.ml-address-group { position: relative; }\n\n.ml-suggestions {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  background: #fff;\n  border: 1px solid #ccc;\n  max-height: 180px;\n  overflow-y: auto;\n  width: 100%;\n  z-index: 9999;\n}\n.ml-suggestions div { padding: 6px 8px; cursor: pointer; }\n.ml-suggestions div:hover { background: #f0f0f0; }\n\n#boxtal_offers button {\n  display: block;\n  width: 100%;\n  margin-top: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n}\n\nbutton#submitBoxtal {\n  width: 100%;\n  padding: 14px;\n  background: #0073aa;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 18px;\n  cursor: pointer;\n}\nbutton#submitBoxtal:hover { background: #005f8d; }\n<\/style>\n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n    \/\/ -------- AUTOCOMPL\u00c9TION --------\n    async function autocompleteAddress(inputId, suggestionsId, zipId, cityId) {\n      const input = document.getElementById(inputId);\n      const container = document.getElementById(suggestionsId);\n\n      input.addEventListener(\"input\", async () => {\n        const q = input.value.trim();\n        container.innerHTML = \"\";\n        if (q.length < 3) return;\n\n        try {\n          const res = await fetch(\"https:\/\/api-adresse.data.gouv.fr\/search\/?q=\" + encodeURIComponent(q) + \"&#038;limit=5\");\n          const data = await res.json();\n\n          data.features.forEach(f => {\n            const s = document.createElement(\"div\");\n            s.textContent = f.properties.label;\n\n            s.onclick = () => {\n              input.value = f.properties.label;\n              document.getElementById(zipId).value = f.properties.postcode || \"\";\n              document.getElementById(cityId).value = f.properties.city || \"\";\n              container.innerHTML = \"\";\n            };\n\n            container.appendChild(s);\n          });\n\n        } catch (e) {\n          console.error(\"autocomplete error\", e);\n        }\n      });\n\n      document.addEventListener(\"click\", (e) => {\n        if (!container.contains(e.target) && e.target !== input) {\n          container.innerHTML = \"\";\n        }\n      });\n    }\n\n    autocompleteAddress(\"senderAddress\", \"senderAddress_suggestions\", \"senderZip\", \"senderCity\");\n    autocompleteAddress(\"recipientAddress\", \"recipientAddress_suggestions\", \"recipientZip\", \"recipientCity\");\n\n\n    \/\/ -------- VALIDATION DES CHAMPS --------\n    function validateUniqueForm() {\n      const required = [\n        \"senderFirstName\",\"senderLastName\",\"senderEmail\",\"senderPhone\",\n        \"senderAddress\",\"senderZip\",\"senderCity\",\n        \"recipientFirstName\",\"recipientLastName\",\"recipientEmail\",\"recipientPhone\",\n        \"recipientAddress\",\"recipientZip\",\"recipientCity\",\n        \"parcelWeight\",\"parcelLength\",\"parcelWidth\",\"parcelHeight\",\n        \"shippingMode\"\n      ];\n\n      for (const id of required) {\n        const el = document.getElementById(id);\n        if (!el || !el.value.trim()) {\n          alert(\"Veuillez remplir tous les champs obligatoires.\");\n          return false;\n        }\n      }\n      return true;\n    }\n\n    \/\/ -------- CONTR\u00d4LE POIDS + DIMENSIONS --------\n    function checkParcelFields() {\n      const parcelWeight = document.getElementById(\"parcelWeight\");\n      const parcelLength = document.getElementById(\"parcelLength\");\n      const parcelWidth = document.getElementById(\"parcelWidth\");\n      const parcelHeight = document.getElementById(\"parcelHeight\");\n\n      const w = parseFloat(parcelWeight.value || \"0\");\n      const L = parseFloat(parcelLength.value || \"0\");\n      const W = parseFloat(parcelWidth.value || \"0\");\n      const H = parseFloat(parcelHeight.value || \"0\");\n\n      const errors = [];\n\n      if (w <= 0) errors.push(\"Poids invalide.\");\n      if (w > 30) errors.push(\"Poids maximum d\u00e9pass\u00e9 (30 kg).\");\n\n      if (L <= 0 || W <= 0 || H <= 0) errors.push(\"Veuillez remplir toutes les dimensions.\");\n\n      if (L > 120) errors.push(\"Longueur maximale d\u00e9pass\u00e9e (120 cm).\");\n      if (W > 60) errors.push(\"Largeur maximale d\u00e9pass\u00e9e (60 cm).\");\n      if (H > 60) errors.push(\"Hauteur maximale d\u00e9pass\u00e9e (60 cm).\");\n\n      if (L + W + H > 300) errors.push(\"Somme des dimensions > 300 cm.\");\n\n      if (errors.length) {\n        alert(errors.join(\"\\n\"));\n        return false;\n      }\n\n      return true;\n    }\n\n    \/\/ -------- R\u00c9F\u00c9RENCES DES CHAMPS --------\n    const senderFirstName = document.getElementById(\"senderFirstName\");\n    const senderLastName  = document.getElementById(\"senderLastName\");\n    const senderAddress   = document.getElementById(\"senderAddress\");\n    const senderZip       = document.getElementById(\"senderZip\");\n    const senderCity      = document.getElementById(\"senderCity\");\n\n    const recipientFirstName = document.getElementById(\"recipientFirstName\");\n    const recipientLastName  = document.getElementById(\"recipientLastName\");\n    const recipientAddress   = document.getElementById(\"recipientAddress\");\n    const recipientZip       = document.getElementById(\"recipientZip\");\n    const recipientCity      = document.getElementById(\"recipientCity\");\n\n    const parcelWeight = document.getElementById(\"parcelWeight\");\n    const parcelLength = document.getElementById(\"parcelLength\");\n    const parcelWidth  = document.getElementById(\"parcelWidth\");\n    const parcelHeight = document.getElementById(\"parcelHeight\");\n\n    \/\/ -------- BOUTON --------\n    const btn = document.getElementById(\"submitBoxtal\");\n    if (!btn) return;\n\n    btn.onclick = async () => {\n        if (!validateUniqueForm()) return;\n        if (!checkParcelFields()) return;\n\n        const formData = new FormData();\n\n        \/\/ Produit\n        formData.append('add-to-cart', 395);\n        formData.append('product_id', 395);\n        formData.append('quantity', 1);\n\n        \/\/ Colis\n        formData.append('ml_weight', parcelWeight.value);\n        formData.append('ml_length', parcelLength.value);\n        formData.append('ml_width', parcelWidth.value);\n        formData.append('ml_height', parcelHeight.value);\n\n        \/\/ Exp\u00e9diteur\n        formData.append('ml_sender_firstname', senderFirstName.value);\n        formData.append('ml_sender_lastname', senderLastName.value);\n        formData.append('ml_sender_address', senderAddress.value);\n        formData.append('ml_sender_zip', senderZip.value);\n        formData.append('ml_sender_city', senderCity.value);\n\n        \/\/ Destinataire\n        formData.append('ml_recipient_firstname', recipientFirstName.value);\n        formData.append('ml_recipient_lastname', recipientLastName.value);\n        formData.append('ml_recipient_address', recipientAddress.value);\n        formData.append('ml_recipient_zip', recipientZip.value);\n        formData.append('ml_recipient_city', recipientCity.value);\n\n        const params = new URLSearchParams();\n        formData.forEach((v, k) => params.append(k, v));\n\n        await fetch(\"https:\/\/www.antsound.net\/?add-to-cart=395&\" + params.toString(), {\n            method: \"GET\"\n        });\n\n        window.location.href = \"https:\/\/www.antsound.net\/index.php\/panier\/\";\n    };\n\n});\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Exp\u00e9diteur Destinataire Colis Mode d&rsquo;exp\u00e9dition S\u00e9lectionnez&#8230;Transporteur (livraison \u00e0 domicile)Point relais Voir les transporteurs<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.antsound.net\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.antsound.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.antsound.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.antsound.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antsound.net\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":39,"href":"https:\/\/www.antsound.net\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":591,"href":"https:\/\/www.antsound.net\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/591"}],"wp:attachment":[{"href":"https:\/\/www.antsound.net\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}