Magento简单产品页面 - 使用自定义选项动态更新SKU

时间:2015-06-30 17:34:26

标签: javascript php jquery magento

我的产品页面有几个自定义选项(下拉菜单),这些选项会附加到购物车的sku中。但是,我想在选择选项时在产品页面上显示更新的sku。

我找到了similar post about configurable items但是,它不适用于我的情况,因为我使用带有选项的简单产品不是可配置产品

如何在产品页面上显示和更新简单产品的sku?

Dynamic Sku的可配置产品代码:

<?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 个答案:

答案 0 :(得分:0)

最好的办法是创建一个自定义模块。如果您不熟悉使用Magento创建模块,请查看此资源:https://www.smashingmagazine.com/2012/03/basics-creating-magento-module/

您还可以查看现有的Magento扩展程序,以便为您处理:https://www.magentocommerce.com/magento-connect/

另一个想法是使用JavaScript来做到这一点。听起来这实际上可能适合你,因为你只想更新前端(右??)。您可以创建一个javascript函数,并在产品页面的不同方面添加onchange操作。在JavaScript中,您可以存储产品数组的数组或映射,例如sku,价格,重量等......您可能希望在产品页面上动态更新的任何内容。