/* ========================================================== TOUTDOUX — CSS pour YouCan À coller dans : Réglages en ligne > CSS/JavaScript > section CSS (Header) ========================================================== */ :root{ --td-ink:#1B2A41; --td-bamboo:#7A9D6F; --td-bamboo-dark:#5C7D54; --td-sand:#F5F1E8; --td-stone:#E9E2D2; --td-gold:#C99A3D; --td-white:#FFFFFF; --td-text:#2A2F36; --td-radius:14px; } /* Police (optionnel : à ajouter aussi en si YouCan le permet, sinon fallback système) */ .td-widget, .td-widget *{ font-family:'Work Sans', Arial, sans-serif; box-sizing:border-box; } .td-widget h1, .td-widget h2, .td-widget h3, .td-widget .td-display{ font-family:'Fraunces', Georgia, serif; color:var(--td-ink); font-weight:600; letter-spacing:-0.01em; } /* ---------- Bandeau annonce ---------- */ .td-announce{ background:var(--td-ink); color:var(--td-sand); overflow:hidden; white-space:nowrap; position:relative; } .td-announce-track{ display:inline-flex; gap:48px; animation:td-scroll 22s linear infinite; padding:9px 0; font-size:0.78rem; letter-spacing:0.03em; } @keyframes td-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @media (prefers-reduced-motion: reduce){ .td-announce-track{animation:none;} } /* ---------- Configurateur de pack ---------- */ .td-builder{ background:var(--td-ink); border-radius:26px; padding:44px 32px; color:var(--td-sand); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin:40px 0; } .td-builder .td-eyebrow{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:#B9CDB2; font-weight:600; margin-bottom:8px; display:block; } .td-builder p.td-desc{color:#C6CCD4; font-size:0.95rem; margin:12px 0 26px; max-width:420px;} .td-slider-wrap{margin-bottom:20px;} .td-widget input[type=range]{ width:100%; height:6px; border-radius:6px; background:#334158; -webkit-appearance:none; appearance:none; } .td-widget input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--td-gold); border:4px solid var(--td-ink); cursor:pointer; } .td-pack-readout{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px;} .td-pack-readout .td-pairs{font-family:'Fraunces',serif; font-size:2.4rem; font-weight:600; color:var(--td-white);} .td-pack-readout .td-pairs span{font-size:1rem; color:#B9CDB2; font-family:'Work Sans',sans-serif; font-weight:500;} .td-save{color:var(--td-gold); font-weight:600;} .td-pack-price{background:#22314A; border-radius:16px; padding:24px;} .td-pack-price .td-row{display:flex; justify-content:space-between; font-size:0.92rem; padding:8px 0; border-bottom:1px solid #33415866;} .td-pack-price .td-row:last-of-type{border-bottom:none;} .td-pack-price .td-total{font-size:1.5rem; font-family:'Fraunces',serif; color:var(--td-white); font-weight:600;} .td-btn-primary{ display:block; width:100%; text-align:center; margin-top:16px; background:var(--td-gold); color:var(--td-ink); padding:14px 20px; border-radius:100px; font-weight:600; font-size:0.95rem; border:none; cursor:pointer; transition:background .15s; } .td-btn-primary:hover{background:#E0B453;} @media (max-width:760px){ .td-builder{grid-template-columns:1fr;} } /* ---------- FAQ ---------- */ .td-faq-item{border-bottom:1px solid var(--td-stone);} .td-faq-q{ width:100%; text-align:left; background:none; padding:18px 0; border:none; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1rem; color:var(--td-ink); cursor:pointer; } .td-faq-q .td-plus{font-size:1.4rem; color:var(--td-bamboo-dark); transition:transform .2s;} .td-faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:0.92rem; color:#5B6672;} .td-faq-a p{padding-bottom:16px; margin:0;} .td-faq-item.td-open .td-faq-q .td-plus{transform:rotate(45deg);} /* ---------- Réassurance ---------- */ .td-reassure{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; background:var(--td-sand); padding:32px 0; margin:20px 0; } .td-reassure .td-item{text-align:center; padding:12px;} .td-reassure .td-item .td-icon{font-size:1.4rem; margin-bottom:6px;} .td-reassure .td-item h4{font-size:0.9rem; margin:0 0 4px;} .td-reassure .td-item p{font-size:0.78rem; color:#5B6672; margin:0;} @media (max-width:700px){.td-reassure{grid-template-columns:1fr 1fr;}} Aller au contenu
  • Save 20% on your first order
  • Save 20% on your first order
  • Save 20% on your first order
  • Save 20% on your first order
  • Save 20% on your first order
  • Save 20% on your first order

أحدث المنتجات و الأكثر مبيعاً في تونس

المنتجات الأكثر مبيعاً في تونس مع Clic & Buy إنتي راك الباي

home Collections arrow_right_alt أحدث المنتجات و الأكثر مبيعاً في تونس arrow_right_alt
chevron_backward Précédent 1 2 3 4 5 Suivant chevron_forward
/* ========================================================== 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'; } }); }); } });