اختر عدد مشاهدات الصفحات الشهرية الخاصة بك :



    document.addEventListener(“DOMContentLoaded”, function() {

    // 1. Récupérer la liste de liens dans .pricing-cycle
    let pricingCycleLinks = document.querySelectorAll(‘.pricing-cycle li a’);

    // 2. Sélecteur “custom select” cible
    const pageViewsSelect = document.getElementById(‘pageViewsSelect’);
    const pageViewsSelectedOption = pageViewsSelect.querySelector(‘.selected-option’);
    const pageViewsOptionsList = pageViewsSelect.querySelector(‘.options-list’);

    // Labels à mettre à jour
    const pageViewsLabelPrimary = pageViewsSelectedOption.querySelector(‘.label-primary’);
    const pageViewsLabelSecondary = pageViewsSelectedOption.querySelector(‘.label-secondary’);

    // 3. Ouverture / fermeture de la liste
    pageViewsSelectedOption.addEventListener(‘click’, () => {
    pageViewsOptionsList.classList.toggle(‘show’);
    });

    document.addEventListener(‘click’, (event) => {
    if (!pageViewsSelect.contains(event.target)) {
    pageViewsOptionsList.classList.remove(‘show’);
    }
    });

    // 4. Récupération de l’ancre depuis l’URL
    // Exemple d’URL : https://…/#cycle-entre-850-001-et-900-000
    // window.location.hash => “#cycle-entre-850-001-et-900-000”
    let anchorHash = window.location.hash || “”; // ex: “#cycle-entre-850-001-et-900-000”

    // 4.1. Fonction pour trouver le lien correspondant à l’ancre
    window.findLinkByHash = function(hash) {
    if (!hash) return null; // pas d’ancre du tout
    // Cherche un
    dont href === “#cycle-entre-850-001-et-900-000″ (ex.)
    return Array.from(pricingCycleLinks).find(link => link.getAttribute(‘href’) === hash.replace(‘cycle-‘,”));
    }

    window.triggerActiveOption = function() {
    anchorHash = window.location.hash || “”;
    console.log(anchorHash);
    // On recherche d’abord le lien correspondant au hash courant
    const linkMatchingHash = findLinkByHash(anchorHash);
    console.log(linkMatchingHash);
    // Ou, à défaut, on prend le premier lien de .pricing-cycle
    const defaultLink = linkMatchingHash || pricingCycleLinks[0];

    // Si un lien est trouvé, on déclenche son clic
    if (defaultLink) {
    document.querySelectorAll(‘.pricing-cycle li a’)[0].click();
    defaultLink.click();
    }
    }

    // 4.2. Construit le custom select
    function populatePageViewsSelect() {
    // On vide les

  • existants
    pageViewsOptionsList.innerHTML = “”;

    // Si aucun lien, on affiche un message
    if (pricingCycleLinks.length === 0) {
    pageViewsLabelPrimary.textContent = “Aucun choix”;
    return;
    }

    // Cherche un lien correspondant au hash
    let linkMatchingHash = findLinkByHash(anchorHash);

    // Si on l’a trouvé, on le prend comme sélection par défaut
    // Sinon, on prend le premier
    let defaultLink = linkMatchingHash || pricingCycleLinks[0];

    // Mise à jour de la zone sélectionnée (son texte)
    pageViewsLabelPrimary.textContent = defaultLink.textContent.trim();
    pageViewsLabelSecondary.textContent = “”;

    // Pour chaque lien, on construit un

  • pricingCycleLinks.forEach(link => {
    const textValue = link.textContent.trim();
    const li = document.createElement(‘li’);
    li.innerHTML = `${textValue}`;

    // Clic => sélection
    li.addEventListener(‘click’, () => {
    pageViewsLabelPrimary.textContent = textValue;
    pageViewsLabelSecondary.textContent = “”;
    pageViewsOptionsList.classList.remove(‘show’);
    // On déclenche un clic sur le lien original (si nécessaire)
    link.click();
    updatePriceWithSms();
    });

    // On ajoute le

  • pageViewsOptionsList.appendChild(li);
    });
    }

    // 5. Appel initial pour remplir le sélecteur
    populatePageViewsSelect();

    // Exemple de code JavaScript pour gérer l’événement de bascule SMS
    const smsToggle = document.getElementById(‘smsToggle’);
    smsToggle.addEventListener(‘change’, function() {
    if (smsToggle.checked) {
    document.querySelectorAll(‘.sms_options’).forEach(option => {
    option.style.display = ‘flex’;
    });
    } else {
    document.querySelectorAll(‘.sms_options’).forEach(option => {
    option.style.display = ‘none’;
    });
    }
    updatePriceWithSms();
    });
    });

    Chargement…


    // — Sélecteurs DOM
    const countrySelectContainer = document.getElementById(“countrySelect”);
    const countrySelectedOption = countrySelectContainer.querySelector(“.selected-option”);
    const countryOptionsList = countrySelectContainer.querySelector(“.options-list”);
    const countrySearchInput = countrySelectContainer.querySelector(“.search-input”);

    // Éléments dynamiques (zone affichée)
    const countryLabelPrimary = countrySelectedOption.querySelector(“.label-primary”);
    const countryLabelSecondaryImg = countrySelectedOption.querySelector(“.label-secondary img”);

    // Tableau mémoire de tous les pays reçus
    let countryListAllData = [];

    // 1. Ouverture / fermeture du menu
    countrySelectedOption.addEventListener(“click”, function() {
    countryOptionsList.classList.toggle(“show”);
    });

    // 2. Fermer la liste si on clique en dehors
    document.addEventListener(“click”, function(e) {
    if (!countrySelectContainer.contains(e.target)) {
    countryOptionsList.classList.remove(“show”);
    }
    });

    // 3. Requête AJAX pour récupérer la liste complète des pays
    fetch(“https://gestion.shopimind.com/smsprice.php?action=getSmsCountries”)
    .then(response => {
    if (!response.ok) {
    throw new Error(“Erreur HTTP ” + response.status);
    }
    return response.json();
    })
    .then(data => {
    // data contient un tableau d’objets (ex: { name, iso, selected })
    console.log(“Pays reçus :”, data);
    countryListAllData = data;

    // Trouver le pays avec selected = true, sinon prendre le premier
    const selectedCountry = countryListAllData.find(c => c.selected === true);

    if (selectedCountry) {
    setCountrySelected(selectedCountry);
    } else if (countryListAllData.length > 0) {
    setCountrySelected(countryListAllData[0]);
    } else {
    countryLabelPrimary.textContent = “Aucun pays trouvé”;
    }

    // Construire la liste complète
    generateCountryList(countryListAllData);
    })
    .catch(error => {
    console.error(“Erreur de récupération des pays:”, error);
    countryLabelPrimary.textContent = “Erreur de chargement”;
    });

    // 4. Fonction pour (re)construire la liste

  • en partant du tableau de pays
    function generateCountryList(listOfCountries) {
    // Supprimer les

  • pays déjà présents (sauf celui du champ de recherche)
    const existingLis = countryOptionsList.querySelectorAll(“li.country-item”);
    existingLis.forEach(li => li.remove());

    listOfCountries.forEach(country => {
    const li = document.createElement(“li”);
    li.classList.add(“country-item”);
    li.innerHTML = `
    ${country.name}

    ${country.name}

    `;

    // Au clic, on “sélectionne” ce pays
    li.addEventListener(“click”, () => {
    setCountrySelected(country);
    // Fermer la liste
    countryOptionsList.classList.remove(“show”);
    });

    // On ajoute l’élément

  • dans la liste
    countryOptionsList.appendChild(li);
    });
    }

    /**
    * 4.1. Met à jour l’affichage du pays sélectionné
    * ET lance la requête pour récupérer les prix.
    */
    function setCountrySelected(country) {
    // Mettre à jour l’affichage
    countryLabelPrimary.textContent = country.name;
    countryLabelSecondaryImg.src = `https://flagcdn.com/w20/${country.iso.toLowerCase()}.png`;
    countryLabelSecondaryImg.alt = country.name;
    document.querySelectorAll(“.price_info_flag”).forEach(el => {
    el.innerHTML = `${country.name}`;
    });
    // 4.2. Requête pour getSmsPricesByCountry (ISO en majuscules)
    const isoUpper = country.iso.toUpperCase();
    const url = `https://gestion.shopimind.com/smsprice.php?action=getSmsPricesByCountry&country=${isoUpper}`;

    fetch(url)
    .then(res => {
    if (!res.ok) {
    throw new Error(“Erreur HTTP ” + res.status);
    }
    return res.json();
    })
    .then(pricesData => {
    // Simple console.log pour le retour
    console.log(`SMS Prices pour pays [${isoUpper}] :`, pricesData);
    populateVolumeSmsSelect(pricesData.plan);

    document.querySelectorAll(“.price_sms_plan”).forEach(el => {
    el.textContent = `${pricesData.plan} €`;
    });
    document.querySelectorAll(“.price_sms_standard”).forEach(el => {
    el.textContent = `${pricesData.standard} €`;
    });
    document.querySelectorAll(“.price_sms_premium”).forEach(el => {
    el.textContent = `${pricesData.premium} €`;
    });
    document.querySelectorAll(“.price_sms_ultimate”).forEach(el => {
    el.textContent =`${pricesData.ultimate} €`;
    });
    })
    .catch(err => {
    console.error(“Erreur de récupération des smsPrices:”, err);
    });
    }

    // 5. Filtrer la liste en fonction de la recherche
    countrySearchInput.addEventListener(“keyup”, function() {
    const query = countrySearchInput.value.toLowerCase();

    // On filtre le tableau complet countryListAllData
    const filtered = countryListAllData.filter(country =>
    country.name.toLowerCase().includes(query)
    );

    // On régénère la liste à partir du résultat
    generateCountryList(filtered);
    });



    • // On référence les éléments du sélecteur Volume SMS
      const volumeSmsContainer = document.getElementById(“volumeSMS”);
      const volumeSmsSelectedOption = volumeSmsContainer.querySelector(“.selected-option”);
      const volumeSmsOptionsList = volumeSmsContainer.querySelector(“.options-list”);
      const volumeSmsLabelPrimary = volumeSmsSelectedOption.querySelector(“.label-primary”);
      const volumeSmsLabelSecondary = volumeSmsSelectedOption.querySelector(“.label-secondary”);

      // Ouvrir / fermer la liste au clic
      volumeSmsSelectedOption.addEventListener(“click”, function() {
      volumeSmsOptionsList.classList.toggle(“show”);
      });

      // Fermer si on clique en dehors
      document.addEventListener(“click”, function(e) {
      if (!volumeSmsContainer.contains(e.target)) {
      volumeSmsOptionsList.classList.remove(“show”);
      }
      });

      let priceSms = false;
      function updatePriceWithSms() {
      triggerActiveOption();
      if(document.getElementById(‘smsToggle’).checked) {
      setTimeout(function() {
      console.log(priceSms);
      // 1. Récupérer les éléments .price
      const priceElements = document.querySelectorAll(“.price”);

      // 2. Stocker la valeur numérique de base de chaque abonnement
      // pour éviter de cumuler plusieurs fois si l’utilisateur change de pack.
      const baseSubscriptionValues = [];

      priceElements.forEach((priceEl, index) => {
      // priceEl.innerHTML ressemble à “49,00€/mois
      // On veut extraire la partie “49,00€” avant le
      // Le premier childNode est généralement le #text “49,00€”
      const textNode = priceEl.childNodes[0]; // #text
      if (!textNode) return;

      const textContent = textNode.textContent.trim(); // “49,00€”
      // On cherche la partie numérique et la partie devise
      // Exemple: “49,00€” => group1: “49,00”, group2: “€”
      const match = textContent.match(/([\d.,]+)(.*)/);
      if (!match) return;

      // match[1] => “49,00”
      // match[2] => “€”
      let numericStr = match[1].replace(“,”, “.”); // => “49.00”
      let baseValue = parseFloat(numericStr);
      if (isNaN(baseValue)) baseValue = 0;

      baseSubscriptionValues[index] = baseValue;

      const packValue = parseFloat(priceSms.replace(“,”, “.”)); // 20.00

      const sum = baseValue + packValue; // 69

      // On repasse en chaîne (2 décimales, virgule) : “69,00”
      const sumFormatted = sum.toFixed(2).replace(“.”, “,”);

      // On remplace l’ancienne valeur par la nouvelle
      priceEl.innerHTML = priceEl.innerHTML.replace(match[1], sumFormatted);
      console.log(baseValue);
      });
      },10);
      }
      }
      // Variable globale (ou dans le scope parent) qui mémorise le volume sélectionné.
      let currentSelectedVolume = null;

      // Votre fonction existante
      function populateVolumeSmsSelect(smsUnitPrice) {
      const volumes = [100, 200, 500, 1000, 2000, 4000, 10000, 15000, 20000, 50000, 100000];

      // Vider la liste existante
      volumeSmsOptionsList.innerHTML = “”;

      // Pour chaque volume, on crée un

    • volumes.forEach(volume => {
      // Calcul du prix total
      const totalPrice = volume * smsUnitPrice;
      const totalPriceFormatted = totalPrice.toFixed(2).replace(“.”, “,”);

      // On crée le

    • const li = document.createElement(“li”);
      li.innerHTML = `
      ${volume} SMS
      ${totalPriceFormatted} €
      `;

      // Gestion du clic
      li.addEventListener(“click”, () => {
      // Mémoriser le volume choisi
      currentSelectedVolume = volume;

      // Mettre à jour l’affichage du sélecteur
      volumeSmsLabelPrimary.textContent = `${volume} SMS`;
      volumeSmsLabelSecondary.textContent = `${totalPriceFormatted} €`;

      // Mettre à jour la variable priceSms et relancer le calcul
      priceSms = totalPriceFormatted;
      updatePriceWithSms();

      // Fermer la liste
      volumeSmsOptionsList.classList.remove(“show”);
      });

      volumeSmsOptionsList.appendChild(li);
      });

      // Restituer la sélection si on en a déjà une :
      if (currentSelectedVolume !== null && volumes.includes(currentSelectedVolume)) {
      // Recalculer le prix avec le nouveau smsUnitPrice
      const totalPrice = currentSelectedVolume * smsUnitPrice;
      const totalPriceFormatted = totalPrice.toFixed(2).replace(“.”, “,”);

      volumeSmsLabelPrimary.textContent = `${currentSelectedVolume} SMS`;
      volumeSmsLabelSecondary.textContent = `${totalPriceFormatted} €`;

      // Mettre à jour priceSms et le calcul
      priceSms = totalPriceFormatted;
      updatePriceWithSms();
      }
      else if (volumes.length > 0) {
      // Si aucune sélection précédente : on prend par défaut le premier volume
      const defaultVolume = volumes[0];
      currentSelectedVolume = defaultVolume; // on mémorise

      const defaultPrice = (defaultVolume * smsUnitPrice).toFixed(2).replace(“.”, “,”);
      volumeSmsLabelPrimary.textContent = `${defaultVolume} SMS`;
      volumeSmsLabelSecondary.textContent = `${defaultPrice} €`;

      priceSms = defaultPrice;
      updatePriceWithSms();
      }
      else {
      // Aucun volume
      volumeSmsLabelPrimary.textContent = “–“;
      volumeSmsLabelSecondary.textContent = “–“;
      }
      }

      // Exemple d’appel à la fonction
      // (dans la vraie vie, vous pouvez appeler cette fonction après avoir déterminé le prix unitaire,
      // ou suite à un événement, un clic, etc.)
      // Prix unitaire = 0.045€ (4,5 centimes par SMS)
      populateVolumeSmsSelect(0.045);