在可配置的产品视图上显示动态SKU Magento

Question

我有这个脚本来显示选择选项上的动态sku，但我无法工作。

正在加载正确的SKU，但在选择什么都没有发生。

此代码获取Javascript上的sku列表，并在可配置产品视图上的产品选择选项上更新div。

<?php 
$_product = $this->getProduct(); 
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); 
?> 
<?php if ($_product->isSaleable() && count($_attributes)):?> 
    <dl> 
    <?php foreach($_attributes as $_attribute): ?> 
     <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt> 
     <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>> 
      <div class="input-box"> 
       <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select" onchange="return changeSku(this);"> 
        <option><?php echo $this->__('Choose an Option...') ?></option> 
        </select> 
       </div> 
     </dd> 
    <?php endforeach; ?> 
    </dl> 
    <script type="text/javascript"> 
     var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>); 
    </script> 

<?php endif;?> 


<?php 
$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product); 
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions(); 

echo '<script type="text/javascript">'; 

echo ' 
document.observe("dom:loaded", function() { 
    $("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id"); 
}); 
'; 
echo ' function changeSku(sel){';  

$itemId = array();   
foreach($col as $simple_product){ 
$itemId[] = array($simple_product->getSelectLabel() => $simple_product->getSku()); 
} 

//echo "<pre>"; 
//print_r($itemId); 
//echo "</pre>"; 

foreach($itemId as $val){ 
foreach($val as $k => $v){ 
echo "\n".'if(sel.options[sel.selectedIndex].value == "'.$k.'"){'."\n"; 
echo '$("sku-container").update("<strong>Product Id: </strong>'.$v.'");'. "\n"; 
echo '}'; 
    } 
} 

echo "\n".'if(sel.options[sel.selectedIndex].value == ""){'."\n"; 
echo '$("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id");'. "\n"; 
echo '}'; 

echo "}"; 
echo "\n</script>"; 
?> 

我很感激任何帮助。

感谢

Answer 1

脚本是除了$simple_product->getSelectLabel()是一个错误密钥几乎是正确的。简单的产品模型中不存在此类方法/属性。为了使脚本能够正常工作，应该使用正确的密钥替换该密钥 - 产品ID。使用产品ID，可以找到所选产品的SKU。

所以，首先你需要重组itemId阵列，使之成为“productId参数=> productSku”地图：

$productMap = array(); 
foreach($col as $simpleProduct){ 
    $productMap[$simpleProduct->getId()] = $simpleProduct->getSku(); 
} 

然后，你需要改变“的onchange”功能调用将可配置的属性ID传递给changeSku()函数。因此，基础逻辑能够搜索适当的简单产品的属性。

onchange="return changeSku(<?php echo $_attribute->getAttributeId() ?>, this);"> 

之后，你需要使用配置的配置，以地图选择简单的产品的属性ID来选择产品ID：

function changeSku(confAttributeId, sel) { 
    var productMap = <?php echo Mage::helper('core')->jsonEncode($productMap);?>; 
    var selectedAttributeId = sel.options[sel.selectedIndex].value; 
    if (selectedAttributeId) { 
     var options = spConfig.config.attributes[confAttributeId].options; 
     var productId = options.find(function (option) {return option.id == selectedAttributeId}).products[0] 
     $("sku-container").update("<strong>Product Id: </strong>" + productMap[productId]); 
    } else { 
     $("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id"); 
    } 
} 

供您参考，以下是摘要整个模板的外观如何（我已经对其进行了一些修饰）：

<?php 
$_product = $this->getProduct(); 
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); 
?> 
<?php if ($_product->isSaleable() && count($_attributes)):?> 
<dl> 
    <?php foreach($_attributes as $_attribute): ?> 
    <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt> 
    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>> 
     <div class="input-box"> 
      <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select" 
        onchange="return changeSku(<?php echo $_attribute->getAttributeId() ?>, this);"> 
       <option><?php echo $this->__('Choose an Option...') ?></option> 
      </select> 
     </div> 
    </dd> 
    <?php endforeach; ?> 
</dl> 
<script type="text/javascript"> 
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>); 
</script> 

    <?php endif;?> 

<div id="sku-container"></div> 

<?php 
$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product); 
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions(); 

$productMap = array(); 
foreach($col as $simpleProduct){ 
    $productMap[$simpleProduct->getId()] = $simpleProduct->getSku(); 
} 
?> 

<script type="text/javascript"> 

document.observe("dom:loaded", function() { 
    $("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id"); 
}); 

function changeSku(confAttributeId, sel) { 
    var productMap = <?php echo Mage::helper('core')->jsonEncode($productMap);?>; 
    var selectedAttributeId = sel.options[sel.selectedIndex].value; 
    if (selectedAttributeId) { 
     var options = spConfig.config.attributes[confAttributeId].options; 
     var productId = options.find(function (option) {return option.id == selectedAttributeId}).products[0] 
     $("sku-container").update("<strong>Product Id: </strong>" + productMap[productId]); 
    } else { 
     $("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id"); 
    } 
} 
</script> 

这将完成您最初需要的任务。

---

还要注意以下

1. 你的做法不会为一个可配置的产品有两个或多个可配置属性工作。对于该产品，直到用户为所有选择输入选择值时才知道最终的简单产品。因此，在输出SKU之前，应该更改方法以检查所有选择。
2. 当用户编辑产品配置时，代码不考虑这种情况，而不是为新产品指定配置。您可以从购物车点击编辑链接进入编辑模式。在这种情况下，所有选择输入都将预先填入之前选定的值。但是文字会显示“选择一个显示产品ID的选项”。该脚本也可能在编辑模式下产生其他Javascript错误。为了支持编辑模式，代码应稍作修改。
3. 该模板已满逻辑。一个Magento模板应该只有简单的打印和文档。所有的方法，如$conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions()最好被移动到块。这减少了代码复杂性。 希望它有帮助。