Seite 1 von 1

Reiter in der Artikel Detail-Ansicht

Verfasst: 11. Sep 2013, 10:29
von Ingo_G
Hallo

In der Artikel Detailansicht erscheint in einem Feld, welches zusätzlich mit Reitern zur Navigation versehen ist. Um die Detail Beschreibung besser realisieren zu können möchte ich nun mehrere Reiter erstellen, wie z.B.: Beschreibung/Technische Daten/Abmessungen usw.

Im Backend habe ich jedoch nur die Texteingabe für die Produkt-Beschreibung gefunden und nicht noch für zusätzliche Reiter, wie funktioniert das???

Mit freundlichen Grüßen
Ingo Gorges

Re: Reiter in der Artikel Detail-Ansicht

Verfasst: 11. Sep 2013, 16:46
von supportteam
Hallo Ingo,

um das zu bewerkstelligen, gibt es verschiedene Möglichkeiten. Wir möchten Ihnen hier eine Lösung zeigen, die auf den ersten Blick etwas "unkonventionell" erscheint aber möglicherweise für Sie am einfachsten und schnellsten zu bewerkstelligen ist. Sie könnten nämlich in Ihren Produkten jeweils den kompletten HTML-Code für die Reiter/Tabs direkt in den Produktbeschreibungen platzieren.

Erklärung:
Um die Produktbeschreibung mit Reitern/Tabs darstellen zu können, verwenden Sie einfach das Javascript-Addon lsNavtab, das MERCONIS von Haus aus mitbringt. lsNavtab wird in der Javascript-Konfigurationsdatei von MERCONIS eingestellt (nach der Installation zu finden unter /tl_files/shopfiles/jsConfiguration/jsConfiguration.js).

lsNavtab muss den Inhalt, der in Tabs dargestellt werden soll, über eine CSS-Klasse identifizieren können und welche CSS-Klasse das ist, wird eben neben einigen anderen Dingen in der Datei jsConfiguration.js definiert.

Die relevante Zeile, mit der lsNavtab initialisiert wird, ist in jsConfiguration.js bereits vorbereitet. Diesbezüglich brauchen Sie nichts zu tun oder abzuändern:

Code: Alles auswählen

ls_navtabProduktInfos = new class_ls_navtab({navtabContainerClass: 'lsNavtabProduktInfos', defaultAutoplayStatus: false, autoplayDelay: 4000, stopAutoplayOnMouseenter: true, startAutoplayOnMouseleave: true});
Eine Produktbeschreibung, die in Tabs dargestellt werden soll, benötigt eine spezielle HTML-Struktur, die lsNavtab dann verarbeiten kann:

Code: Alles auswählen

		<div class=" lsNavtabProduktInfos ">
			<div class="labels">
				<div class="label start">TAB 01</div>
				<div class="label">TAB 02</div>
				<div class="label">TAB 03</div>
			</div>
			<div class="contents">
				<div class="content noJsDefault">CONTENT TAB 01</div>
				<div class="content">CONTENT TAB 02</div>
				<div class="content">CONTENT TAB 03</div>
			</div>
			<div class="navigation">
				<div class="prev">PREV</div>
				<div class="next">NEXT</div>
				<div class="play">PLAY</div>
				<div class="stop">STOP</div>
			</div>
		</div>
Achten Sie auf die Übereinstimmung der Klasse im äußeren DIV der HTML Struktur und dem angegebenen Wert für das Attribut „navtabContainerClass“ in jsConfiguration.js. Ändern Sie den genannten HTML-Code nun so ab, dass er Ihren Vorstellungen entspricht und ergänzen Sie ihn mit den von Ihnen gewünschten Inhalten. Für die Tab-Darstellung von Produkt-Informationen werden Sie vermutlich keine Navigationselemente benötigen, lassen Sie den entsprechenden HTML-Code also einfach weg. So könnte das dann bei Ihnen aussehen:

Code: Alles auswählen

		<div class=" lsNavtabProduktInfos ">
			<div class="labels">
				<div class="label start">Beschreibung</div>
				<div class="label">Technische Daten</div>
				<div class="label">Abmessungen</div>
			</div>
			<div class="contents">
				<div class="content noJsDefault">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut enim pharetra, blandit nulla nec, fringilla lectus. Nunc id felis quis arcu dignissim dignissim non quis libero. Aenean iaculis et leo eu volutpat. Duis ac hendrerit massa, sed convallis sem. Nunc hendrerit laoreet fermentum. Vestibulum sed felis non tellus aliquam venenatis at non ante. Nulla rhoncus sem ac enim viverra molestie. Suspendisse ut neque suscipit ante sollicitudin adipiscing quis et quam. Aliquam viverra rhoncus nulla, eget dapibus metus vulputate eget.
</div>
				<div class="content">
					Mauris nec neque ipsum. Vestibulum id turpis vitae mi ullamcorper malesuada. In hac habitasse platea dictumst. Ut auctor eros velit, vel fermentum nisi tempus a. Mauris quis consectetur libero, eu volutpat enim. Mauris ultrices quis ipsum sit amet commodo. Ut id erat at nulla eleifend malesuada ac quis metus. Aenean nisi diam, adipiscing quis lobortis non, egestas at nulla.
</div>
				<div class="content">
					Pellentesque ipsum eros, semper hendrerit sem non, scelerisque porttitor lorem. Pellentesque quis justo vel nisi viverra vulputate et semper turpis. Nullam justo ipsum, condimentum auctor consectetur pellentesque, posuere auctor est. Vestibulum a mollis urna.
</div>
			</div>
		</div>
Tragen Sie die so strukturierte Produktbeschreibung in der Produktverwaltung in das Feld „Produktbeschreibung“ ein. Wichtig ist dabei, dass der HTML-Code auch wirklich HTML-Code bleibt, deshalb öffnen Sie bitte im Tiny-Editor den HTML-Modus und tragen Sie die Beschreibung samt HTML-Code dort ein.


Damit auch die Optik passt, werden nun noch einige CSS-Angaben benötigt, die idealerweise in der Datei /tl_files/shopfiles/css/style.css platziert werden. Das hier sind Style-Angaben, die eine Standard-Optik erzeugen und die Sie dann nach Belieben anpassen können.

Code: Alles auswählen

.lsNavtabProduktInfos {
	clear: both;
	background-color: #CCCCCC;
	border: 1px solid #000000;
	border-radius: 10px;
	width: 500px;
	padding: 10px;
}

.lsNavtabProduktInfos .navigation {
	padding: 5px;
	margin-top: 10px;
	border-top: 1px solid #000000;
}

.lsNavtabProduktInfos .navigation .prev,
.lsNavtabProduktInfos .navigation .next,
.lsNavtabProduktInfos .navigation .play,
.lsNavtabProduktInfos .navigation .stop {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 5px;
	padding: 3px;
	cursor: pointer;
	border: 1px solid #000000;
	background-color: #FFFFFF;
	color: #000000;
}

.lsNavtabProduktInfos .navigation .prev:hover,
.lsNavtabProduktInfos .navigation .next:hover,
.lsNavtabProduktInfos .navigation .play:hover,
.lsNavtabProduktInfos .navigation .stop:hover,
.lsNavtabProduktInfos .navigation .play.active,
.lsNavtabProduktInfos .navigation .stop.active {
	border: 1px solid #FFFFFF;
	background-color: #000000;
	color: #FFFFFF;
}

.lsNavtabProduktInfos .labels {
	padding: 5px;
	margin-bottom: 10px;
	border-bottom: 1px solid #000000;
}

.lsNavtabProduktInfos .labels .label {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 5px;
	padding: 3px;
	cursor: pointer;
	border: 1px solid #000000;
	background-color: #FFFFFF;
	color: #000000;
}

.lsNavtabProduktInfos .labels .label.active {
	border: 1px solid #FFFFFF;
	background-color: #000000;
	color: #FFFFFF;
}

.lsNavtabProduktInfos .contents {
	position: relative;
	overflow: hidden;
	height: 100px;
}

.lsNavtabProduktInfos .contents .content {
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
}

.lsNavtabProduktInfos .contents .content.noJsDefault {
	display: block;
}
Anmerkung:
Es bietet sich natürlich an, die Erstellung der HTML-Struktur zu automatisieren. Das könnten Sie z. B. recht einfach über Excel lösen. Sie können übrigens auch den gesamten HTML-Code im MPM in die Proudktbeschreibungen einfügen. Sie müssen dann lediglich für den Export die "Umwandlung der Inhalte" unter "Konfiguration" deaktivieren.

Alternativen:
Falls Sie sehr viele Produkte aus Ihrem Warenwirtschaftssystem durch einen Import in MERCONIS einlesen möchten und die Inhalte, die Sie in unterschiedlichen Tabs darstellen wollen, in Ihrem Warenwirtschaftssystem in einzelnen Datenfeldern organisiert sind, so gibt es verschiedene Ansätze, dies zu lösen. Geben Sie uns Bescheid, wenn Sie eine Export-/Import-Lösung benötigen und wir Ihnen hierbei mit einigen Tipps behilflich sein können.

Übrigens: Wir werden die Fähigkeiten des "Produkt-Imports" noch weiter flexibilisieren, so dass Sie dann auch in der Lage sein werden, den Importer anzuweisen, automatisch im Zuge des Imports eine HTML-Struktur zu schaffen... :D

FlexContents ab V. 1.0.3

Verfasst: 13. Sep 2013, 13:41
von supportteam
MERCONIS enthält ab der Version 1.0.3 die neuen FlexContents. Damit ist es nun auch komfortabel möglich, automatisiert schon im Zuge des Imports beliebige Produktinformationen (aber auch sonstige Inhalte oder auch HTML-Code etc.) zu importieren und bswp. in Templates direkt anzusprechen und zu verwenden!

Beispiel: Sie möchten, dass zu Ihren Produktinformationen zusätzlich auch technische Informationen, Downloadlinks etc. ausgegeben werden - z. B. mit lsNavtab auf eigenen Reitern? Dann definieren Sie einfach, welche Importspalten beim Import dafür verwendet werden sollen. Sie können dann auf diese importierten Inhalte bspw. direkt in Ihren Templates zugreifen. Je nach Szenario könnten Sie so auch bswp. direkt kompletten HTML-Code importieren und direkt in den Templates einfügen!