WooCommerce UpdateCartで数字の矢印が消える

Question

私はWooCommerceを使用しており、カートページではカスタム番号アイコンを使用しています。

私はここで元のコードを見つけました： https://codepen.io/komarovdesign/pen/PPRbgb

ここで私のライブサイトで動作しています： http://joshrodg.com/rbtest/shop/cart/ （カートの拳に何かを追加する必要があるかもしれません）

私が抱えている問題は、プラスまたはマイナスをクリックしてから[カートの更新]をクリックすると、カスタム番号アイコンが消え、残っているのは番号だけです。

私のjQueryは次のようになります：

$(function() { // Quantity $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input");
    
    $('.quantity').each(function() {
        var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = 999999;
        
        btnUp.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue >= max) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue + 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
        
        btnDown.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
    });
});

私の推測では、「カートの更新」をクリックすると、ページにajaxが再読み込みinsertAfterされ、すでに起動されているため、再度起動されることはありません。

私は次を追加して何かをテストしました：

$('.button').click(function(){}.appendボタンを押すとテキストが表示されると考えて、テキストを追加（使用）します。これはほとんど機能します。テキストが短時間表示された後、ページが更新されたように見え、コンテンツが消えました。このロジックを使用して、送信ボタンがクリックされたときに元のコードを起動できるのではないかと考えていました。

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

    製品価格数量小計

                    <td class="product-remove">
                        <a href="http://joshrodg.com/rbtest/shop/cart/?remove_item=a1d0c6e83f027327d8461063f4ac58a6&amp;_wpnonce=c58b0e5416" class="remove" aria-label="Remove this item" data-product_id="42" data-product_sku="">×</a>                        </td>

                    <td class="product-thumbnail">
                    <a href="http://joshrodg.com/rbtest/product/raw-pecan-pieces/"><img width="300" height="300" src="http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-300x300.jpg 300w, http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-150x150.jpg 150w, http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-600x600.jpg 600w, http://joshrodg.com/rbtest/wp-content/uploads/istockphoto-1136673992-1024x1024-1-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px"></a>                      </td>

                    <td class="product-name" data-title="Product">
                    <a href="http://joshrodg.com/rbtest/product/raw-pecan-pieces/">Raw Pecan Pieces</a>                     </td>

                    <td class="product-price" data-title="Price">
                        <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>27.56</bdi></span> </td> <td class="product-quantity" data-title="Quantity"> <div class="quantity"> <label class="screen-reader-text" for="quantity_5ff63bef1bbf0">Raw Pecan Pieces quantity</label> <input type="number" id="quantity_5ff63bef1bbf0" class="input-text qty text" step="1" min="0" max="" name="cart[a1d0c6e83f027327d8461063f4ac58a6][qty]" value="1" title="Qty" size="4" placeholder="" inputmode="numeric"> </div> </td> <td class="product-subtotal" data-title="Subtotal"> <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>27.56</bdi></span>                        </td>
                </tr>
                
        
        <tr>
            <td colspan="6" class="actions">

                                        <div class="coupon">
                        <label for="coupon_code">Coupon:</label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code"> <button type="submit" class="button" name="apply_coupon" value="Apply coupon">Apply coupon</button>
                                                </div>
                
                <button type="submit" class="button" name="update_cart" value="Update cart" disabled="" aria-disabled="true">Update cart</button>

                
                <input type="hidden" id="woocommerce-cart-nonce" name="woocommerce-cart-nonce" value="c58b0e5416"><input type="hidden" name="_wp_http_referer" value="/rbtest/shop/cart/">              </td>
        </tr>

                </tbody>
</table>
</form>

誰かが私を正しい方向に向けたり、これに光を当てたりすることはできますか？単純なものが足りないような気がします。

ありがとう、
ジョシュ

Answer 1

OK...

元のコードを少し調整する必要がありましたが、私の友人がこれを機能させるのを手伝ってくれました:-)

箱から出して動作していましたが、「カートの更新」をクリックすると停止するため、これを動作させるには2つの関数を作成する必要がありました。

1つはプラスアイコンとマイナスアイコン用、もう1つはボタン自体用です。

[カートを更新]ボタンがクリックされる前に、これがゲートのすぐ外で機能するようにしたかったので、でqtyChange関数を呼び出しますdocument.ready。

次に、[カートの更新]ボタンがクリックされたときに、WooCommerceが実際に入力された数値を削除して再度追加することに気付きました。そのため、ボタンがクリックされた後にスクリプトを再実行する必要があります...しかし、落とし穴があります。これはajaxを使用して行われ、ページは実際にはリロードされないため、ajaxプロセスが完了するまで待機して、実行速度が速すぎないようにする必要があります。コードにタイムアウトを設定しなかった場合、ボタンが表示されませんでした。これが私の最初の問題でした。

ボタンが表示されるという問題もありましたが、プラスアイコンとマイナスアイコンでは、他のタイムアウト機能の目的である入力数が増減しませんでした。

最後に、もう1つ変更を加える必要がありました....remove各製品の横にあるXによってプラスアイコンとマイナスアイコンも消えたため、セレクターとして追加しました。

全体として、今では機能しています。WooCommerceコードを直接変更できれば、これは簡単だったでしょうが、プラグインの更新で消去される可能性があるため、これはより良い解決策です:-)

今私のコードは次のようになります：

<script>
        function qtyChange() {
            $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input"); $('.quantity').each(function() {
                var spinner = jQuery(this),
                input = spinner.find('input[type="number"]'),
                btnUp = spinner.find('.quantity-up'),
                btnDown = spinner.find('.quantity-down'),
                min = input.attr('min'),
                max = 999999;
                
                btnUp.click(function() {
                    var oldValue = parseFloat(input.val());
                    if (oldValue >= max) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue + 1;
                    }
                    spinner.find("input").val(newVal);
                    spinner.find("input").trigger("change");
                });
                
                btnDown.click(function() {
                    var oldValue = parseFloat(input.val());
                    if (oldValue <= min) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue - 1;
                    }
                    spinner.find("input").val(newVal);
                    spinner.find("input").trigger("change");
                });
            });

        }

        function cartUpdate() {
            $('button[name="update_cart"], .remove').click(function() { setTimeout(function(){ qtyChange(); }, 3000); setTimeout(function(){ cartUpdate(); }, 3000); }); } $(document).ready(function() {
            qtyChange();
            cartUpdate();
        });
    </script>

* 3000のタイムアウトは少し高いようですが、試した数値が小さいほど、何かが機能しないというさまざまな問題が発生しました。すべてが常にそのタイムアウトで実行されます。これが目標です:-)少し遅れて我慢するだけで、すべてが機能します。