Home » PrestaShop: Animierte Info-Buttons auf Produktseiten

PrestaShop: Animierte Info-Buttons auf Produktseiten

Branche: Nahrungsergänzungen.
Realisiert mit PrestaShop, PHP, JavaScript, JQuery, Electron.

Eine Menge von Infotexten sollen individuell verschiedenen Produkten zugeordnet werden. In der Praxis soll es so aussehen, dass die Produktdarstellung in PrestaShop um eine Reihe von Buttons erweitert wird, über welche die Infotexte einzeln abrufbar sind. Das System soll einfach und durch den Kunden selbst zu pflegen sein.

Produkt-Infos einfach in PrestaShop verwalten

Für das Projekt wurde eine „PrestaShop untypische“ Lösung gewählt: Anstatt mühsam und zeitaufwändig ein extra Modul zu entwickeln, wurde eine Hybrid Desktop App direkt an die PrestaShop-Datenbank angebunden. Eine Hybrid App läuft plattformunabhängig direkt auf dem Desktop unter Windows, macOS oder Linux. Intern benutzt die App jedoch Web-Technologien wie JavaScipt, JQuery etc. Das Ergebis ist eine hochperformante Lösung mit der sich sehr schnell Daten bearbeiten lassen – schneller als dies im Backend von PrestaShop möglich ist.

PrestaShop: Der Product Icon Manager im Detail

Die Lösung besteht aus mehreren Komponenten, die nahtlos in einander greifen:

  • Eine Desktop App zur schnellen Dateineingabe.
  • Eine PHP Middleware über welche die PrestaShop Datenbank angebunden wird.
  • Ein JQuery Plugin, zur Anzeige entsprechender Kurztexte beim berühren der Buttons (Icons) mit dem Mauszeiger.
  • Ein Smarty Plugin für PrestaShop zur Anzeige der Icons auf der PrestaShop-Produktseite

Die Dateneingabe geschieht über ein Datengitter, das alle relevanten Felder anzeigt. Die Texte werden in 2 Sprachen erfasst.

Pro Icon gib es jeweils

  • Eine eindeutige Abkürzung,
  • eine Grafik,
  • einen Kurztext,
  • eine URL, die auf eine extra Seite mit weiteren Infos zeigt.

prestashop-produkt-buttons

Die Daten können im Editor sehr schnell erfasst werden. Grafiken werden per Drag & Drop direkt auf den PrestaShop-Server hochgeladen. Per Zwischenablage in den Editor kopierte URLs werden automatisch in lokale Links umformattiert.

prestashop-produkt-infos

Im PrestaShop Backend geschieht die Zuordnung zu den einzelnen Produkten über ein entsprechendes Custom-Field.
Hier werden lediglich die Kürzel durch Leerzeichen getrennt eingetragen:

prestashop-backend

Das Resultat sieht im PrestaShop Frontend dann wie folgt aus.:

prestashop-frontend

Wird der Mauszeiger auf einem Icon Platziert, poppt animiert der Kurztext auf. Ein Klick auf das Icon ruft die per URL hinterlegte Infoseite in einem separaten Browser-Tab auf.

 

 

By | 2016-10-20T17:06:14+00:00 2016-08-16|Categories: Projekte|Tags: , , , , |Kommentare deaktiviert für PrestaShop: Animierte Info-Buttons auf Produktseiten

About the Author:

Seit 1993 bin ich als freiberuflicher Softwareentwickler mit den Schwerpunkten Programmierung von Internet- und Crossplattform-Applikationen, sowie als Mediendesigner, IT-Consultant und Dozent tätig. Die Übergänge zwischen diesen Themen sind fliessend. Mein Blog fasst all dies zu einem News Stream zusammen. Viel Spass beim Stöbern! — Harald