Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Color Swatch help
 
billh
Member
 
Total Posts:  34
Joined:  2009-04-28
 

Hi Guys,

I tried to follow this guide Adding color swatches to configurable products

I got my colors displaying but cannot make the dropdown update when a color is clicked.

I have edited /catalog/product/view.phtml to llok like

<div class="product-img-box">
<?php echo $this->getChildHtml('media'?>
<?php 
if($_product->isConfigurable()){
echo '<div class="more-views"><h3>Colour Options</h3><ul>';
$colours = array();
$temp =  new Mage_Catalog_Block_Product_View_Type_Configurable();
$_assProducts Mage::helper('core')->decorateArray($temp->getAllowProducts());
foreach(
$_assProducts as $_assProduct){
$tempProduct 
Mage::getModel('catalog/product');
$tempProduct->load($_assProduct->getId());
array_push($colours$tempProduct->getAttributeText('color'));
array_push($colours$tempProduct->getAttributeText('colour'));
}
$colour_swatch 
array_unique($colours);
foreach(
$colour_swatch as $colour_pick){
if ($colour_pick!=NULL{
$colour_filename 
preg_replace("/[^a-zA-Z0-9]/"""$colour_pick);
echo 
'<li> <div onMouseover="ddrivetip('.$colour_pick.')"; onMouseout="hideddrivetip()"><img src="' $this->getUrl() .'media/catalog/colours/'.$colour_filename.'.jpg" alt="'.$colour_pick.'" width="48" height="48" title="'.$colour_pick.'" /></div></li>';
}
}
echo '</ul></div>';
 
} ?>
  
</div>

‘colour’ is my attribute.

my 2columns-right.phtml looks like this

<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<
div id="dhtmltooltip"></div>
<
script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- Â© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var 
tipobj=document.alldocument.all["dhtmltooltip"document.getElementByIddocument.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement document.body
}

function ddrivetip(thetextthecolorthewidth){
if (ns6||ie){
if (typeof thewidth!="undefined"tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!=""tipobj.style.backgroundColor=thecolor
tipobj
.innerHTML=thetext
enabletip
=true
return false

}

}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX event.clientX+ietruebody().scrollLeft;
var 
curY=(ns6)?e.pageY event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.operaietruebody().clientWidth-event.clientX-offsetxpoint window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.operaietruebody().clientHeight-event.clientY-offsetypoint window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ieietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"

else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ieietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}

}

function hideddrivetip(){

if (ns6||ie){
enabletip
=false
tipobj
.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document
.onmousemove=positiontip

</script>
<div class="wrapper">

i’ve also altered boxes.css to include

#dhtmltooltip{
      positionabsolute;
      
border1px solid #ddd;
      
color#fcd83f;
      
padding2px 5px;
      
font-size12px;
      
font-weightbold;
      
background-color#144593;
      
visibilityhidden;
      
z-index100;
      
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
      
filterprogid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
      
}

My problem:

I cant make the color swatches update the dropdown when they are clicked. the code snippet given in the example is

echo ‘<li> <div onMouseover="ddrivetip(’’.$colour_pick.’’)"; onMouseout="hideddrivetip()"; onClick="document.getElementById(’attribute###’).selectedIndex = ‘.$selected_colour.’; spConfig.configureElement($(’attribute###’))"><img src="/media/catalog/colours/’.$colour_filename.’.jpg" alt="’.$colour_pick.‘“ width="48" height="48" title="’.$colour_pick.‘“ /></div></li>’;

where attribute ### is the attribute id.

This bit is ok up to here as i can make my colors appear on the page (see the image), however i cant figure out how to make the dropdwon change when someone clicks on a color.

Can anybody help?

Image Attachments
color.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
billh
Member
 
Total Posts:  34
Joined:  2009-04-28
 

Can anybody help me with this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Discovery
Enthusiast
 
Total Posts:  767
Joined:  2007-12-29
 

Hi Billh,

I wrote that article originally and have tried to get it removed on a few occasions since! It is not my best code, mostly stolen from elsewhere.

The other article in the wiki does a better job of the javascript updates, the bottom line is that you need the attribute codes to be done properly, not bodged, as per my wiki article.

I suspect that the problem is attribute### - you can pick what those should be up from your page if you use firefox with firebug. I am a bit rusty at these things right now, but PM me with your site and I will have a look for you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Martinly
Sr. Member
 
Total Posts:  90
Joined:  2013-11-10
 

It is totally possible for your problem. You could easily add product’s image next to custom option values with this Magento Color Swatch module

 
Magento Community Magento Community
Magento Community
Magento Community
 
FMEExtensions
Mentor
 
Avatar
Total Posts:  1298
Joined:  2009-08-07
 

You can an extension for this purpose if possible, that will save your time in developing similar functionality.

http://www.magentocommerce.com/magento-connect/color-swatches-custom-product-options.html

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top