Dein Warenkorb ist leer

Drops einfügen

Lerne wie du deine Drops effizient und gezielt in deine Seite einfügst

Über den Button "Wann & Wo anzeigen" in einem Drop kommst du zu einem Dialog, wo du dessen Einfügeoptionen definieren kannst. Hier erfährst du, was es mit diesen Optionen auf sich hat.

Einfügeoptionen Dialog beim ersten Aufruf

CSS Selektoren und Einfügemethoden

Mit CSS Selektoren definierst du die Position eines oder mehrerer HTML Elemente im Quelltext einer HTML Seite. Ausgehend von dieser "Ortsangabe" kannst du mit der passenden Einfügemethode ein Drop bspw. "unter" dem spezifizierten Element darstellen. Aber der Reihe nach.

CSS Selektoren

Auch wenn wir einige HTML Grundlagen voraussetzen, möchten wir die Grundzüge von HTML Elementen und CSS Selektoren hier noch einmal zusammenfassen. Folgende einfache Typen von Selektoren gibt es:

  • Tags: bezieht sich auf den Namen eines HTML Elements, z.B. body oder div
  • Klassen: bezieht sich auf das Attribut class eines HTML Elements, z.B. .sidebox für ein Element <div class='sidebox'></div>
  • ID: bezieht sich auf das Attribut id eines HTML Elements, z.B. #sidepanel_left für ein Element <div id='sidepanel_left'></div>

CSS Selektoren sind beliebig kombinierbar und ermöglichen dir so sehr genaue Angaben zur Position eines Elements im Quelltext deiner Seite. Ein Selektor wie body #sidepanel_left .sidebox h3.boxtitel selektiert bspw. alle Titel der linken Sidebox im JTL Standartemplate "JTL Shop Tiny".

Selektor Finder und Entwicklertools

Wer Selektoren nicht mühsam durch Studien des Quellcodes seines Templates herausfinden will, sollte unseren Selektor Finder ausprobieren. Für viele Anwendungsfälle wirst du damit die richtige Stelle für dein Drop finden.

Selektor Finder in Aktion

Beachte, dass du die URL im Selektor Finder jederzeit ändern kannst, um bspw. Positionen in deinen Kategorie- oder Artikelseiten zu finden.

Die mittlerweile sehr umfangreichen Entwicklertools moderner Browser bieten dir noch mehr Möglichkeiten zur Selektorensuche. Im folgenden Video zeigen wir dir, wie man nahezu jeden Selektor mit dem Inspector des Firefox Browsers herausfinden kann.

Weitere Details zu CSS Selektoren findest du übrigens auch im Wiki von selfhtml.org .

Einfügemethoden

Mit dem CSS Selektor definierst du eine Position im HTML Quelltext deiner Seite. Nun muss du noch angeben, wie das Drop bezogen auf diese Position in den Quelltext eingefügt werden soll. Folgende Methoden stehen dir dazu zur Verfügung.

Methode phpQuery Funktionsname Wo wird das Drop eingefügt?
Anhängen append() Als letztes Kind-Element des gefundenen Elements.
Vorhängen prepend() Als erstes Kind-Element des gefundenen Elements.
Anstellen after() Nach dem gefundenen Element.
Vorstellen before() Vor dem gefundenen Element.
Ersetzen replaceWith() Drop ersetzt das gefunden Element

Beachte im Zusammenhang mit den Einfügemethoden, dass diese immer auf alle gefundenen Elemente ausgeführt werden. Werden also durch deine CSS-Selektoren mehrere HTML Elemente gefunden, wir dein Drop ggf. mehrfach in deine Seite eingefügt.

Einfügemethoden am Beispiel von #content

In der obigen Grafik zeigen wir das Ergebnis verschiedener Einfügemethoden am Beispiel des Selektors #content . Nicht dargestellt: wie man Inhalte zwischen den Kindelementen darstellt. Nutze für so einen Fall #title + Anstellen oder #description + Vorstellen.

Darstellungsfilter

Oftmals wird es nicht dir genügen, Drops ausschließlich mit CSS Selektoren zu platzieren. Wenn du Drops zum Beispiel nur in ausgewählten Kategorien, Produkten oder Zeiträumen darstellen möchtest, kommen Darstellungsfilter ins Spiel. Das nachfolgende Turorialvideo zeigt viele unserer Darstellungsfilter im Detail. Bitte beachte, dass das Video noch die Version 100.12 und damit eine veraltete Optik (und noch nicht alle aktuellen) der Darstellungsfilter zeigt. Das grundsätzliche Verhalten hat sich zwischen den Versionen jedoch nicht verändert.

Du kannst beliebig viele Darstellungsfilter (auch des gleichen Typs) kombinieren und diese sogar negieren: ein Klick auf "ist" erzeugt mit "ist nicht" eine Ausschlussbedingung. In vielen Filtern sind auch Mehrfachnennungen möglich, die im Standard mit einem "Oder" verknüpft sind.

Beispiel komplexer Darstellungsfilter

Ein Beispiel: wählst du als Filter Artikel ist Artikel A, Artikel B , wird das Drop angezeigt, wenn man sich auf der Artikeldetailseite von Artikel A oder Artikel B befindet. Negierst du die Regel auf Artikel ist nicht Artikel A, Artikel B , wird das Drop angezeigt, wenn man sich einer Artikeldetailseite befindet, die nicht Artikel A und nicht Artikel B zeigt.

Um dir lästiges Scrollen durch tausende Filteroptionen (bspw. bei Artikelfiltern) zu ersparen, kannst durch eine Direkteingabe auch nach Optionen suchen. Hierbei wird immer der Name der Filteroption gesucht: bei Artikelfiltern also der Artikelname oder bei Kategoriefiltern der Name der Kategorie.

Liste von Darstellungsfiltern

Zur besseren Übersicht haben wir Darstellungsfilter gruppiert, nachfolgend findest die entsprechenden Listen mit einer kurzer Erklärung und ggf. einen Direktlink zur entsprechenden Stelle in unserem Tutorialvideo.

Global

Filter Ermöglicht das Filtern nach ... Videolink
Seitentyp dem Typ der aktuellen Shopseite Video
Smarty Ausdruck Verschiedenes Video
Sprache der aktiven Sprachen im Shop Video
Kundengruppe der Kundengruppe des Besuchers Video
Gerätetyp den Gerättyp des Besuchers (Smartphone, Tablet, Desktop) Video
Bestellschritt dem aktuellen Schritt der Kaufabwicklung -

Artikellisten

Filter Ermöglicht das Filtern nach ... Videolink
Kategorieseite bestimmten Kategorien Video
Herstellerseite bestimmten Herstellern Video
Merkmalwertseite bestimmten Merkmalwerten Video
Listingfilter gesetzten Filtern in Artikellisten Video
Listingzustand bestimmten Eigenschaften von Artikellisten (erste Seite) -
Spezialseite Besondere Artikelisten wie Bestseller oder Sonderangebote -

Artikeldetailseiten

Filter Ermöglicht das Filtern nach ... Videolink
Artikel bestimmten Artikeln Video
Artikeleigenschaft Artikeleigenschaften wie Merkmalwerte, Funktionsattribute und andere Video

Zeitangaben

Filter Ermöglicht das Filtern nach ... Videolink
Datum Datumsbereichen über Start- und Enddatum Video
Tageszeit Tageszeiten über Start- und Endzeit Video
Wochentag Wochentagen Video

Inhalte

Filter Ermöglicht das Filtern nach ... Videolink
CMS Seite bestimmten CMS Seiten Video
Linkgruppe der Gruppe einer CMS Seite Video
Newsbeitrag Newsbeiträgen Video

Darstellungsfilter mit Smarty

Falls dir die mitgelieferten Filter nicht ausreichen, kannst du über Smarty Darstellungsfilter quasi beliebige Bedingungen zur Darstellung deiner Drops definieren. Du hast dabei Zugriff auf alle Smarty Funktionen und Variablen, die dir auch der JTL Shop zur Verfügung stellt.

Ein Beispiel: wenn du alle Bestseller-Artikel mit einem Filter erfassen willst, die mit Lagerbeständen arbeiten und derzeit ausverkauft sind, wird dir solch eine Smarty Bedingung weiterhelfen:

($Artikel->cLagerBeachten == "Y") and ($Artikel->bIsBestseller == "1") and ($Artikel->fLagerbestand <= 0) 

Beachte: auf der sicheren Seite bist du in diesem Beispiel erst, wenn du noch einen Filter für den Seitentyp (passend hier: "Artikeldetails") hinzufügst.

Beispiel Smarty Darstellungsfilter

Nur für Kenner

Auch hier der obligatorische Hinweis: falsche oder ungenaue Bedingungen in Smarty Ausdrücken kann auch Dropper nicht korrigieren und führen mitunter zu schweren Fehlern. Verwende diesen Darstellungsfilter also nur, wenn du weißt was du tust und teste die Filter bitte entsprechend.

Drops direkt in .tpl einfügen

Über eine Smarty Funktion kannst du Drops auch direkt in den Quellcode deines Templates integrieren.

{drop name="Name des Drops"}

CSS Selektoren und Einfügemethoden in deinem Drop werden ignoriert, wenn du diese Methode verwendest, nicht jedoch deine Darstellungsfilter. Wenn du auch die Darstellungsfilter ignorieren möchtest, kannst du das mit dem Parameter skipCondition=true tun.

Previewmodus

Wenn du mit Dropper erstellte Inhalte vor der Veröffentlichung testen möchtest, hilft dir der Previewmodus weiter. Alle inaktivien Drops werden im Previewodus angezeigt. Du aktivierst diesen, indem du einfachen einen Parameter an die URL der entsprechen Seite anhängst:

http://www.mein-webshop.de/?preview