Slideshow: Unterschied zwischen den Versionen

Aus e-vendo Wiki
Wechseln zu: Navigation, Suche
(→‎Bild- und Slideshowgrößen)
 
(53 dazwischenliegende Versionen von 6 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
{{btt}}
 
Eine Slideshow ist ein grafisches Element, das die Anzeige verschiedener wechselnder Grafiken ermöglicht. Hinter jeder der Grafiken liegt ein Link auf eine Themenseite im Shop oder auf ein Shopprodukt.
 
Eine Slideshow ist ein grafisches Element, das die Anzeige verschiedener wechselnder Grafiken ermöglicht. Hinter jeder der Grafiken liegt ein Link auf eine Themenseite im Shop oder auf ein Shopprodukt.
  
Zeile 4: Zeile 5:
 
__TOC__
 
__TOC__
  
−
<div>
 
−
<div style="display:inline-block; margin-right:20px; vertical-align:top;">
 
−
[[image:slideshow shop-gross.png|border|500px|verweis=]]
 
−
</div>
 
  
−
<div style="display:inline-block; vertical-align:top;">
 
 
Durch den Einsatz einer Slideshow kann man gezielt auf bestimmte Seiten im Shop oder einzelne Produkte hinweisen.<br>
 
Durch den Einsatz einer Slideshow kann man gezielt auf bestimmte Seiten im Shop oder einzelne Produkte hinweisen.<br>
 
Durch den Bildwechsel-Effekt der Slideshow wird die Aufmerksamkeit des Besuchers gezielt gelenkt.
 
Durch den Bildwechsel-Effekt der Slideshow wird die Aufmerksamkeit des Besuchers gezielt gelenkt.
Zeile 17: Zeile 13:
 
Dafür gibt es zwei mögliche Größen der Slideshow:
 
Dafür gibt es zwei mögliche Größen der Slideshow:
 
*eine große Slideshow, welche über die gesamte Shop-Darstellungsbreite geht, und
 
*eine große Slideshow, welche über die gesamte Shop-Darstellungsbreite geht, und
−
*eine kleine Slideshow, die über die Breite des Mittelfeldes geht.<br>Diese liegt in zwei Größen vor (abhängig davon, ob im Thema Teaser vorhanden sind oder nicht).
+
*eine kleine Slideshow, die über die Breite des Mittelfeldes geht.<br>Diese liegt in zwei Größen vor (abhängig davon, ob im Thema Teaser oder ähnliche Elemente am rechten Rand vorhanden sind oder nicht).
−
 
 
  
 
Die Anzahl der Bilder, die Geschwindigkeit und auch die Wechseleffekte können gesteuert werden.
 
Die Anzahl der Bilder, die Geschwindigkeit und auch die Wechseleffekte können gesteuert werden.
Zeile 24: Zeile 19:
  
 
{{info|Um das kostenfreie Modul ''Slideshow'' freizuschalten, wenden Sie sich bitte per Ticketsystem, per Email oder telefonisch an unseren Support.}}
 
{{info|Um das kostenfreie Modul ''Slideshow'' freizuschalten, wenden Sie sich bitte per Ticketsystem, per Email oder telefonisch an unseren Support.}}
−
</div>
 
−
</div>
 
  
  
 
== Voraussetzungen ==
 
== Voraussetzungen ==
−
 
−
{{info|Alle Shops, die ab dem 01.03.2012 neu eingerichtet wurden, haben bereits die Funktionalität der Slideshow integriert.}}
 
  
 
Um die Slideshow-Funktionalität nutzen zu können, sind die entsprechenden Templates notwendig. Dazu gehören die Templates
 
Um die Slideshow-Funktionalität nutzen zu können, sind die entsprechenden Templates notwendig. Dazu gehören die Templates
Zeile 40: Zeile 31:
  
  
−
== Erstellen von Slideshows ==
+
== Erstellen und Bearbeiten von Slideshows ==
 +
 
 +
===Bequem über das Shop-Management===
 +
 
 +
Im {{link|Shop-Management|Shop-Management}} finden Sie unter '''Spezial-Seiten und -Bereiche''' / '''Slideshow(s)''' die Möglichkeit, Ihre Slideshow(s) komfortabel zu erstellen und zu bearbeiten bearbeiten.
 +
 
 +
Sie können die Slideshows jetzt bequem über das Shop-Management erstellen und bearbeiten.
  
−
===Datei-Upload===
+
===Datei-Upload (weniger bequem)===
  
 
Über das {{link|Shop-Management|Shop-Management}} und den dortigen Button '''Datei-Upload''' gelangt man zu den für Up- und Download freigegebenen Ordnern. Dort sollte sich ein Verzeichnis namens '''slideshow''' befinden. In diesem Verzeichnis sind die Grafiken für die Slideshow(s) und die Steuerdatei(en) abzulegen.
 
Über das {{link|Shop-Management|Shop-Management}} und den dortigen Button '''Datei-Upload''' gelangt man zu den für Up- und Download freigegebenen Ordnern. Dort sollte sich ein Verzeichnis namens '''slideshow''' befinden. In diesem Verzeichnis sind die Grafiken für die Slideshow(s) und die Steuerdatei(en) abzulegen.
Zeile 63: Zeile 60:
  
  
−
===Bildgrößen===
+
==Bild- und Slideshowgrößen==
  
 
Die Slideshows sind in drei Größen möglich. Die große Slideshow wird im Standardlayout unterhalb der Hauptnavigation eingeblendet. Die kleinen Slideshows können auf allen anderen Seiten genutzt werden. Folgende Abmaße sind im Standardlayout für die Slideshow-Grafiken vorgesehen:
 
Die Slideshows sind in drei Größen möglich. Die große Slideshow wird im Standardlayout unterhalb der Hauptnavigation eingeblendet. Die kleinen Slideshows können auf allen anderen Seiten genutzt werden. Folgende Abmaße sind im Standardlayout für die Slideshow-Grafiken vorgesehen:
 
*große Slideshow: 1168 x 299px
 
*große Slideshow: 1168 x 299px
−
*kleine Slideshow: &nbsp;&nbsp;736 x 270px (wenn im rechten Bereich Teaser und/oder eine zusätzliche Navigation angezeigt werden)
+
*mittelgroße Slideshow: &nbsp;&nbsp;922 x 270px (wenn im rechten Bereich keine Teaser und auch keine zusätzliche Navigation angezeigt werden)
−
*kleine Slideshow: &nbsp;&nbsp;922 x 270px (wenn im rechten Bereich keine Teaser und auch keine zusätzliche Navigation angezeigt werden)
+
*kleine Slideshow: &nbsp;&nbsp;697 x 270px (wenn im rechten Bereich Teaser und/oder eine zusätzliche Navigation angezeigt werden)
  
−
Die Größen für die Slideshow sind in der <tt>styles.css</tt> definiert, dort im Bereich '''Spalten im Hauptteil des Shops'''. Über eine Anpassung hier können die Größen für die kleine und die große Slideshow nach Bedarf auch geändert werden.
+
Die Größen für die Slideshow sind in der <tt>styles.css</tt> definiert, dort im Bereich '''Slideshow'''. Über eine Anpassung hier können die Größen für die Slideshows nach Bedarf auch geändert werden.
  
 
Eine Slideshow auf der Startseite wird als große Slideshow dargestellt, eine Slideshow auf den Themenseiten wird als kleine Slideshow dargestellt. Abweichungen davon sind möglich, müssen aber separat konfiguriert werden.
 
Eine Slideshow auf der Startseite wird als große Slideshow dargestellt, eine Slideshow auf den Themenseiten wird als kleine Slideshow dargestellt. Abweichungen davon sind möglich, müssen aber separat konfiguriert werden.
  
−
Die Templatevariable <tt>{SLIDESHOW_BIG}</tt> zum Einblenden der großen Slideshows ist im Standardlayout im Template '''body_begin.htm''' vorhanden.  Die Templatevariable <tt>{SLIDESHOW}</tt> zum Einblenden der kleinen Slideshow ist im Standardlayout im Template '''body_between_headline_and_content.htm''' vorhanden.
+
Die Templatevariable <tt>{SLIDESHOW_BIG}</tt> zum Einblenden der großen Slideshows ist im Standardlayout im Template <tt>body_begin.htm</tt> vorhanden.  Die Templatevariable <tt>{SLIDESHOW}</tt> zum Einblenden der kleinen und mittleren Slideshows ist im Standardlayout im Template <tt>body_between_headline_and_content.htm</tt> vorhanden.
−
Die Templates '''slideshow.htm''' und '''slideshow_pos.htm''' sind die notwendigen Templates, um die Slideshow darzustellen. Diese Templates müssen also vorhanden sein. In '''slideshow.htm''' kann man die Slideshow-Darstellung selbst parametrisieren, also die Darstellungsdauer, die Bildwechselalgorithmen usw. Eine entsprechende Dokumentation dazu finden Sie im Internet unter '''Nivo Slider'''.
+
Die Templates <tt>slideshow.htm</tt> und <tt>slideshow_pos.htm</tt> sind die notwendigen Templates, um die Slideshow darzustellen. Diese Templates müssen also vorhanden sein. In <tt>slideshow.htm</tt> kann man die Slideshow-Darstellung selbst parametrisieren, also die Darstellungsdauer, die Bildwechselalgorithmen usw.
 +
 
 +
 
 +
{{gbox|slideshow shop-gross-600.png||große Slideshow|Die große Slideshow kommt auf der Startseite des Shops zum Einsatz.
  
 +
Sie überspannt die gesamte Breite des Shops.
  
−
== Die Steuerdateien ==
+
Die verwendeten Bilder sollten die Abmaße '''1168 x 300 px (BxH)''' aufweisen.
 +
 
 +
{{info|Soll die große Slideshow auf anderen Seiten als der Startseite eingerichtet werden, müssen einige Konfigurationen auf unserer Seite vorgenommen werden. Bitte kontaktieren Sie uns diesbezüglich.}}}}
 +
 
 +
{{gbox|slideshow shop-mittel-600.png||mittelgroße Slideshow|Die mittelgroße Slideshow kann auf allen Seiten eingebunden werden.
 +
 
 +
Um sie zu benutzen, sollte die rechte Seitenleiste des Shops freigelassen werden (keine Teaser, Neuheiten etc.).
 +
 
 +
Die verwendeten Bilder sollten die Abmaße '''922 x 270 px (BxH)''' aufweisen.}}
 +
 
 +
{{gbox|slideshow shop-klein-600.png||kleine Slideshow|Die mittelgroße Slideshow kann auf allen Seiten eingebunden werden.
 +
 
 +
Sie sollte verwendet werden, wenn sowohl die linke Navigation als auch die rechte Seitenleiste verwendet werden.
 +
 
 +
Die verwendeten Bilder sollten die Abmaße '''736 x 270 px (BxH)''' aufweisen.}}
 +
 
 +
== Steuerdateien ==
  
 
Für jede Slideshow wird eine Steuerdatei benötigt. Diese kann mit einem einfachen Texteditor erstellt werden und muss das Dateisuffix <tt>.txt</tt> haben.
 
Für jede Slideshow wird eine Steuerdatei benötigt. Diese kann mit einem einfachen Texteditor erstellt werden und muss das Dateisuffix <tt>.txt</tt> haben.
Zeile 85: Zeile 102:
  
 
;Slideshow auf der Startseite des Shops
 
;Slideshow auf der Startseite des Shops
−
:Für die Slideshow auf der Startseite des Shops muss es eine Steuerdatei mit dem Namen '''slideshow.txt''' geben.
+
:Für die Slideshow auf der Startseite des Shops muss es eine Steuerdatei mit dem Namen <tt>'''slideshow.txt'''</tt> geben.
  
 
;Slideshow auf beliebigen Themenseiten
 
;Slideshow auf beliebigen Themenseiten
−
:Für eine Slideshow auf einer beliebigen ''Themenseite'' muss eine Steuerdatei mit dem Namen '''slideshow_XX.txt''' vorhanden sein, wobei '''XX''' für die '''Themennummer des Themas''' steht.
+
:Für eine Slideshow auf einer beliebigen Themenseite muss eine Steuerdatei mit dem Namen <tt>'''slideshow_XX.txt'''</tt> vorhanden sein, wobei <tt>'''XX'''</tt> für die '''Themennummer des Themas''' steht.
 +
:Soll also z.B. für das Thema mit der Nr. 1051 eine Slideshow erstellt werden, so ist eine Steuerdatei mit dem Namen <tt>slideshow_1051.txt</tt> bereit zu legen.
 +
:Die Nummer eines Themas lässt sich dem {{link|Shopeditor - Reiter Eigenschaften|Reiter "Eigenschaften" des Shop-Editors}} entnehmen.
 +
 
 +
 
 +
===Dateistruktur===
 +
 
 +
Innerhalb jeder Steuerdatei gibt es eine Kopfzeile und dann pro Slideshow-Eintrag eine Zeile. Jede Zeile besteht aus einzelnen Feldern. Die Felder innerhalb jeder Zeile werden durch {{k-tab}} voneinander getrennt.
 +
 
 +
Folgende Felder gibt es pro Slideshow-Eintrag:
 +
 
 +
:*'''Dateiname der Grafikdatei - <tt>filename</tt>'''
 +
::*An der ersten Stelle wird der komplette Dateiname angegeben. Dieser muss auch die Dateierweiterung (bspw. <tt>.png</tt>) enthalten, also z.B. <tt>slideshow_bild1.png</tt> oder <tt>bild28.jpeg</tt> .
 +
 
 +
:*'''Art des Links - <tt>what(t,a,n,s,e,o)</tt>'''
 +
::Die Art des Links gibt an, ob es sich um einen Link auf ein anderes Thema oder um einen Link auf ein Shopprodukt handelt.
 +
::<tt>'''t'''</tt> - Link auf ein Thema
 +
::<tt>'''a'''</tt> - Link auf die Detailseite eines Artikels
 +
::<tt>'''s'''</tt> - Link auf die Sonderangebote
 +
::<tt>'''n'''</tt> - Link auf die Neuheiten
 +
::<tt>'''o'''</tt> - Link auf etwas anderes, Link wird im gleichen Browserfenster geöffnet
 +
::<tt>'''e'''</tt> - Link auf etwas anderes, Link wird in einem separaten Browserfenster/-tab geöffnet ''(ab Templateversion 7.6.12.0)''
 +
 
 +
:*'''Konkretisierung des Links - <tt>id</tt>'''
 +
::<tt>'''t'''</tt> - Wenn es sich um ein Link auf ein Thema handelt, dann ist als Konkretisierung die Themen-Nr. des Themas einzutragen, auf das verlinkt werden soll.
 +
:::Beispiel: <tt>1051</tt>
 +
::<tt>'''a'''</tt> - Wenn es sich um einen Link auf die Detailseite eines Artikels handelt, dann ist als Konkretisierung die Artikelnummer des Shopprodukts einzutragen, auf das verlinkt werden soll.
 +
:::Beispiel: <tt>A1120</tt>
 +
::<tt>'''s'''</tt> - Beim Link auf die Seite mit den Sonderangeboten ist die Spalte id leer zu lassen.
 +
::<tt>'''n'''</tt> - Beim Link auf die Seite mit den Neuheiten ist die Spalte id leer zu lassen.
 +
::<tt>'''o'''</tt> - Wenn es sich um ein Link auf etwas anderes handelt, dann ist hier die konkrete URL einzutragen. Soll eine shopinterne URL hinterlegt werden, kann der Platzhalter <tt>{URL}</tt> mitsamt einer der vorgegebenen Bezeichnung verwendet werden.
 +
:::Um z.B. auf die Angebotsseite verlinken, muss folgendes eingetragen werden: <tt>{URL}offer</tt>
 +
:::Die folgenden Platzhalter sind vorhanden:
 +
:::{| class="wikitable"
 +
|-
 +
! scope="col" style="text-align:left;"| Platzhalter
 +
! scope="col" style="text-align:left;"| Ziel des Links
 +
|-
 +
|<tt>{URL}agb</tt>
 +
|Allgemeine Geschäftsbedingungen
 +
|-
 +
|<tt>{URL}datenschutz</tt>
 +
|Datenschutz-Übersicht
 +
|-
 +
|<tt>{URL}cart</tt>
 +
|Warenkorb
 +
|-
 +
|<tt>{URL}kontakt</tt>
 +
|Kontaktformular
 +
|-
 +
|<tt>{URL}login</tt>
 +
|Login-Seite
 +
|-
 +
|<tt>{URL}marken</tt>
 +
|Markenübersicht
 +
|-
 +
|<tt>{URL}merkzettel</tt>
 +
|Merkzettel
 +
|-
 +
|<tt>{URL}newsletter</tt>
 +
|Newsletter-Anmeldung
 +
|-
 +
|<tt>{URL}versandkosten</tt>
 +
|Versandkostenübersicht
 +
|-
 +
|<tt>{URL}widerrufsrecht</tt>
 +
|Widerrufsrecht
 +
|}
 +
 
 +
:::Diese Platzhalter können auch im Langtext-Bereich eines Slides verwendet werden, damit bspw. nicht nur das eigentliche Bild, sondern auch der eingeblendete Text verlinkt wird.
 +
 
 +
::<tt>'''e'''</tt> - wie '''o''', der Link wird aber in einem separaten Browserfenster/-tab geöffnet ''(ab Templateversion 7.6.12.0)''.
 +
 
 +
 
 +
:*'''Tooltip-Text - <tt>text</tt>'''
 +
::An dieser Stelle wird der Text eingetragen, der als Tooltip angezeigt wird, wenn die Maus über einem Bild der Slideshow schwebt.
 +
::[[image:slideshow tooltip.png|verweis=]]
 +
 
 +
:*'''Langtext - <tt>longtext</tt>'''
 +
::Dieser kann dann, bei entsprechend vorhandenen Templates, als HTML-Langtext z.B. dem Bild überlagernd angezeigt werden.
 +
 
 +
 
 +
Damit sieht eine Steuerdatei z.B. so aus:
  
−
Soll also z.B. für das Thema mit der Nr. 163 eine Slideshow erstellt werden, so ist eine Steuerdatei mit dem Namen slideshow_163.txt bereit zu legen.
+
<div class="ml20 boxshadow" style="padding:10px;"><tt>
 +
filename&nbsp;&nbsp;&#8594;&nbsp;&nbsp;what(t or a)&nbsp;&nbsp;&#8594;&nbsp;&nbsp;id&nbsp;&nbsp;&#8594;&nbsp;&nbsp;text&nbsp;&nbsp;&#8594;&nbsp;&nbsp;longtext
  
−
Die Nr. eines Themas lässt sich dem Shop-Editor entnehmen. Dazu geht man in der Baumstruktur auf das gewünschte Thema und kann dann rechts im Reiter '''Inhalt''' oben den Wert der '''Themennr.''' ablesen.
+
slideshow_bild1.png&nbsp;&nbsp;&#8594;&nbsp;&nbsp;t&nbsp;&nbsp;&#8594;&nbsp;&nbsp;1051&nbsp;&nbsp;&#8594;&nbsp;&nbsp;&nbsp;die besten BMX-Räder der Saison gibt's hier
  
 +
slideshow_bild2.png&nbsp;&nbsp;&#8594;&nbsp;&nbsp;a&nbsp;&nbsp;&#8594;&nbsp;&nbsp;A1120&nbsp;&nbsp;&#8594;&nbsp;&nbsp;neu eingetroffen: das Droid A2
  
−
===Struktur===
+
slideshow_bild3.png&nbsp;&nbsp;&#8594;&nbsp;&nbsp;o&nbsp;&nbsp;&#8594;&nbsp;&nbsp;{URL}offer&nbsp;&nbsp;&#8594;&nbsp;&nbsp;hier geht's zu unseren Sonderangeboten
  
−
Innerhalb einer jeder Steuerdatei gibt es eine Kopfzeile und dann pro Slideshow-Eintrag eine Zeile. Jede Zeile besteht aus einzelnen Feldern. Die Felder innerhalb einer jeden Zeile sind durch das TAB-Zeichen voneinander geetrennt. Folgende Felder gibt es pro Slideshow-Eintrag:
+
slideshow_bild4.png&nbsp;&nbsp;&#8594;&nbsp;&nbsp;e&nbsp;&nbsp;&#8594;&nbsp;&nbsp;<nowiki>http://www.google.de&nbsp;&nbsp;&#8594;&nbsp;&nbsp;</nowiki>Hier geht es zu Google; wird im separaten Browserfenster/-tab geöffnet</tt></div>
−
# Dateiname der Grafikdatei
 
−
# Art des Links
 
−
#:Die Art des Links gibt an, ob es sich um einen Link auf ein anderes Thema oder um einen Link auf ein Shopprodukt handelt.
 
−
#:<tt>t</tt> - Link auf ein Thema
 
−
#:<tt>a</tt> - Link auf ein Shopprodukt
 
−
#:<tt>o</tt> - Link auf etwas anderes
 
−
# Konkretisierung des Links
 
−
#:Wenn es sich um ein Link auf ein Thema (siehe Feld davor, Wert t) handelt, dann ist als Konkretisierung die Themen-Nr. des Themas einzutragen, auf das verlinkt werden soll.
 
−
#:Wenn es sich um einen Link auf ein Shopprodukt (siehe Feld davor, Wert a) handelt, dann ist als Konkretisierung die Artikelnummer des Shopprodukts einzutragen, auf das verlinkt werden soll.
 
−
#:Wenn es sich um ein Link auf etwas anderes (Wert o) handelt, dann ist hier die konkrete URL einzutragen. Sollte es eine shopinterne URL sein, dann kann man diese optimal als relative URL hinterlegen, man kann auch direkte die Platzhalter {URL}, {shop} und {SessionId} verwenden. Will man z.B. auf die Angebotsseite verlinken, so könnte man hier eintragen
 
−
#::<tt>{URL}offer</tt>
 
−
#:Oder will man z.B. auf die Seite mit den Neuheiten verlinken, so könnte man eintragen:
 
−
#::<tt>{URL}news</tt>
 
−
# MouseOver-Text
 
−
# Langtext
 
−
#:Dieser kann dann, bei entsprechend vorhandenen Templates, als HTML-Langtext z.B. dem Bild überlagernd angezeigt werden. Hier stehen folgende Platzhalter zur Verfügung:
 
−
#::<tt>{slideshow_url}</tt> –-- berechnete URL für das Slideshow-Bild (siehe Felder 2 und 3)
 
−
#::<tt>{URL}</tt> – wie die Templatevariable <tt>{URL}</tt>
 
−
#::<tt>{SessionId}</tt> – wie die Templatevariable <tt>{SessionId}</tt>
 
−
#::<tt>{shop}</tt> – wie die Templatevariable <tt>{shop}</tt>
 
  
−
Damit sieht eine Steuerdatei z. B. so aus:
 
  
−
<tt>
+
{{wichtig|Die in der Beispieldatei dargestellten Pfeile (<tt>&#8594;</tt>) stellen Tabulatoren dar, welche als Trennzeichen der Datensätze dienen. Sie können in Editoren mit der Taste {{k-tab}} eingefügt werden.
−
:filename&nbsp;&nbsp;&nbsp;&nbsp;what(t or a)&nbsp;&nbsp;&nbsp;&nbsp;id&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;&nbsp;&nbsp;&nbsp;longtext
+
<hr>
−
:slideshow_bild1.png&nbsp;&nbsp;&nbsp;&nbsp;t&nbsp;&nbsp;&nbsp;&nbsp;145&nbsp;&nbsp;&nbsp;&nbsp;Thema mit K&ouml;rperpflegeartikeln
+
Die erste Zeile, bestehend aus den Überschriften, muss in jeder Steuerdatei vorhanden sein.}}
−
:slideshow_bild2.png&nbsp;&nbsp;&nbsp;&nbsp;a&nbsp;&nbsp;&nbsp;&nbsp;A1000&nbsp;&nbsp;&nbsp;&nbsp;Artikel aus dem B&uuml;robereich
 
−
:slideshow_bild3.png&nbsp;&nbsp;&nbsp;&nbsp;o&nbsp;&nbsp;&nbsp;&nbsp;{URL}offer&nbsp;&nbsp;&nbsp;&nbsp;Seite mit den Sonderangeboten</tt>
 

Aktuelle Version vom 19. Juni 2023, 09:27 Uhr

zum Anfang der Seite

Eine Slideshow ist ein grafisches Element, das die Anzeige verschiedener wechselnder Grafiken ermöglicht. Hinter jeder der Grafiken liegt ein Link auf eine Themenseite im Shop oder auf ein Shopprodukt.



Durch den Einsatz einer Slideshow kann man gezielt auf bestimmte Seiten im Shop oder einzelne Produkte hinweisen.
Durch den Bildwechsel-Effekt der Slideshow wird die Aufmerksamkeit des Besuchers gezielt gelenkt.

Im Onlineshop kann eine Slideshow sowohl auf der Shop-Startseite als auch auf beliebigen Themenseiten eingeblendet werden.

Dafür gibt es zwei mögliche Größen der Slideshow:

  • eine große Slideshow, welche über die gesamte Shop-Darstellungsbreite geht, und
  • eine kleine Slideshow, die über die Breite des Mittelfeldes geht.
    Diese liegt in zwei Größen vor (abhängig davon, ob im Thema Teaser oder ähnliche Elemente am rechten Rand vorhanden sind oder nicht).

Die Anzahl der Bilder, die Geschwindigkeit und auch die Wechseleffekte können gesteuert werden.


Templ info-blk.png
Um das kostenfreie Modul Slideshow freizuschalten, wenden Sie sich bitte per Ticketsystem, per Email oder telefonisch an unseren Support.


Voraussetzungen

Um die Slideshow-Funktionalität nutzen zu können, sind die entsprechenden Templates notwendig. Dazu gehören die Templates

  • slideshow.htm
  • slideshow_pos.htm

Weiterhin sind die jquery-Bibliotheken und auch das Nivo Slider Plugin erforderlich. Entsprechende Erweiterungen im css-Bereich sorgen für die korrekte Darstellung und der Aufruf der Slideshow-Templates über die Templatevariablen {SLIDESHOW} und {SLIDESHOW_BIG} an den erforderlichen Stellen, z.B. in body_begin.htm und body_between_headline_and_content.htm, sorgt dann für die Integration in die Seite.

Für existierende Shops ohne Templatewartung können unsere e-vendo Kunden nach Login auf der e-vendo Homepage sich die Readme (Version 7.0.19.0), die aktuelle Referenzdokumentation der Templates sowie ein aktuelles Standard-Shop-Layout herunter laden.


Erstellen und Bearbeiten von Slideshows

Bequem über das Shop-Management

Im ❯Shop-Management finden Sie unter Spezial-Seiten und -Bereiche / Slideshow(s) die Möglichkeit, Ihre Slideshow(s) komfortabel zu erstellen und zu bearbeiten bearbeiten.

Sie können die Slideshows jetzt bequem über das Shop-Management erstellen und bearbeiten.

Datei-Upload (weniger bequem)

Über das ❯Shop-Management und den dortigen Button Datei-Upload gelangt man zu den für Up- und Download freigegebenen Ordnern. Dort sollte sich ein Verzeichnis namens slideshow befinden. In diesem Verzeichnis sind die Grafiken für die Slideshow(s) und die Steuerdatei(en) abzulegen.

Es gibt pro Slideshow je eine Steuerdatei (siehe unten) und für jede Grafik gibt es eine Grafikdatei.


Wenn eine Slideshow z.B. aus drei Grafiken besteht, dann sind für die gesamte Slideshow vier Dateien notwendig: drei Grafikdateien und eine Steuerdatei.

Wird die Slideshow auf der Startseite verwendet, muss diese zwingend den Dateinamen slideshow.txt haben.

Slideshow mgmt1.png


Wenn es eine weitere Slideshow mit z.B. zwei Grafiken gibt, dann werden dafür also zusätzliche drei Dateien benötigt. Für beide Slideshows zusammen sind dann also sieben Dateien (zwei Steuerdateien und fünf Grafikdateien) notwendig.

Die Steuerdatei der zweiten Slideshow muss dabei zwingend slideshow_[Themennummer].txt heißen.

Slideshow mgmt2.png


Bild- und Slideshowgrößen

Die Slideshows sind in drei Größen möglich. Die große Slideshow wird im Standardlayout unterhalb der Hauptnavigation eingeblendet. Die kleinen Slideshows können auf allen anderen Seiten genutzt werden. Folgende Abmaße sind im Standardlayout für die Slideshow-Grafiken vorgesehen:

  • große Slideshow: 1168 x 299px
  • mittelgroße Slideshow:   922 x 270px (wenn im rechten Bereich keine Teaser und auch keine zusätzliche Navigation angezeigt werden)
  • kleine Slideshow:   697 x 270px (wenn im rechten Bereich Teaser und/oder eine zusätzliche Navigation angezeigt werden)

Die Größen für die Slideshow sind in der styles.css definiert, dort im Bereich Slideshow. Über eine Anpassung hier können die Größen für die Slideshows nach Bedarf auch geändert werden.

Eine Slideshow auf der Startseite wird als große Slideshow dargestellt, eine Slideshow auf den Themenseiten wird als kleine Slideshow dargestellt. Abweichungen davon sind möglich, müssen aber separat konfiguriert werden.

Die Templatevariable {SLIDESHOW_BIG} zum Einblenden der großen Slideshows ist im Standardlayout im Template body_begin.htm vorhanden. Die Templatevariable {SLIDESHOW} zum Einblenden der kleinen und mittleren Slideshows ist im Standardlayout im Template body_between_headline_and_content.htm vorhanden. Die Templates slideshow.htm und slideshow_pos.htm sind die notwendigen Templates, um die Slideshow darzustellen. Diese Templates müssen also vorhanden sein. In slideshow.htm kann man die Slideshow-Darstellung selbst parametrisieren, also die Darstellungsdauer, die Bildwechselalgorithmen usw.


Slideshow shop-gross-600.png

große Slideshow

Die große Slideshow kommt auf der Startseite des Shops zum Einsatz.

Sie überspannt die gesamte Breite des Shops.

Die verwendeten Bilder sollten die Abmaße 1168 x 300 px (BxH) aufweisen.

Templ info-blk.png
Soll die große Slideshow auf anderen Seiten als der Startseite eingerichtet werden, müssen einige Konfigurationen auf unserer Seite vorgenommen werden. Bitte kontaktieren Sie uns diesbezüglich.

Slideshow shop-mittel-600.png

mittelgroße Slideshow

Die mittelgroße Slideshow kann auf allen Seiten eingebunden werden.

Um sie zu benutzen, sollte die rechte Seitenleiste des Shops freigelassen werden (keine Teaser, Neuheiten etc.).

Die verwendeten Bilder sollten die Abmaße 922 x 270 px (BxH) aufweisen.

Slideshow shop-klein-600.png

kleine Slideshow

Die mittelgroße Slideshow kann auf allen Seiten eingebunden werden.

Sie sollte verwendet werden, wenn sowohl die linke Navigation als auch die rechte Seitenleiste verwendet werden.

Die verwendeten Bilder sollten die Abmaße 736 x 270 px (BxH) aufweisen.

Steuerdateien

Für jede Slideshow wird eine Steuerdatei benötigt. Diese kann mit einem einfachen Texteditor erstellt werden und muss das Dateisuffix .txt haben.

Dateiname

Slideshow auf der Startseite des Shops
Für die Slideshow auf der Startseite des Shops muss es eine Steuerdatei mit dem Namen slideshow.txt geben.
Slideshow auf beliebigen Themenseiten
Für eine Slideshow auf einer beliebigen Themenseite muss eine Steuerdatei mit dem Namen slideshow_XX.txt vorhanden sein, wobei XX für die Themennummer des Themas steht.
Soll also z.B. für das Thema mit der Nr. 1051 eine Slideshow erstellt werden, so ist eine Steuerdatei mit dem Namen slideshow_1051.txt bereit zu legen.
Die Nummer eines Themas lässt sich dem ❯Reiter "Eigenschaften" des Shop-Editors entnehmen.


Dateistruktur

Innerhalb jeder Steuerdatei gibt es eine Kopfzeile und dann pro Slideshow-Eintrag eine Zeile. Jede Zeile besteht aus einzelnen Feldern. Die Felder innerhalb jeder Zeile werden durch ⭾ Tab voneinander getrennt.

Folgende Felder gibt es pro Slideshow-Eintrag:

  • Dateiname der Grafikdatei - filename
  • An der ersten Stelle wird der komplette Dateiname angegeben. Dieser muss auch die Dateierweiterung (bspw. .png) enthalten, also z.B. slideshow_bild1.png oder bild28.jpeg .
  • Art des Links - what(t,a,n,s,e,o)
Die Art des Links gibt an, ob es sich um einen Link auf ein anderes Thema oder um einen Link auf ein Shopprodukt handelt.
t - Link auf ein Thema
a - Link auf die Detailseite eines Artikels
s - Link auf die Sonderangebote
n - Link auf die Neuheiten
o - Link auf etwas anderes, Link wird im gleichen Browserfenster geöffnet
e - Link auf etwas anderes, Link wird in einem separaten Browserfenster/-tab geöffnet (ab Templateversion 7.6.12.0)
  • Konkretisierung des Links - id
t - Wenn es sich um ein Link auf ein Thema handelt, dann ist als Konkretisierung die Themen-Nr. des Themas einzutragen, auf das verlinkt werden soll.
Beispiel: 1051
a - Wenn es sich um einen Link auf die Detailseite eines Artikels handelt, dann ist als Konkretisierung die Artikelnummer des Shopprodukts einzutragen, auf das verlinkt werden soll.
Beispiel: A1120
s - Beim Link auf die Seite mit den Sonderangeboten ist die Spalte id leer zu lassen.
n - Beim Link auf die Seite mit den Neuheiten ist die Spalte id leer zu lassen.
o - Wenn es sich um ein Link auf etwas anderes handelt, dann ist hier die konkrete URL einzutragen. Soll eine shopinterne URL hinterlegt werden, kann der Platzhalter {URL} mitsamt einer der vorgegebenen Bezeichnung verwendet werden.
Um z.B. auf die Angebotsseite verlinken, muss folgendes eingetragen werden: {URL}offer
Die folgenden Platzhalter sind vorhanden:
Platzhalter Ziel des Links
{URL}agb Allgemeine Geschäftsbedingungen
{URL}datenschutz Datenschutz-Übersicht
{URL}cart Warenkorb
{URL}kontakt Kontaktformular
{URL}login Login-Seite
{URL}marken Markenübersicht
{URL}merkzettel Merkzettel
{URL}newsletter Newsletter-Anmeldung
{URL}versandkosten Versandkostenübersicht
{URL}widerrufsrecht Widerrufsrecht
Diese Platzhalter können auch im Langtext-Bereich eines Slides verwendet werden, damit bspw. nicht nur das eigentliche Bild, sondern auch der eingeblendete Text verlinkt wird.
e - wie o, der Link wird aber in einem separaten Browserfenster/-tab geöffnet (ab Templateversion 7.6.12.0).


  • Tooltip-Text - text
An dieser Stelle wird der Text eingetragen, der als Tooltip angezeigt wird, wenn die Maus über einem Bild der Slideshow schwebt.
Slideshow tooltip.png
  • Langtext - longtext
Dieser kann dann, bei entsprechend vorhandenen Templates, als HTML-Langtext z.B. dem Bild überlagernd angezeigt werden.


Damit sieht eine Steuerdatei z.B. so aus:

filename  →  what(t or a)  →  id  →  text  →  longtext

slideshow_bild1.png  →  t  →  1051  →   die besten BMX-Räder der Saison gibt's hier

slideshow_bild2.png  →  a  →  A1120  →  neu eingetroffen: das Droid A2

slideshow_bild3.png  →  o  →  {URL}offer  →  hier geht's zu unseren Sonderangeboten

slideshow_bild4.png  →  e  →  http://www.google.de  →  Hier geht es zu Google; wird im separaten Browserfenster/-tab geöffnet


Templ att-blk.png
Die in der Beispieldatei dargestellten Pfeile (→) stellen Tabulatoren dar, welche als Trennzeichen der Datensätze dienen. Sie können in Editoren mit der Taste ⭾ Tab eingefügt werden.
Die erste Zeile, bestehend aus den Überschriften, muss in jeder Steuerdatei vorhanden sein.
Abgerufen von „https://wiki.e-vendo.de/index.php?title=Slideshow&oldid=20827“