在可配置的产品视图 Magento 上显示动态 SKU [英] Display Dynamic SKU on configurable product view Magento

查看：28
本文介绍了在可配置的产品视图 Magento 上显示动态 SKU的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

正在加载正确的 sku，但在选择时什么也没有发生.

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

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></选择>

</dd><?php endforeach;?></dl><script type="text/javascript">var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);<?php endif;?><?php$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product);$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions();echo '<script type="text/javascript">';回声'document.observe("dom:loaded", function() {$("sku-container").update("产品ID:</strong>选择显示产品ID的选项");});';echo '函数changeSku(sel){';$itemId = 数组();foreach($col as $simple_product){$itemId[] = array($simple_product->getSelectLabel() => $simple_product->getSku());}//echo "

";//print_r($itemId);//echo "</pre>";foreach($itemId 作为 $val){foreach($val as $k => $v){echo "
".'if(sel.options[sel.selectedIndex].value == "'.$k.'"){'."
";echo '$("sku-container").update("<strong>Product Id: </strong>'.$v.'");'."
";回声'}';}}echo "
".'if(sel.options[sel.selectedIndex].value == ""){'."
";echo '$("sku-container").update("产品ID:</strong>选择显示产品ID的选项");'."
";回声'}';回声}"；echo "
</script>";?>

感谢您的帮助.

谢谢

解决方案

脚本几乎是正确的，除了 $simple_product->getSelectLabel() 是一个错误的键.在简单的产品模型中不存在这样的方法/属性.为了使脚本正常工作，应将此键替换为正确的键 - 产品 ID.使用产品id，可以找到被选中产品的sku.


因此，首先您需要重新组织 itemId 数组，使其成为productId => productSku"映射:

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


然后您需要更改onchange"函数调用以将 Configurable 的属性 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;如果(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]);} 别的 {$("sku-container").update("产品ID:</strong>选择显示产品ID的选项");}}


供您参考，以下是整个模板的外观摘要(我已对其进行了一些美化):

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></选择>

</dd><?php endforeach;?></dl><script type="text/javascript">var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);<?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("产品ID:</strong>选择显示产品ID的选项");});函数 changeSku(confAttributeId, sel) {var productMap = <?php echo Mage::helper('core')->jsonEncode($productMap);?>;var selectedAttributeId = sel.options[sel.selectedIndex].value;如果(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]);} 别的 {$("sku-container").update("产品ID:</strong>选择显示产品ID的选项");}}

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

<小时>

还要注意以下事项

  1. 您的方法不适用于具有两个或多个可配置属性的可配置产品.对于该产品，在用户为所有选择输入选择值之前，不知道最终的简单产品.所以应该改变一种方法，在输出 SKU 之前检查所有的选择.
  2. 当用户编辑产品配置，而不是为新产品指定配置时，代码不考虑案例.您可以从购物车点击编辑链接进入编辑模式.在这种情况下，所有选择的输入都将使用先前选择的值进行预填充.但是文本会说选择一个选项来显示产品 ID".该脚本还可能在编辑模式下产生其他 Javascript 错误.应稍微修改代码以支持编辑模式.
  3. 模板充满逻辑.Magento 模板应该只有简单的打印和 foreach 迭代.所有像 $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions() 这样的方法最好移到块中.这降低了代码复杂性.希望它有所帮助.

I have this script to show the dynamic sku on select option, but i cannot get working.

Is loading the correct sku, but on select nothing happen.

This code get list of sku on Javascript and update a div on select option for product on configurable product view.

<?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 "
".'if(sel.options[sel.selectedIndex].value == "'.$k.'"){'."
";
echo '$("sku-container").update("<strong>Product Id: </strong>'.$v.'");'. "
";
echo '}';
    }
}

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

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

I appreciate any help.

Thanks

解决方案

The script is almost correct except for $simple_product->getSelectLabel() being a wrong key. No such method/property exists in a simple product model. In order to make the script work, this key should be replaced with a right one - a Product Id. Utilizing product id, it is possible to find the sku of the product being selected.


So, first of all you need to reorganize itemId array to make it a "productId => productSku" map:

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


Then you need to change the "onchange" function call to pass Configurable's attribute id to the changeSku() function. Thus the underlying logic is able to search appropriate simple product's attributes.

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


And after that you need utilize configurable's config in order to map selected simple product's attribute id to the product id selected:

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");
    }
}


For your reference, below is the summary of how the whole template looks like (I've beautified it a little):

<?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>

This will do the task you originally needed.

Also note the following

  1. Your approach won't work for a configurable product with two or more configurable attributes. For that product a final simple product is not known until a user selects values for all the select inputs. So an approach should be changed to check all the selects before outputting SKU.
  2. The code doesn't consider a case, when user edits product configuration, rather than specifying configuration for a new product. You can go to editing mode from the Shopping Cart clicking the Edit link. In such a case all the select inputs will be pre-filled with previously chosen values. But the text will say "Select an option to display Product Id". The script might also produce other Javascript errors in Edit mode. The code should be slightly modified in order to support Edit mode as well.
  3. The template is overfilled with logic. A Magento template should have only simple prints and foreach-iterations. All the methods like $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions() are better to be moved to block. This reduces code complexity. Hope it helps.

这篇关于在可配置的产品视图 Magento 上显示动态 SKU的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆