Le panier de mise à jour WooCommerce fait disparaître les flèches numériques

Jan 07 2021

J'utilise WooCommerce et sur la page du panier, j'utilise des icônes numériques personnalisées.

J'ai trouvé le code original ici: https://codepen.io/komarovdesign/pen/PPRbgb

Cela fonctionne sur mon site en direct ici: http://joshrodg.com/rbtest/shop/cart/ (vous devrez peut-être ajouter quelque chose au poing du chariot)

Le problème que je rencontre est que lorsque je clique sur le plus ou le moins, puis sur «Mettre à jour le panier», les icônes numériques personnalisées disparaissent et il ne reste que le nombre.

Mon jQuery ressemble à:

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

Je suppose que la page est rechargée avec ajax quand on clique sur "Mettre à jour le panier" et depuis qu'elle insertAftera déjà été déclenchée, elle ne la déclenche plus.

J'ai testé quelque chose en ajoutant:

$('.button').click(function(){}et en ajoutant (en utilisant .append) du texte, en pensant que lorsque le bouton est enfoncé, le texte s'affiche. Cela fonctionne presque. Le texte s'affiche brièvement, puis la page semble s'actualiser et le contenu a disparu. Je pensais que je pourrais peut-être utiliser cette logique pour déclencher le code d'origine lorsque vous cliquez sur le bouton Soumettre.

Mon code ressemble à:

    Produit Prix Quantité Sous-total
                    <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>

Quelqu'un peut-il m'indiquer la bonne direction ou faire la lumière à ce sujet? J'ai l'impression de manquer quelque chose de simple.

Merci,
Josh

Réponses

JoshRodgers Jan 08 2021 at 00:04

D'accord...

Le code original a dû être légèrement modifié, mais un de mes amis m'a aidé à faire fonctionner cela :-)

Cela fonctionnait tout de suite, mais lorsque nous cliquions sur "Mettre à jour le panier", cela s'arrêtait, nous avons donc dû créer deux fonctions pour que cela fonctionne.

Un pour les icônes plus et moins, l'autre pour le bouton lui-même.

Nous voulions que cela fonctionne dès la sortie de la porte, avant que le bouton "Mettre à jour le panier" ne soit cliqué, c'est pourquoi nous appelons la qtyChangefonction dans le document.ready.

Ensuite, nous avons remarqué que lorsque le bouton «Mettre à jour le panier» a été cliqué, WooCommerce supprime et ajoute à nouveau l'entrée numérique, nous devons donc réexécuter notre script après avoir cliqué sur le bouton ... mais il y a un hic! Étant donné que cela se fait en utilisant ajax et que la page ne se recharge pas, nous devons attendre la fin du processus ajax pour que rien ne s'exécute trop rapidement. Si je n'ai pas mis de délai sur le code, les boutons ne s'afficheraient pas, ce qui était mon problème initial.

J'ai également eu un problème où les boutons apparaissaient, mais les icônes plus et moins ne faisaient pas avancer ou diminuer le nombre d'entrée, ce qui est à quoi sert l'autre fonction de temporisation.

Enfin, j'ai dû faire un autre changement ... J'ai ajouté en .removetant que sélecteur car le X à côté de chaque produit faisait également disparaître les icônes plus et moins.

Dans l'ensemble maintenant ça marche. Cela aurait été plus simple si nous avions pu modifier le code WooCommerce directement, mais cela pourrait être effacé avec une mise à jour du plugin, c'est donc une meilleure solution :-)

Maintenant, mon code ressemble à:

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

* Le délai de 3000 semble un peu élevé, mais chaque nombre inférieur que j'ai essayé a quand même produit divers problèmes où quelque chose ne fonctionnait pas. Tout s'exécute avec ce timeout tout le temps, ce qui est le but :-) Il suffit de supporter un peu de retard et tout fonctionne!