3

選択オプションで動的 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>";
?>

助けていただければ幸いです。

ありがとう

4

1 に答える 1

8

$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;
    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. あなたのアプローチは、2 つ以上の構成可能な属性を持つ構成可能な製品では機能しません。その製品の場合、ユーザーがすべての選択入力の値を選択するまで、最終的な単純な製品はわかりません。そのため、SKU を出力する前にすべての選択をチェックするようにアプローチを変更する必要があります。
  2. ユーザーが新しい製品の構成を指定するのではなく、製品構成を編集する場合、コードはケースを考慮しません。[編集] リンクをクリックすると、ショッピング カートから編集モードに移動できます。このような場合、すべての選択入力には、以前に選択された値が事前に入力されます。ただし、テキストには「製品 ID を表示するオプションを選択してください」と表示されます。このスクリプトは、編集モードで他の Javascript エラーを生成する場合もあります。編集モードもサポートするには、コードを少し変更する必要があります。
  3. テンプレートはロジックでいっぱいです。Magento テンプレートには、単純な印刷とforeach反復のみを含める必要があります。のようなすべてのメソッド$conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions()は、ブロックに移動することをお勧めします。これにより、コードの複雑さが軽減されます。それが役に立てば幸い。
于 2012-11-20T01:17:22.343 に答える