Drops einfügen

Selektor Finder

Der Selektor Finder ist das zentrale Tool, um einfach und schnell die passende Position für dein Drop zu finden. Dabei arbeitet er komplett templateunabhängig, bringt aber für einige Templates weitere Verbesserungen mit. Dazu später mehr.

Wie gehst du also grundsätzlich vor, wenn du mit dem Selektor Finder die Position deines Drops festlegen willst? Zunächst aktivierst du den Selektor Finder mit dem Button 1 rechts neben der Selektoren-Eingabe 2. Daraufhin öffnet sich eine Vorschau deines Shops, in der du dann live navigierst und dabei Elemente untersuchen kannst.

Bei einem Mouseover über Elemente deiner Seite werden dir Positionen vorgeschlagen. Beachte, dass diese Positionen verschiedenartig sein können (und auch farblich leicht hervorgehoben sind): Drop Zones (Blau), andere Drops (Magenta), IDs (Gelb) und CSS Klassen (Rot). Mit einem Klick wählst du das entsprechende Element schließlich aus.

Nach Auswahl der Position erscheint ein weiterer Dialog, in dem du die ausgewählte Position ggf. noch weiter verfeinern und die Einfügemethode deines Drops (Details siehe unten) festlegen kannst. Hast du das erledigt, schließt sich die Live Vorschau deines Shops. Du hast jetzt immernoch die Möglichkeit, Einfügemethoden und Positionen zu ändern 2 3.

Templateintegration und Drop Zones

Für einige beliebte Templates bietet Dropper sogenannte Templateintegrationen an. Für das JTL-Shop Standard-Template EVO definieren wir darin zahlreiche Drop Zones. Vereinfacht gesagt sind das gut verständliche und lesbare Ortsangaben, die dir das Einfügen deiner Drops deutlich erleichtern.

Im obigen Bespiel hast du bereits eine Drop Zone kenngelernt, nämlich die Kurzbeschreibung eines Produktes, die nur auf Artikeldetailseiten vorkommt. Diese Einschränkung spiegelt sich auch in der Repräsentation der Zone im Backend wieder: Produkt > Eigenschaften > Kurzbeschreibung. Du kannst Drop Zones auch direkt eingeben, in unserem Beispiel wäre das @product.info.shortDescription.

CSS Selektoren

Du musst nicht zwingend Drop Zones nutzen, um die Positionen deiner Drops zu bestimmen, sonder kannst auch CSS Selektoren verwenden. Einige HTML Grundlagen müssen wir an dieser Stelle voraussetzen, dennoch einige wichtigte Selektorentypen in der Übersicht:

• 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. .panel für ein Element <div class='panel'></div>
• IDs: 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 sehr genaue Angaben zur Position eines Elements im Quelltext deiner Seite. Hier ist aber auch eine gewisse Vorsicht geboten: ein Selektor wie #sidepanel_left .panel .panel-title selektiert bspw. alle Titel der linken Sidebox im JTL-Shop Standartemplate EVO. Prüfe daher immer genau, ob Drops nicht ungewollt mehrfach auf der Seite erscheinen.

OPC Mountpunkte

Mit dem OnPage Composer (OPC) wurden im JTL-Shop 5 sogenannte OPC Mountpunkte bzw. OPC Mountpoints eingführt. Diese Punkte werden im OnPage Composer verwendet, um Portlets daran zu platzieren.

Auch Dropper unterstützt OPC Mountpunkte. Im Zone Picker erscheinen diese als blau hinterlegte Bereiche, an denen du deine Drops Vorstellen, Anstellen oder die du komplett ersetzen kannst.

Das Platzieren von Drops an OPC Mountpunkten ist besonders performant. Auch werden diese von den meisten JTL-Shop 5 Templates unterstützt.

Template-Blöcke und Template-Dateien

Ab Dropper 100.19 kannst du auch ganze Template-Dateien oder Template-Blöcke ersetzen bzw. erweitern. Das ist besonders dann hilfreich, wenn du Artikellisten erweitern und dabei auf Werte des jeweiligen Artikels zugreifen möchtest. Das war vorher nur mit einem Eingriff ins Template möglich.

Zwei neue Anzeigepositionen bietet Dropper dir jetzt:

• Template-Block: @template.block:[NAME-DES-SMARTY-BLOCKS] - z.B. @template.block:productlist-item-box-meta
• Template-Datei: @template.file:[PFAD-DER-TEMPLATE-DATEI] - z.B. @template.file:productlist/item_box.tpl

Die Namen der Smarty Blöcke findest du mit einem Blick in die Templatedateien heraus. Der Pfad zur Templatedatei geht vom Rootverzeichnis deines aktiven Templates aus, also z.B. [ShopRoot]/templates/NOVA/ für das NOVA Template in JTL-Shop 5.

Vorschläge für Darstellungsfilter

Wenn du den Selektor Finder nutzt, um Drops zu positionieren, erscheinen ab Dropper Version 100.17 passende Filtervorschläge für die via Selektor Finder annavigierte Seite.

Navigierst du bspw. zu einer gefilterten Kategorieseite, wird die Kategorie selbst, der Seitentyp "Artikellisting" und sogar die gesetzten Listingfilter als Darstellungsfilter vorgeschlagen.

Mit einem Klick auf "Alle hinzufügen" fügst du alle vorgeschlagene Filter zu deinm Drop hinzu. Natürlich könnt ihr diese dann anschließend bearbeiten, ergänzen oder löschen.

Darstellungsfilter kombinieren

Du kannst beliebig viele Darstellungsfilter (auch des gleichen Typs) kombinieren und diese auch 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.

Mehre Darstellungsfilter kannst du mit einem logischem UND (Standardeinstellung) oder einem ODER verknüpfen. Auch hier änderst du per Klick die jeweilige Verknüpfung. Multiple Werte in einzelnen Filtern werden immer ODER verknüpft. In unserem komplexen Beispiel wählen wir im Artikelfilter zwei Produkte, unser Drop würde dann genau bei diesen beiden Produkten angezeigt werden.

Um dir lästiges Scrollen durch tausende Filteroptionen (bspw. bei Artikelfiltern) zu ersparen, kannst du durch eine Direkteingabe auch nach Optionen suchen. Üblicherweise wird dabei nach dem Namen der Filteroption gesucht, also bspw. Kategorie- oder Artikelnamen. Bei Artikelfiltern ist auch die Suche nach der Artikelnummer möglich.

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.

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.

Besonderheiten

Im OPC eingefügte Drops werden auch nur dort angezeigt, wo der OPC Inhalt dargestellt wird. Zusätzlich kannst du aber Darstellungsfilter verwenden, um die Anzeige der Drop-Inhalte weiter einzuschränken.

Drops, die du bereits im Dropper Backend erstellt hast, kannst du nicht im OPC verwenden. Analog dazu sind Drops, die du im OPC erstellt hast, auch nur dort verfügbar.

Parameter dynamisch überschreiben

Diese Art des Einfügens funktioniert übrigens auch in Drop Controls, die Smarty interpretieren können, also zum Beispiel im Plain Drop.

Wozu man das bracht, wenn man doch Drops bequem per Drag'n'Drop verlinken kann? Es kann dann nützlich sein, wenn du Parameter des Drops dynamisch überschreiben möchtest, zum Beispiel mit Templatevariablen.

{drop name="Name des Drops" 
      parameterName1="Mein neuer Wert"
      parameterName2=$meineTemplateVariable}

Aktivieren in den Dropper Einstellungen

Voraussetzung zur Nutzung des Drop Editors ist, dass du als Admin-Nutzer im Shopbackend eingeloggt bist und die entsprechende Option in den Dropper Einstellungen aktivierst.