0

Magento サイトで ajax のカートへの追加を実装しています。

現在、製品への正しいURLがタグの形で追加され、カートに追加すると機能しますが、これをajaxで投稿したいです。カートは、Magento の制限のために<a>としてのみ使用できる Magento のデータ テンプレート セットアップを介して製品への URL を保存するフォームで を使用します。<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 のコードを次に示します。

アヤックス:

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

理想的には、<a href="">クリックされているURLを見つけて、それを使用してajaxにURLとして投稿するajax jsが必要です。私が正しく取得するのに苦労しているのは、フォームで URL を見つけて、それを投稿 URL に入れることです。

これは、現在セットアップされているスクリプトで可能ですが、いくつか微調整することで可能ですか?

4

1 に答える 1

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'));
        }
    }
});
于 2013-11-11T06:22:59.710 に答える