/* ==========================================================
TOUTDOUX — JS pour YouCan
À coller dans : Réglages en ligne > CSS/JavaScript > section JavaScript (Footer)
IMPORTANT — à lire avant de coller :
Ce script cherche des emplacements précis (par id) où injecter
chaque bloc. Comme je n'ai pas accès à la structure HTML de ton
thème YouCan, tu dois ajouter ces 3 balises toi-même là où tu
veux que chaque bloc apparaisse (via un bloc "HTML personnalisé"
si ton thème YouCan en propose un, ou en demandant au support
YouCan comment insérer une div à un endroit précis) :
→ bandeau annonce (en haut)
→ configurateur de pack (page produit)
→ FAQ (bas de page produit ou page dédiée)
Si un slot n'existe pas, le script l'ignore simplement (pas d'erreur).
========================================================== */
document.addEventListener('DOMContentLoaded', function () {
// ---------- 1. Bandeau annonce ----------
var announceSlot = document.getElementById('td-announce-slot');
if (announceSlot) {
announceSlot.innerHTML =
'
' +
'
' +
'🌿 Livraison offerte partout en Tunisie' +
'💳 Paiement à la livraison disponible' +
'🔁 Échange gratuit sous 15 jours' +
'🌿 Livraison offerte partout en Tunisie' +
'💳 Paiement à la livraison disponible' +
'🔁 Échange gratuit sous 15 jours' +
'
' +
'
';
}
// ---------- 2. Configurateur de pack ----------
var builderSlot = document.getElementById('td-builder-slot');
if (builderSlot) {
builderSlot.innerHTML =
'
' +
'
' +
'Pack sur-mesure' +
'
Choisissez votre nombre de paires
' +
'
Faites glisser pour composer votre pack. Le prix par paire baisse automatiquement à chaque palier.
' +
'' +
'
' +
'
6 paires
' +
'
Économie de 20%
' +
'
' +
'
' +
'
' +
'
Paires sélectionnées6 paires
' +
'
Prix normal60 DT
' +
'
Votre prix45 DT
' +
'' +
'
' +
'
';
var tiers = [
{ pairs: 3, normal: 30, price: 25 },
{ pairs: 6, normal: 60, price: 45 },
{ pairs: 9, normal: 90, price: 60 },
{ pairs: 12, normal: 120, price: 75 },
{ pairs: 16, normal: 160, price: 95 }
];
var slider = document.getElementById('tdPackSlider');
var pairsCount = document.getElementById('tdPairsCount');
var saveLabel = document.getElementById('tdSaveLabel');
var rowPairs = document.getElementById('tdRowPairs');
var rowNormal = document.getElementById('tdRowNormal');
var rowTotal = document.getElementById('tdRowTotal');
var ctaTotal = document.getElementById('tdCtaTotal');
function renderPack(i) {
var t = tiers[i];
var savePct = Math.round((1 - t.price / t.normal) * 100);
pairsCount.innerHTML = t.pairs + ' paires';
saveLabel.textContent = 'Économie de ' + savePct + '%';
rowPairs.textContent = t.pairs + ' paires';
rowNormal.textContent = t.normal + ' DT';
rowTotal.textContent = t.price + ' DT';
ctaTotal.textContent = 'Commander mon pack — ' + t.price + ' DT';
}
slider.addEventListener('input', function (e) {
renderPack(Number(e.target.value));
});
renderPack(1);
// NOTE : le bouton "Commander" ne fait qu'afficher le prix pour l'instant.
// Pour qu'il ajoute réellement le bon pack au panier YouCan, il faut le
// relier à un product ID / variant ID YouCan par palier — dis-le-moi si
// tu veux que je prépare cette partie une fois tes variantes créées.
}
// ---------- 3. FAQ ----------
var faqSlot = document.getElementById('td-faq-slot');
if (faqSlot) {
var faqData = [
['Livrez-vous partout en Tunisie ?', 'Oui, nous livrons dans tout le pays sous 24 à 48h, livraison offerte dès le premier pack.'],
['Puis-je payer à la livraison ?', 'Oui, le paiement à la livraison est disponible partout, en plus des paiements en ligne.'],
['Quelle est la matière exacte ?', 'Une fibre de bambou naturelle, reconnue pour ses propriétés anti-odeurs et respirantes.'],
['Que faire si la taille ne convient pas ?', 'Échange gratuit sous 15 jours, sans justification à fournir.']
];
var html = '
';
faqData.forEach(function (item, i) {
html +=
'
' +
'' +
'
' + item[1] + '
' +
'
';
});
html += '
';
faqSlot.innerHTML = html;
document.querySelectorAll('#tdFaqList .td-faq-item').forEach(function (item) {
var q = item.querySelector('.td-faq-q');
var a = item.querySelector('.td-faq-a');
q.addEventListener('click', function () {
var isOpen = item.classList.contains('td-open');
document.querySelectorAll('#tdFaqList .td-faq-item').forEach(function (i) {
i.classList.remove('td-open');
i.querySelector('.td-faq-a').style.maxHeight = null;
});
if (!isOpen) {
item.classList.add('td-open');
a.style.maxHeight = a.scrollHeight + 'px';
}
});
});
}
});