Individual Web Development

Zusätzliche Tabs im JTL-Shop3 nutzen

Heute möchten wir Schritt für Schritt zeigen, wie einfach man in der Artikelbeschreibung des JTL-Shop3 einen weiteren Tab nutzen kann. Das bietet sich gerade für Zusatzinformationen zum Produkt an.

Wofür zusätzliche Tabs

Um den Kunden im Online Shop eine bessere Übersichtlichkeit zu bieten, kann man bestimmte Produktspezifikationen auf eine separate Seite auslagern. So zum Beispiel bei technischen Produkten. Hier wirken technische Daten eher unübersichtlich, da nicht alle potentiellen Käufer mit den Daten etwas anfangen können.

Also beschreibt man in der normalen Produktbeschreibung nur die Relevanten Stärken und Einsatzbereiche des Produktes und den technischen Schnickschnack lagert man auf einen separaten Tab aus. Besucher die sich dennoch für die technischen Details interessieren, werden sehr schnell die gewünschten Informationen finden.

Als zweites Beispiel möchte ich hier Produktvideos anführen. Auch hier würden zu viele Videos den Rahmen der Produktbeschreibung sprengen. Auch hier schaft ein separater Tab "Videos" Abhilfe.

Zusätzliche Tabs in JTL-Wawi anlegen

Wie kann man das nun bewerkstelligen. Eigentlich ist das ganz einfach. Der JTL-Shop3 in Verbindung mit der JTL-Wawi ist dafür schon bestens vorbereitet. Ich zeige das hier anhand einen zusätzlichen Reites "Videos" und verwende dazu ein normales YouTube Video. Natürlich können Sie an der Stelle auch Videos aus anderen Videoportalen oder eben eigenen text hinterlegen.

Als erstes muss den Artikel im Artikelkatalog aufrufen. Hier findet man dann auf der Registerkarte (Tab) den Bereich "Attribute/Merkmale". Hierüber können wir das gewünschte Verhalten im Shop steuern und zusätzliche Tabs anlegen. Es werden 2 Attribute pro neuen Tab in der Beschreibung benötigt.

  1. Butten "Attribut hinzufügen" anklicken
  2. Im Dropdown-Feld die Auswahl Kurztext einstellen. Achtung, diese Einstellung lässt sich nach dem speichern nicht mehr ändern)
  3. Im Feld "Name" jetzt eintragen "tab1 name"
  4. Im Feld "Kurztext" die Beschriftung für den Tab eintragen. Wir verwenden hier "Videos", da ja unser Tab nachher Videos heißen soll.
  5. Mit OK das Attribut speichern und zur Attribut-Übersicht zurückkehren.

  6. Jetzt ein weiteres Attribut hinzufügen, wie oben beschrieben.
  7. Dieses Mal im Dorpdown-Feld die Einstellung "Langtext" auswählen.
  8. Im Feld "Name" wird dieses mal "tab1 inhalt" eingetragen
  9. jetzt können wir unseren YouTube Einbettungs-Code für das gewünschte Video im Feld "Text" einfügen. Falls mehrere Videos eingetragen werden sollen, können weitere Einbettungs-Codes einfach untereinander eingefügt werden.
  10. Wieder mit "OK" speichern und fertig.

Nach einem erneutem Webshopabgleich sollte jetzt im Shop auf der Produktseite ein weiterer Reiter zu finden sein, unter dem unser Video angezeigt wird.

Anstelle des Einbettungs-Codes kann man über den Button "HTML-Edit" auch einen Editor aufrufen und dort einfach nur Text hinterlegen. So können zum Beispiel hier auch die technischen Daten eines Produktes hinterlegt werden.

Schlusswort

Wie man sieht ist es ganz einfach mit Hilfe von zusätzlichen Tabs die Produktbeschreibungen im JTL-Shop3 noch übersichtlicher zu gestallten. Mit dieser Funktion ist es möglich bis zu 10 Reiter (Tabs) der Beschreibung hinzuzufügen. Über diese Attribute lassen sich auch noch diverse weiter Einstellungen zufügen. Ein Auflistung aller Steuer-Attribute findet man im Wiki von JTL-Software.

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Allowed HTML tags: <a> <em> <strong> <cite><blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h3> <h4> <h5> <h6> <img> <p> <br>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Neben der Tag-Form „<foo>“ kann auch „[foo]“ verwendet werden.
  • You can use BBCode tags in the text. URLs will automatically be converted to links.
  • Zeilen und Absätze werden automatisch erzeugt.

Weitere Informationen über Formatierungsoptionen

AMP Audio-Dienstleistungen