The question is tagged with ce-1.7.0.2 but for future reference, if you are using ce-1.9.1.0 ee-1.14.1 or higher, the feature is already built in, with the so-called Configurable Swatches which allow "Product Image Swap".
You can enable this feature in System > Configuration > CATALOG > Configurable Swatches
The following animation shows how this works on product listing and
product detail pages:
Swap Images Defined by Option Label
One way to configure swap images is to upload images to a configurable
product with labels exactly matching the specific option labels (for
example, Royal Blue
).
Here is an example of a configurable product image gallery images that
contains images for three colors:
Swap Images Defined by Base Image
Another way to configure swap images is to upload base images to each
child product of the configurable product.
Here is an example of a Royal Blue child product with an attached base
image:
Source and full documentation: http://docs.magento.com/m1/ce/user_guide/catalog/product-configurable-swatch.html
Mapping the attribute options in the dropdowns to actual products can be done by using the spConfig
javascript variable printed on the product view page of every configurable product.
var spConfig = new Product.Config({
"attributes":{
"502":{
"id":"502",
"code":"shoe_size",
"label":"Shoe Size",
"options":[{
"id":"46",
"label":"3",
"price":"0",
"oldPrice":"0",
"products":["32"]
},{
"id":"45",
[...]
}]
}},
[...]});
Notice the products
keys that have an array of product ids. Using some javascript that observes the onchange
event of your option dropdowns you should be able to work your way through the array ending up with the product the user has chosen.
Now for mapping that to the product SKU, you're probably best of retrieving them from a custom javascript array which you can create by using the code from this article. So now for some untested code
$simple_collection = Mage::getModel('catalog/product_type_configurable')->setProduct(Mage::registry('current_product'))
->getUsedProductCollection()
->addAttributeToSelect('sku')
->addFilterByRequiredOptions();
$id_to_sku = array();
foreach ($simple_collection as $_item)
{
$id_to_sku['p'+$_item->getId()] = $_item->getSku();
}
echo '<script type="text/javascript">
var confIdToSku = '.json_encode($id_to_sku).';
</script>';
Which would output an array like
var confIdToSku = {"p32":"pr-sku-1", "p35":"pr-sku-2"}
That would enable you to map the product ID to the SKU you need.
I'd suggest creating a new PHTML file for this in your template directory, using block type core/template
and calling that in the template/catalog/product/view.phtml
.
I'm no hero with Javascript so I didn't include any javascript code examples in my answer, I hope you can figure that part out for yourself.
Best Answer
I did that once for Magento 2.0, don't have the code available but can show you where you need to make changes:
Write a Plugin for
Magento\ConfigurableProduct\Block\Product\View\Type\Configurable::getJsonConfig()
and add the SKUs to the result:Product.Config
fromapp/code/Magento/ConfigurableProduct/view/adminhtml/web/js/configurable.js
using RequireJS. A good place to add the code to change the displayed SKU isreloadPrice()
. You will have access to the SKUs viathis.config.skus