0

主な製品の今すぐ購入ボタンが次のコードでクリックされたときに表示される基本的なフォーム ポップアップがあります。onclick="productAddToCartForm.submit(this)"

このメイン製品とまったく同じボタンを備えた同じページに関連製品もあり、クリックしたときにもこのポップアップを表示したいので、追加しようとしましonclick="productAddToCartForm.submit(this)"たが、それを押すとポップアップが表示されます動作しますが、両方の製品をカートに追加します。

これどうやってするの？

コードは次のようになります。

<div style="display: none;" id="ajax-popup">
    <span class="button b-close"><span>X</span></span>
    <h2 id="ajax-popup-message"></h2>
    <div id="ajax-popup-content"></div> 
</div>
<script type="text/javascript">
//<![CDATA[
    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('#product_addtocart_form').attr('action');
        }
        url = url.replace("checkout/cart","ajax/index"); // New Code
        var data = jQuery('#product_addtocart_form').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);

                    jQuery('#ajax-popup-message').addClass(data.status);

                    if(jQuery('#ajax-popup')){
                        jQuery('#ajax-popup-message').html(data.message);
                    }
                    if(jQuery('#ajax-popup')){
                        jQuery('#ajax-popup-content').html(data.sidebar);
                    }
                    if(jQuery('.header .links')){
                        jQuery('.header .links').replaceWith(data.toplink);
                    }

                    jQuery('#ajax-popup').bPopup();
                }
            });
        } 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'];
            // Remove custom datetime validators
            for (var methodName in Validation.methods) {
                if (methodName.match(/^validate-datetime-.*/i)) {
                    delete Validation.methods[methodName];
                }
            }

            if (this.validator.validate()) {
                if (url) {
                    this.form.action = url;
                }
                this.form.submit();
            }
            Object.extend(Validation.methods, nv);
        }
    }.bind(productAddToCartForm);
//]]>
</script>

HTML は次のようになります。

<div class="main">
<div class="first">
<div class="add-to-cart">
<img onclick="productAddToCartForm.submit(this)" title="Add to Cart" src="../images/add-to-cart.png">
</div></div>
//STUFF
<div class="second">
<button onclick="window.location='URL'; productAddToCartForm.submit(this)" class="form-button add-to-cart" type="button"></button></div>
</div>
4

1 に答える 1

0

あなたの問題の根本は、あなたの例からわかることから、フォーム送信機能を2回呼び出していることです。2番目のonclickには、ここに貼り付けたときにwindow.locationが残ったデバッグコードがあったようです。そのうち、私があなたの説明からしか判断できないのは、アイテムをに送信する無限ループを引き起こすポップアップウィンドウマークアップですカート。

まず、jQuery を使用して Javascript でのプログラミングを容易にし、html の onclick= DHTML イベントを取り除き、jQuery を使用します。それから加えて

jQuery(document).ready(function(){
    jQuery('.add-to-cart').click(function(e){
        e.preventDefault();
        productAddToCartForm.submit(this);
    });
});

jQuery.ajax次に、 でラップする理由はありませんtry catch。独自のエラー処理機能があります。jQueryのajax関数に何か問題があると思わない限り。それ以外の場合は、success メソッド内でエラーをキャッチしようとしている場合は、success メソッド内にコードを配置する必要があります。

ajax は、実行された瞬間に開かれる完全に別のブラウザーと考えてください。

これが私が言及しているものの例です: http://jsfiddle.net/73gpC/1/

エラーメソッドの例を次に示します。

jQuery.ajax({
    error: function(jqXHR, text, errorThrown){
       if(errorThrown){
           alert('Error: ' + errorThrown);
       }
    }
});

次に、フォームを で既に宣言していますがvar form = this.form;、DOM を再度検索する必要はありません。 jQuery('#product_addtocart_form').serialize(); する必要がありますform.serialize();

を実行するたびjQuery('selector')に、jQuery は DOM 内の要素を「検索」します。

最初は問題ないように思えますが、より複雑なアプリケーションを扱うようになると、ユーザーがアプリケーションを操作している間、この方法を実行すると非常に遅くなります。宣言された変数はすでに見つかっているため、代わりに使用する方がはるかに高速です。そうは言っても、クラス名よりもIDの方がはるかに高速に検索できますが、有効なHTMLが必要になるため、常にIDを優先してください(IDは一意であり、再利用できません)。

見た目からすると完全に壊れており、ユーザーのブラウザをクリックすると「URL」にリダイレクトされ、決して実行され<button onclick="window.location='URL'; productAddToCartForm.submit(this)"ないため、単純に実行されないことを期待しています。window.location='URL'productAddToCartForm.submit(this)

例: http://jsfiddle.net/CZqDL/

クリックしても警告ボックスは表示されず、関数が起動されなかったことを示します。

可能であれば、誰かが問題を解決する方法を学ぶのを手伝うのは大歓迎ですが、これは一般的に Javascript や jQuery に関するあなたの経験レベルを超えています。jQuery プログラミングの本を入手するか、開発者を雇って正しくプログラミングすることをお勧めします。特に、VarienForm が Magento の一部であり、e コマース アプリケーションであるタグにリストする必要があります。

学習中の場合は、jQuery または Magento フォーラムでアプリケーションの使用方法やトレーニングについて問い合わせることをお勧めします。そうしないと、顧客を失ったり、間違った注文を受けたり、プログラミングの慣行が不十分なためにフォームが台無しになった場合に、(クレジット カードを処理しているかどうかによって) 訴えられたり逮捕されたりする可能性があります。フリーランサーを雇って、非常に低コストで必要なことだけを行い、面倒を避けることができるウェブサイトはたくさんあります。

于 2014-02-07T05:12:13.390 に答える