如何让Magento添加到购物车ajax推送正确的URL并将产品添加到购物车?

时间:2013-09-09 19:16:27

标签: php javascript jquery ajax magento

我正在Magento网站上实现ajax add to cart。

目前,产品的正确网址会以标记的形式添加,当我添加到购物车时,它可以正常工作,但我想用ajax发布。购物车使用<a>形式通过Magento的数据模板设置将产品的网址存储到产品中,由于Magento的限制,该设置只能用作<a>

标记如下:

<form class="js-update-product" id="product_addtocart_form" action="">
                                <div class="colour-guide-link buying-options condensed-bold group">
                                    <span>Colour &amp; Size</span>
                                    (<span class="icon-question-sign"></span> <a href="#">guide</a>)
                                </div>

                                <div class="buying-options">
                                <? for ($i=0; $i < count($available_colors); $i++) { ?>
                                <a class="js-color-toggle button" href="#" data-color="<?= $available_colors[$i] ?>">
                                    <?= $available_colors[$i] ?>
                                </a>
                                <? } ?>
                                </div>
                                <hr>
                                <div class="size-options buying-options group">
                                <? foreach ($all_sizes as $size) { ?>
                                <span class="radio-size">
                                    <input type="radio" class="size-option" value="<? echo $size ?>" name="size" />
                                    <label class="number"><? echo $size ?></label>
                                </span>
                                <? } ?>                                
                                </div>
                                <!-- <button type="submit" class="buy-button buying-options"></button> -->                 
                                <a href="#" class="buy-button buying-options js-add-to-cart button" data-products-in-cart="<?= $products_in_cart ?>">
                                <span class="label">Add to Bag</span>
                                    <span class="spinner"></span>
                                    Add to bag
                                </a>
                                <div class="adding-msg">
                                    Adding to bag...
                                </div>
                            </form>

这是我发布的ajax代码,它发布了导致我出问题的表单。

ajax:

var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function (button, url) {
    if (this.validator.validate()) {
        var form = this.form;
        var oldUrl = form.action;
        if (url) {
            form.action = url;
        }
        var e = null;
        // Start of our new ajax code
        if (!url) {
            url = jQuery('.js-update-product').attr('action');
        }
        url = url.replace("checkout/cart", "ajax/index"); // New Code
        var data = jQuery('.js-update-product').serialize();
        data += '&isAjax=1';
        jQuery('#ajax_loader').show();
        try {
            jQuery.ajax({
                  url: url,
                  dataType: 'json',
                  type : 'post',
                  data: data,
                  success: function(data){
                      jQuery('#ajax_loader').hide();
                          //alert(data.status + ": " + data.message);
                          if(jQuery('.block-cart')){
                              jQuery('.block-cart').replaceWith(data.sidebar);
                          }
                          if(jQuery('.header .links')){
                              jQuery('.header .links').replaceWith(data.toplink);
                          }
                  }
            });
        } catch (e) {
        }
        // End of our new ajax code
        this.form.action = oldUrl;

        if (e) {
            throw e;
        }
    }
}.bind(productAddToCartForm);

productAddToCartForm.submitLight = function(button, url){
        if(this.validator) {
            var nv = Validation.methods;
            delete Validation.methods['required-entry'];
            delete Validation.methods['validate-one-required'];
            delete Validation.methods['validate-one-required-by-name'];
            if (this.validator.validate()) {
                if (url) {
                    this.form.action = url;
                }
                this.form.submit();
            }
            Object.extend(Validation.methods, nv);
        }
    }.bind(productAddToCartForm);

理想情况下,我想要的是ajax js找到被点击的<a href="">中的url并使用它作为ajax中的url发布。我正在努力做到的是它找到表格中的网址并将其放入帖子网址。

这是否可以使用脚本,因为它现在已经设置但有一些调整?

1 个答案:

答案 0 :(得分:0)

您可以替换ajax函数或通过以下代码修改

jQuery.ajax({
    url: url,
    //dataType: 'json',
    type : 'post',
    data: data,
    success: function(data) {
        console.log(data);
        jQuery('#ajax_loader').hide();
        //console.log(url);
        if (jQuery('#gd_total')) {
            jQuery("#gd_total").html( jQuery(data).find('#gd_total'));
        }

        if(jQuery('#itemC')){
          jQuery("#itemC").html( jQuery(data).find('#itemC'));
        }
    }
});