Forums (Obsolete)


Member	sansugoi_sayounara-hotmail - 1/19/2012 10:40:30 PM Regarding the Product detail functionality Hi all, On the product detail page, I want to display the colors name and when user mouse hover the color link then that color image will change in side, Please guide me how to achieve this.. Thanks Sansugoi


Kentico Developer	kentico_ivanat - 1/23/2012 2:39:57 AM RE:Regarding the Product detail functionality Hi, the product detailed page is defined by the used transformation. If you would like to change colors and image, you will need to change its code and CSS definition. Please take a look at Customizing product design for more details. Best regards, Ivana Tomanickova

Member

sansugoi_sayounara-hotmail - 1/23/2012 5:33:28 AM

RE:Regarding the Product detail functionality

Hi Ivana,

thanks for reply..
I am not using the ecommerce module.. I have created a new document type, with name, description, image etc fields, In transformation I have written the following code:

<div class="top-content-area">
<div class="top-cont-left">
<div class="protitle-box">
<div class="pro-title"><%# Eval("Name") %><br>
<span><%# Eval("Title1") %></span></div>
<div class="pro-logo"><%# GetImage("image") %></div><br class="clr">
<%# Eval("Detail") %>
</div>
</div>
<div class="top-cont-right"><%# GetImage("LargeImage") %></div><br class="clr">

<div class="bottom-cont">
<div class="color-title">
Different Color View</div>
<div class="bottom-left">
<ul><li>
<a href="#" onmouseout="showP()" onmouseover='showT("<%# IfEmpty(Eval("Color1"), " ", Eval("Color1")) %>")'><%# Eval("Color1") %></a>

</li>
<li>
<a href="#" onmouseout="showP()" onmouseover='showT("<%# Eval("Color2") %>")'><%# Eval("Color2") %></a>
</li>
<li>
<a href="#" onmouseout="showP()" onmouseover='showT("<%# Eval("Color3") %>")'><%# Eval("Color3") %></a>
</li>
<li>
<a href="#" onmouseout="showP()" onmouseover='showT("<%# Eval("Color4") %>")'><%# Eval("Color4") %></a>
</li>
<li>
<a href="#" onmouseout="showP()" onmouseover='showT("<%# Eval("Color5") %>")'><%# Eval("Color5") %></a>
</li>

</ul>

</div>
<div class="bottom-middle">
<script language="JavaScript" type="text/JavaScript">
function showT(q){
document.getElementById('ima').setAttribute('src','/CorporateSite/media/VideoGallery/RMC/Color/'+q+'.jpg')
//document.getElementById('ima').setAttribute('src','/CorporateSite/media/VideoGallery/RMC/Color/'+q+'.jpg')

}

function showP(){
document.getElementById('ima').setAttribute('src','/CorporateSite/media/VideoGallery/images/Product/'+'color-view'+'.jpg')
}
</script>


<img id="ima" alt="" src="/CorporateSite/media/VideoGallery/images/Product/color-view.jpg" style="width: 232px; height: 191px" /></div>
<div class="bottom-right">


</div>
<br class="clr" />
</div>
</div>

I have added iages in a folder then here I am giving path to that image and on mouse over the image is dispplayed.

Is it possible to add a for loop in transformation,

and IS it possible I allow user to add color image on add item form and then I get that image path in transformation so that there is no need to add image in advance,

Then It will be easier to user.

Thanks
Sansugoi


Member	sansugoi_sayounara-hotmail - 1/23/2012 6:13:15 AM RE:Regarding the Product detail functionality I have one more query.. Can I set the pat for image whcih I neet to get uploaded from form. One more thing, How can I get the path of the image in trnsformation, which I will upload in form in document type? Thanks Sansugoi

Kentico Developer

kentico_ivanat - 2/3/2012 4:49:28 AM

RE:Regarding the Product detail functionality

Hi,

could you please provide some screenshot on which we could see described behavior?

Do not you need display multiple images for one product (document type) as described in the tutorial about grouped attachments?

The image itself (uploaded for example using direct uploader form control) can be displayed in transformation using <%# GetImage("columnName")%>.

But I am still not sure, what the output of your transformation should be.

Best regards,
Ivana Tomanickova