Magento显示可配置产品的动态SKU ...在选择所有选项之前不要显示

Question

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!

Answer 1

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.