how to get the attribute images to display?

[wolfman645]

Hi - I have a question on how to get the images associated with attribute options to display on a product page. Notice below I have a bunch of options for an attribute callsed PK_GUARD, and these options are all color choice. Therefore, I uploaded an image for each of the color options. I was hoping this would display on the page, but that is not happening. Any ideas on how I might be able to accomplish this?

THanks!

[rajnishsi]

Re: how to get the attribute images to display?

Are you looking for color-swatches, or just want to show images along with options ?

[wolfman645]

Re: how to get the attribute images to display?

Are you looking for color-swatches, or just want to show images along with options ?

I would like to show actual images along with the options, so that when the user picks the option the depicted image will dynamically change.

[doakh]

Re: how to get the attribute images to display?

If I understand, I think you need to 'Generate Variants' from the screen you posted. This will create your new products. Then under 'Catalog' search your main product and all the product variants will display. Then from the 'Edit Products' page just add an image under the 'images' tab as you would for any product.

***I think the images you added from your screen posted are to be used as thumbnails.

[wolfman645]

Re: how to get the attribute images to display?

Thanks. I tried implementing this as a swatch drop-down instead of a plain vanilla drop-down, and that seems to be almost exactly what I am after. My one remaining problem is that the swatches appear at the very bottom, and not next to the correct attribute. Take a look at the screenshot below which shows the problem.

[doakh]

Re: how to get the attribute images to display?

That is where the default code for the swatches is in the Product Display Layout I believe, if you are using the default CSS theme. You can move it to where you want it. I moved it to the 'sidebar' (product-details-2) for a project

http://www.ravenmaps.com/mm5/merchan...=MASSACHUSETTS

[wolfman645]

Re: how to get the attribute images to display?

Thank you Doak.

The only thing is I don't know how to move it. I have tried messing with a few things in PROD page under user interface, but no luck.

FYI - I'm using one of the "ready" themes.

[doakh]

Re: how to get the attribute images to display?

Use FireFox or Chrome Developer Tools and locate it. Do you know how to do that?

[wolfman645]

Re: how to get the attribute images to display?

I am good with HTML and usually copy/paste MIVA code into Dreamweaver because it is color coded. My problem is I don't understand all the MIVA code (stuff like <mvt:if expr="l.settings:attribute:attemp_id NE 0">) so I don't know what to look for. If you think it will help to use Firefox or Chrome Developer tools I will try that, but I still need to know what to look for.

[wolfman645]

Re: how to get the attribute images to display?

Below is the "Product Attribute" code for the product display page called PROD. If you can possibly tell me what to move around in this code so that the swatch images are displayed directly below the swatch drop-down, as opposed to at the end that would be greatly appreciated. I'm pretty good with code in general, but I must say it looks like greek to me. I understand simple concepts like if/then and for loops in other languages, but the syntax of this stuff seems rather obscure to me. Here it is:


<mvt:foreach iterator="attribute" array="attributes">
<mvt:assign name="l.settings:attributeID" value="'l-' $ tolower(l.settings:attribute:code)" />
<input type="hidden" name="Product_Attributes[&mvte:attribute:index;]:code" value="&mvte:attribute:code;" data-attribute-type="&mvte:attribute:type;" />
<mvt:if expr="l.settings:attribute:template_code NE 0">
<input type="hidden" name="Product_Attributes[&mvte:attribute:index;]:template_code" value="&mvte:attribute:template_code;" />
</mvt:if>
<mvt:if expr="l.settings:attribute:type EQ 'text'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">&mvte:attribute:prompt;</label>
<mvt:else>
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">&mvte:attribute:pr ompt;</label>
</mvt:if>
<input type="text" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:attribute:value;" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">&mvte:attribute:prompt;</label>
<mvt:else>
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">&mvte:attribute:pr ompt;</label>
</mvt:if>
<textarea name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="">&mvte:attribute:value;</textarea>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<legend for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="nm required">&mvte:attribute:prompt;</legend>
<mvt:else>
<legend for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="nm normal">&mvte:attribute:prompt;</legend>
</mvt:if>
<mvt:foreach iterator="option" array="attribute:options">
<mvt:assign name="l.settings:optionID" value="'l-' $ tolower(l.settings:option:code)" />
<label for="&mvt:optionID;" title="&mvt:option:prompt;" class="show">
<mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
<input type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" id="&mvt:optionID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" checked />
<mvt:else>
<input type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" id="&mvt:optionID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" />
</mvt:if>
<mvt:if expr="l.settings:option:image">
<img src="&mvte:option:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" />
<mvt:else>
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="'+ $' $ abs(rnd(l.settings:option:price, 2))" />
<mvt:else>
&nbsp;<mvt:eval expr="'- $' $ abs(rnd(l.settings:option:price, 2))" />
</mvt:if>
</mvt:if>
</mvt:if>
</label>
</mvt:foreach>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'select'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<label for="&mvt:attributeID;" title="&mvt:attribute:prompt;" class="required">&mvt:attribute:prompt;</label>
<mvt:else>
<label for="&mvt:attributeID;" title="&mvt:attribute:prompt;">&mvt:attribute:prom pt;</label>
</mvt:if>
<select name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;">
<mvt:foreach iterator="option" array="attribute:options">
<mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
<option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="" selected>
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ abs(rnd(l.settings:option:price, 2))" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ abs(rnd(l.settings:option:price, 2))" />
</mvt:if>
</mvt:if>
</option>
<mvt:else>
<option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ abs(rnd(l.settings:option:price, 2))" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ abs(rnd(l.settings:option:price, 2))" />
</mvt:if>
</mvt:if>
</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">
<div class="form-row">
<mvt:assign name="g.hasSwatches" value="'1'" />
<mvt:if expr="l.settings:attribute:required">
<label for="js-swatches-select" title="&mvt:attribute:prompt;" class="required">&mvt:attribute:prompt;</label>
<mvt:else>
<label for="js-swatches-select" title="&mvt:attribute:prompt;">&mvt:attribute:prom pt;</label>
</mvt:if>
<select name="Product_Attributes[&mvt:attribute:index;]:value" id="js-swatches-select" data-attribute="&mvte:attribute:code;">
<mvt:foreach iterator="option" array="attribute:options">
<mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
<option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="" selected>
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ abs(rnd(l.settings:option:price, 2))" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ abs(rnd(l.settings:option:price, 2))" />
</mvt:if>
</mvt:if>
</option>
<mvt:else>
<option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ abs(rnd(l.settings:option:price, 2))" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ abs(rnd(l.settings:option:price, 2))" />
</mvt:if>
</mvt:if>
</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">
<mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
<input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" id="&mvt:attributeID;" checked="checked" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
<mvt:else>
<input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
</mvt:if>
<mvt:if expr="l.settings:attribute:image">
<img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" title="&mvte:attribute:prompt;" />
<mvt:else>
&mvte:attribute:prompt;
<mvt:if expr="l.settings:attribute:price">
<mvt:if expr="l.settings:attribute:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ abs(rnd(l.settings:attribute:price, 2))" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ abs(rnd(l.settings:attribute:price, 2))" />
</mvt:if>
</mvt:if>
</mvt:if>
</label>
<mvt:else>
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">
<mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
<input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" id="&mvt:attributeID;" checked="checked" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
<mvt:else>
<input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
</mvt:if>
<mvt:if expr="l.settings:attribute:image">
<img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" title="&mvte:attribute:prompt;" />
<mvt:else>
&mvte:attribute:prompt;
<mvt:if expr="l.settings:attribute:price">
<mvt:if expr="l.settings:attribute:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ abs(rnd(l.settings:attribute:price, 2))" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ abs(rnd(l.settings:attribute:price, 2))" />
</mvt:if>
</mvt:if>
</mvt:if>
</label>
</mvt:if>
</div>
</mvt:if>
</mvt:foreach>
<input type="hidden" name="Product_Attribute_Count" value="<mvt:eval expr="miva_array_elements(l.settings:attributes)" />" id="js-product-attribute-count" />

[Brennan]

Re: how to get the attribute images to display?

The swatches get written by JavaScript when the page loads. They will show up in the <div id="swatches"></div> on the page.

This can be moved to wherever you like, but all swatches for that product will show up in that div. Meaning if you have multiple attributes that are set to swatch-dropdowns both sets of swatches will appear in the div. This can be changed but it requires modifying some of the swatch JavaScript.

[wolfman645]

Re: how to get the attribute images to display?

The swatches get written by JavaScript when the page loads. They will show up in the <div id="swatches"></div> on the page.

This can be moved to wherever you like, but all swatches for that product will show up in that div. Meaning if you have multiple attributes that are set to swatch-dropdowns both sets of swatches will appear in the div. This can be changed but it requires modifying some of the swatch JavaScript.

Thanks Brennan. I will only have one attribute that uses swatches on the page, so I'm ok with it.

So it sounds like I was looking in the wrong section of the product page. The div you are referring to is identified within the section called "Product Display Layout". Below is the code. Can you tell me where to relocate this div so that the swatches display after one of the attributes (the "pickguard" attribute). Below is the code. Thanks!

------

<div class="row product-information">
<div class="column whole medium-five-twelfths product-information--images">
<span data-rt-icon="&#x31;" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimag ecustomfields:main;" /></span>
<div class="row thumbnail-wrapper">
<div id="js-thumbnails" class="column whole no-padding thumbnails"></div>
</div>
<mvt:item name="product_display_imagemachine" param="body:product:id" />
</div>
<!-- end product-information--images -->
<div class="column whole medium-half medium-offset-one-twelfth product-information--purchase">
<div id="js-processing-purchase" class="processing-purchase"><img src="../images/img_ajax_processing.gif" alt="Processing..." title="Processing..." /></div>
<div id="js-purchase-message" class="message message-warning purchase-message"></div>
<div class="row">
<h1 class="column whole uppercase nm">&mvte:product:name;</h1>
<p class="column whole gray nm">Code: &mvte:product:code;</p>
</div>
<hr noshade />
<div class="row">
<div class="column whole price-value">
<mvt:if expr="l.settings:product:retail GT l.settings:product:base_price">
<span id="js-additonal-price" class="strike">&mvt:product:formatted_retail;</span><span id="js-price-value" class="red semibold" data-base-price="&mvt:product:price;">&mvt:product:formatted _base_price;</span>
<mvt:elseif expr="l.settings:product:price GT 0">
<span id="js-price-value" data-base-price="&mvt:product:price;">&mvt:product:formatted _base_price;</span>
<mvt:else>
<span id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></span>
</mvt:if>
</div>
<div id="js-product-discounts" class="column whole"></div>
</div>
<hr noshade />
<div class="row">
<div class="column whole product-information--description">
<p class="semibold nm">Product Details</p>
<div class="small">&mvt:product:descrip;</div>
</div>
</div>
<!-- end product-information--description -->
<hr noshade />
<form method="post" action="&mvte:global:sessionurl;Screen=BASK" id="js-purchase-product" class="inline-labeling">
<input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
<input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
<input type="hidden" name="Action" value="ADPR" />
<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
<input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
<div class="row">
<mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">
<p id="js-inventory-message" class="column whole">&mvt:product:inv_long;</p>
</mvt:if>
<div id="js-product-attributes" class="column whole product-attributes">
<mvt:item name="product_attributes" param="product:id" />
</div>
<div class="column whole product-swatches">
<div id="js-swatches"></div>
</div>
</div>
<div class="row corners add-to-cart-wrap">
<div class="column whole medium-two-fifths">
<div class="row quantity-wrap align-center">
<div class="column one-fourth nrp"><span id="js-decrease-quantity" class="decrease-quantity" unselectable="on">-</span></div>
<div class="column three-eighths np"><input type="tel" name="Quantity" value="1" id="l-quantity" class="align-center" /></div>
<div class="column one-fourth nlp"><span id="js-increase-quantity" class="increase-quantity" unselectable="on">+</span></div>
</div>
</div>
<div class="column whole medium-three-fifths">
<div class="breaker medium-all-hidden"></div>
<input type="submit" value="Add to Cart" id="js-add-to-cart" class="button button-medium uppercase add-to-cart bg-aqua" />
</div>
</div>
</form>
<div class="row">
<div class="column whole"><mvt:item name="readytheme" param="thirdpartysharing" /></div>
</div>
</div>
<!-- end product-information--purchase -->
</div>
<!-- end product-information -->

[doakh]

Re: how to get the attribute images to display?

It is not the 'attribute', but the 'layout'. Here is a link on using developer tools. It is easy to find.

[wolfman645]

Re: how to get the attribute images to display?

OK, thanks. I'm making progress. I found a post about this here: http://extranet.miva.com/forums/show...tive-attribute

So I made the changes, and it is indeed working, but my last remaining problem is that the swatches are now showing up stacked as a bulleted list. They are also too big. See screenshot. Thanks!

[wolfman645]

Re: how to get the attribute images to display?

Got if fixed. I had to change the class to "column whole product-swatches" and all is good with the world!!!!

Thanks all for your help.