Slideshow: Unterschied zwischen den Versionen
(→Erstellen von Slideshow(s)) |
K |
||
Zeile 3: | Zeile 3: | ||
__TOC__ | __TOC__ | ||
+ | |||
+ | |||
+ | [[image:slideshow shop.png|border|600px|verweis=]] | ||
Zeile 9: | Zeile 12: | ||
Im Onlineshop kann eine Slideshow sowohl auf der Shop-Startseite als auch auf beliebigen Themenseiten eingeblendet werden. Eine Slideshow kann eine große Slideshow sein, die über die gesamte Shop-Darstellungsbreite geht, oder eine kleine Slideshow, die über die Breite des Mittelfeldes geht. Die Anzahl der Bilder, die Geschwindigkeit und auch die Wechseleffekte können gesteuert werden. | Im Onlineshop kann eine Slideshow sowohl auf der Shop-Startseite als auch auf beliebigen Themenseiten eingeblendet werden. Eine Slideshow kann eine große Slideshow sein, die über die gesamte Shop-Darstellungsbreite geht, oder eine kleine Slideshow, die über die Breite des Mittelfeldes geht. Die Anzahl der Bilder, die Geschwindigkeit und auch die Wechseleffekte können gesteuert werden. | ||
− | + | {{info|Um das kostenfreie Modul ''Slideshow'' freizuschalten, wenden Sie sich bitte per Ticketsystem, per Email oder telefonisch an unseren Support.}} | |
− | |||
== 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 19: | Zeile 23: | ||
*slideshow_pos.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. | 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. | 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. | ||
Zeile 27: | Zeile 29: | ||
== Erstellen von Slideshow(s) == | == Erstellen von Slideshow(s) == | ||
− | Über das Shop-Management und den dortigen Button | + | Ü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. |
− | Es gibt pro Slideshow je eine Steuerdatei. Für jede Grafik gibt es eine Grafikdatei. Wenn eine Slideshow z.B. aus | + | Es gibt pro Slideshow je eine Steuerdatei. 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: 3 Grafikdateien und eine Steuerdatei. Wenn es eine weitere Slideshow mit z.B. 5 Grafiken gibt, dann werden dafür also 6 Dateien benötigt. Für beide Slideshows zusammen sind dann also 10 Dateien (2 Steuerdateien und 8 Grafikdateien) notwendig. |
− | Die Slideshows sind in zwei Größen möglich. Die große Slideshow wird im Standardlayout | + | Die Slideshows sind in zwei Größen möglich. Die große Slideshow wird im Standardlayout unterhalb der Hauptnavigation eingeblendet. Die kleine Slideshow kann auf allen anderen Seiten genutzt werden. Folgende Abmaße sind im Standardlayout für die Slideshow-Grafiken vorgesehen: |
*Große Slideshow: 1168 x 299 Pixel | *Große Slideshow: 1168 x 299 Pixel | ||
*Kleine Slideshow: 736 x 270 Pixel (wenn im rechten Bereich Teaser und/oder eine zusätzliche Navigation angezeigt werden) | *Kleine Slideshow: 736 x 270 Pixel (wenn im rechten Bereich Teaser und/oder eine zusätzliche Navigation angezeigt werden) | ||
Zeile 40: | Zeile 42: | ||
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 | + | 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 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 '''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 Steuerdateien == | == Die Steuerdateien == | ||
− | Für jede Slideshow wird eine Steuerdatei benötigt. Diese kann | + | 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 die Slideshow auf der | + | ===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. | ||
+ | :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. 163 eine Slideshow erstellt werden, so ist eine Steuerdatei mit dem Namen slideshow_163.txt bereit zu legen. | 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. | ||
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. | 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. | ||
+ | |||
+ | |||
+ | ===Struktur=== | ||
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: | 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: | ||
Zeile 57: | Zeile 67: | ||
# Art des Links | # 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. | #: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 | + | #:<tt>t</tt> - Link auf ein Thema |
− | #:a - Link auf ein Shopprodukt | + | #:<tt>a</tt> - Link auf ein Shopprodukt |
− | #:o - Link auf etwas anderes | + | #:<tt>o</tt> - Link auf etwas anderes |
# Konkretisierung des Links | # 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 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 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 | #: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 | ||
− | #::{URL}offer | + | #::<tt>{URL}offer</tt> |
#:Oder will man z.B. auf die Seite mit den Neuheiten verlinken, so könnte man eintragen: | #:Oder will man z.B. auf die Seite mit den Neuheiten verlinken, so könnte man eintragen: | ||
− | #::{URL}news | + | #::<tt>{URL}news</tt> |
# MouseOver-Text | # MouseOver-Text | ||
# Langtext | # 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: | #:Dieser kann dann, bei entsprechend vorhandenen Templates, als HTML-Langtext z.B. dem Bild überlagernd angezeigt werden. Hier stehen folgende Platzhalter zur Verfügung: | ||
− | #::{slideshow_url} –-- berechnete URL für das Slideshow-Bild (siehe Felder 2 und 3) | + | #::<tt>{slideshow_url}</tt> –-- berechnete URL für das Slideshow-Bild (siehe Felder 2 und 3) |
− | #::{URL} – | + | #::<tt>{URL}</tt> – wie die Templatevariable <tt>{URL}</tt> |
− | #::{SessionId} – | + | #::<tt>{SessionId}</tt> – wie die Templatevariable <tt>{SessionId}</tt> |
− | #::{shop} – | + | #::<tt>{shop}</tt> – wie die Templatevariable <tt>{shop}</tt> |
Damit sieht eine Steuerdatei z. B. so aus: | Damit sieht eine Steuerdatei z. B. so aus: | ||
+ | |||
+ | <tt> | ||
:filename what(t or a) id text longtext | :filename what(t or a) id text longtext | ||
− | : | + | :slideshow_bild1.png t 145 Thema mit Körperpflegeartikeln |
− | : | + | :slideshow_bild2.png a A1000 Artikel aus dem Bürobereich |
− | : | + | :slideshow_bild3.png o {URL}offer Seite mit den Sonderangeboten</tt> |
Version vom 31. März 2016, 09:50 Uhr
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.
Inhaltsverzeichnis
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. Eine Slideshow kann eine große Slideshow sein, die über die gesamte Shop-Darstellungsbreite geht, oder eine kleine Slideshow, die über die Breite des Mittelfeldes geht. Die Anzahl der Bilder, die Geschwindigkeit und auch die Wechseleffekte können gesteuert werden.
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 von Slideshow(s)
Ü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. 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: 3 Grafikdateien und eine Steuerdatei. Wenn es eine weitere Slideshow mit z.B. 5 Grafiken gibt, dann werden dafür also 6 Dateien benötigt. Für beide Slideshows zusammen sind dann also 10 Dateien (2 Steuerdateien und 8 Grafikdateien) notwendig.
Die Slideshows sind in zwei Größen möglich. Die große Slideshow wird im Standardlayout unterhalb der Hauptnavigation eingeblendet. Die kleine Slideshow kann auf allen anderen Seiten genutzt werden. Folgende Abmaße sind im Standardlayout für die Slideshow-Grafiken vorgesehen:
- Große Slideshow: 1168 x 299 Pixel
- Kleine Slideshow: 736 x 270 Pixel (wenn im rechten Bereich Teaser und/oder eine zusätzliche Navigation angezeigt werden)
- Kleine Slideshow: 922 x 270 Pixel (wenn im rechten Bereich keine Teaser und auch keine zusätzliche Navigation angezeigt werden)
Die Größen für die Slideshow sind in der styles.css 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.
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 Slideshow 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. Eine entsprechende Dokumentation dazu finden Sie im Internet unter Nivo Slider.
Die 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.
- 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. 163 eine Slideshow erstellt werden, so ist eine Steuerdatei mit dem Namen slideshow_163.txt bereit zu legen.
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.
Struktur
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:
- 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.
- t - Link auf ein Thema
- a - Link auf ein Shopprodukt
- o - 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
- {URL}offer
- Oder will man z.B. auf die Seite mit den Neuheiten verlinken, so könnte man eintragen:
- {URL}news
- 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:
- {slideshow_url} –-- berechnete URL für das Slideshow-Bild (siehe Felder 2 und 3)
- {URL} – wie die Templatevariable {URL}
- {SessionId} – wie die Templatevariable {SessionId}
- {shop} – wie die Templatevariable {shop}
- Dieser kann dann, bei entsprechend vorhandenen Templates, als HTML-Langtext z.B. dem Bild überlagernd angezeigt werden. Hier stehen folgende Platzhalter zur Verfügung:
Damit sieht eine Steuerdatei z. B. so aus:
- filename what(t or a) id text longtext
- slideshow_bild1.png t 145 Thema mit Körperpflegeartikeln
- slideshow_bild2.png a A1000 Artikel aus dem Bürobereich
- slideshow_bild3.png o {URL}offer Seite mit den Sonderangeboten