Alles wat u wilt weten voordat u installeert.
Een gedetailleerde blik op hoe Merkencarrousel voor PrestaShop 8/9: Merklogo's als Slider, Looptekst en Logomuur werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.
8 manieren om uw merken te tonen
De carrousel scrolt 1 tot 3 rijen logo's met pijlen, stippen en optioneel automatisch scrollen. De looptekst laat logo's zonder pauze glijden over 1 tot 4 rijen, met andere merken op elke rij en om de rij de andere kant op, het effect dat u kent van secties als „Zij vertrouwen ons”. De verticale looptekst beweegt kolommen met logo's op en neer. Het raster, de logomuur met dunne lijnen, de wisselende logomuur, de labels en het A-Z-overzicht dekken de overige toepassingen, van een zijkolom tot een pagina met al uw merken.
De juiste merken in de juiste volgorde
Een blok kan alle actieve merken tonen, een selectie die u met slepen ordent, de merken met producten in een categorie en haar subcategorieën, of die van de bekeken categorie: op de pagina Schoenen verschijnen alleen schoenmerken. Een minimum aantal producten, standaard 1, laat merken weg waarvan de pagina leeg zou zijn. Sorteren kan op naam, aantal producten, verkoop in de gekozen periode, nieuwheid of willekeurig. De willekeurige volgorde wordt in de browser bepaald, zodat een full-page cache blijft werken.
Nette logo's, ook op een gekleurde achtergrond
PrestaShop slaat merklogo's op als JPG met witte achtergrond, wat witte rechthoeken achterlaat op een grijze kaart of een donkere sectie. In het tabblad Merklogo's uploadt u per merk een transparante PNG-, WebP- of SVG-versie, die in alle blokken wordt gebruikt. SVG-bestanden met scripts, events of externe links worden geweigerd en de uploadmap is beveiligd. Op lichte kaarten laat de optie Witte achtergronden verwijderen het wit van JPG's verdwijnen zonder upload. Elk merk kan bovendien naar een pagina naar keuze linken in plaats van naar zijn PrestaShop-pagina.
Overal in de winkel
Elk blok kiest zijn hook uit 14 gangbare posities of een met de hand ingevoerde display-hook, die automatisch wordt geregistreerd. Het kan worden beperkt tot bepaalde paginatypes en apparaten. Voor een precieze plek toont de widget-tag een bepaald blok in elke template, wordt de hook displayDfBrandCarousel vanuit het thema aangeroepen en zet de shortcode [dfbrandcarousel id="3"] een blok in een CMS-pagina. De lay-outs gebruiken container queries: in een zijkolom schakelt een blok zonder extra instelling over op zijn compacte versie.
Een editor met live voorvertoning
De back-office toont uw blokken, die u activeert, dupliceert en met slepen herschikt. De editor bundelt de instellingen in 5 tabbladen (Inhoud, Lay-out, Stijl, Animatie, Weergave) en toont ernaast een voorvertoning die bij elke wijziging wordt bijgewerkt, in desktop-, tablet- of mobiele breedte. De modi worden als geïllustreerde kaarten getoond. Een indicator markeert niet-opgeslagen wijzigingen en Ctrl+S slaat op zonder de editor te verlaten. Het tabblad Integratie geeft de widget-, hook- en shortcodecodes van elk blok, klaar om te kopiëren.
Licht en toegankelijk
De module gebruikt geen jQuery, geen Swiper en geen bibliotheek van een CDN. De carrousel steunt op het native scrollen van de browser en de looptekst op de Web Animations API. CSS en JS worden alleen geladen op pagina's waar een blok kan verschijnen. Animaties stoppen wanneer het blok uit beeld gaat, een pauzeknop voldoet aan WCAG 2.2.2 en bezoekers die animaties hebben uitgeschakeld zien stilstaande logo's die ze met de hand kunnen scrollen. De kopieën die de looptekst laten doorlopen, zijn verborgen voor schermlezers en uitgesloten van toetsenbordnavigatie.
Er zijn nog geen beoordelingen.