(function () { 'use strict'; /* ========================================================= * CONFIG * ========================================================= */ var REVIEW_COUNT = '4400+'; // totaal aantal beoordelingen (desktop + mobiel) var REVIEW_LINK = 'https://www.kiyoh.com/reviews/1067735/benu_webshop'; // Reviews — hier makkelijk aan te passen. score = Kiyoh-cijfer 0–10. var REVIEWS = [ { score:10, title:'Snelle levering', text:'Besteld en de volgende dag geleverd. Top!', name:'Hettie', place:'Breda', recommend:true }, { score:9, title:'Uitstekend', text:'Overzichtelijke site, duidelijke communicatie en snelle levering.', name:'J.E.', place:'Wehl', recommend:true }, { score:10, title:'Prima', text:'Duidelijke website, accurate levering, geen klachten en voor herhaling vatbaar', name:'Yvette', place:'Heerlen', recommend:true }, { score:10, title:'Goed en snel.', text:'Ze zijn niets duurder dan anderen en er is altijd een apotheek in de buurt waar je het af kunt ophalen.', name:'Roelof', place:'Roswinkel', recommend:true }, { score:10, title:'Een dikke 10', text:'Gemakkelijk te vinden wat ik zocht en snelle levering', name:'J', place:'Nieuw Beijerland', recommend:true }, { score:10, title:'Geweldig', text:'Als men wat besteld heeft men dat vrij snel in huis, ze doen het zeker heel goed ben zeer tevreden over dit bedrijf', name:'J. P.', place:'Purmerend', recommend:true }, { score:8, title:'Prima en behulpzaam en uitleg', text:'Zeer behulpzaam en klantvriendelijk!', name:'Marianne', place:'Hoorn', recommend:true }, { score:9, title:'Super snelle levering', text:'Top service van Benu apotheken met een prettige aanbieding en super snelle levering,', name:'Mariska', place:'Zuidlaren', recommend:true }, { score:10, title:'Vlekkeloos', text:'Bestelling, bevestiging en ontvangst uit automaat ging gewoon goed.', name:'Welmoet', place:'Alphen a/d Rijn', recommend:true }, { score:8, title:'Nette webwinkel.', text:'Goede website en klantenservice. Doorgaans iets goedkoper dan fysieke drogisterij.', name:'John', place:'Alkmaar', recommend:true }, { score:9, title:'Comfortabel', text:'Duidelijke communicatie, snelle, accurate bezorging.', name:'Larysa', place:'Zoetermeer', recommend:true }, { score:9, title:'Snelle levering', text:'Mooie aanbiedingen en snelle levering', name:'Gonnie', place:'Riel', recommend:true }, { score:8, title:'Makkelijk en Snel', text:'Makkelijk te bestellen en snel geleverd!', name:'C.D.', place:'Middelburg', recommend:true }, { score:8, title:'Duidelijke webshop.', text:'Kon vrij vlot de gewenste producten vinden en voor een leuke prijs.', name:'Marion', place:'Zuidland', recommend:true }, { score:8, title:'Vandaag besteld morgen afgeleverd', text:'Bestelde materialen worden netjes aangeleverd in een goed passende verpakking en zijn gebufferd met papier.', name:'A.', place:'Schiedam', recommend:true }, { score:9, title:'Top as always', text:'Prima producten en zeer bekwame mensen altijd even vriendelijk', name:'Harry', place:'Tilburg', recommend:true }, { score:8, title:'Netjes verpakt', text:'Goed op de hoogte gehouden dat mijn bestelling later werd geleverd', name:'Marianne', place:'Hendrik-Ido-Ambacht', recommend:true }, { score:9, title:'heel prettig', text:'zowel telefonisch , als mondeling , heel prettig ervaren', name:'Jeannette', place:'Soest', recommend:true } ]; var ROOT_ID = 'sdim-benu-reviews'; /* ========================================================= * Styles (gescoped onder #sdim-benu-reviews) * ========================================================= */ var CSS = '' + '#' + ROOT_ID + '{--sbr-visible:3;font-family:"Ubuntu",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#002664;background:#fff;border:1px solid #dee4ed;border-radius:.5rem;box-shadow:0 5px 20px 0 hsla(217,100%,20%,.08);max-width:var(--max-container-width,1400px);margin:24px auto;padding:20px 28px;display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:center;box-sizing:border-box;}' + '#' + ROOT_ID + ' *{box-sizing:border-box;}' + '#' + ROOT_ID + ' .sbr-summary{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-right:24px;border-right:1px solid #dee4ed;text-decoration:none;color:inherit;cursor:pointer;}' + '#' + ROOT_ID + ' .sbr-summary:hover .sbr-summary-portal{text-decoration:underline;color:#002664;}' + '#' + ROOT_ID + ' .sbr-summary-score{width:64px;height:64px;background:#47820c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;line-height:1;}' + '#' + ROOT_ID + ' .sbr-summary-stars{display:flex;gap:2px;margin-top:8px;}' + '#' + ROOT_ID + ' .sbr-summary-stars svg{width:20px;height:20px;}' + '#' + ROOT_ID + ' .sbr-summary-count{font-size:13px;color:#5c77a2;font-weight:500;}' + '#' + ROOT_ID + ' .sbr-summary-portal{font-size:13px;margin-top:2px;color:#47820c;font-weight:700;}' + '#' + ROOT_ID + ' .sbr-slider{position:relative;display:flex;align-items:stretch;gap:8px;min-height:190px;min-width:0;}' + '#' + ROOT_ID + ' .sbr-nav{flex:0 0 auto;align-self:center;width:40px;height:40px;border:none;background:#47820c;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease;}' + '#' + ROOT_ID + ' .sbr-nav:hover{background:#002664;}' + '#' + ROOT_ID + ' .sbr-nav:focus-visible{outline:2px solid #002664;outline-offset:2px;}' + '#' + ROOT_ID + ' .sbr-nav svg{width:16px;height:16px;}' + '#' + ROOT_ID + ' .sbr-nav[disabled]{opacity:.35;cursor:default;pointer-events:none;}' + '#' + ROOT_ID + ' .sbr-viewport{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;}' + '#' + ROOT_ID + ' .sbr-track{display:flex;transition:transform .35s ease;}' + '#' + ROOT_ID + ' .sbr-slide{flex:0 0 calc(100% / var(--sbr-visible));padding:4px 24px;display:flex;border-left:1px solid #eef2f7;}' + '#' + ROOT_ID + ' .sbr-slide:first-child{border-left:none;}' + '#' + ROOT_ID + ' .sbr-cardlink{flex:1;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;}' + '#' + ROOT_ID + ' .sbr-head{display:flex;align-items:center;gap:14px;}' + '#' + ROOT_ID + ' .sbr-score{flex:0 0 auto;width:44px;height:44px;background:#47820c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;line-height:1;}' + '#' + ROOT_ID + ' .sbr-stars{display:flex;gap:2px;}' + '#' + ROOT_ID + ' .sbr-stars svg{width:22px;height:22px;}' + '#' + ROOT_ID + ' .sbr-title{font-size:17px;font-weight:700;color:#002664;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;}' + '#' + ROOT_ID + ' .sbr-text{font-size:15px;color:#374862;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.5em;}' + '#' + ROOT_ID + ' .sbr-recommend{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:#edfcde;color:#386709;font-size:13px;font-weight:500;padding:5px 12px;border-radius:100px;}' + '#' + ROOT_ID + ' .sbr-recommend svg{width:14px;height:14px;fill:currentColor;}' + '#' + ROOT_ID + ' .sbr-meta{display:flex;align-items:center;gap:8px;font-size:14px;color:#5c77a2;padding-top:8px;border-top:1px solid #dee4ed;margin-top:auto;}' /* Mobiele pijltjes: één vaste set buiten de schuivende track, zodat ze niet meebewegen */ + '#' + ROOT_ID + ' .sbr-mininav{display:none;position:absolute;right:2px;bottom:2px;gap:8px;z-index:2;}' + '#' + ROOT_ID + ' .sbr-mini{width:30px;height:30px;border:none;padding:0;margin:0;border-radius:50%;background:#47820c;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-appearance:none;appearance:none;}' + '#' + ROOT_ID + ' .sbr-mini:active{background:#002664;}' + '#' + ROOT_ID + ' .sbr-mini:focus{outline:none;}' + '#' + ROOT_ID + ' .sbr-mini:focus-visible{outline:2px solid #002664;outline-offset:2px;}' + '#' + ROOT_ID + ' .sbr-mini[disabled]{opacity:.35;cursor:default;pointer-events:none;}' + '#' + ROOT_ID + ' .sbr-mini svg{width:12px;height:12px;pointer-events:none;}' + '#' + ROOT_ID + ' .sbr-meta .sbr-name{font-weight:700;color:#002664;}' + '#' + ROOT_ID + ' .sbr-meta .sbr-dot{color:#bec9da;}' + '#' + ROOT_ID + ' .sbr-dots{display:flex;justify-content:center;gap:6px;margin-top:12px;grid-column:1 / -1;}' + '#' + ROOT_ID + ' .sbr-dots button{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:#bec9da;transition:background-color .15s ease,width .15s ease;}' + '#' + ROOT_ID + ' .sbr-dots button[aria-current="true"]{background:#47820c;width:22px;border-radius:100px;}' + '#' + ROOT_ID + ' .sbr-dots button:focus-visible{outline:2px solid #002664;outline-offset:2px;}' + '@media (max-width:960px) and (min-width:641px){#' + ROOT_ID + '{--sbr-visible:2;}}' + '@media (max-width:640px){' + '#' + ROOT_ID + '{grid-template-columns:1fr;gap:14px;padding:16px;--sbr-visible:1;margin:16px 14px;}' + '#' + ROOT_ID + ' .sbr-summary{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;border-right:none;border-bottom:1px solid #dee4ed;padding:0 0 14px;}' + '#' + ROOT_ID + ' .sbr-summary-score{width:34px;height:34px;font-size:15px;}' + '#' + ROOT_ID + ' .sbr-summary-stars{margin-top:0;}' + '#' + ROOT_ID + ' .sbr-summary-stars svg{width:14px;height:14px;}' + '#' + ROOT_ID + ' .sbr-summary-count{font-size:14px;}' + '#' + ROOT_ID + ' .sbr-summary-portal{margin-top:0;font-size:12px;}' + '#' + ROOT_ID + ' .sbr-nav{display:none;}' + '#' + ROOT_ID + ' .sbr-slide{padding:2px 2px;border-left:none;}' + '#' + ROOT_ID + ' .sbr-meta{min-height:39px;padding-right:76px;}' + '#' + ROOT_ID + ' .sbr-mininav{display:inline-flex;}' + '}' + '@media (prefers-reduced-motion:reduce){#' + ROOT_ID + ' .sbr-track,#' + ROOT_ID + ' .sbr-nav,#' + ROOT_ID + ' .sbr-dots button{transition:none;}}'; /* ========================================================= * Helpers * ========================================================= */ function esc(s){ var d=document.createElement('div'); d.textContent=s; return d.innerHTML; } function starSvg(type){ if(type==='half'){ return ''; } var fill = type==='full' ? '#ffba16' : '#dee4ed'; return ''; } function starsFromScore(score){ var value = score/2, html='', i; for(i=1;i<=5;i++){ if(value>=i) html+=starSvg('full'); else if(value>=i-0.5) html+=starSvg('half'); else html+=starSvg('empty'); } return html; } var THUMB = ''; var PREV_ICON = ''; var NEXT_ICON = ''; /* ========================================================= * Build * ========================================================= */ function injectStyles(){ if(document.getElementById(ROOT_ID + '-css')) return; var st=document.createElement('style'); st.id=ROOT_ID + '-css'; st.textContent=CSS; document.head.appendChild(st); } function buildWidget(){ var slidesHtml=''; REVIEWS.forEach(function(r,i){ slidesHtml+='' + '

'; }); var el=document.createElement('div'); el.id=ROOT_ID; el.setAttribute('role','region'); el.setAttribute('aria-roledescription','carrousel'); el.setAttribute('aria-label','Klantbeoordelingen BENU'); el.innerHTML='' + '' + '9' + '' + starsFromScore(9) + '' + '' + REVIEW_COUNT + ' beoordelingen' + 'Bekijk op Kiyoh' + '' + '

' + '

'; return el; } function activate(root){ var track=root.querySelector('.sbr-track'); var dotsWrap=root.querySelector('.sbr-dots'); var slider=root.querySelector('.sbr-slider'); var prevBtn=slider.querySelector('.sbr-nav[data-dir="prev"]'); var nextBtn=slider.querySelector('.sbr-nav[data-dir="next"]'); var miniPrev=root.querySelector('.sbr-mini[data-dir="prev"]'); var miniNext=root.querySelector('.sbr-mini[data-dir="next"]'); var total=REVIEWS.length; var visible=getVisible(); var maxStart=Math.max(0,total-visible); var index=0; // linker zichtbare review (begin van een pagina) function getVisible(){ var v=parseInt(getComputedStyle(root).getPropertyValue('--sbr-visible'),10); return (v && v>0) ? v : 1; } function pageCount(){ return Math.ceil(total/visible); } function currentPage(){ return index>=maxStart ? pageCount()-1 : Math.floor(index/visible); } function buildDots(){ var pages=pageCount(), html=''; for(var i=0;i'; } dotsWrap.innerHTML=html; } function update(){ var step=100/visible; track.style.transform='translateX(-' + (index*step) + '%)'; var d=dotsWrap.querySelectorAll('button'), cp=currentPage(); for(var i=0;i=maxStart; if(miniPrev) miniPrev.disabled = index<=0; if(miniNext) miniNext.disabled = index>=maxStart; } function goToPage(p){ p=Math.min(Math.max(p,0),pageCount()-1); index=Math.min(p*visible, maxStart); update(); } function stepPage(dir){ goToPage(currentPage()+dir); } function recalc(){ var v=getVisible(); if(v!==visible){ visible=v; maxStart=Math.max(0,total-visible); index=Math.min(Math.floor(index/visible)*visible, maxStart); buildDots(); } update(); } slider.addEventListener('click', function(e){ var btn=e.target.closest('.sbr-nav'); if(!btn || btn.disabled) return; stepPage(btn.getAttribute('data-dir')==='next' ? 1 : -1); }); dotsWrap.addEventListener('click', function(e){ var b=e.target.closest('button[data-page]'); if(b) goToPage(parseInt(b.getAttribute('data-page'),10)); }); slider.addEventListener('keydown', function(e){ if(e.key==='ArrowRight') stepPage(1); if(e.key==='ArrowLeft') stepPage(-1); }); // Touch-swipe (mobiel). Een echte tik blijft de kaart-link openen; // alleen bij voldoende horizontale beweging bladeren we + onderdrukken we de klik. var vp=root.querySelector('.sbr-viewport'); var tsx=0, tsy=0, swiping=false, suppressClick=false; vp.addEventListener('touchstart', function(e){ if(e.target.closest('.sbr-mini')) { swiping=false; return; } // tik op pijltje is geen swipe var t=e.touches[0]; tsx=t.clientX; tsy=t.clientY; swiping=true; suppressClick=false; }, {passive:true}); vp.addEventListener('touchend', function(e){ if(!swiping) return; swiping=false; var t=e.changedTouches[0]; var dx=t.clientX-tsx, dy=t.clientY-tsy; if(Math.abs(dx)>40 && Math.abs(dx)>Math.abs(dy)){ suppressClick=true; stepPage(dx<0 ? 1 : -1); } }, {passive:true}); vp.addEventListener('click', function(e){ var mini=e.target.closest('.sbr-mini'); if(mini){ e.preventDefault(); e.stopPropagation(); if(!mini.disabled) stepPage(mini.getAttribute('data-dir')==='next' ? 1 : -1); return; } if(suppressClick){ e.preventDefault(); e.stopPropagation(); suppressClick=false; } }, true); var rt; window.addEventListener('resize', function(){ clearTimeout(rt); rt=setTimeout(recalc,150); }); buildDots(); update(); } /* ========================================================= * Start: de slider verschijnt direct na de