Dein Warenkorb ist leer

Eingabeelemente

Lerne welche Möglichkeiten der Eingabe das Dropper Backend liefert

Diese Seite gibt dir einen Überblick über alle Controls, die wir dir in unseren Drops zur Eingabe deiner Inhalte zur Verfügung stellen.

Controls

Bevor wir auf die Besonderheiten einiger Drop Controls eingehen, hier eine Übersicht.

Control Was du eingeben kannst
Text Einfache Texte wie Titel oder Überschriften.
HTML Komplexere Texte via Editor, die auch per HTML formatiert werden können.
Checkbox Einfache Einstellungen.
File Verschiedene Dateitypen mit einem Control, das auch Drag & Drop beherscht.
Switch Ein Wert aus vorgegebenen Optionen.
Select Ein Wert aus vorgegebenen Optionen mit einem durchsuchbaren Drop Down Control.
Multiselect Mehrere Werte aus vorgegebene Optionen, die auch sortiert werden können.
Link Einen Link zu Artikeln, Kategorien, Herstellern oder externen Seiten.
Date Datumsangaben mit einem Kalender-Control.
Color Eine Farbe mittels Namen, HEX oder RGB(A) Code
List Listen mit verwaltbaren Elementen, die wiederrum Controls enthalten.

Text Control

Das Text Control ist eigentlich selbsterklärend. Nur eine Besonderheit gilt es zu beachten: um Fehleingaben zu minimieren, zeigen wir - wann immer es sinnvoll ist - die entsprechende Einheit zur Eingabe rechts neben dem Control an.

HTML Control

Häufig benötigst du in deinen Drops längere Texte, die du auch formatieren möchtest. Für diese Fälle geben wir dir einen sehr guten aber trotzdem einfachen HTML Editor an die Hand.

HTML Control im Plain Drop

Da das Control auch über einen Vollbildmodus verfügt, Syntaxhighligthing und das Einrücken per [TAB] beherrscht, sind auch komplexe HTML Snipets für dich zukünftig kein Problem mehr.

Und: das HTML Control kann auch andere Drops aufnehmen. Wie das genau funktioniert erfährst du hier .

File Control

Mit dem File Control kannst du beliebige Dateien (häufig werden das Bilder sein) zu deinem Drop hinzufügen. Dafür kannst du verschiedene Wege nutzen:

  • eine Datei per Klick auf den "Datei hochladen" von deinem Computer hinzufügen
  • die Datei aus der Mediengalerie wählen
  • eine URL eingeben und so auch entfernte Dateien verlinken

File Control in einem Powerslide Slide

Übrigens: auch Drag & Drop ist hier möglich. Ziehe eine Datei von deinem Desktop direkt in das Control, um diese hochzuladen.

Multiselect Control

Im Multiselect Control kannt du mehrere Werte aus mehrere vorgegebenen Optionen wählen. Falls die Reihenfolge der Werte im Drop eine Rolle spielen, kannst die diese einfach per Drag & Drop ändern.

Multiselect Control im Brand Box Drop

Link Control

Wen Drops Links benötigen, wird dir das Link Control sehr helfen. Hiermit kannst du nicht nur externe Links eingeben, sondern auch deine Kategorien, Produkte, CMS Seiten oder Herstellerseiten verlinken.

Link Control in einem Image Banner Drop

Der Vorteil: interne Links werden im Frondend dynamisch aufgelöst, so dass du durchaus die Namen der verlinkten Seiten im Laufe der Zeit ändern kannst. Die Angabe eines Linktitels für internen Links ist optional.

Color Control

Mit dem Color Control kannst du auf einfache Art und Weise Farben festlegen. Klickst du auf das Color Control, öffnet sich ein Color Picker, in dem du deine Farbe direkt von einer Palette wählen kannst. Ein Schieberegler im Color Picker gibt dir sogar die Möglichkeit, den Alphakanal der Farbe und somit ihre Transparenz zu bestimmen (0.0: volle Transparent, 1.0: volle Deckkraft).

Zwei Color Controls mit HEX und RGBA Werten

Tipp: du kannt deinen Farbcode auch ohne Color Picker direkt in das Color Control schreiben. Erlaubt sind hierbei alle validen CSS Farbnotationen .

List Control

Manche Drops geben dir die Möglichkeiten, mehrere komplexe Inhalte innerhalb einer Liste zu erstellen. Ein Beispiel zur Verwendung von Listen ist unser Powerslide : hier möchtest du üblicherweise mehrere Listenelemente (in diesem Fall nennen wir diese passend Slides) erstellen, die jeweils zumindest ein Bild, einen Titel und einen Link enthalten.

Listenelemente im Power Slide Drop

Mit einem Klick auf den + Button öffnest du den Dialog zum Erstellen eines neuen Listenelementes. Dieser ähnelt dem Dialog zur Konfiguration eines Drops, nur die Einstellungen fehlen: die Darstellungsbedingungen eines Listenelementes sind immer die selben wie die des Drops.

In der Liste kannst du über die rechten Icons ein Listenelement duplizieren oder löschen. Die Sortierreihemfolge änderst du einfach per Drag & Drop.

Mehrsprachigkeit

Drops können problemlos mit mehrsprachigen Shops umgehen: viele Controls ermöglichen verschiedene Eingaben für die in deinem Shop aktiven Sprachen.

Mehrsprachiges HTML Control im Plain Drop

Ob ein Control Mehrsprachigkeit unterstützt, erkennst du an der Anzeige der derzeit aktiven Sprache hinter der Bezeichnung des Controls. Benutze die Buttons im rechten Bereich der Top Bar von Dropper, um zwischen den aktiven Sprachen deines Shop zu wechseln.

Sprachvariablen

Neben mehrsprachigen Controls bieten einige Drops auch Sprachvariablen an, die dann im Template verwendet werden können. Beachte hierbei : Sprachvariablen gelten immer über alle Drop Instanzen hinweg. Änderst du eine Variable in einem Drop, ändert sich deren Wert auch für andere Instanzen dieses Drops.

Sprachvariablen im Drop

Abhängigkeiten

Controls können untereinander Abhängigkeiten aufweisen. In einigen Drops nutzen wir diese Abhängikeiten, um dir eine möglichst übersichtliche Eingabe zu ermöglichen. Wählst du bspw. in einem Checkbox verschiedene Optionen, kann sich der Konfigurationsbereich deines Drops daraufhin verändern. Überflüssige Controls blenden wir ggf. für dich aus.

Deine vorher getätigten Eingaben bleiben weiterhin bestehen. Nach einem Wechsel zurück zur vorherigen Option ist der alte Zustand wiederhergestellt.

Smarty in Drop Controls

In einigen Controls kannst du Smarty Code verwenden, um bspw. auf Templatevariablen oder komplexere Funktionen zuzugreifen. Wenn das der Fall ist, wird dir das Drop eine Einstellung "Smarty evaluieren" anbieten, die im Standard deaktiviert ist.

Wenn du auf Smarty verzichten kannst, empfehlen wir dir, diese Option zu deaktivieren: intern wird die Smarty Funktion {eval} verwendet, die aus Performancegründen nur sparsam eingesetzt werden sollte.

Vorsicht ist beim Umgang mit Smarty und Javascript geboten. Geschweifte Klammern, die häufig auch in Javascript Codeblöcken verwendet werden, werden von Smarty interpretiert und verursachen so Fehler.

Verwende {ldelim} und {rdelim} , um öffnende und schließende geschweifte Klammern in deinem Javascript Code zu ersetzen. Mehr Informationen zu diesem Thema erhältst du in der Smarty Dokumentation .