Skip to main content

Displaying item variants dynamically

plentymarkets allows you to assign items to individual attributes. These attributes are then used to create item variations. The individual characteristics of item variations, such as the surcharges and attribute images, can be displayed visually and dynamically in the online store. This means that the displayed information and images will automatically change depending on what is selected.

Important
Carry out the settings in all of the relevant templates

In order for the dynamic display to function in all of the layouts, you have to carry out the steps described below in all of the relevant templates. For example, the dynamic display will only be applied to the search results list if you have also edited the template under CMS » Web design » Layout » ItemView » ItemViewSearchResultsList.

Inserting template variables for displaying attributes

The $AttributeSelect template variable displays an item’s attributes as a dropdown menu. Use the template variable $ImageAttributeList to display the attributes of an item not only in a drop-down list but also in a list of preview images. The options in the drop-down list will be adjusted dynamically. Use the features Dynamic item price and Dynamic item images as well. In order for the template variable $ImageAttributeList to be effective, you need to assign the attributes to images.

Proceed as described below to insert the template variables. Here you can find examples for inserting template variables into the ItemViewSingleItem template. However, the same process is used in all other areas where the template variable $AttributeSelect can be inserted.

Inserting template variables:

  1. Go to CMS » Web design » Layout » ItemView » ItemViewSingleItem.

  2. Insert the template variables $AttributeSelect and $ImageAttributeList into the template.

Displaying the item prices dynamically

To display a dynamic item price, replace the template variable $Price with $PriceDynamic in the template ItemViewSingleItem. By using the template variable $PriceDynamic, the display of the item price will be adjusted depending on the selected attribute. In order for the item price to be adjusted, items have to be assigned to attributes with suchrcharges. Proceed as described below to display the item price dynamically.

EN CMS Displaying Item Variants Dynamically 01
Figure 1. example of dynamic item prices

Displaying the item prices dynamically:

  1. Go to CMS » Web design » Layout » ItemView » ItemViewSingleItem.

  2. If not included yet, insert the template variable $AttributeSelect into the template.

  3. Replace the template variable $Price with $PriceDynamic.

Note
Deactivating the display of surcharges.

Go to Setup » Client » Select client » Item layouts » Settings in order to deactivate the display of surcharges. Choose the setting Do not show for the option Attribute surcharge.

Displaying item images dynamically

Carry out the following steps in order to display item images dynamically.

If you want the displayed item image to match the selected attribute, then activate the Image link option for the attributes. To do so, proceed as follows.

Activating the image link:

  1. Go to Setup » Item » Attributes.

  2. Click on the plus icon in front of the attribute that you would like to edit.

  3. Activate the Image link.

  4. Check whether the necessary attributes were assigned to the desired items and whether the attributes were linked to the item images.

Activating the client check

Now activate the client check in order to display the attribute images dynamically.

Carrying out layout settings

Go to CMS » Web design » Layout » ItemView » ItemViewSingleItem. Check whether the template variable $AttributeSelect is included in the template. Also add the following JavaScript to the template. To do so, proceed as follows.

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

Inserting the code for displaying attribute images into the web design:

  1. Go to CMS » Web design » Layout » ItemView » ItemViewSingleItem.

  2. Make sure that the template variable $AttributeSelect was entered into the template.

  3. Insert the JavaScript displayed above into the template.

  4. Edit the value of the variable dynamic_article_image if you do not want images to be displayed with medium resolution. Replace the value "middle" with "preview" if you want preview images to be displayed. Replace it with "normal" if you want images to be displayed in the highest resolution.

  5. Your choice depends on which type of preview image you have selected. You can tell which type was selected by looking at the variable for the item image.

Following is an image of an example code, which contains the JavaScript in lines 5 - 7 and the template variable in line 21.

EN CMS Displaying Item Variants Dynamically 02
Figure 2. example code for dynamic item images
Tip
Dynamic images

Dynamic images are also available to you. They can be found by going to CMS » Web design » Layout » ItemView » ItemViewCategoriesList.

Assigning more than one image per variation

You can link more than one image to a variation’s attribute value. This is done in the item’s Images tab. In order for the images to be correctly displayed in the ItemViewSingleItem layout, the preview images have to be in a DIV container with the ID PlentyDynamicPreviewImagesContainer. Furthermore, the images have to be positioned within an a-tag and given the structure shown below:

<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>

The "large" item image needs to have the following structure (class and rel are especially important) so that the images correspond with the selected attribute value:

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

Editing CSS

Use CSS to modify how the features described here are displayed. CSS codes for doing so are listed below. The codes are examples only and can be modified to fit your needs.

Editing CSS for client check

Go to CMS » Web design » Layout » CSS » CSSContent and insert the following CSS code at the end of any previously existing code. Be sure to save a copy of the previously existing code before you insert the following code.

Important
Note regarding the standard design farbfinal

If you use one of our farbfinal standard designs in your online store, then make sure that the section /* DROPDOWN RESET FOR FARBFINAL OR OTHER LAYOUTS */ is available in your CSS.

/* 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;
}

Item image sizes

Tip
Tip: Container size for the attribute image

You can use CSS code to set the container size for displaying the attribute image. Make changes in the lines /*adapt box dimension to image dimension/* and / image box size /.

Go to Setup » Item » Images and save the maximum values for item attribute images for the options Maximum width (pixels) of the item attribute image and Maximum height (pixels) of the item attribute image.

To top