Instructie

Möchten Sie den Optionsblock im Reservierungsdialog mit Bildern versehen? Das ist in der Spalte Memo des Optionsblocks möglich.
Befolgen Sie die untenstehenden Schritte, um eine oder mehrere Optionen mit einem Bild zu versehen.

In den untenstehenden Schritten gehen wir davon aus, dass die Optionen für die Produkte in Ihrer Umgebung bereits eingerichtet sind.
Ist das nicht der Fall? Schauen Sie dann kurz auf dieser Seite, wie Sie eine Option hinzufügen.

Fügen Sie die Spalte Memo zum Optionsblock hinzu

Standardmäßig zeigt der Optionsblock die Spalten Option, Preis und Anmerkungen.
Ein Bild können Sie in der Spalte Memo hinzufügen, nehmen Sie diese Spalte wie folgt auf:

  1. Wechseln Sie in den Konfigurationsmodus
  2. Klicken Sie auf Kundenseite > Reservierungsdialog
  3. Klicken Sie auf den Block Optionen
  4. Sie sehen einen Block mit einem Namen wie 'Block-Options-DEFAULT'
  5. Klicken Sie in diesem Block auf die Schaltfläche 'Auswählen' in der Zeile 'Spalten'
  6. Doppelklicken Sie im Popup 'Spalten auswählen' auf das Feld Memo in der linken Spalte, sodass es in die rechte Spalte verschoben wird (oder ziehen Sie das Feld manuell von der linken in die rechte Spalte)
  7. Klicken Sie auf Speichern

Fügen Sie Bilder zur Medienverwaltung hinzu

Verwenden Sie für die Optionsbilder vorzugsweise dasselbe Format, am liebsten quadratisch. Das ergibt ein schönes, klares und ruhiges Erscheinungsbild. Denken Sie daran, dass die Bilder für die Optionen klein angezeigt werden, laden Sie daher vorzugsweise keine Optionsbilder hoch, die breiter oder höher als 520 Pixel sind.

  1. Wechseln Sie in den Konfigurationsmodus
  2. Klicken Sie auf Vorlagen > Medien verwalten
  3. Klicken Sie auf den Ordner Images
  4. Laden Sie das/die Optionsbild(er) hoch

Die URL des Optionsbildes ermitteln

Zum Einstellen eines Bildes bei einer Option benötigen Sie die vollständige URL. In Medien verwalten können Sie schnell die URL eines Bildes ermitteln:

  1. Rechtsklicken Sie auf das Bild im Ordner Images und klicken Sie auf Ansehen im Popup-Menü
  2. Das Bild öffnet sich, rechtsklicken Sie darauf und klicken Sie auf etwas wie 'Bildadresse kopieren' oder 'Bildlink kopieren
  3. Fügen Sie die kopierte URL vorübergehend in eine Textdatei ein, Sie benötigen diese URL gleich zum Ausfüllen des src-Attributs des Bildes.

Stellen Sie ein Bild bei einer Option ein

Die untenstehenden Schritte müssen Sie für jedes Produkt ausführen, bei dem Sie Bilder zu den Optionen hinzufügen möchten.

  1. Wechseln Sie in den Konfigurationsmodus
  2. Klicken Sie auf Objekte > Produkte verwalten
  3. Öffnen Sie die Ansicht Extra für das Produkt, bei dem Sie ein Bild zu einer Option hinzufügen möchten
  4. Im Block Optionsdetails klicken Sie auf das erste Stiftsymbol der Option, zu der Sie das Bild hinzufügen möchten
  5. Im Popup 'Option ändern' klicken Sie im Feld 'Erweitert' auf das Quellcode-Symbol (< >) in der Symbolleiste des Editors
  6. Im Popup 'Quellcode' fügen Sie den untenstehenden Code ein:
    <div class="text-sm-center">
      <img class="img-fluid" src="URL-NAAR-AFBEELDING" alt="OMSCHRIJVING" width="60px" height="auto">
    </div>
    
  7. In diesem Beispielcode ist eingestellt, dass ein Bild nicht breiter als 60px angezeigt werden darf.
    Möchten Sie es lieber noch etwas kleiner? Ändern Sie dann im Code die 60px auf zum Beispiel 50px oder 40px.
  8. Setzen Sie die vollständige URL des Bildes an die Stelle, an der im Beispielcode jetzt 'URL-NAAR-AFBEELDING' steht.
  9. Ändern Sie den Text OMSCHRIJVING des alt-Attributs in eine kurze Beschreibung des Bildes.
  10. Klicken Sie auf Speichern, um das Popup 'Quellcode' zu schließen
  11. Klicken Sie erneut auf Speichern, um das Popup 'Option ändern' zu schließen.

Kontrolle

Zum Schluss überprüfen Sie kurz, ob das Bild im Reservierungsdialog des betreffenden Produkts angezeigt wird. Ist das der Fall, können Sie Bilder zu den übrigen Optionen hinzufügen.

Sehen Sie kein Bild? Aktualisieren Sie dann kurz die Seite oder leeren Sie Ihren Browser-Cache.
Immer noch kein Ergebnis? Durchlaufen Sie dann alle Schritte und überprüfen Sie, ob Sie nichts vergessen haben und ob Sie keinen Fehler beim Aufnehmen und Anpassen des Beispielcodes im Feld 'Erweitert' der Option gemacht haben.