News, Guides, Tipps und Tricks zu xt:Commerce 3 und VEYTON

Slideshow im Header bzw. Content für xt:Commerce

10 Dezember 2009

Im xt:Commerce-Forum wird immer wieder die Frage nach einer Slideshow (ein- und ausfadende Bilder), speziell im Header oder Content auf der Startseite gefragt, hier die Anleitung (zwei Teile gesplittet)

Zum einen das rohe erstellen der Slideshow, zum anderen das automatische auslesen und ordnen der Bilder aus einem Verzeichnis auf dem Server (part2)

Live Demo

Für einen Link zu einem Shop, welcher eine Slideshow im Header benutzt währe ich sehr dankbar.

Slideshow Scripte

Zunächst wird a href=”http://docs.jquery.com/Downloading_jQuery” rel=”nofollow” title=”Jquery download”>Jquery und das cycle-Plugin benötigt, diese werden in das Hauptverzeichnis des Onlineshops geladen.

Nun müssen die Dateien in den Shop eingebunden werden, dass geschieht in der includes/header.php
Das </head>-Tag suchen und davor diesen Quellcode einfügen:

<!-- header slide -->
<script type='text/javascript' src='jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='jquery.cycle.min.js'></script>
<script type='text/javascript' src='header-slide.js'></script>
<!-- header slide -->

Es wurde direkt die dritte Datei mit eingebunden(header-slide.js), welche jedoch noch nicht vorhanden ist, also im Hauptverzeichnis vom xt:Commerce Shop die Datei erstellen und mit folgendem Code füllen:

$j=jQuery.noConflict();
// noConflict mode => falls Lightbox bzw. andere JS-Frameworks bereits genutzt werden.
 
$j(document).ready(function(){
$j('#stage').cycle({
fx: 'fade',  
speed: 1200,  
pause: 0, 
timeout: 3300 
}); 
});

In diesen Zeilen wird das Cycle-Plugin konfiguriert, es bietet noch einige weitere Einstellungen, ein komplette Liste diese gibt es auf der Internetseite des Programmierers(link).

Bilder uploaden & Header austauschen

Nun müssen noch die Bilder auf den Server geladen und in das xt:Commerce Template eingebunden werden.
Dazu muss im Templateordner einen Ordner SHOP/templates/TEMPLATE mit dem Namen slide_header erstellt und die Bilder in diesen geladen werden.
Anschließend die index.html öffnen, die Stelle lokalisieren an welcher die Bilder erscheinen sollen und folgenden Quelltext einfügen:

<div id="stage" style=“height: 129px;width: 960px;position:absolute;overflow:hidden“>
<a href="/" title="{$store_name}">
<img src="{$tpl_path}slide_header/A.gif" alt="{$store_name}" id="img_1" class="header_img" />
</a>
<a href="/" title="{$store_name}">
<img src="{$tpl_path}slide_header/B.gif" alt="{$store_name}" id="img_2" class="header_img" />
</a>
<a href="/" title="{$store_name}">
<img src="{$tpl_path}slide_header/C.gif" alt="{$store_name}" id="img_3" class="header_img" />
</a>
<a href="/" title="{$store_name}">
<img src="{$tpl_path}slide_header/D.gif" alt="{$store_name}" id="img_4" class="header_img" />
</a>
</div>

Der Quelltext muss ggf. angepasst werden, da die Bilder im Beispiel die Namen A.gif, B.gif, C.gif und D.gif haben.
Außerdem muss ggf. die Größe des Slidebereichs angepasst(Zeile 1) werden.

Wenn alles gut gegangen ist hat Ihr xt:Commerce Shop nur eine Slideshow im Header, natürlich könnte man es auch auf der Startseite im Contentbereich oder auch in einer Boxen (links oder rechts im Shop) nutzen.

Wie beim lesen des Guides jedem klar geworden seinen sollte, werden ein Wenig HTML und CSS Kenntnisse benötigt, also zuvor ein Backup erstellen.

UPDATE: xt:Commerce Slideshow Part2 hier

Like it? Then share, rate or comment it:

Themenrelevante Artikel:

Hinweis: Die mit * gekennzeichneten Links sind Partnerlinks

10 Comments »

Tom said:
Hallo,

auf was muss man achten, wenn man diese Slideshow in einem css-Template im Content einbinden will?

Leider komm ich ned drauf!! Vielleicht können Sie mir weiterhelfen. Danke.

VG

# 7 Januar 2010 at 20:09
Alex (author) said:
Wo genau liegt den der Fehler?
Der Bereich der Silden soll,muss die selbe Struktur haben wie oben im Quelltext Beispiel.
Der erste Schritt sollte sein, das die Ausgabe im Template so aussieht:
<div id=”stage”>
<a href=”xyz”><img src=”…” /></a>
<a href=”xyz”><img src=”…” /></a>
<a href=”xyz”><img src=”…” /></a>
</div>

Das Cycle-plugin “arbeitet” nur mit dem Inhalt der id “stage”
Siehe: $j(‘#stage‘).cycle({

Außerdem kann es zu Problemen kommen, falls andere Javascript-frameworks in den Shop integriert sind…

# 7 Januar 2010 at 22:15
Slideshow Part2: Verzeichnis auslesen und Bilder ordnen said:
[...] der zweite Teil zum Thema Slideshow in xt:Commerce. In diesem Post ist bereits beschrieben, wie man Bilder auf der Startseite (bzw. im Content) sliden bzw. faden [...]

# 22 Januar 2010 at 23:04
steffi said:
Hi Alex.

Ich möchte die Slideshow im Conten einbauen.

Muss ich denn da genau so vorgehen wie hier beschrieben?

Vielen Dank.

Gruss Steffi

# 21 April 2010 at 20:51
Alex (author) said:
Falls du mit “im Content” an einer beliebigen Stelle im Template(links, rechts etc.) meinst im Grunde ja.
Über den Contentmanager musst du drauf achten, dass die Ausgangsstrucktur der Liste exakt übernommen wird.(Siehe zwei Kommentare höher)

Falls du dir unsicher bist nimm zuerst eine leere .html Seite und baue es nach, das übertragen in den Shop sollte danach kein Problem mehr sein.

# 21 April 2010 at 21:43
Patrick said:
Hi Alex, vielen Dank funktioniert tadellos. Nutze es in unserem Veyton-Shop und für meine private HP ist es bereits fest eingeplant

Bei VEYTON muss die Head-Anpassung
 
im Hauptverzeichnis/xtCore/display.php erfolgen. Evtl. kannst du es noch ergänzen

Gibt es denn auch eine Möglichkeit, den Bildwechsel via Knopfdruck zu realisieren? Ich stelle mir ein Layout mit 2 Pfeil-Button vor und der User soll selbst entscheiden, wie lange er das Bild betrachten mag und/oder ob er vor- bzw. zurückblättern mag. Ich möchte hierfür aber nicht X-HTML Seiten hinterlegen.

Am liebsten währ` es mir, wenn es mit einer HTML-Seite und dem dynamischen Auslesen des Ordners, wie im 2ten Post beschrieben ist, realisierbar wäre.

Evtl. hat jemand einen Tipp für mich.

Vielen Dank )
# 29 Dezember 2010 at 10:33
Patrick said:
Ich bin´s nochmal

Hab genau soetwas gefunden, was ich oben gesucht habe….

-> cssglobe.com/lab/easyslider1.5/02.html

Sollte Werbung für andere Seiten nicht erlaubt sein, dann einfach löschen… guten Rutsch @all

# 29 Dezember 2010 at 11:26
Alex (author) said:
Na ja, bei Veyton würde ich eher zum Plugin raten, sollte ja auch relativ easy funktionieren…

(bzgl der Werbung: Sofern es kein Spam oder Eigenwerbung ist, geht das schon klar)

# 29 Dezember 2010 at 16:55
Fabian said:
Hi,

vielen Dank für dieses super Tutorial. Und vielen Dank an Patrick mit diesem super Tipp für Veyton, da ich kein passendes Plugin gefunden habe.

Funktioniert einwandfrei.

# 7 Mai 2011 at 16:33
Alex (author) said:
mhh, hätte nicht gedacht, das da ein Bedarf ist.
Evtl. mach ich mal eines

# 7 Mai 2011 at 18:12