WooCommerce Update Cart ทำให้ลูกศรตัวเลขหายไป

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>

ใครช่วยชี้ทางที่ถูกต้องให้ฉันหรือให้ความกระจ่างเกี่ยวกับเรื่องนี้ได้บ้าง ฉันรู้สึกเหมือนขาดอะไรง่ายๆ

ขอบคุณ
Josh

Answer 1

ตกลง...

รหัสเดิมต้องได้รับการปรับแต่งเล็กน้อย แต่เพื่อนของฉันช่วยฉันทำงานนี้ :-)

มันทำงานนอกกรอบ แต่เมื่อเราคลิก "อัปเดตรถเข็น" มันจะหยุดเราจึงต้องสร้างสองฟังก์ชันเพื่อให้ทำงานนี้ได้

หนึ่งสำหรับไอคอนบวกและลบอีกอันสำหรับปุ่มนั้นเอง

เราต้องการให้สิ่งนี้ทำงานได้ทันทีก่อนที่ปุ่ม "อัปเดตรถเข็น" จะถูกคลิกดังนั้นเราจึงเรียกqtyChangeฟังก์ชันนี้ในไฟล์document.ready.

จากนั้นเราสังเกตเห็นว่าเมื่อคลิกปุ่ม "อัปเดตรถเข็น" WooCommerce จะลบและเพิ่มการป้อนตัวเลขใหม่ดังนั้นเราจึงต้องเรียกใช้สคริปต์ของเราอีกครั้งหลังจากที่ปุ่มถูกคลิก ... แต่มีสิ่งที่จับได้! เนื่องจากสิ่งนี้ทำได้โดยใช้ ajax และหน้าเว็บไม่ได้โหลดซ้ำเราต้องรอจนกว่ากระบวนการ ajax จะเสร็จสมบูรณ์เพื่อไม่ให้ดำเนินการเร็วเกินไป หากฉันไม่ได้กำหนดระยะหมดเวลาให้กับรหัสปุ่มต่างๆจะไม่ปรากฏขึ้นซึ่งเป็นปัญหาเริ่มต้นของฉัน

ฉันมีปัญหาเช่นกันที่ฉันมีปุ่มให้แสดงขึ้น แต่ไอคอนบวกและลบไม่ได้ทำให้หมายเลขอินพุตเลื่อนไปข้างหน้าหรือลดลงซึ่งเป็นฟังก์ชันการหมดเวลาอื่น ๆ

สุดท้ายฉันต้องทำการเปลี่ยนแปลงอีกครั้ง ... ฉันเพิ่ม.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 ครั้งดูเหมือนจะสูงเล็กน้อย แต่ทุก ๆ ตัวเลขที่ต่ำกว่าที่ฉันพยายามยังคงทำให้เกิดปัญหาต่างๆที่บางอย่างไม่ทำงาน ทุกอย่างดำเนินไปพร้อมกับการหมดเวลานั้นตลอดเวลาซึ่งเป็นเป้าหมาย :-) เพียงแค่ต้องทนกับความล่าช้าเล็กน้อยและทุกอย่างได้ผล!