So I just found this code that does what I want, almost. I need for the code to dynamically display the sku of a configurable product (simple product's sku) when the options are selected. The only problem is that until the options are selected, it shows the first simple product sku. I want it to show nothing until all the options are selected.
Here is the code: app/design/frontend/rwd/default/template/catalog/product/view/type/options/configurable.phtml
<?php
$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product);
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions();
?>
<script type="text/javascript">
var Skus =new Array();
<?php
$count = 1;
$itemId = array();
foreach($col as $simple_product){
$itemId[] = array($simple_product->getSelectLabel() => $simple_product->getSku());
}
foreach($itemId as $val){
foreach($val as $k => $v){
echo 'Skus['.$count.'] = "'.$v.'";'. "
";
$count++;
}
};
?>
$j(document).ready(function(){
$j("#productcode").html("Product Code: " +Skus[1]);
$j("select#attribute<?php echo $_attribute->getAttributeId() ?>").change(function(){
var position = $j("#attribute<?php echo $_attribute->getAttributeId() ?> option").index($j("#attribute<?php echo $_attribute->getAttributeId() ?> option:selected"));
$j("#productcode").html(Skus[position] ? "Product Code: " +Skus[position] : "Product Code: " +Skus[1]);
});
});
</script>
And: app/design/frontend/rwd/default/template/catalog/product/view/view.phtml
<div id="productcode"></div>
Currently, the dynamic sku shows the first sku record until all the options are selected and then shows the correct one. How can I hide the sku until all options are selected or hide it if someone goes back to edit their selections?
Thanks in advance!
If you comment (or remove) the following line it won't put anything in the div onload:
$j("#productcode").html("Product Code: " +Skus[1]);
The following code will still write the SKU there when the select is changed:
$j("select#attribute<?php echo $_attribute->getAttributeId() ?>").change(function(){
var position = $j("#attribute<?php echo $_attribute->getAttributeId() ?> option").index($j("#attribute<?php echo $_attribute->getAttributeId() ?> option:selected"));
$j("#productcode").html(Skus[position] ? "Product Code: " +Skus[position] : "Product Code: " +Skus[1]);
});
Hope that helps.