WooCommerce Update Cart lässt Zahlenpfeile verschwinden

Jan 07 2021

Ich verwende WooCommerce und auf der Warenkorbseite verwende ich benutzerdefinierte Nummernsymbole.

Ich habe den Originalcode hier gefunden: https://codepen.io/komarovdesign/pen/PPRbgb

Es funktioniert auf meiner Live-Site hier: http://joshrodg.com/rbtest/shop/cart/ (Möglicherweise müssen Sie der Faust des Einkaufswagens etwas hinzufügen.)

Das Problem, das ich habe, ist, wenn ich auf das Plus oder Minus klicke und dann auf "Cart aktualisieren" klicke, verschwinden die benutzerdefinierten Nummernsymbole und alles, was übrig bleibt, ist die Nummer.

Meine jQuery sieht aus wie:

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

Ich vermute, die Seite wird mit Ajax neu geladen, wenn auf "Cart aktualisieren" geklickt wird. Da insertAftersie bereits ausgelöst wurde, wird sie nicht erneut ausgelöst.

Ich habe etwas getestet, indem ich hinzugefügt habe:

$('.button').click(function(){}und Anhängen (Verwenden .append) von Text, wobei gedacht wird, dass der Text angezeigt wird, wenn die Taste gedrückt wird. Das funktioniert fast. Der Text wird kurz angezeigt, dann scheint die Seite aktualisiert zu werden und der Inhalt ist verschwunden. Ich dachte, ich könnte diese Logik verwenden, um den Originalcode auszulösen, wenn auf die Schaltfläche "Senden" geklickt wird.

Mein Code sieht aus wie:

    Produktpreis Menge Zwischensumme
                    <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>

Kann mich jemand in die richtige Richtung weisen oder etwas Licht ins Dunkel bringen? Ich habe das Gefühl, ich vermisse nur etwas Einfaches.

Danke,
Josh

Antworten

JoshRodgers Jan 08 2021 at 00:04

OK...

Der ursprüngliche Code musste ein wenig angepasst werden, aber ein Freund von mir hat mir geholfen, das zum Laufen zu bringen :-)

Es funktionierte sofort, aber wenn wir auf "Cart aktualisieren" klickten, hörte es auf, sodass wir zwei Funktionen erstellen mussten, damit dies funktioniert.

Eines für die Plus- und Minus-Symbole, das andere für die Schaltfläche selbst.

Wir wollten, dass dies von Anfang an funktioniert, bevor auf die Schaltfläche "Warenkorb aktualisieren" geklickt wird. Deshalb rufen wir die qtyChangeFunktion in der document.ready.

Dann haben wir festgestellt, dass WooCommerce beim Klicken auf die Schaltfläche "Warenkorb aktualisieren" die eingegebene Nummer tatsächlich entfernt und erneut hinzufügt. Daher müssen wir unser Skript erneut ausführen, nachdem auf die Schaltfläche geklickt wurde ... aber es gibt einen Haken! Da dies mit Ajax erfolgt und die Seite tatsächlich nicht neu geladen wird, müssen wir warten, bis der Ajax-Prozess abgeschlossen ist, damit nichts zu schnell ausgeführt wird. Wenn ich dem Code keine Zeitüberschreitung auferlegen würde, würden die Schaltflächen nicht angezeigt, was mein anfängliches Problem war.

Ich hatte auch ein Problem, bei dem die Schaltflächen angezeigt wurden, aber die Plus- und Minus-Symbole haben die Eingangsnummer nicht erhöht oder verringert, wofür die andere Timeout-Funktion vorgesehen ist.

Schließlich musste ich noch eine Änderung vornehmen ... Ich fügte sie .removeals Auswahl hinzu, da das X neben jedem Produkt auch dazu führte, dass die Plus- und Minus-Symbole verschwanden.

Alles in allem funktioniert es jetzt. Das wäre einfacher gewesen, wenn wir den WooCommerce-Code direkt hätten ändern können, aber das könnte mit einem Plugin-Update gelöscht werden, also ist dies eine bessere Lösung :-)

Jetzt sieht mein Code so aus:

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

* Das 3000-Timeout scheint etwas hoch zu sein, aber jede niedrigere Zahl, die ich ausprobiert habe, hat immer noch verschiedene Probleme verursacht, bei denen etwas nicht funktioniert hat. Alles läuft die ganze Zeit mit diesem Timeout ab, was das Ziel ist :-) Ich muss mich nur mit einer kleinen Verzögerung abfinden und alles funktioniert!