Question

我的任务是在magento产品页面上创建一个框，其中包含所选数量的总价。换句话说，数量*价格。所以我这样做了：

$j = jQuery.noConflict();

function get_total_qty() {
    var qt_Price = parseInt(0);
    $j('.price').each(function() {
        if (this.offsetParent.className != 'dropdown-cart no_quickshop') {
            qt_Price = parseFloat(this.textContent);
        }
    });


    /*
     * AJAX call
     */
    var quantity = $j('#qty').val(); // get final quantity
    var price = qt_Price; // get price
    $j.post("http://example.com/myscripts/ajaxPriceCal.php", {
            qty: quantity,
            pr: price
        },
        function(data) {
            var qt_total_price = data;
            $j('#totpr').html(qt_total_price);
        });

}

$j(document).ready(function() {
    get_total_qty();
});

每次按下增加或减少数量的按钮时，我都会调用get_total_qty（）函数。现在我尝试使用下拉列表中的产品选项，但它没有像我预期的那样工作。它在重新加载我用于计算的产品价格之前调用该函数。

E.g。产品是10美元，数量是2，如果选择选项总共20美元（+ 5美元）那么我得到的是价格15美元，2美元，总计20美元。因为在更新.price类元素之前调用了函数。如果我改变数量，它会再次显示正确的总数。

也许我做这些计算的方式很愚蠢。我对如何正确行事的建议表示欢迎。然而，我迫切的问题是在正确的时间调用功能。我应该编辑哪些文件以及应该在哪里拨打电话？

很抱歉，如果我的问题看起来很愚蠢我是JS或jquery的新人......

编辑 - ＆gt;

/app/design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml文件生成选项选择下拉列表，这里是代码：

<?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 onchange="get_total_qty()" name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                  <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;?>

结果就是产品页面上的HTML：

<dl>
        <dt><label class="required"><em>*</em>Color</label></dt>
    <dd>
        <div class="input-box">
            <select onchange="get_total_qty()" name="super_attribute[272]" id="attribute272" class="required-entry super-attribute-select">
                <option>Pasirinkite...</option>
              </select>
          </div>
    </dd>
        <dt><label class="required"><em>*</em>Puokštės dydis</label></dt>
    <dd class="last">
        <div class="input-box">
            <select onchange="get_total_qty()" name="super_attribute[975]" id="attribute975" class="required-entry super-attribute-select">
                <option>Pasirinkite...</option>
              </select>
          </div>
    </dd>
</dl>
<script type="text/javascript">
    var spConfig = new Product.Config({"attributes":{"272":{"id":"272","code":"color","label":"Color","options":[{"id":"26","label":"Red","price":"0","oldPrice":"0","products":["177","178"]}]},"975":{"id":"975","code":"puokstes_dydis","label":"Puok\u0161t\u0117s dydis","options":[{"id":"136","label":"Didel\u0117","price":"30","oldPrice":"30","products":["178"]},{"id":"137","label":"Vidutin\u0117","price":"20","oldPrice":"20","products":["177"]}]}},"template":"#{price}\u00a0Lt","basePrice":"10","oldPrice":"10","productId":"175","chooseText":"Pasirinkite...","taxConfig":{"includeTax":false,"showIncludeTax":false,"showBothPrices":false,"defaultTax":21,"currentTax":0,"inclTaxTitle":"Incl. Mokestis"}});
</script>

如您所见，我在onchange="get_total_qty()"元素

中添加了<select>

get_total_qty()的JS代码位于<head>中链接的.js文件中。这是功能代码：

function get_total_qty(){
var price = parseInt(0);
$j('.price').each(function(){
    if(this.offsetParent != null && this.offsetParent.className != 'dropdown-cart no_quickshop' && this.offsetParent.className != 'product'){ //makes sure it takes content from the right .price class element
        price = parseFloat(this.textContent);   
    }
});

var quantity = $j('#qty').val(); // get final quantity
/*
* AJAX call
*/
$j.post("http://example.com/myscripts/ajaxPriceCal.php", { qty: quantity, pr: price },
                function(data){
                    var qt_total_price = data;
                    $j('#totpr').html(qt_total_price );
});     
}

每次减少或增加数量时都会调用相同的函数

<input type="text" name="qty" id="qty" maxlength="12" value="1" title="Vnt." class="input-text qty" />
    <div class="qty-ctl">
        <button onclick="changeQty(1); return false;" class="increase">increase</button>
        <button onclick="changeQty(0); return false;" class="decrease">decrease</button>
    </div>
    <div style="float:left;"><span id="totpr"></span></div>

            <button type="button" title="PIRKTI" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>PIRKTI</span></span></button>
            <script type="text/javascript">
    function changeQty(increase) {
        var qty = parseInt($('qty').value);
        if ( !isNaN(qty) ) {
            qty = increase ? qty+1 : (qty>1 ? qty-1 : 1);
            $('qty').value = qty;
        }; get_total_qty();
    }
    </script>

按钮旁边是Div，它保存总价。它在更改数量后更新，但是在选项选择完成后它没有重新加载...好吧它确实有点但是功能抓住了先前选择的价格而不是用户刚刚选择的新价格...这意味着{ {1}}文字在商品价格（基价+选择价格）之前重新加载

对不起，英语不是我的母语，我希望我能清楚地解释一切：）

Answer 1

我找到了方法。

编辑/js/varien/configurable.js

在函数return;

中的reloadPrice: function()上方调用您的函数

在Magento产品页面上调用javascript / jQuery函数onchange产品选项

1 个答案: