Internetagentur 8works

Header Bilderslide für xt:commerce

In unserem heutigen Guide werden wir einen xt:Commerce Onlineshop mit wechselnden Headergrafiken versehen, welche wir dynamisch aus einem beliebigen Ordner auf unserem Webserver auslesen um eine gute Pflegbarkeit zu gewährleisten.

Eine Demo können Sie zum Beispiel in unserem xt:Commerce Templatesshop sehen, jedoch haben wir es hier im Contentbereich der Startseite verwendet.

Um das Rad nicht neu zu erfinden, benutzten wir den Javascriptframework Jquery und das "Cycle Plugin" von M. Alsup

Wir benötigen:

Erstellen des Backups

Laden Sie den Ordner in dem Sich Ihr Shoptemplate befindet auf Ihren lokalen Rechner, falls Ihnen ein Fehler unterläuft können Sie so jederzeit zum Ursprungszustand zurückkehren.
"/IHR_SHOP/templates/IHR_TEMPLATE/"

Installieren der Scripte

Laden Sie mit einem beliebigen FTP-Clienten die beiden Scripte in das Wurzelverzeichnis Ihres OnlineShops.
Wechseln Sie in den Ordner IHR_SHOP/templates/IHR_TEMPLATE/javascript/ und öffnen Sie die Datei "general.js.php"

Fügen Sie folgende Zeilen code hinter der Zeile "//--></script>" ein:

  1. <script type="text/javascript" src="jquery-1.3.2.min.js]"></script>
  2. <script type="text/javascript" src="jquery.cycle.all.min.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5. /* Hier folgt später die Plugin anpassung */
  6. });
  7. </script>
  8.  
  9.  

Erstellen der Ordners und auslesen der Bilder

Wechseln Sie mit Ihrem FTP-Programm in das Wurzelverzeichniss Ihres xt:commerce Shops und erstellen Sie den Ordner "bilder"

öffnen Sie die index.html Datei Ihres Shops und versuchen Sie zu lokalisieren an welcher Stelle das jetztige Hintergrundbild eingebunden wird.
Das Firefox-Addon "Firebug" kann Ihnen dabei vielleicht helfen.

Beim folgenden Beispiel gehen wir davon aus, das die Kopfgrafik als "background-image" via Stylesheet im Div-Element der ID Header hinterlegt wurde.Wir entfernen diese Zeile im Stylesheet und überschreiben den Headerbereich mit folgendem PHP-Script:

Passen Sie zuvor jedoch die Breiten- und Höhenangabe(Zeile1: "...width: 980px; height: 195px;...") an, fügen Sie die Breite und Höhe Ihrer Bilder ein(welche Sich wiederum nach Ihrem Shopdesign richten sollte)
Bedenken Sie, dass sich im Bereich der ID "#Header" keine anderen Elemente befinden dürfen.

  1. <div id="header" style="overflow: hidden; position: relative; width: 980px; height: 195px;">
  2. {php}
  3. $path = 'bilder';
  4.  
  5. $dir = opendir($path);
  6. while (false !==($entry = readdir($dir))) {
  7. if ($entry != '.' && $entry != '..' ){
  8. echo '<img src ="'.$path.'/' . $entry . "\" alt=\"".$entry."\" />\n";
  9. }
  10. }
  11. closedir($dir);
  12. {/php}
  13. </div>

Was macht das Script?

Das Skript liest das Verzeichniss($path) aus und gibt den Inhalt dessen als HTML Bilderliste zurück.
Durch ändern des Wertes der Vaiable $path können Sie bestimmen aus welchem Ordner die Bilder geladen werden sollen.
Die Ausgabe eines Verzeichnisses mit den Dateien 1.jpg, 2.gif und text_xyz.png sollte also im Quelltext so aussehen:

  1. <img alt="1.jpg" src="bilder/1.jpg" />
  2. <img alt="2.gif" src="2.gif" />
  3. <img alt="text_xyz.png" src="text_xyz.png" />

Bedenken Sie, dass sich in diesem Verzeichnis nur Bilder befinden dürfen, welche:

  • die richtige Breite und Höhe haben
  • ein Webfähiges Format besitzten(.gif, .png, .jpg)

Im Kopf Ihrer Seite sollten Sie jetzt eines der Bilder aus ihrem "bilder"-Ordner angezeigt kriegen, die anderen Bilder sind zum jetztigen Zeitpunkt verborgen(durch overflow: hidden; im #header), sollten jedoch im Quelltext schon zu sehen sein.

Initialisieren und konfigurieren des Cycle-Plugins:

öffnen Sie Abschließend wieder die Datei "general.js.php" im Ordner
IHR_SHOP/templates/IHR_TEMPLATE/javascript/
Ersetzten Sie den Kommentar "/* Hier folgt später die Plugin anpassung */" mit folgendem Code:

  1. $('#header').cycle({
  2. fx: 'fade', // Einbledungsart
  3. speed: 5500, // Einbledegeschwindigkeit
  4. timeout: 5000 // Dauer der Einblendung der einzelnen Bilder
  5. });

An dieser Stelle können Sie noch viele weitere Einstellungen für das Plugin vornehmen, ein vollständige Liste finden Sie auf der Webseite des Autors

Natürlich ist das austauschen der Headergrafik nicht die einzige Verwendungsmöglichkeit für das Cycle-Plugin, der Slide-Effekt ist in dieser, oder abgewandelter Form auch auf der Startseite oder in einer Zusatzbox in der linken oder rechten Seite des Shops einsetztbar.