1

If you take a look at the following product page on a site that I want to "take inspiration from".

http://www.pauls-hair-world.co.uk/best-sellers/beauty-works-celebrity-choice-100-remy-hair-extensions

As you can see, one of the product options is to choose the colour of the product, there is an option for you to click 'Click here for colour chart' and you are presented with lots of pictures showing the colours of the prduct that are available.

I know how to add the custom option of a drop-down menu with options that I choose, but how do I get it to show those images also. (Also, when you click the imagesit changes the option in the drop-down menu.

Any help is very much appreciated, even a link to a great resource will do. If I figure it out in the mean time I will post the answer here. (Not hopeful though).

Thanks in advance!

4 Answers 4

2

Would this extension be of use to you?
http://www.magentocommerce.com/magento-connect/temgra/extension/893/color-swatches

(Note; there are other extensions available too)

1

The general approach would be to use a well formatted url for each color available (skin/images/hairsamples/jetsetblack.jpg and then to echo the repeatable URL for every option that the product has. Use Javascript to bind an onclick event to the images, which selects the appropriate option from the select box.

Getting the dropdown/color chart combo onto the page is actually a little more complex. You could create a custom option type, or to hack it, just detect the name of the field in the option template file.


To support your manufacturer-based color sets, modify the above but use skin/images/hairsamples/$manufacturer/$color.jpg instead. Problem solved!

1

I ended up using the following to pull out the text and id for each option in the drop-down.I then used this to create individual swatches as divs with the image for each colour inside.

function createColourSwatch(theid, filename) {
    if(theid != "" && filename != "NotSureSendMeSomeSamplesFirst" && filename != "PleaseSelect"){
        newSwatch = "<div class='swatchPanel' onClick='changeOption(\""+theid+"\")'><img src='"+imgLocation+filename+".jpg' /></div>";  
        return newSwatch;
    } else {
        return "";
    }
}


$j('.input-box:eq(0) option').each(function() {

    klass = $j(this).text().replace(/[^a-zA-Z 0-9]+/g,'');
    klass = klass.replace(/\s/gi,"");
    itsId = $j(this).val();

    $j('.colour-swatch:eq(0)').html($j('.colour-swatch:eq(0)').html()+createColourSwatch(itsId, klass));

});

The image is then displayed using the drop downs text value without spaces or non-alphnumeric character. For instance "45/22 Deep Red" turned into "4522DeepRed.jpg".

Each swatch is then given the followig function which changes the drop-down value depending on the one you clicked.

function changeOption(theId) {
    $j('.input-box select').val(theId);
}
0

It was damm easy all just in your media file

Just load all image with display none class. and using jquery on mouse over just display that image with added

$(".className").show();

and on mouseout

$(".className").hide();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.