Artikelvarianten dynamisch darstellen

In plentymarkets können Sie Artikeln einzelne Attribute zuordnen und über diese Attribute Artikelvarianten erstellen. Die Eigenschaften dieser Artikelvarianten, wie Aufpreise und Attributbilder, sollen visuell und dynamisch im Webshop dargestellt werden. Dabei sollen die angezeigten Informationen und Artikelbilder je nach Auswahl automatisch angepasst werden.

 
Einstellungen in allen relevanten Templates durchführen

Damit die dynamische Darstellung in allen Ansichten funktioniert, müssen Sie die beschriebenen Schritte in allen relevanten Templates durchführen. Eine dynamische Darstellung in den Suchergebnissen erfolgt z.B. nur, wenn Sie das Template unter CMS » Webdesign » Layout » ItemView » ItemViewSearchResultsList bearbeitet haben.

Template-Variablen zur Darstellung von Attributen einfügen

Mit der Template-Variable $AttributeSelect werden die Attribute eines Artikels als Dropdown-Menü dargestellt. Mit der Template-Variable $ImageAttributeList werden die Attribute eines Artikels nicht nur als Dropdown-Menü dargestellt, sondern auch als Liste mit Vorschaubildern. Die Optionen im Dropdown-Menü werden dann dynamisch geändert. Auch die Features Dynamischer Artikelpreis und Dynamische Artikelbilder können genutzt werden. Die Template-Variable $ImageAttributeList funktioniert nur, wenn die Attribute einem Bild zugeordnet wurden.

Gehen Sie wie unten beschrieben vor, um die Template-Variablen einzufügen. Das Einfügen der Template-Variablen wird beispielhaft für das Template ItemViewSingleItem beschrieben. Die Template-Variablen funktionieren aber auch in allen anderen Bereichen, in denen die Template-Variable $AttributeSelect eingesetzt werden kann.

Template-Variablen einfügen:
  1. Öffnen Sie das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.
  2. Fügen Sie die Template-Variablen $AttributeSelect und $ImageAttributeList in das Template ein.

Artikelpreise dynamisch anzeigen

Um einen dynamischen Artikelpreis anzuzeigen, ersetzen Sie im Template ItemViewSingleItem die Template-Variable $Price durch die Template-Variable $PriceDynamic. Durch Verwendung der Template-Variable $PriceDynamic wird die Anzeige des Artikelpreises je nach Auswahl eines Attributs angepasst. Voraussetzung ist, dass den Artikeln Attribute mit Aufpreisen zugeordnet wurden. Gehen Sie wie unten beschrieben vor, um den Artikelpreis dynamisch anzuzeigen.

Bild 1: Beispielansicht für dynamische Artikelpreise

Artikelpreise dynamisch anzeigen:
  1. Öffnen Sie das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.
  2. Fügen Sie die Template-Variable $AttributeSelect in das Template ein, falls die Variable noch nicht vorhanden ist.
  3. Ersetzen Sie die Template-Variable $Price durch die Template-Variable $PriceDynamic.
Anzeige der Aufpreise deaktivieren

Um Aufpreise im Auswahlfeld nicht anzuzeigen, öffnen Sie das Menü Einstellungen » Mandant (Shop) » Standard » Artikelansichten » Grundeinstellungen. Wählen Sie dort für die Option Attribut-Aufpreis die Einstellung nicht anzeigen.

Artikelbilder dynamisch anzeigen

Führen Sie die unten beschrieben Schritte aus, um Artikelbilder dynamisch anzuzeigen.

Bilderverknüpfung aktivieren

Damit bei Auswahl eines Attributs das richtige Artikelbild angezeigt wird, aktivieren Sie zunächst bei den Attributen die Option Bildverknüpfung. Gehen Sie dazu wie folgt vor.

Bildverknüpfung aktivieren:
  1. Öffnen Sie das Menü Einstellungen » Artikel » Attribute.
  2. Klicken Sie auf das Plus bei dem Attribut, das Sie bearbeiten möchten.
  3. Aktivieren Sie die Option Bildverknüpfung.
  4. Prüfen Sie, ob Sie die benötigten Attribute den gewünschten Artikeln zugeordnet und die Attribute mit den Artikelbildern verknüpft haben.

Client-Prüfung aktivieren

Aktivieren Sie nun die Client-Prüfung, um die Attributbilder dynamisch anzuzeigen.

Layout-Einstellungen vornehmen

Prüfen Sie nun im Menü CMS » Webdesign im Bereich Layout » ItemView, ob im Template ItemViewSingleItem die Template-Variable $AttributeSelect vorhanden ist. Erweitern Sie außerdem das Template um das folgende JavaScript. Gehen Sie dazu wie unten beschrieben vor.

<script language="javascript" type="text/javascript"> var dynamic_article_image = "middle"; </script>

Code für die Darstellung von Attributbildern im Webdesign einfügen:
  1. Öffnen Sie das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.
  2. Stellen Sie sicher, dass sich die Template-Variable $AttributeSelect im Template befindet.
  3. Fügen Sie das obige JavaScript in das Template ein.
  4. Bearbeiten Sie den Wert der Variable dynamic_article_image, wenn Bilder nicht in mittlerer Auflösung angezeigt werden sollen. Ersetzen Sie den Wert "middle" durch "preview", wenn die Vorschaubilder angezeigt werden sollen, oder durch "normal", wenn Bilder in höchster Auflösung angezeigt werden sollen.
  5. Dies ist abhängig von der Art Ihres gewählten Vorschaubilds, erkennbar an der danach eingefügten Variable für das Artikelbild.

Nachfolgend ein Bild eines Beispielcodes, der von Zeile 5 bis 7 das JavaScript und in Zeile 21 die Template-Variable enthält.

Bild 2: Beispielcode für dynamische Artikelbilder

Dynamische Bilder

Dynamische Bilder stehen Ihnen auch im Menü CMS » Webdesign und dort unter Layout » ItemView im Template ItemViewCategoriesList zur Verfügung.

Mehr als ein Bild pro Variante zuordnen

Einem Attributwert einer Variante im Tab Bilder des Artikels können bis zu 7 Bilder zugeordnet werden. Damit der Bilderwechsel in der ItemViewSingleItem-Ansicht funktioniert, müssen die Vorschaubilder in einem DIV-Container mit der ID PlentyDynamicPreviewImagesContainer liegen. Außerdem müssen die Bilder in einem a-Tag mit dem unten dargestellten schematischen Aufbau liegen:

<div id="PlentyDynamicPreviewImagesContainer" class="articlepicswrapper"> <a href="$ImageURL[1]" name="$MiddleSizeImageURL[1]" rel="{gallery: 'gal1', smallimage: '$MiddleSizeImageURL[1]', largeimage: '$ImageURL[1]'}"> <img src="$PreviewImageURL[1]" alt="$Name[1] 001" class="previewimages"> </a> {% if $ImageURL[2]!="" %} <a href="$ImageURL[2]" name="$MiddleSizeImageURL[2]" rel="{gallery: 'gal1', smallimage: '$MiddleSizeImageURL[2]',largeimage: '$ImageURL[2]'}"> <img src="$PreviewImageURL[2]" alt="$Name[1] 002" class="previewimages"> </a> {% endif %} </div>

Das "große" Artikelbild muss folgenden schematischen Aufbau haben (wichtig insbesondere class und rel), damit die Bilder zum gewählten Attributwert angezeigt werden:

<a href="$ImageURL[1]" class="jqzoom" rel="gal1"> $MiddleSizeImage[1] </a>

CSS anpassen

Die Ansichten der hier beschriebenen Features passen Sie per CSS an. Wir stellen Ihnen nachfolgend CSS-Codes dazu vor. Die Codes sind Beispiele und können nach Belieben angepasst werden.

CSS für Client-Prüfung anpassen

Fügen Sie den folgenden CSS-Code im Menü CMS » Webdesign » Layout » CSS » CSSContent am Ende des vorhandenen Codes ein. Sichern Sie den vorhandenen Code, bevor Sie den folgenden Code einfügen.

Hinweis zum Standard-Design farbfinal

Wenn Sie in Ihrem Webshop eines unserer Standard-Designs farbfinal nutzen, achten Sie darauf, dass der Abschnitt /* DROPDOWN RESET FOR FARBFINAL OR OTHER LAYOUTS */ in Ihrem CSS vorhanden ist.

/* NEW ATTRIBUTE SELECT */ /* clear */ .clear { clear: both; } /* wrapper */ .plentyAttributeSelectWrapper { margin-bottom: 5px; } /* wrapper title */ .plentyAttributeSelectWrapperTitle { } /* wrapper content */ .plentyAttributeSelectWrapperContent { display: inline-block; } /* ul (all) */ /* ul */ .plentyAttributeSelectWrapperContent ul { padding-left: 0; } /* li */ .plentyAttributeSelectWrapperContent ul > li { list-style: none; margin-left: 0; overflow: hidden; } /* disabled */ li.plentyAttributeSelectDisabled { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; cursor: default !important; } li.plentyAttributeSelectDisabled a { cursor: default !important; } /* DROPDOWN */ /* dropdown container */ .plentyAttributeSelectHasDropdown { position: relative; } /* height if dropdown closed */ .plentyAttributeSelectHasDropdown, .plentyAttributeSelectHasDropdown > div, .plentyAttributeSelectHasDropdown > .plentyAttributeSelectWrapperInnerClosed:hover { height: 18px; } /* openable container */ .plentyAttributeSelectHasDropdown > div { position: absolute; /*width: 100%;*/ /*has conflict with parent clearfix*/ overflow: hidden; background: #ffffff; border: 1px solid #cccccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /* open dropdown if hovered */ .plentyAttributeSelectHasDropdown:hover > div { height: auto; z-index: 10000; -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3); } /* selectet item */ /* value (all) */ .plentyAttributeSelectedValue, .plentyAttributeSelectValue > a { padding: 0 0 0 7px; white-space: nowrap; } /* value selected */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectedValue { position: relative; padding-right: 20px; } /* arrow container */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectedValue > .plentyAttributeSelectedArrow { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; } /* arrow inner */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectedValue > .plentyAttributeSelectedArrow > span { display: inline-block; border-style: solid; border-width: 5px; border-color: #999999 transparent transparent; } /* arrow hover */ .plentyAttributeSelectHasDropdown > div:hover .plentyAttributeSelectedValue > .plentyAttributeSelectedArrow > span { border-color: #777777 transparent transparent; } /* list */ /* list wrapper */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper { max-height: 108px; /*adapt to height of li*/ overflow-y: auto; overflow-x: hidden; } /* ul */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper > ul { } /* li */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper > ul > li { height: 18px; } /* a */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper > ul > li a { display: block; padding-right: 20px; white-space: nowrap; } /* li hover / a focus */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper > ul > li:hover a, .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper > ul > li a:focus { background: #eeeeee; color: #000000; cursor: pointer; } /* reset li hover / a focus if disabled */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper > ul > li.plentyAttributeSelectDisabled:hover a, .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper > ul > li.plentyAttributeSelectDisabled a:focus { background: transparent; color: #000000; } /* li / a selected */ .plentyAttributeSelectHasDropdown .plentyAttributeSelectListWrapper > ul > li.plentyAttributeSelectSelected a { background: #eeeeee; } /* value & markup */ .plentyAttributeSelectValueName { /*float: left;*/ } .plentyAttributeSelectValueMarkup { padding-left: 5px; /*float: right;*/ } /* IMAGE GALLERY / TEXT BOX */ /* ul */ .plentyAttributeSelectHasImageGallery ul, .plentyAttributeSelectHasTextList ul { margin: 0 -5px -5px 0; } /* ul image gallery / text boxes */ .plentyAttributeSelectHasImageGallery ul, .plentyAttributeSelectHasTextList ul { line-height: 0; } /* ul text boxes */ .plentyAttributeSelectHasTextList ul > li { line-height: 1.5em; } /* image box size */ .plentyAttributeSelectHasImageGallery ul > li, .plentyAttributeSelectHasImageGallery ul > li > a { width: 60px; /*adapt box dimension to image dimension*/ height: 60px; } /* li */ .plentyAttributeSelectHasImageGallery ul > li, .plentyAttributeSelectHasTextList ul > li, .plentyAttributeSelectHasImageGallery ul > li.plentyAttributeSelectDisabled:hover, .plentyAttributeSelectHasTextList ul > li.plentyAttributeSelectDisabled:hover { display: inline-block; margin: 0 5px 5px 0; border: 1px solid #DDDDDD; border-radius: 3px; padding: 3px; } /* li hover / selected */ .plentyAttributeSelectHasImageGallery ul > li:hover, .plentyAttributeSelectHasTextList ul > li:hover, .plentyAttributeSelectHasImageGallery ul > li.plentyAttributeSelectSelected, .plentyAttributeSelectHasTextList ul > li.plentyAttributeSelectSelected { border-color: #999999; cursor: pointer; -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); } /* li selected image gallery */ .plentyAttributeSelectHasImageGallery ul > li.plentyAttributeSelectSelected { background: #DDDDDD; } /* li selected text box */ .plentyAttributeSelectHasTextList ul > li.plentyAttributeSelectSelected { background: #eeeeee; } /* reset li hover / selected if selected */ .plentyAttributeSelectHasImageGallery ul > li.plentyAttributeSelectDisabled:hover, .plentyAttributeSelectHasTextList ul > li.plentyAttributeSelectDisabled:hover { border-color: #DDDDDD; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* a */ .plentyAttributeSelectHasImageGallery ul > li > a { display: block; overflow: hidden; } /* img */ .plentyAttributeSelectHasImageGallery ul > li > a > img { border: none; } /* a hover / a focus text box */ .plentyAttributeSelectHasTextList ul > li a:hover, .plentyAttributeSelectHasTextList ul > li a:focus { color: #000000; } /* value text boxes */ .plentyAttributeSelectHasTextList .plentyAttributeSelectValue { padding-left: 5px; } /* value text boxes */ .plentyAttributeSelectHasTextList .plentyAttributeSelectValue { padding-left: 5px; padding-right: 5px; } /* UPDATE (FIX FOR ANY DOCTYPE) */ .plentyAttributeSelectedArrow > span { position: absolute; top: 5px; } /* DROPDOWN RESET FOR FARBFINAL OR OTHER LAYOUTS */ .plentyAttributeSelectHasDropdown > div { text-align: left; line-height: 18px; } #ff01_maincontent .plentyAttributeSelectHasDropdown > div { right: 0; /* use only if text-align of dropdown parent container is right */ } .plentyAttributeSelectWrapperContent.plentyAttributeSelectHasDropdown ul { margin: 0 !important; padding: 0 !important; }

Artikelbildgrößen

Tipp: Containergröße für das Attributbild

Sie können die Containergröße für den Ausschnitt des Attributbilds im CSS-Code einstellen. Änderungen nehmen Sie in den Zeilen /*adapt box dimension to image dimension*/ und /* image box size */ vor.

Im Menü Einstellungen » Artikel » Bilder hinterlegen Sie Maximalwerte für die Breite und Höhe von Artikelattributbildern. Die Werte geben Sie in Pixeln an.

Nach oben