Giỏ hàng cập nhật WooCommerce làm cho các mũi tên số biến mất

Question

Tôi đang sử dụng WooCommerce và trên trang giỏ hàng, tôi đang sử dụng các biểu tượng số tùy chỉnh.

Tôi tìm thấy mã gốc ở đây: https://codepen.io/komarovdesign/pen/PPRbgb

Nó đang hoạt động trên trang trực tiếp của tôi ở đây: http://joshrodg.com/rbtest/shop/cart/ (bạn có thể phải thêm thứ gì đó vào giỏ hàng)

Vấn đề tôi đang gặp phải là khi tôi nhấp vào dấu cộng hoặc trừ sau đó nhấp vào "Cập nhật giỏ hàng", các biểu tượng số tùy chỉnh biến mất và tất cả những gì còn lại là số.

JQuery của tôi trông giống như sau:

$(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");
        });
    });
});

Tôi đoán là trang đang được tải lại bằng ajax khi nhấp vào "Cập nhật giỏ hàng" và vì insertAfterđã được kích hoạt nên nó sẽ không kích hoạt lại.

Tôi đã thử nghiệm một cái gì đó bằng cách thêm:

$('.button').click(function(){}và thêm (sử dụng .append) một số văn bản, nghĩ rằng khi nhấn nút, văn bản sẽ hiển thị. Điều này gần như hoạt động. Văn bản hiển thị ngắn gọn, sau đó trang dường như được làm mới và nội dung đã biến mất. Tôi đã nghĩ rằng tôi có thể sử dụng logic này để kích hoạt mã gốc khi nút gửi được nhấp vào.

Mã của tôi trông giống như:

    Giá sản phẩm Số lượng Tổng phụ

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

Bất cứ ai có thể chỉ cho tôi đúng hướng hoặc làm sáng tỏ điều này? Tôi cảm thấy như tôi chỉ thiếu một cái gì đó đơn giản.

Cảm ơn,
Josh

Answer 1

Đồng ý...

Mã ban đầu phải được chỉnh sửa một chút, nhưng một người bạn của tôi đã giúp tôi làm cho điều này hoạt động :-)

Nó đang hoạt động bình thường, nhưng khi chúng tôi nhấp vào "Cập nhật giỏ hàng", nó sẽ dừng lại, vì vậy chúng tôi phải tạo hai chức năng để làm cho nó hoạt động.

Một cho các biểu tượng dấu cộng và trừ, cái còn lại cho chính nút.

Chúng tôi muốn điều này hoạt động ngay ngoài cổng, trước khi nhấp vào nút "Cập nhật giỏ hàng", vì vậy đó là lý do tại sao chúng tôi gọi qtyChangehàm trong document.ready.

Sau đó, chúng tôi nhận thấy rằng khi nút "Cập nhật giỏ hàng" được nhấp vào WooCommerce thực sự loại bỏ và thêm lại đầu vào số, vì vậy chúng tôi phải thực thi lại tập lệnh của mình sau khi nhấp vào nút ... nhưng có một lỗi! Vì, điều này được thực hiện bằng cách sử dụng ajax và trang thực sự không tải lại, chúng tôi cần đợi cho đến khi quá trình ajax hoàn tất để không có gì thực thi quá nhanh. Nếu tôi không đặt thời gian chờ trên mã, thì các nút sẽ không hiển thị, đó là vấn đề ban đầu của tôi.

Tôi cũng gặp sự cố khi các nút hiển thị, nhưng các biểu tượng dấu cộng và dấu trừ không làm cho số đầu vào tăng hoặc giảm, đó là chức năng thời gian chờ khác.

Cuối cùng, tôi phải thực hiện thêm một thay đổi nữa ... Tôi đã thêm .removelàm bộ chọn vì dấu X bên cạnh mỗi sản phẩm cũng khiến các biểu tượng cộng và trừ biến mất.

Tất cả bây giờ nó đang hoạt động. Điều này sẽ đơn giản hơn nếu chúng tôi có thể sửa đổi mã WooCommerce trực tiếp, nhưng điều đó có thể bị xóa sạch với bản cập nhật plugin nên đây là giải pháp tốt hơn :-)

Bây giờ mã của tôi trông giống như:

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

* Thời gian chờ 3000 có vẻ hơi cao, nhưng mọi con số thấp hơn mà tôi đã thử vẫn tạo ra các vấn đề khác nhau trong đó có thứ không hoạt động. Mọi thứ thực thi với thời gian chờ đó mọi lúc, đó là mục tiêu :-) Chỉ cần trì hoãn một chút là mọi thứ sẽ hoạt động!