CSS- und HTML-Dokumentation

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.

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);

Der Overseer führt alle übergebenen Funktionen automatisch aus!

Swiper (ab Template-Version 8.0.13.0)

Ab Template-Version 8.0.13.0

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

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>

Das JavaScript muss entsprechend der Anleitung oben neu erstellt werden