H07RN-F / Code H85

Découvrez les compositions du H07RN-F

<!-- H07RN-F — tableau filtré + devis contextuel
     Données dans script[type=application/json] — compatible wpautop
     setField avec fallback jQuery pour Gravity Forms -->
<script type="application/json" id="sab-cfg">{"fc": "#input_7_1", "fs": "#input_7_3", "fx": "#input_7_15", "fa": "#gform_7", "page": 20}</script>
<script type="application/json" id="sab-data">[["H8500018", "1", "1,50", "7,2", "50"], ["H8500028", "1", "2,50", "9,0", "65"], ["H8500048", "1", "4,00", "9,1", "89"], ["H8500068", "1", "6,00", "10,0", "120"], ["H8500108", "1", "10,0", "12,0", "190"], ["H8500168", "1", "16,0", "13,5", "260"], ["H8500258", "1", "25,0", "16,0", "375"], ["H8500358", "1", "35,0", "18,0", "492"], ["H8500508", "1", "50,0", "20,7", "675"], ["H8500708", "1", "70,0", "23,5", "908"], ["H8500958", "1", "95,0", "26,1", "1 170"], ["H8501208", "1", "120", "28,7", "1 445"], ["H8501508", "1", "150", "31,5", "1 783"], ["H8501858", "1", "185", "34,5", "2 125"], ["H8502008", "1", "240", "38,4", "2 733"], ["H8502018", "1", "300", "42,0", "3 348"], ["H8502108", "2", "1,00", "10,1", "97"], ["H8502158", "2", "1,50", "11,1", "120"], ["H8502258", "2", "2,50", "13,2", "170"], ["H8502408", "2", "4,00", "15,2", "221"], ["H8502608", "2", "6,00", "16,9", "300"], ["H8502618", "2", "10,0", "22,7", "539"], ["H8502628", "2", "16,0", "25,8", "722"], ["H8502638", "2", "25,0", "31,0", "1 124"], ["H8502648", "2", "35,0", "34,5", "1 421"], ["H8503108", "3", "1,00", "10,6", "120"], ["H8503158", "3", "1,50", "12,0", "145"], ["H8503258", "3", "2,50", "14,1", "205"], ["H8503408", "3", "4,00", "16,3", "280"], ["H8503608", "3", "6,00", "18,1", "375"], ["H8503618", "3", "10,0", "24,3", "682"], ["H8503628", "3", "16,0", "27,7", "913"], ["H8503638", "3", "25,0", "33,1", "1 390"], ["H8503648", "3", "35,0", "37,2", "1 799"], ["H8504108", "4", "1,00", "12,0", "145"], ["H8504158", "4", "1,50", "13,2", "175"], ["H8504258", "4", "2,50", "15,6", "250"], ["H8504408", "4", "4,00", "18,0", "345"], ["H8504608", "4", "6,00", "20,1", "465"], ["H8504618", "4", "10,0", "26,6", "845"], ["H8504628", "4", "16,0", "30,2", "1 138"], ["H8504638", "4", "25,0", "36,7", "1 760"], ["H8504648", "4", "35,0", "41,2", "2 265"], ["H8504658", "4", "50,0", "47,6", "3 136"], ["H8504668", "4", "70,0", "54,1", "4 121"], ["H8504678", "4", "95,0", "61,1", "5 393"], ["H8505108", "5", "1,00", "13,2", "175"], ["H8505158", "5", "1,50", "14,5", "210"], ["H8505258", "5", "2,50", "17,1", "305"], ["H8505408", "5", "4,00", "20,0", "422"], ["H8505608", "5", "6,00", "22,3", "575"], ["H8505618", "5", "10,0", "29,2", "1 033"], ["H8505628", "5", "16,0", "33,4", "1 400"], ["H8505638", "5", "25,0", "40,5", "2 183"], ["H8505648", "5", "35,0", "45,2", "2 786"], ["H8505658", "5", "50,0", "53,1", "3 740"], ["H8505668", "5", "70,0", "60,1", "5 113"], ["H8507158", "7", "1,50", "18,8", "337"], ["H8507258", "7", "2,50", "21,9", "463"], ["H8512158", "12", "1,50", "22,5", "500"], ["H8512258", "12", "2,50", "26,5", "702"], ["H8519158", "19", "1,50", "26,4", "720"], ["H8519258", "19", "2,50", "31,0", "1 030"], ["H8524158", "24", "1,50", "30,8", "915"], ["H8524258", "24", "2,50", "36,5", "1 312"], ["H8527158", "27", "1,50", "31,5", "1 100"]]</script>

<style>
.sab-tbl-wrap *{box-sizing:border-box;margin:0;padding:0;font-family:"Inter",sans-serif}
.sab-filter-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:#f2f2f3;border:1px solid #e4e4e5;border-radius:8px;margin-bottom:14px}
.sab-filter-bar label{font-size:12px;font-weight:600;color:#6b6b6e;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.sab-filter-bar select{font-size:13px;padding:6px 10px;border:1px solid #e4e4e5;border-radius:6px;background:#fff;color:#0e0e0f;font-family:"Inter",sans-serif;min-width:110px;cursor:pointer}
.sab-filter-bar select:focus{outline:2px solid #009FE3;outline-offset:1px;border-color:transparent}
.sab-reset{font-size:12px;color:#009FE3;background:none;border:none;cursor:pointer;font-family:"Inter",sans-serif;padding:0;font-weight:500;margin-left:4px}
.sab-reset:hover{text-decoration:underline}
.sab-count{font-size:12px;color:#6b6b6e;margin-left:auto;white-space:nowrap}
.sab-table-scroll{border:1px solid #e4e4e5;border-radius:10px;overflow:hidden;overflow-x:auto}
.sab-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:580px}
.sab-table thead th{background:#009FE3;color:#fff;padding:10px 14px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.sab-table thead th:first-child{text-align:left}
.sab-table thead th.th-action{text-align:center}
.sab-table tbody tr{border-bottom:1px solid #e4e4e5;transition:background .1s}
.sab-table tbody tr:last-child{border-bottom:none}
.sab-table tbody tr:hover{background:#f0f9fe}
.sab-table td{padding:8px 14px;color:#0e0e0f;vertical-align:middle}
.sab-table td.s-ref{font-size:12px;color:#0077B3;font-weight:500}
.sab-table td.s-c,.sab-table td.s-s,.sab-table td.s-n{text-align:center}
.sab-table td.s-c{font-weight:600}
.sab-table td.s-action{text-align:center;padding:6px 10px}
.sab-nores{display:none;text-align:center;padding:28px 20px;background:#f0f9fe;border-top:1px solid #e4e4e5}
.sab-nores-title{font-size:14px;font-weight:600;color:#0e0e0f;margin-bottom:6px}
.sab-nores-sub{font-size:13px;color:#6b6b6e;margin-bottom:16px;line-height:1.6}
.sab-nores-btn{background:#009FE3;color:#fff;font-family:"Inter",sans-serif;font-size:13px;font-weight:600;padding:9px 18px;border:none;border-radius:6px;cursor:pointer}
.sab-nores-btn:hover{background:#007DB5}
.sab-showmore-wrap{display:none;padding:14px;text-align:center;border-top:1px solid #e4e4e5}
.sab-showmore-btn{background:transparent;color:#009FE3;border:1.5px solid #009FE3;font-family:"Inter",sans-serif;font-size:13px;font-weight:600;padding:8px 20px;border-radius:6px;cursor:pointer}
.sab-showmore-btn:hover{background:#009FE3;color:#fff}
.sab-showmore-info{font-size:12px;color:#6b6b6e;margin-top:6px}
.sab-btn-devis{display:inline-flex;align-items:center;gap:5px;background:transparent;color:#009FE3;border:1.5px solid #009FE3;font-family:"Inter",sans-serif;font-size:11px;font-weight:600;padding:5px 11px;border-radius:5px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.sab-btn-devis:hover{background:#009FE3;color:#fff}
.sab-btn-devis.done{background:#0A7A45;border-color:#0A7A45;color:#fff;pointer-events:none}
.sab-custom-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;margin-top:12px;background:#f0f9fe;border:1px solid #b3ddf5;border-left:4px solid #009FE3;border-radius:8px;flex-wrap:wrap}
.sab-custom-title{font-size:13px;font-weight:600;color:#0e0e0f;margin-bottom:3px}
.sab-custom-sub{font-size:12px;color:#4a4a4e;line-height:1.5}
.sab-custom-btn{background:#009FE3;color:#fff;font-family:"Inter",sans-serif;font-size:13px;font-weight:600;padding:10px 18px;border:none;border-radius:6px;cursor:pointer;flex-shrink:0}
.sab-custom-btn:hover{background:#007DB5}
.sab-toast{position:fixed;top:28px;right:28px;z-index:99999;background:#0A7A45;color:#fff;font-family:"Inter",sans-serif;font-size:13px;font-weight:500;padding:13px 20px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.2);opacity:0;transform:translateY(-12px);transition:opacity .25s,transform .25s;pointer-events:none}
.sab-toast.show{opacity:1;transform:translateY(0)}
.sab-toast.warn{background:#854F0B}
</style>

<div class="sab-tbl-wrap">
<div class="sab-filter-bar">
<label for="sabFC">Nb conducteurs</label>
<select id="sabFC"><option value="">Tous</option></select>
<label for="sabFS">Section (mm&sup2;)</label>
<select id="sabFS"><option value="">Toutes</option></select>
<button class="sab-reset" id="sabReset">&#10005; R&eacute;initialiser</button>
<span class="sab-count" id="sabCnt"></span>
</div>
<div class="sab-table-scroll">
<table class="sab-table">
<thead><tr>
<th>R&eacute;f&eacute;rence</th>
<th>Nb conducteurs</th>
<th>Section (mm&sup2;)</th>
<th>&Oslash; ext. max. (mm)</th>
<th>Poids (kg/km)</th>
<th class="th-action">Devis</th>
</tr></thead>
<tbody id="sabTbody"></tbody>
</table>
<div class="sab-nores" id="sabNores">
<div class="sab-nores-title">Cette composition n&rsquo;est pas dans notre catalogue standard</div>
<div class="sab-nores-sub">SAB France fabrique des c&acirc;bles sur mesure.<br>Indiquez vos besoins et notre &eacute;quipe vous r&eacute;pond sous 24&nbsp;h.</div>
<button class="sab-nores-btn" id="sabNoresBtn">Demander une composition sur mesure</button>
</div>
</div>
<div class="sab-showmore-wrap" id="sabShowmoreWrap">
<button class="sab-showmore-btn" id="sabShowmoreBtn">Afficher plus de compositions</button>
<div id="sabShowmoreInfo"></div>
</div>
<div class="sab-custom-wrap">
<div>
<div class="sab-custom-title">Vous ne trouvez pas votre composition&nbsp;?</div>
<div class="sab-custom-sub">SAB France fabrique des c&acirc;bles H07RN-F sur mesure &mdash; r&eacute;ponse sous 24&nbsp;h</div>
</div>
<button class="sab-custom-btn" id="sabEncartBtn">Demander une composition sur mesure</button>
</div>
</div>
<div class="sab-toast" id="sabToast"><span id="sabToastTxt"></span></div>

<script>
(function() {
  var C = JSON.parse(document.getElementById("sab-cfg").textContent);
  var D = JSON.parse(document.getElementById("sab-data").textContent);
  var fil = [], vis = C.page, filt = false, tT;
  var $ = function(id) { return document.getElementById(id); };
  var tb = $("sabTbody"), fc = $("sabFC"), fs = $("sabFS"), cnt = $("sabCnt");
  var nores = $("sabNores"), toast = $("sabToast"), toastTxt = $("sabToastTxt");
  var sw = $("sabShowmoreWrap"), sb = $("sabShowmoreBtn"), si = $("sabShowmoreInfo");

  // Popule les selects
  var conds = [], sects = [];
  D.forEach(function(r) {
    if (conds.indexOf(r[1]) < 0) conds.push(r[1]);
    if (sects.indexOf(r[2]) < 0) sects.push(r[2]);
  });
  conds.sort(function(a, b) { return +a - +b; });
  sects.sort(function(a, b) { return parseFloat(a.replace(",",".")) - parseFloat(b.replace(",",".")); });
  conds.forEach(function(v) { var o = document.createElement("option"); o.value = v; o.textContent = v; fc.appendChild(o); });
  sects.forEach(function(v) { var o = document.createElement("option"); o.value = v; o.textContent = v + " mm²"; fs.appendChild(o); });

  // setField avec fallback jQuery pour Gravity Forms
  function setField(sel, val) {
    var el = document.querySelector(sel);
    if (!el) return false;
    el.value = val;
    if (typeof jQuery !== "undefined") {
      jQuery(el).val(val).trigger("change").trigger("input");
    } else {
      ["input", "change"].forEach(function(e) { el.dispatchEvent(new Event(e, { bubbles: true })); });
    }
    return true;
  }

  // setSelect : cherche l'option correspondante
  function setSelect(sel, val) {
    var el = document.querySelector(sel);
    if (!el) return false;
    if (el.tagName !== "SELECT") return setField(sel, val);
    var opts = Array.from(el.options);
    var n = parseFloat(val.replace(",","."));
    var match = opts.find(function(o) { return o.value === val || o.text.trim() === val; });
    if (!match && !isNaN(n)) match = opts.find(function(o) { return Math.abs(parseFloat(o.value.replace(",",".")) - n) < 0.001; });
    if (!match) match = opts.find(function(o) { return o.value.includes(val) || o.text.includes(val); });
    if (match) {
      el.value = match.value;
      if (typeof jQuery !== "undefined") { jQuery(el).val(match.value).trigger("change"); }
      else { el.dispatchEvent(new Event("change", { bubbles: true })); }
      return true;
    }
    return setField(sel, val);
  }

  function scrollForm() {
    var t = document.querySelector(C.fa) || document.querySelector(".gform_wrapper");
    if (t) window.scrollTo({ top: t.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
  }

  function showToast(m, w) {
    toastTxt.textContent = m; toast.classList.toggle("warn", !!w);
    toast.classList.add("show"); clearTimeout(tT);
    tT = setTimeout(function() { toast.classList.remove("show"); }, 3500);
  }

  function makeRow(r) {
    var tr = document.createElement("tr");
    [["s-ref",r[0]],["s-c",r[1]],["s-s",r[2]+" mm²"],["s-n",r[3]],["s-n",r[4]]].forEach(function(x) {
      var td = document.createElement("td"); td.className = x[0]; td.textContent = x[1]; tr.appendChild(td);
    });
    var tdA = document.createElement("td"); tdA.className = "s-action";
    var btn = document.createElement("button"); btn.className = "sab-btn-devis"; btn.type = "button"; btn.textContent = "Demander un devis";
    btn.addEventListener("click", function() {
      var ok = 0;
      if (setSelect(C.fc, r[1])) ok++;
      if (setSelect(C.fs, r[2])) ok++;
      if (ok > 0) {
        btn.textContent = "✓ Formulaire rempli"; btn.classList.add("done");
        showToast("Formulaire pré-rempli — réf. " + r[0]); scrollForm();
        setTimeout(function() { btn.textContent = "Demander un devis"; btn.classList.remove("done"); }, 4000);
      } else { scrollForm(); }
    });
    tdA.appendChild(btn); tr.appendChild(tdA); return tr;
  }

  function render(data, reset) {
    fil = data; if (reset) vis = C.page; tb.innerHTML = "";
    var show = filt ? data : data.slice(0, vis);
    show.forEach(function(r) { tb.appendChild(makeRow(r)); });
    var tot = data.length, rem = tot - show.length;
    cnt.textContent = (filt ? tot : show.length) + " / " + D.length + " compositions";
    nores.style.display = tot === 0 ? "block" : "none";
    sw.style.display = (!filt && rem > 0) ? "block" : "none";
    if (!filt && rem > 0) si.textContent = rem + " compositions supplémentaires disponibles";
  }

  function go() {
    var c = fc.value, s = fs.value; filt = !!(c || s);
    render(D.filter(function(r) { return (!c || r[1] === c) && (!s || r[2] === s); }), true);
  }

  sb.addEventListener("click", function() { vis += C.page; render(fil, false); });
  fc.addEventListener("change", go); fs.addEventListener("change", go);
  $("sabReset").addEventListener("click", function() { fc.value = ""; fs.value = ""; filt = false; render(D, true); });

  $("sabNoresBtn").addEventListener("click", function() {
    var el = document.querySelector(C.fx); if (el) {
      var p = [];
      if (fc.value) p.push(fc.value + " conducteur" + (parseInt(fc.value) > 1 ? "s" : ""));
      if (fs.value) p.push(fs.value + " mm²");
      el.value = p.join(" x ");
      if (typeof jQuery !== "undefined") { jQuery(el).val(el.value).trigger("input"); }
      else { el.dispatchEvent(new Event("input", { bubbles: true })); }
      setTimeout(function() { el.focus(); el.select(); }, 600);
    }
    scrollForm();
  });

  $("sabEncartBtn").addEventListener("click", function() {
    var el = document.querySelector(C.fx); if (el) {
      el.value = "Composition sur mesure";
      if (typeof jQuery !== "undefined") { jQuery(el).val(el.value).trigger("input"); }
      else { el.dispatchEvent(new Event("input", { bubbles: true })); }
      setTimeout(function() { el.focus(); el.select(); }, 600);
    }
    scrollForm();
  });

  render(D, true);
})();
</script>

Découvrez d’autres produits de notre gamme :

Câbles de puissance et raccordement moteur

AR2V

Voir le produit

Câbles de puissance et raccordement moteur

U-1000 R2V

Voir le produit

Câbles de puissance et raccordement moteur

RV-K 0,6/1kV

Voir le produit

Câbles de puissance et raccordement moteur

FR-N1X1G1

Voir le produit

Souhaitez-vous explorer l'ensemble des produits de cette gamme ?

Découvrir la gamme complète