Skip to main content

Artikelvarianten dynamisch darstellen

In plentymarkets kannst du 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.

Important
Einstellungen in allen relevanten Templates durchführen

Damit die dynamische Darstellung in allen Ansichten funktioniert, musst di die beschriebenen Schritte in allen relevanten Templates durchführen. Suchergebnisse werden beispielsweise nur dynamisch dargestellt, wenn du das Template unter CMS » Webdesign » Layout » ItemView » ItemViewSearchResultsList bearbeitet hast.

Template-Variablen zur Darstellung von Attributen einfügen

Mit der Template-Variable $AttributeSelect werden die Attribute eines Artikels als Dropdown-Liste dargestellt. Mit der Template-Variable $ImageAttributeList werden die Attribute eines Artikels nicht nur als Dropdown-Liste dargestellt, sondern auch als Liste mit Vorschaubildern. Die Optionen in der Dropdown-Liste 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.

Gehe 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. Öffne das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.

  2. Füge die Template-Variablen $AttributeSelect und $ImageAttributeList in das Template ein.

Artikelpreise dynamisch anzeigen

Um einen dynamischen Artikelpreis anzuzeigen, ersetzt du 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. Gehe wie unten beschrieben vor, um den Artikelpreis dynamisch anzuzeigen.

DE CMS BestPractice ArtikelvariantenDyn 01 SI
Figure 1. Beispielansicht für dynamische Artikelpreise

Artikelpreise dynamisch anzeigen:

  1. Öffne das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.

  2. Füge die Template-Variable $AttributeSelect in das Template ein, falls die Variable noch nicht vorhanden ist.

  3. Ersetze die Template-Variable $Price durch die Template-Variable $PriceDynamic.

Note
Anzeige der Aufpreise deaktivieren

Um Aufpreise im Auswahlfeld nicht anzuzeigen, öffne das Menü Einrichtung » Mandant » Mandant wählen » Artikelansichten » Einstellungen. Wähle dort für die Option Attribut-Aufpreis die Einstellung nicht anzeigen.

Artikelbilder dynamisch anzeigen

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

Bilderverknüpfung aktivieren

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

Bildverknüpfung aktivieren:

  1. Öffne das Menü Einrichtung » Artikel » Attribute.

  2. Klicke auf das Plus bei dem Attribut, das du bearbeiten möchten.

  3. Aktiviere die Option Bildverknüpfung.

  4. Prüfe, ob du die benötigten Attribute den gewünschten Artikeln zugeordnet und die Attribute mit den Artikelbildern verknüpft haben.

Client-Prüfung aktivieren

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

Layout-Einstellungen vornehmen

Prüfe nun im Menü CMS » Webdesign im Bereich Layout » ItemView, ob im Template ItemViewSingleItem die Template-Variable $AttributeSelect vorhanden ist. Erweitere außerdem das Template um das folgende JavaScript. Gehe 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. Öffne das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.

  2. Stelle sicher, dass sich die Template-Variable $AttributeSelect im Template befindet.

  3. Füge das obige JavaScript in das Template ein.

  4. Bearbeite den Wert der Variable dynamic_article_image, wenn Bilder nicht in mittlerer Auflösung angezeigt werden sollen. Ersetze 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 deines 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.

DE CMS BestPractice ArtikelvariantenDyn 02 SI
Figure 2. Beispielcode für dynamische Artikelbilder
Tip
Dynamische Bilder

Dynamische Bilder stehen dir 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 passt du per CSS an. Wir stellen dir nachfolgend CSS-Codes dazu vor. Die Codes sind Beispiele und können nach Belieben angepasst werden.

CSS für Client-Prüfung anpassen

Füge den folgenden CSS-Code im Menü CMS » Webdesign » Layout » CSS » CSSContent am Ende des vorhandenen Codes ein. Sichere den vorhandenen Code, bevor du den folgenden Code einfügst.

Important
Hinweis zum Standard-Design farbfinal

Wenn du in deinem Webshop eines unserer Standard-Designs farbfinal nutzen, achte darauf, dass der Abschnitt /* DROPDOWN RESET FOR FARBFINAL OR OTHER LAYOUTS */ in deinem 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

Tip
Tipp: Containergröße für das Attributbild

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

Im Menü Einrichtung » Artikel » Bilder hinterlegst du Maximalwerte für die Breite und Höhe von Artikelattributbildern. Die Werte werden in Pixeln angegeben.

Zum Seitenanfang