CSS- und HTML-Dokumentation: Unterschied zwischen den Versionen

Aus e-vendo Wiki
Wechseln zu: Navigation, Suche
(Kacheln)
(Vorwort)
 
(78 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 8: Zeile 8:
 
Als Leitfaden dient das mobile-first-Konzept. Das heißt, dass Inhalte zuerst für die kleinsten gängigen Mobilgeräte (ca. 320px) erstellt und dann mittels Media-Queries für größer werdende Bereiche optimiert werden.
 
Als Leitfaden dient das mobile-first-Konzept. Das heißt, dass Inhalte zuerst für die kleinsten gängigen Mobilgeräte (ca. 320px) erstellt und dann mittels Media-Queries für größer werdende Bereiche optimiert werden.
  
 +
{{wichtig|Derzeit findet eine umfangreiche Umbenennung der CSS-Klassen statt. Ab der Templateversion 8.0.14.0 wird einiges anders benannt sein.}}
  
 
+
<!--
 
 
 
= Allgemeines =
 
= Allgemeines =
 
box-sizing:border-box
 
box-sizing:border-box
Zeile 16: Zeile 16:
 
Alle Elemente im e-vendo-Shop sind mit box-sizing:border-box voreingestellt. Das heißt, dass bei Größenangaben Rahmen und Innenabstände mit einberechnet werden. Außenabstände kommen weiterhin extra dazu.
 
Alle Elemente im e-vendo-Shop sind mit box-sizing:border-box voreingestellt. Das heißt, dass bei Größenangaben Rahmen und Innenabstände mit einberechnet werden. Außenabstände kommen weiterhin extra dazu.
 
Wichtig wird dies beim Floating. So werden zwei Boxen mit je 50% Breite und Innenabstand sowie Rahmen auch nebeneinander angezeigt, da Ihre Gesamtbreite bei 100% liegt. Nimmt man noch einen Außenabstand dazu, übersteigt die Gesamtbreite 100% (50% + Außenabstand) und die Boxen werden umbrechen.
 
Wichtig wird dies beim Floating. So werden zwei Boxen mit je 50% Breite und Innenabstand sowie Rahmen auch nebeneinander angezeigt, da Ihre Gesamtbreite bei 100% liegt. Nimmt man noch einen Außenabstand dazu, übersteigt die Gesamtbreite 100% (50% + Außenabstand) und die Boxen werden umbrechen.
 +
-->
  
  
 +
<!--
 
= allgemeine Klassen =
 
= allgemeine Klassen =
 +
-->
  
 +
<!--
 
== wichtige Breiten ==
 
== wichtige Breiten ==
'''w_100''' : 100%<br>
+
'''w--100''' : 100%<br>
'''w_90''' : 90%<br>
+
'''w--90''' : 90%<br>
'''w_80''' : 80%<br>
+
'''w--80''' : 80%<br>
'''w_75''' : 75%<br>
+
'''w--75''' : 75%<br>
'''w_70''' : 70%<br>
+
'''w--70''' : 70%<br>
'''w_66''' : 66%<br>
+
'''w--66''' : 66%<br>
'''w_60''' : 60%<br>
+
'''w--60''' : 60%<br>
'''w_50''' : 50%<br>
+
'''w--50''' : 50%<br>
'''w_40''' : 40%<br>
+
'''w--40''' : 40%<br>
'''w_33''' : 33%<br>
+
'''w--33''' : 33%<br>
'''w_30''' : 30%<br>
+
'''w--30''' : 30%<br>
'''w_25''' : 25%<br>
+
'''w--25''' : 25%<br>
'''w_20''' : 20%<br>
+
'''w--20''' : 20%<br>
'''w_10''' : 10%<br>
+
'''w--10''' : 10%<br>
  
  
 
Die Breiten können mit dem Zusatz '''-480''', '''-640''' und '''-880''' versehen werden und wirken dann erst ab erreichen der entsprechenden Größe in Pixeln.
 
Die Breiten können mit dem Zusatz '''-480''', '''-640''' und '''-880''' versehen werden und wirken dann erst ab erreichen der entsprechenden Größe in Pixeln.
 +
-->
  
 
+
<!--
 
== Abstände ==
 
== Abstände ==
 
Abstandsklassen gibt es in zwei Formen: Absolut mit festen Pixeln oder relativ an der Schriftgröße ausgerichtet. Erkennbar sind diese an dem letzten Buchstaben: "a" für absolut und "r" für relativ.
 
Abstandsklassen gibt es in zwei Formen: Absolut mit festen Pixeln oder relativ an der Schriftgröße ausgerichtet. Erkennbar sind diese an dem letzten Buchstaben: "a" für absolut und "r" für relativ.
Zeile 45: Zeile 50:
  
 
;nach außen (margin)
 
;nach außen (margin)
'''m_b-a''' : margin von 25px<br>
+
'''m--b''' : margin von 25px<br>
'''m_m-a''' : margin von 15px<br>
+
'''m--m''' : margin von 15px<br>
'''m_s-a''' : margin von 10px<br>
+
'''m--s''' : margin von 10px<br>
'''m_ss-a''' : margin von 5px
+
'''m--xs''' : margin von 5px
  
'''m_b-r''' : margin von 2em<br>
+
'''m--b-r''' : margin von 2em<br>
'''m_m-s''' : margin von 1,2em<br>
+
'''m--m-s''' : margin von 1,2em<br>
'''m_s-r''' : margin von 0,8em<br>
+
'''m--s-r''' : margin von 0,8em<br>
'''m_ss-r''' : margin von 0,4em
+
'''m--xs-r''' : margin von 0,4em
  
 
;nach innen (padding)
 
;nach innen (padding)
'''p_b-a''' : padding von 25px<br>
+
'''p--b''' : padding von 25px<br>
'''p_m-a''' : padding von 15px<br>
+
'''p--m''' : padding von 15px<br>
'''p_s-a''' : padding von 10px<br>
+
'''p--s''' : padding von 10px<br>
'''p_ss-a''' : padding von 5px
+
'''p--xs''' : padding von 5px
  
'''p_b-r''' : padding von 2em<br>
+
'''p--b-r''' : padding von 2em<br>
'''p_m-s''' : padding von 1,2em<br>
+
'''p--m-s''' : padding von 1,2em<br>
'''p_s-r''' : padding von 0,8em<br>
+
'''p--s-r''' : padding von 0,8em<br>
'''p_ss-r''' : padding von 0,4em
+
'''p--xs-r''' : padding von 0,4em
  
 
;Beispiele
 
;Beispiele
 
<div style="float:left; margin-right:5em;">
 
<div style="float:left; margin-right:5em;">
&lt;div class="<span style="color:blue;">m_s-r</span>">&lt;/div><br>
+
&lt;div class="<span style="color:blue;">m--s-r</span>">&lt;/div><br>
 
<div style="height:100px; width:200px; padding:0.8em; box-sizing:border-box; border:1px dotted black;"><div style="box-sizing:border-box; border:1px solid black; height:100%;">Inhalt</div></div>
 
<div style="height:100px; width:200px; padding:0.8em; box-sizing:border-box; border:1px dotted black;"><div style="box-sizing:border-box; border:1px solid black; height:100%;">Inhalt</div></div>
 
</div>
 
</div>
 
<div style="float:left;">
 
<div style="float:left;">
&lt;div class="<span style="color:blue;">p_s-r</span>">&lt;/div><br>
+
&lt;div class="<span style="color:blue;">p--s-r</span>">&lt;/div><br>
 
<div style="height:100px; width:200px; padding:0.8em; box-sizing:border-box; border:1px solid black;"><div style="box-sizing:border-box; border:1px dotted black; height:100%;">Inhalt</div></div>
 
<div style="height:100px; width:200px; padding:0.8em; box-sizing:border-box; border:1px solid black;"><div style="box-sizing:border-box; border:1px dotted black; height:100%;">Inhalt</div></div>
 
</div>
 
</div>
Zeile 79: Zeile 84:
  
 
Alle Abstände lassen sich auch für nur eine Seite festlegen. Dazu wird dem Klassennamen nach dem ersten "m" oder "p" der Zusatz "-t" für oben (top), "-r" für rechts (right), "-b" für unten (bottom) oder "-l" für links (left) angehangen.
 
Alle Abstände lassen sich auch für nur eine Seite festlegen. Dazu wird dem Klassennamen nach dem ersten "m" oder "p" der Zusatz "-t" für oben (top), "-r" für rechts (right), "-b" für unten (bottom) oder "-l" für links (left) angehangen.
Zum Beispiel für einen Margin von 0,8em auf der linken Seite: m<span style="font-weight:bold">-l</span>_s-r
+
Zum Beispiel für einen Margin von 0,8em auf der linken Seite: m<span style="font-weight:bold">-l</span>--s-r
  
 
<span style="font-size:0.8em; font-style:italic;">Ab Template-Version 8.0.5.0</span><br>
 
<span style="font-size:0.8em; font-style:italic;">Ab Template-Version 8.0.5.0</span><br>
 
Zu den Margin-Klassen für eine Seite gibt es auch Negationsklassen, falls ein negativer Margin benötigt wird. Dazu wird der Klasse das Suffix ''--neg'' angehangen:<br>
 
Zu den Margin-Klassen für eine Seite gibt es auch Negationsklassen, falls ein negativer Margin benötigt wird. Dazu wird der Klasse das Suffix ''--neg'' angehangen:<br>
m-l_s-r<span style="font-weight:bold">--neg</span> erzeugt einen Margin links von -0.8em.
+
m-l--s-r<span style="font-weight:bold">--neg</span> erzeugt einen Margin links von -0.8em.
 
+
-->
  
 +
<!--
 
== Rahmen ==
 
== Rahmen ==
 
Rahmen können fast jedem Element beliebig gegeben werden:
 
Rahmen können fast jedem Element beliebig gegeben werden:
  
'''b_''' : Kompletter Rahmen<br>
+
'''b_''' : Kompletter Rahmen (bis Templateversion 8.0.13.x)<br>
'''b_t''' : Nur oben<br>
+
'''border''' : Kompletter Rahmen (ab Templateversion 8.0.14.0)<br>
'''b_b''' : Nur unten<br>
+
'''b-t''' : Nur oben<br>
'''b_l''' : Nur links<br>
+
'''b-b''' : Nur unten<br>
'''b_r''' : Nur rechts<br>
+
'''b-l''' : Nur links<br>
'''b_h''' : Horizintaler Rahmen oben und unten<br>
+
'''b-r''' : Nur rechts<br>
'''b_v''' : Vertikaler Rahmen links und rechts<br>
+
'''b-h''' : Horizintaler Rahmen oben und unten<br>
'''b_tub''' : Badewanne links, unten, rechts<br>
+
'''b-v''' : Vertikaler Rahmen links und rechts<br>
'''b_hat''' : Hut links, oben ,rechts
+
'''b-tub''' : Badewanne links, unten, rechts<br>
 +
'''b-hat''' : Hut links, oben ,rechts
  
 
;Beispiele
 
;Beispiele
 
<div style="float:left; margin-right:5em;">
 
<div style="float:left; margin-right:5em;">
&lt;div class="<span style="color:blue;">b_</span>">&lt;/div><br>
+
&lt;div class="<span style="color:blue;">b-t</span>">&lt;/div><br>
<div style="width:100px; height:50px; border:2px solid black; margin:0 auto;"></div>
 
</div>
 
<div style="float:left; margin-right:5em;">
 
&lt;div class="<span style="color:blue;">b_t</span>">&lt;/div><br>
 
 
<div style="width:100px; height:50px; border:1px dotted #aaaaaa; border-top:2px solid black; margin:0 auto;"></div>
 
<div style="width:100px; height:50px; border:1px dotted #aaaaaa; border-top:2px solid black; margin:0 auto;"></div>
 
</div>
 
</div>
 
<div style="float:left; margin-right:5em;">
 
<div style="float:left; margin-right:5em;">
&lt;div class="<span style="color:blue;">b_tub</span>">&lt;/div><br>
+
&lt;div class="<span style="color:blue;">b-tub</span>">&lt;/div><br>
 
<div style="width:100px; height:50px; border:2px solid black; border-top:1px dotted #aaaaaa; margin:0 auto;"></div>
 
<div style="width:100px; height:50px; border:2px solid black; border-top:1px dotted #aaaaaa; margin:0 auto;"></div>
 
</div>
 
</div>
 
<div style="float:left; margin-right:5em;">
 
<div style="float:left; margin-right:5em;">
&lt;div class="<span style="color:blue;">b_hat</span>">&lt;/div><br>
+
&lt;div class="<span style="color:blue;">b-hat</span>">&lt;/div><br>
 
<div style="width:100px; height:50px; border:2px solid black; border-bottom:1px dotted #aaaaaa; margin:0 auto;"></div>
 
<div style="width:100px; height:50px; border:2px solid black; border-bottom:1px dotted #aaaaaa; margin:0 auto;"></div>
 
</div>
 
</div>
 
<div style="float:left;">
 
<div style="float:left;">
&lt;div class="<span style="color:blue;">b_t b_l</span>">&lt;/div><br>
+
&lt;div class="<span style="color:blue;">b-t b-l</span>">&lt;/div><br>
 
<div style="width:100px; height:50px; border:1px dotted #aaaaaa; border-top:2px solid black; border-left:2px solid black; margin:0 auto;"></div>
 
<div style="width:100px; height:50px; border:1px dotted #aaaaaa; border-top:2px solid black; border-left:2px solid black; margin:0 auto;"></div>
 
</div>
 
</div>
 
<div style="clear:left"></div>
 
<div style="clear:left"></div>
 +
-->
  
 
+
<!--
 
== Schatten ==
 
== Schatten ==
 
Ähnlich wie Rahmen können auch Schatten vergeben werden:
 
Ähnlich wie Rahmen können auch Schatten vergeben werden:
Zeile 189: Zeile 193:
  
 
Eine Kombination verschiedener Schatten ist nicht möglich.
 
Eine Kombination verschiedener Schatten ist nicht möglich.
 +
-->
  
 
+
<!--
 
== Formulare ==
 
== Formulare ==
 
Formulargestaltung passend zu den Shopformularen (z.B. Loginmaske).
 
Formulargestaltung passend zu den Shopformularen (z.B. Loginmaske).
Zeile 209: Zeile 214:
 
</div>
 
</div>
 
<div style="clear:left;"></div>
 
<div style="clear:left;"></div>
 +
-->
  
 
+
<!--
 
== Text ==
 
== Text ==
 
Texte können unterschiedlich ausgerichtet werden
 
Texte können unterschiedlich ausgerichtet werden
Zeile 257: Zeile 263:
 
</div>
 
</div>
 
<div style="clear:left;"></div>
 
<div style="clear:left;"></div>
 +
-->
  
 
+
<!--
== Farben ==
 
Es werden alle wichtigen Farben aus dem Shop-Management zur Verfügung gestellt. So bleiben die eigenen Inhalte auch farblich flexibel.
 
 
 
{{link|Farbverwaltung Shop-Management|Eine ausführliche Erläuterung zu den Farben ist hier zu finden.}}
 
 
 
;Schriftfarben
 
Aufsteigend heller werdend:<br>
 
'''f-color_basic''' : Grund-Farbe (im Standard #333333)<br>
 
'''f-color_color1'''<br>
 
'''f-color_color2''', '''f-color_light'''<br>
 
'''f-color_color3'''<br>
 
'''f-color_color4''', '''f-color_lighter'''<br>
 
'''f-color_color5''', '''f-color_lightest'''<br>
 
 
 
Für besondere Texte:<br>
 
'''f-color_prominent''' : <span style="color:#cd0a0a;">Prominentere Texte</span> (im Standard Rot)<br>
 
'''f-color_warning''' : <span style="color:#cd0a0a;">Warnfarbe</span> (im Standard Rot)<br>
 
'''f-color_notice''' : <span style="color:#008000;">Hinweisfarbe</span> (im Standard Grün)<br>
 
'''f-color_high''' : <span style="color:#fa6107;">In der Highlight-Farbe</span><br>
 
'''highlight''' : <span style="color:#fa6107; font-weight:bold;">In der Highlight-Farbe und fett</span><br>
 
'''f-color_onhigh''' : <span style="color:#ffffff; background-color:#fa6107; padding:0 0.4em;">Für einem Hintergrund in der Highlight-Farbe</span> (am besten zusammen mit '''bg-color_high''' benutzen)
 
 
 
Alle Textfarben gibt es auch als Hover-Version (Text bekommt die Farbe, wenn man mit der Maus drüber geht). Dazu wird er Suffix ''-hover'' angehangen:<br>
 
f-color_color1'''-hover'''
 
 
 
 
 
;Hintergrundfarben
 
Aufsteigend dunkler werdend:<br>
 
'''bg-color_color1''', '''bg-color_light'''<br>
 
'''bg-color_color2'''<br>
 
'''bg-color_color3''', '''bg-color_smooth'''<br>
 
'''bg-color_color4'''<br>
 
'''bg-color_color5''', '''bg-color_strong'''<br>
 
'''bg-color_color6'''<br>
 
'''bg-color_color7'''<br>
 
'''bg-color_color8''', '''bg-color_dark'''
 
 
 
Besondere Hintergründe:<br>
 
'''bg-color_main''' : Haupthintergrund<br>
 
'''bg-color_high''' : Highlight-Farbe<br>
 
'''bg-color_high-hover''' : Highlight-Farbe bei Mouseover<br>
 
 
 
 
 
;Rahmenfarben
 
Wie Hintergrundfarben aufsteigend dunkler werdend:<br>
 
'''b_color1'''<br>
 
'''b_color2''', '''b_light'''<br>
 
'''b_color3'''<br>
 
'''b_color4'''<br>
 
'''b_color5''', '''b_standard'''<br>
 
'''b_color6'''<br>
 
'''b_color7'''<br>
 
'''b_color8''', '''b_dark'''<br>
 
 
 
 
 
 
= Erste Strukturen =
 
= Erste Strukturen =
  
Zeile 319: Zeile 271:
 
Um Elemente nebeneinander auszurichten, wird das Floating benötigt. Die folgenden Klassen helfen bei einem sauberen Einsatz.
 
Um Elemente nebeneinander auszurichten, wird das Floating benötigt. Die folgenden Klassen helfen bei einem sauberen Einsatz.
  
'''float_l''' : Das Element richtet sich links vom nächsten Nachbarn aus<br>
+
'''float-l''' : Das Element richtet sich links vom nächsten Nachbarn aus<br>
'''float_r''' : Das Element richtet sich rechts vom nächsten Nachbarn aus<br>
+
'''float-r''' : Das Element richtet sich rechts vom nächsten Nachbarn aus<br>
'''clear_b''' : Beendet ein float, sodass die nächsten Elemente wieder der normalen Ausrichtung folgen. Muss dem Elternelement angehängt werden.
+
'''clear-both''' : Beendet ein float, sodass die nächsten Elemente wieder der normalen Ausrichtung folgen. Muss dem Elternelement angehängt werden.
  
 
;Beispiele
 
;Beispiele
&lt;div class="<span style="color:blue;">clear_b</span>"><br>
+
&lt;div class="<span style="color:blue;">clear-booth</span>"><br>
&nbsp;&nbsp;&lt;div class="<span style="color:blue;">float_l</span> m-r_m-a">1&lt;/div><br>
+
&nbsp;&nbsp;&lt;div class="<span style="color:blue;">float-l</span> m-r_m-a">1&lt;/div><br>
&nbsp;&nbsp;&lt;div class="<span style="color:blue;">float_l</span>">2&lt;/div><br>
+
&nbsp;&nbsp;&lt;div class="<span style="color:blue;">float-l</span>">2&lt;/div><br>
 
&lt;/div>
 
&lt;/div>
  
Zeile 334: Zeile 286:
 
<div style="clear:both"></div>
 
<div style="clear:both"></div>
 
</div>
 
</div>
 
+
-->
  
 
= Komplexere Strukturen =
 
= Komplexere Strukturen =
Zeile 490: Zeile 442:
 
:Das Anker-Element muss ein Block-Element sein oder die Klasse block bzw. inline-block bekommen.
 
:Das Anker-Element muss ein Block-Element sein oder die Klasse block bzw. inline-block bekommen.
  
 +
= Slidergröße ändern =
 +
Da Google seine Richtlinien zu den Core Web Vitals mit in das Ranking aufgenommen hat, muss der Slider in einen Container mit fester Größe geladen werden.
  
= JavaScript-Funktionen =
+
Das CSS hat verschiedene Umbruchpunkte für die verschiedenen Bildschirmgrößen und ist von klein nach groß angeordnet.
 +
Dabei ist #slideshow.slider_big die grße Slideshow auf der Startseite und #slideshow.slider_normal die kleine in Unterthemen.
 +
Um die Größe zu verändern müssen die Werte für #slideshow.slider_* und #slideshow.slider_* img gleichmäßig verändert werden. Das Bild wird dann automatisch skaliert bis zum nächsten Umbruchpunkt.
 +
Wichtig ist, dass man ein gutes Gleichgewicht zwischen den Umbruchpunkten und dem reservierten Platz findet. Das kann man testen, indem man zum Beispiel die Breite des Browserfensters ändert.
  
== Slider und Carousel ==
 
Der Shop verwendet das Plugin [http://kenwheeler.github.io/slick/ slick], um Slider darzustellen.
 
  
 +
  #slideshow.slider_big { height:90px; }
 +
  #slideshow.slider_normal { height:90px; }
 +
  #slideshow.slider_big img { max-height:90px; max-width:100; }
 +
  #slideshow.slider_normal img { max-height:90px; max-width:100%; }
  
=== Carousel ===
+
  @media (min-width:480px){
;Das Grundlegende HTML:
+
    #slideshow.slider_big { height:130px; }
 +
    #slideshow.slider_normal { height:130px; }
 +
    #slideshow.slider_big img { max-height:130px; }
 +
    #slideshow.slider_normal img { max-height:130px; }
 +
  }
  
&lt;div id="mySlider" class="<span style="color:blue;">carousel</span>"><br>
+
  @media (min-width:640px){
&nbsp;&nbsp;&lt;div class="<span style="color:blue;">carousel-slider</span>"><br>
+
    #slideshow.slider_big { height:200px; }
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue;">slider-item</span>">Inhalt für Slider-Element 1&lt;/div><br>
+
    #slideshow.slider_normal { height:200px; }
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue;">slider-item</span>">Inhalt für Slider-Element 2&lt;/div><br>
+
    #slideshow.slider_big img { max-height:200px; }
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue;">slider-item</span>">Inhalt für Slider-Element 3&lt;/div><br>
+
    #slideshow.slider_normal img { max-height:200px; }
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue;">slider-item</span>">Inhalt für Slider-Element 4&lt;/div><br>
+
  }
&nbsp;&nbsp;&lt;/div><br>
 
&nbsp;&nbsp;&lt;div class="<span style="color:blue;">carousel-button carousel-next</span>">&lt;span class="fa angle-r_icon">&lt;/span>&lt;/div><br>
 
&nbsp;&nbsp;&lt;div class="<span style="color:blue;">carousel-button carousel-prev</span>">&lt;span class="fa angle-l_icon">&lt;/span>&lt;/div><br>
 
&lt;/div>
 
  
 +
  @media (min-width:880px){
 +
    #slideshow.slider_big { height:300px; }
 +
    #slideshow.slider_normal { height:270px; }
 +
    #slideshow.slider_big img { max-height:300px; }
 +
    #slideshow.slider_normal img { max-height:270px; }
 +
  }
  
;Das benötigte JavaScript:
+
= JavaScript-Funktionen =
Der Slider kann auf verschiedenste Weise konfiguriert werden. Hier ist ein Beispiel der Bestseller des Shops mit verschiedenen Breakpoints (Pixelgröße des Bildschirms).
 
 
 
Mehr Informationen zur Konfiguration sind in der [http://kenwheeler.github.io/slick/ slick-Dokumentation] zu finden.
 
 
 
 
 
Optionen für den Slider festlegen:
 
 
 
mySliderOptions = {<br>
 
&nbsp;&nbsp;vertical:false<br>
 
&nbsp;&nbsp;,slidesToShow:4<br>
 
&nbsp;&nbsp;,slidesToScroll:4<br>
 
&nbsp;&nbsp;,adaptiveHeight:true<br>
 
&nbsp;&nbsp;,infinite:true<br>
 
&nbsp;&nbsp;,responsive: [<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;{<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;breakpoint:700,<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;settings: {<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesToShow:3<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,slidesToScroll:3<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;}<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;,{<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;breakpoint:560,<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;settings: {<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesToShow:2<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,slidesToScroll:2<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;}<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;,{<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;breakpoint:450,<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;settings: {<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesToShow:1<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,slidesToScroll:1<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;}<br>
 
&nbsp;&nbsp;]<br>
 
};<br>
 
 
 
 
 
Jetzt wird es etwas komplizierter, denn wir müssen den Slider über das hauseigene JS-Framework  SEO-freundlich initialisieren:
 
 
 
overseer.add(function(){<br>
 
&nbsp;&nbsp;mySliderOptions = $.extend(mySliderOptions,mySliderOptions,{prevArrow:$('#mySlider .carousel-prev'),nextArrow:$('#mySlider .carousel-next')});<br>
 
&nbsp;&nbsp;async.register('slick', '{shop}/js/jquery/slick.js').done(function(){<br>
 
&nbsp;&nbsp;&nbsp;&nbsp;$('#mySlider .carousel-slider').slick(mySliderOptions);<br>
 
&nbsp;&nbsp;});<br>
 
}, events.LOAD);
 
 
 
 
 
Über den '''Overseer''' binden wir das Script an das globale einmalige Event window.load, da wir auf eventuelle Bilder im Slider warten müssen.
 
Da wir nicht wissen, ob das Plugin schon dem Shop bekannt gemacht worden ist, rufen wir die Funktion '''async''' auf und übergeben ihr den Pfad zum Script. Jetzt wird das Script automatisch asynchron geladen und wir können als Callback (done) den Slider endlich starten.
 
 
 
 
 
=== Slider ===
 
Ein Slider, wie auf der Startseite des Shops, wird genauso gebaut. Dazu müssen lediglich noch zwei Werte in der Konfiguration angepasst und die Breakpoints entfernt werden:
 
 
 
'''slidesToShow:1'''<br>
 
'''slidesToScroll:1'''
 
  
  
Zeile 620: Zeile 527:
  
  
 +
== Swiper (ab Template-Version 8.0.13.0) ==
 +
 +
{{wichtig|Ab Template-Version 8.0.13.0}}
 +
{{beispiel|Mit dem Plugin Swiper lassen sich Slider und Carousels erstellen}}
 +
 +
=== Integration eines Sliders (ein sichtbares Element mit voller Breite) ===
 +
 +
==== HTML ====
 +
 +
&lt;div id="{{rot|meine-slideshow-id}}" class="slideshow-container"><br>
 +
&nbsp;&nbsp;&lt;div class="swiper-wrapper"><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-slide acenter"> Item 1 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-slide acenter"> Item 2 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-slide acenter"> Item 3 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-slide acenter"> Item 4 &lt;/div><br>
 +
<br>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="swiper-pagination"></div><br>
 +
&nbsp;&nbsp;&lt;div class="swiper-button-prev"></div><br>
 +
&nbsp;&nbsp;&lt;div class="swiper-button-next"></div><br>
 +
&lt;/div>
 +
 +
==== JavaScript ====
 +
 +
&lt;script><br>
 +
<br>
 +
overseer.add(function(){<br>
 +
&nbsp;&nbsp;async.register('swiper', '{shop}/js/swiper/swiper.min.js').done(function(){<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;var slideshow = new Swiper('#{{rot|meine-slideshow-id}}.slideshow-container', {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preloadImages: false,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lazy: true,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loop: true,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagination: {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el: '.swiper-pagination',<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigation: {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nextEl: '#{{rot|meine-slideshow-id}} .swiper-button-next',<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prevEl: '#{{rot|meine-slideshow-id}} .swiper-button-prev',<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;});<br>
 +
&nbsp;&nbsp;});<br>
 +
});<br>
 +
<br>
 +
&lt;/script>
 +
 +
=== Integration eines Carousels (mehrere sichtbare Elemente nebeneinander) ===
 +
 +
==== HTML ====
 +
 +
&lt;div id="{{rot|meine-slider-id}}" class="carousel-container">
 +
&nbsp;&nbsp;&lt;div class="carousel"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-wrapper carousel-slider"><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-slide slider-item"> Item 1 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-slide slider-item"> Item 2 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-slide slider-item"> Item 3 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="swiper-slide slider-item"> Item 4 &lt;/div><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="carousel-button carousel-next">&lt;span class="fa angle-r_icon">&lt;/span>&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="carousel-button carousel-prev">&lt;span class="fa angle-l_icon">&lt;/span>&lt;/div><br>
 +
&lt;/div>
 +
 +
==== JavaScript ====
 +
 +
&lt;script><br>
 +
<br>
 +
overseer.add(function(){<br>
 +
&nbsp;&nbsp;async.register('swiper', '{shop}/js/swiper/swiper.min.js').done(function(){<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;var mySwiper = new Swiper('#{{rot|meine-slider-id}} .carousel', {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lazy: true,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loop: true,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preloadImages: false,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigation: {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nextEl: '#{{rot|meine-slider-id}} .carousel-next',<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prevEl: '#{{rot|meine-slider-id}} .carousel-prev'<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesPerView: 1,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesPerGroup: 1,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;breakpoints: {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;700: {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesPerView: 4,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesPerGroup: 4<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;560: {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesPerView: 3,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesPerGroup: 3<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;450: {<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesPerView: 2,<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slidesPerGroup: 2<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;});<br>
 +
&nbsp;&nbsp;});<br>
 +
});<br>
 +
<br>
 +
&lt;/script>
 +
 +
Weitere Optionen und Erklärungen findet Ihr in der [https://swiperjs.com/swiper-api '''Swiper API''']
 +
 +
=== Migration von Slick zu Swiper ===
 +
 +
{{wichtig|Wer sich schon einen Slider oder Carousel angelegt hat mit einer Template-Version vor 8.0.13.0 muss ein paar Kleinigkeiten anpassen}}
 +
 +
{{rot|wird entfernt}}
 +
 +
{{blau|wird eingefügt}}
 +
 +
==== Slider ====
 +
 +
;alt:
 +
 +
&lt;div id="meine-slideshow-id"><br>
 +
&nbsp;&nbsp;&lt;div class="slider-wrapper"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red">&lt;div id="slickSlideshow"></span><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="{{rot|slider-item}}"> Item 1 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="{{rot|slider-item}}"> Item 2 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="{{rot|slider-item}}"> Item 3 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="{{rot|slider-item}}"> Item 4 &lt;/div><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red">&lt;/div></span><br>
 +
<br>
 +
<span style="color:red">
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="slideshow-button" id="slideshow-prev">&lt;span class="fa angle-l_icon shape">&lt;/span>&lt;span class="fa fa-angle-l">&lt;/span>&lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="slideshow-button" id="slideshow-next">&lt;span class="fa angle-r_icon shape">&lt;/span>&lt;span class="fa fa-angle-r">&lt;/span>&lt;/div><br>
 +
</span>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&lt;/div>
 +
 +
;neu:
 +
 +
&lt;div id="meine-slideshow-id" <span style="color:blue">class="slideshow-container"</span>><br>
 +
&nbsp;&nbsp;&lt;div class="swiper-wrapper"><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="{{blau|swiper-slide acenter}}"> Item 1 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="{{blau|swiper-slide acenter}}"> Item 2 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="{{blau|swiper-slide acenter}}"> Item 3 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="{{blau|swiper-slide acenter}}"> Item 4 &lt;/div><br>
 +
<br>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&nbsp;&nbsp;<span style="color:blue">&lt;div class="swiper-pagination"></div></span><br>
 +
&nbsp;&nbsp;<span style="color:blue">&lt;div class="swiper-button-prev"></div></span><br>
 +
&nbsp;&nbsp;<span style="color:blue">&lt;div class="swiper-button-next"></div></span><br>
 +
&lt;/div>
 +
 +
==== Carousel ====
 +
 +
;alt:
 +
 +
&lt;div <span style="color:red">id="meine-slider-id"</span> class="carousel"><br>
 +
&nbsp;&nbsp;&lt;div class="carousel-slider"><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="slider-item"> Item 1 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="slider-item"> Item 2 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="slider-item"> Item 3 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="slider-item"> Item 4 &lt;/div><br>
 +
<br>
 +
&nbsp;&nbsp;&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="carousel-button carousel-next">&lt;span class="fa angle-r_icon">&lt;/span>&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="carousel-button carousel-prev">&lt;span class="fa angle-l_icon">&lt;/span>&lt;/div><br>
 +
&lt;/div>
 +
 +
;neu:
 +
 +
<span style="color:blue">&lt;div id="meine-slider-id" class="carousel-container horizontal"><br></span>
 +
&nbsp;&nbsp;&lt;div class="carousel"><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue">swiper-wrapper</span> carousel-slider"><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue">swiper-slide</span> slider-item"> Item 1 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue">swiper-slide</span> slider-item"> Item 2 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue">swiper-slide</span> slider-item"> Item 3 &lt;/div><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="<span style="color:blue">swiper-slide</span> slider-item"> Item 4 &lt;/div><br>
 +
<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>
 +
<span style="color:blue">&nbsp;&nbsp;&lt;/div></span><br>
 +
&nbsp;&nbsp;&lt;div class="carousel-button carousel-next">&lt;span class="fa angle-r_icon">&lt;/span>&lt;/div><br>
 +
&nbsp;&nbsp;&lt;div class="carousel-button carousel-prev">&lt;span class="fa angle-l_icon">&lt;/span>&lt;/div><br>
 +
&lt;/div>
 +
 +
 +
{{wichtig|Das JavaScript muss entsprechend der Anleitung oben neu erstellt werden}}
 +
 +
<!--
 
= Nützliche HTML-Bausteine =
 
= Nützliche HTML-Bausteine =
 
== Kacheln ==
 
== Kacheln ==
 
;4x4-Raster:
 
;4x4-Raster:
 +
{{wichtig|Ab Template Version 8.0.10.0 bis 8.0.13.x}}
 +
{{wichtig|Bitte beachten Sie, dass sich ab Templateversion 8.0.14.0 alle Klassennamen ändern!}}
 +
;Ein Raster aus Bildern mit einem darüber gelegten Text am unteren Bereich.
 
;Die minimale Höhe wird von verwendeten Bild bestimmt. Sollten die Bilder größer sein, werden sie automatisch skaliert.
 
;Die minimale Höhe wird von verwendeten Bild bestimmt. Sollten die Bilder größer sein, werden sie automatisch skaliert.
 
;Bei Mouse-Over wird ein Hover-Effekt angewendet (Klasse "hover").
 
;Bei Mouse-Over wird ein Hover-Effekt angewendet (Klasse "hover").
 +
 +
=== HTML-Code ===
  
 
&lt;div class="clear_l m-t_m-a m-l_s-a--neg"><br>
 
&lt;div class="clear_l m-t_m-a m-l_s-a--neg"><br>
 
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
 
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover" href="#"><br>
+
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover-effect" href="#"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy1.jpg" class="block"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy1.jpg" class="block"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 1&lt;/div><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 1&lt;/div><br>
Zeile 634: Zeile 733:
 
&nbsp;&nbsp;&lt;/div><br>
 
&nbsp;&nbsp;&lt;/div><br>
 
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
 
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover" href="#"><br>
+
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover-effect" href="#"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy2.jpg" class="block"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy2.jpg" class="block"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 2&lt;/div><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 2&lt;/div><br>
Zeile 640: Zeile 739:
 
&nbsp;&nbsp;&lt;/div><br>
 
&nbsp;&nbsp;&lt;/div><br>
 
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
 
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover" href="#"><br>
+
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover-effect" href="#"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy3.jpg" class="block"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy3.jpg" class="block"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 3&lt;/div><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 3&lt;/div><br>
Zeile 646: Zeile 745:
 
&nbsp;&nbsp;&lt;/div><br>
 
&nbsp;&nbsp;&lt;/div><br>
 
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
 
&nbsp;&nbsp;&lt;div class="float_l p-l_s-a p-b_s-a w_100 w_50-640"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover" href="#"><br>
+
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="pos_r block hover-effect" href="#"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy4.jpg" class="block"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="@@@e-vendo_src@@@/fantasy4.jpg" class="block"><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 4&lt;/div><br>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pos_a p_s-r bottom_s-r left w_100 bg_light-translucent acenter bold f-medium">Text Kachel 4&lt;/div><br>
Zeile 653: Zeile 752:
 
&lt;/div>
 
&lt;/div>
  
 +
=== Vorschau ===
 +
 +
;bis 640px
  
 
<div>
 
<div>
<div style="float:left; margin-right:10px;">
+
<div style="box-sizing:border-box; width:410px; height:100px; border:1px solid black; position:relative;">
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black;"></div>
+
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div>
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px;"></div>
+
</div>
 +
<div style="box-sizing:border-box; width:410px; height:100px; border:1px solid black; position:relative; margin-top:10px;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 2</div>
 +
</div>
 +
<div style="box-sizing:border-box; width:410px; height:100px; border:1px solid black; position:relative; margin-top:10px;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 3</div>
 
</div>
 
</div>
<div style="float:left; margin-right:10px;">
+
<div style="box-sizing:border-box; width:410px; height:100px; border:1px solid black; position:relative; margin-top:10px;">
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black;"></div>
+
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 4</div>
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px;"></div>
 
 
</div>
 
</div>
<div style="clear:left"></div>
 
 
</div>
 
</div>
  
 
+
;ab 640px
  
 
<div>
 
<div>
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black;"></div>
+
<div style="float:left; margin-right:10px;">
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px;"></div>
+
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; position:relative;">
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px;"></div>
+
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div></div>
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px;"></div>
+
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px; position:relative;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div></div>
 +
</div>
 +
<div style="float:left;">
 +
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; position:relative;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div></div>
 +
<div style="box-sizing:border-box; width:200px; height:200px; border:1px solid black; margin-top:10px; position:relative;">
 +
<div style="box-sizing:border-box; width:100%; height:32px; border:1px solid black; bottom:10px; left:0; position:absolute; text-align:center;">Text 1</div></div>
 +
</div>
 +
<div style="clear:left"></div>
 
</div>
 
</div>
 +
-->

Aktuelle Version vom 23. März 2022, 13:57 Uhr


Vorwort

Mit den hier aufgeführten CSS-Klassen können eigene HTML-Inhalte einfacher gestaltet werden. Sie dienen als Ergänzung zu den bereits vorhandenen tp-Klassen. Diese Klassen dürfen nicht mit eigenem CSS überschrieben werden, da sie vom Shop selbst genutzt werden.

Als Leitfaden dient das mobile-first-Konzept. Das heißt, dass Inhalte zuerst für die kleinsten gängigen Mobilgeräte (ca. 320px) erstellt und dann mittels Media-Queries für größer werdende Bereiche optimiert werden.

Templ att-blk.png
Derzeit findet eine umfangreiche Umbenennung der CSS-Klassen statt. Ab der Templateversion 8.0.14.0 wird einiges anders benannt sein.






Komplexere Strukturen

Catalog

Bei Catalog handelt es sich um eine Darstellung nebeneinander. Dabei wird die Box in zwei Bereiche zu 20% und 80% geteilt. Der größere Bereich ist noch einmal zur Hälfte geteilt.


HTML

<div class="catalog grid design">

  <article>
    <div class="pic"></div>
    <div class="desc">
      <div class="desc-left"></div>
      <div class="desc-right"></div>
    </div>
  </article>

</div>


Klassen

.catalog.grid
erzeugt die Formatierung als Catalog
.catalog.design
Fügt Abstände und Hintergrundfarben hinzu


Vorschau

kleiner 480px
ab 480px
20%
ab 640px
20%
50%
50%
ab 880px
20%
50%
50%


Kacheln (Catblog, Subnavi)

Es werden bis zu fünf Kacheln automatisch nebeneinander dargestellt je nach vorhandener linken oder rechten Seite im Shop.


HTML

<div class="tiles grid design">

  <div>
    <div></div>
  </div>


</div>


Klassen

.tiles.grid
erzeugt die Formatierung als Kacheln
.tiles.design
Fügt Abstände und Hintergrundfarben hinzu
tiles.big.grid
erzeugt breitere Kacheln


Vorschau

kleiner 480px
ab 480px
ab 640px
ab 880px

Eine Hauptspalte

Zwei oder drei Hauptspalten

Klassen zur speziellen Verwendung

Die folgenden Klassen erfüllen spezielle Funktionen, wie das Ausblenden von Elementen, wenn bestimmte Bedingungen erfüllt sind.

show_with_login
Element wird nur angezeigt, wenn der Kunde eingeloggt ist.
show_with_url
Element wird nur angezeigt, wenn das Attribut 'href' vorhanden ist und keinen Leerstring enthält.
show_with_src
Element wird nur angezeigt, wenn das Attribut 'src' vorhanden ist und keinen Leerstring enthält.
no-print
Element wird nur angezeigt, wenn es sich nicht um eine Druckausgabe handelt.
show_with_order
Element wird nur angezeigt, wenn wir uns im Bestellprozess befinden.
indivdual_box
Element wird nur angezeigt, wenn folgendes nicht zutrifft:
Es gibt ein Kind-Element mit der Klasse individual_content, welches leer ist.
anchor
Modifiziert den Link-Anker, sodass die Topnav (Navigation 1, 5) nicht darüber liegt und ihn verdeckt.
Das Anker-Element muss ein Block-Element sein oder die Klasse block bzw. inline-block bekommen.

Slidergröße ändern

Da Google seine Richtlinien zu den Core Web Vitals mit in das Ranking aufgenommen hat, muss der Slider in einen Container mit fester Größe geladen werden.

Das CSS hat verschiedene Umbruchpunkte für die verschiedenen Bildschirmgrößen und ist von klein nach groß angeordnet. Dabei ist #slideshow.slider_big die grße Slideshow auf der Startseite und #slideshow.slider_normal die kleine in Unterthemen. Um die Größe zu verändern müssen die Werte für #slideshow.slider_* und #slideshow.slider_* img gleichmäßig verändert werden. Das Bild wird dann automatisch skaliert bis zum nächsten Umbruchpunkt. Wichtig ist, dass man ein gutes Gleichgewicht zwischen den Umbruchpunkten und dem reservierten Platz findet. Das kann man testen, indem man zum Beispiel die Breite des Browserfensters ändert.


 #slideshow.slider_big { height:90px; }
 #slideshow.slider_normal { height:90px; }
 #slideshow.slider_big img { max-height:90px; max-width:100; }
 #slideshow.slider_normal img { max-height:90px; max-width:100%; }
 @media (min-width:480px){
   #slideshow.slider_big { height:130px; }
   #slideshow.slider_normal { height:130px; }
   #slideshow.slider_big img { max-height:130px; }
   #slideshow.slider_normal img { max-height:130px; }
 }
 @media (min-width:640px){
   #slideshow.slider_big { height:200px; }
   #slideshow.slider_normal { height:200px; }
   #slideshow.slider_big img { max-height:200px; }
   #slideshow.slider_normal img { max-height:200px; }
 }
 @media (min-width:880px){
   #slideshow.slider_big { height:300px; }
   #slideshow.slider_normal { height:270px; }
   #slideshow.slider_big img { max-height:300px; }
   #slideshow.slider_normal img { max-height:270px; }
 }

JavaScript-Funktionen

Bilder mit lazyloading einbinden

Templates: 8.0.5.0

Wenn Sie in Ihrer PageSpeed-Auswertung die Meldung "nicht sichtbare Bilder aufschieben" bekommen, kann es helfen, diese über ein sogenanntes lazy loading einzubinden. Dabei werden die Bilder erst geladen, wenn sie in den Sichtbereich gescrollt werden.


Die normale Einbindung im Thementext sieht so aus:

<img src="@@@e-vendo_src@@@/bild1.jpg" alt="mein Bild 1">


Das wird umgewandelt in ein figure-Element mit data-Attributen:

<figure data-src="@@e-vendo_src@@@/bild1.jpg" data-alt="mein Bild 1">


Jetzt noch die Klasse lazyload hinzufügen:

<figure class="lazyload" data-src="@@e-vendo_src@@@/bild1.jpg" data-alt="mein Bild 1">


Nun wird das Bild erst geladen, wenn es in den Sichtbereich gelangt.


weiteres JavaScript einbringen

JavaScript kann generell überall genutzt werden.

Der Shop bringt die Bibliothek JQuery mit, welche vieles vereinfacht. Um diese nutzen zu können muss mit dem e-vendo-Framework overseer gearbeitet werden, welches Scripte, die JQuery benötigen, ausführt, sobald die Bibliothek nach dem HTML geladen worden ist.

Overseer

Der Overseer lässt sich nutzen, indem man ihm das eigene JavaScript in einer Funktion übergibt und an ein Event bindet:

overseer.add('MeineFunktion', function(){   Mache JQuery-Dinge und so ... });

Was passiert hier?
overseer.add(Name, function()), overseer.add(function()) nimmt eine oder zwei Parameter entgegen: Einen frei gewählten Namen oder Leerstring und eine Funktion oder nur die Funktion.

Name
Der Name dient dazu, auf eine spezielle schon registrierte Funktion zuzugreifen, um diese noch einmal auszuführen.
Funktion
In der Funktion befindet sich das gesamte JavaScript, welches mit JQuery arbeitet. Am besten schreibt man die Funktion außerhalb vom Overseer und übergibt dann nur noch den Namen
myFunction(){ ... }
Overseer.add("", myFunction);
Templ att-blk.png
Der Overseer führt alle übergebenen Funktionen automatisch aus!


Swiper (ab Template-Version 8.0.13.0)

Templ att-blk.png
Ab Template-Version 8.0.13.0
Templ bsp-blk.png
Mit dem Plugin Swiper lassen sich Slider und Carousels erstellen

Integration eines Sliders (ein sichtbares Element mit voller Breite)

HTML

<div id="meine-slideshow-id" class="slideshow-container">
  <div class="swiper-wrapper">

    <div class="swiper-slide acenter"> Item 1 </div>
    <div class="swiper-slide acenter"> Item 2 </div>
    <div class="swiper-slide acenter"> Item 3 </div>
    <div class="swiper-slide acenter"> Item 4 </div>

  </div>

  <div class="swiper-pagination">
  <div class="swiper-button-prev">
  <div class="swiper-button-next">

</div>

JavaScript

<script>

overseer.add(function(){
  async.register('swiper', '{shop}/js/swiper/swiper.min.js').done(function(){
    var slideshow = new Swiper('#meine-slideshow-id.slideshow-container', {
      preloadImages: false,
      lazy: true,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '#meine-slideshow-id .swiper-button-next',
        prevEl: '#meine-slideshow-id .swiper-button-prev',
      },
    });
  });
});

</script>

Integration eines Carousels (mehrere sichtbare Elemente nebeneinander)

HTML

<div id="meine-slider-id" class="carousel-container">   <div class="carousel">
    <div class="swiper-wrapper carousel-slider">

      <div class="swiper-slide slider-item"> Item 1 </div>
      <div class="swiper-slide slider-item"> Item 2 </div>
      <div class="swiper-slide slider-item"> Item 3 </div>
      <div class="swiper-slide slider-item"> Item 4 </div>

    </div>
  </div>
  <div class="carousel-button carousel-next"><span class="fa angle-r_icon"></span></div>
  <div class="carousel-button carousel-prev"><span class="fa angle-l_icon"></span></div>
</div>

JavaScript

<script>

overseer.add(function(){
  async.register('swiper', '{shop}/js/swiper/swiper.min.js').done(function(){
    var mySwiper = new Swiper('#meine-slider-id .carousel', {
      lazy: true,
      loop: true,
      preloadImages: false,
      navigation: {
        nextEl: '#meine-slider-id .carousel-next',
        prevEl: '#meine-slider-id .carousel-prev'
      },
      slidesPerView: 1,
      slidesPerGroup: 1,
      breakpoints: {
        700: {
          slidesPerView: 4,
          slidesPerGroup: 4
        },
        560: {
          slidesPerView: 3,
          slidesPerGroup: 3
        },
        450: {
          slidesPerView: 2,
          slidesPerGroup: 2
        }
      }
    });
  });
});

</script>

Weitere Optionen und Erklärungen findet Ihr in der Swiper API

Migration von Slick zu Swiper

Templ att-blk.png
Wer sich schon einen Slider oder Carousel angelegt hat mit einer Template-Version vor 8.0.13.0 muss ein paar Kleinigkeiten anpassen

wird entfernt

wird eingefügt

Slider

alt

<div id="meine-slideshow-id">
  <div class="slider-wrapper">
    <div id="slickSlideshow">

      <div class="slider-item"> Item 1 </div>
      <div class="slider-item"> Item 2 </div>
      <div class="slider-item"> Item 3 </div>
      <div class="slider-item"> Item 4 </div>

    </div>

    <div class="slideshow-button" id="slideshow-prev"><span class="fa angle-l_icon shape"></span><span class="fa fa-angle-l"></span></div>
    <div class="slideshow-button" id="slideshow-next"><span class="fa angle-r_icon shape"></span><span class="fa fa-angle-r"></span></div>
  </div>
</div>

neu

<div id="meine-slideshow-id" class="slideshow-container">
  <div class="swiper-wrapper">

    <div class="swiper-slide acenter"> Item 1 </div>
    <div class="swiper-slide acenter"> Item 2 </div>
    <div class="swiper-slide acenter"> Item 3 </div>
    <div class="swiper-slide acenter"> Item 4 </div>

  </div>

  <div class="swiper-pagination">
  <div class="swiper-button-prev">
  <div class="swiper-button-next">

</div>

Carousel

alt

<div id="meine-slider-id" class="carousel">
  <div class="carousel-slider">

    <div class="slider-item"> Item 1 </div>
    <div class="slider-item"> Item 2 </div>
    <div class="slider-item"> Item 3 </div>
    <div class="slider-item"> Item 4 </div>

  </div>
  <div class="carousel-button carousel-next"><span class="fa angle-r_icon"></span></div>
  <div class="carousel-button carousel-prev"><span class="fa angle-l_icon"></span></div>
</div>

neu

<div id="meine-slider-id" class="carousel-container horizontal">
  <div class="carousel">
    <div class="swiper-wrapper carousel-slider">

      <div class="swiper-slide slider-item"> Item 1 </div>
      <div class="swiper-slide slider-item"> Item 2 </div>
      <div class="swiper-slide slider-item"> Item 3 </div>
      <div class="swiper-slide slider-item"> Item 4 </div>

    </div>
  </div>
  <div class="carousel-button carousel-next"><span class="fa angle-r_icon"></span></div>
  <div class="carousel-button carousel-prev"><span class="fa angle-l_icon"></span></div>
</div>


Templ att-blk.png
Das JavaScript muss entsprechend der Anleitung oben neu erstellt werden