Unser Kunde hatte den Wunsch nach einem Slider auf seiner Webseite, der die 24 am häufigsten verkauften Produkte auf eine einzigartige und dynamische Weise präsentiert. Die Herausforderung bestand darin, dass zu jedem Zeitpunkt nur 12 Produkte im Slider sichtbar sein sollten. Um die Sache interessanter zu machen, sollten diese Produkte nur aus den Top-Sellern ausgewählt werden. Zusätzlich wollte der Kunde die Freiheit haben, bestimmte Produkte auszuwählen, die immer im Slider erscheinen, und diese nach Belieben anordnen zu können. Für diese ausgewählten Produkte war es wichtig, dass sie stets am Anfang des Sliders angezeigt werden, wobei maximal vier solcher Produkte festgelegt werden können.
Unsere Kreative Lösung
Um dieser anspruchsvollen Anforderung gerecht zu werden, entwickelten wir innerhalb des WordPress-Systems eine neue Schnittstelle. Diese ermöglicht es dem Kunden, seine bevorzugten Produkte aus dem WooCommerce-Shop zu sehen und sie mit einer einfachen Drag-and-Drop-Funktion in die gewünschte Reihenfolge zu bringen. Mit der Verwendung von PHP holen wir diese ausgewählten Produkte ab und ordnen die ersten vier von ihnen im Slider an, genau wie vom Kunden gewünscht.
Anschließend ermitteln wir über eine spezielle Datenbankabfrage die 24 Top-Seller-Produkte des Shops und bringen diese in eine zufällige Reihenfolge. Von dieser Liste werden dann so viele Produkte zum Slider hinzugefügt, bis insgesamt 12 Produkte erreicht sind. Dabei berücksichtigen wir die Anzahl der manuell ausgewählten Produkte, um sicherzustellen, dass der Slider stets die perfekte Mischung aus Kundenfavoriten und Bestsellern zeigt.
Einbindung von JavaScript und Responsive Design
Um dem Ganzen Leben einzuhauchen, haben wir JavaScript verwendet, um den Slider zu animieren. Diese Animation sorgt für eine reibungslose und ansprechende Benutzererfahrung, indem sie den Übergang zwischen den Produkten nahtlos gestaltet. Ein wesentliches Merkmal unseres Sliders ist seine Responsivität. Unabhängig vom Gerät oder Bildschirmgröße passt sich der Slider dynamisch an und zeigt auf kleineren Viewports weniger Produkte pro Slide an. Diese Anpassungsfähigkeit gewährleistet, dass die Webseite auf Mobilgeräten genauso attraktiv und benutzerfreundlich ist wie auf einem Desktop-Computer.
Das Ergebnis
Das Ergebnis ist ein flexibler und dynamischer Produkt-Slider, der nicht nur die Anforderungen unseres Kunden übertrifft, sondern auch eine ansprechende und interaktive Komponente zur Webseite hinzufügt. Mit dieser Lösung können Besucher die beliebtesten Produkte auf einen Blick sehen und werden durch die manuell hervorgehobenen Produkte zu weiteren Entdeckungen angeregt.
