WooCommerce अपडेट कार्ट नंबर तीरों को गायब कर देता है

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

मेरा अनुमान है कि पेज "अपडेट कार्ट" पर क्लिक किए जाने के बाद पेज को फिर से लोड कर रहा है और चूंकि 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

ठीक है...

मूल कोड को थोड़ा मोड़ना था, लेकिन मेरे एक दोस्त ने मुझे यह काम दिलाने में मदद की :-)

यह बॉक्स से बाहर काम कर रहा था, लेकिन जब हमने "अपडेट कार्ट" पर क्लिक किया, तो यह बंद हो जाएगा, इसलिए हमें इस काम को करने के लिए दो फ़ंक्शन बनाने होंगे।

प्लस और माइनस आइकन के लिए एक, बटन के लिए दूसरा।

हम चाहते थे कि यह गेट के ठीक बाहर काम करे, इससे पहले कि "अपडेट कार्ट" बटन पर क्लिक किया जाए, इसलिए हम qtyChangeफ़ंक्शन को कॉल करते हैं document.ready।

फिर, हमने देखा कि जब "अपडेट कार्ट" बटन पर क्लिक किया गया था WooCommerce वास्तव में हटाता है और नंबर इनपुट को फिर से जोड़ता है, इसलिए हमें बटन क्लिक होने के बाद अपनी स्क्रिप्ट को फिर से निष्पादित करना होगा ... लेकिन एक पकड़ है! चूंकि, यह अजाक्स का उपयोग करके किया जाता है और पृष्ठ वास्तव में पुनः लोड नहीं हो रहा है, अजाक्स प्रक्रिया पूरी होने के बाद हमें इंतजार करना होगा ताकि कुछ भी जल्दी से निष्पादित न हो। अगर मैंने कोड पर टाइमआउट नहीं किया है, तो बटन दिखाई नहीं देंगे, जो कि मेरी शुरुआती समस्या थी।

मेरे पास एक मुद्दा भी था जहां मुझे दिखाने के लिए बटन मिले, लेकिन प्लस और माइनस आइकन ने इनपुट नंबर को अग्रिम नहीं किया या घटाया जो कि अन्य टाइमआउट फ़ंक्शन के लिए है।

अंत में, मुझे एक और बदलाव करना पड़ा ... मैंने .removeएक चयनकर्ता के रूप में जोड़ा क्योंकि प्रत्येक उत्पाद के बगल में स्थित एक्स ने प्लस और माइनस आइकन को भी गायब कर दिया।

सब सब में अब यह काम कर रहा है। यह आसान होता अगर हम 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 टाइमआउट थोड़ा अधिक लगता है, लेकिन मैंने कोशिश की हर कम संख्या अभी भी विभिन्न मुद्दों का उत्पादन करती है जहां कुछ काम नहीं कर रहा था। सब कुछ उस समय के साथ हर समय निष्पादित होता है, जो लक्ष्य है :-) बस थोड़ा विलंब और सब कुछ काम करना है!