1

Problem:
Checkout page shows a correct translated price,
but it turns to a default language price after adding / removing a coupon code.
When I refresh the page manually, it shows a translated language price.

Need Help:
Would you please let me know how to auto refresh the checkout page after adding/removing a coupon?

Action I took:
I tired these code in a checkout page / footer, but it doesn't refresh the page.
Console shows no error.

jQuery(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url === '/?wc-ajax=apply_coupon' || settings.url === '/?wc-ajax=remove_coupon') {
location.reload();
    }
});


jQuery(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url === '/?apply_coupon' || settings.url === '/?remove_coupon') {
    jQuery('body').trigger('update_checkout');
    }
});

Order review table (Essential Addons for Elementor - EA Woo Checkout):

<div class="ea-woo-checkout-order-review">
        <div class="ea-checkout-review-order-table">
            <ul class="ea-order-review-table">
                                    <li class="table-header">
                        <div class="table-col-1"></div>
                        <div class="table-col-2"></div>
                        <div class="table-col-3"></div>
                                   </li>
                
        <li class="table-row cart_item">
        <div class="table-col-1 product-thum-name">
        <div class="product-thumbnail">
        <img width="300" height="200" src="https://www.myweb.com/wp-content/uploads/2021/06/LineOne_22-300x200.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy">                              </div>
        <div class="product-name">Template Type&nbsp;&nbsp;</div>
        </div>
                                <div class="table-col-2 product-quantity">1</div>
                                <div class="table-col-3 product-total"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></div>
        </li>
        </ul>

        <div class="ea-order-review-table-footer">
        <div class="footer-content">
        <div class="cart-subtotal">
            <div></div>
            <div><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></div>
        </div>
        <div class="order-total">
        <div></div>
        <div><strong><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></strong> </div>
        </div>
                        </div>
        </div>
</div>
</div>

Apply coupon:

<div class="woo-checkout-coupon">
            <div class="ea-coupon-icon"><i aria-hidden="true" class="fas fa-percent"></i></div>
                            <div class="woocommerce-form-coupon-toggle">
    <div class="woocommerce-info">
        Have a coupon? <a href="#" class="showcoupon">Click here to enter your code</a> </div>
                </div>

                <form class="checkout_coupon woocommerce-form-coupon" method="post" style="">

                    <p>If you have a coupon code, please apply it below.</p>

                    <p class="form-row form-row-first">
                        <input type="text" name="coupon_code" class="input-text" placeholder="Coupon code" id="coupon_code" value="">
                    </p>

                    <p class="form-row form-row-last">
                        <button type="submit" class="button" name="apply_coupon" value="Apply Coupon">Apply Coupon</button>
                    </p>

                    <div class="clear"></div>
                </form>
</div>

Thank you.

namari
  • 129
  • 1
  • 9

1 Answers1

2

You are doing the things a bit wrong. I've first searched for a list of WooCommerce jQuery events and found this:

https://wordpress.stackexchange.com/questions/342148/list-of-js-events-in-the-woocommerce-frontend

Corresponding to the post, your jQuery code needs a redesign:

(function ( $ ) {
    $( document ).ready( function () {
        $( document.body ).on( 'applied_coupon_in_checkout removed_coupon_in_checkout', function () {
            location.reload();
        } );
    } );
})( jQuery );

This answers your question. But if it's a good design, reloading the page every time is a thing you should think about.

Mr. Jo
  • 4,946
  • 6
  • 41
  • 100
  • Hello Mr. Jo: Thank you for your help and advice. I tried the code but it still doesn't refresh the page. Console shows no error. Would you please let me know what else could I try? (I'm a newvie, very clumsy ... sorry) – namari Aug 26 '21 at 22:02
  • Have you put it inside document.ready method? – Mr. Jo Aug 26 '21 at 22:06
  • @namari added document.ready for you in case you didn't know about this. – Mr. Jo Aug 26 '21 at 22:16
  • Hello Mr. Jo: Thank you again. I actually didn't know how to, hehe.. and I tried the new code but it doen't refresh the page (and it doen't add a coupon code with this code) ... – namari Aug 26 '21 at 22:23
  • Add an alert or console.log to the code to be sure its even called. Also to the document.ready part. – Mr. Jo Aug 26 '21 at 22:24
  • Ah, yep, I added alert('your message'); and it shows the alert. Your first code had no problem with adding a coupon, but no refreshing the page. The second code calls alert but doesn't add a coupon and no refresh.. This is what I can see so far... – namari Aug 26 '21 at 22:30
  • The code only recognizes if a coupon was added - it don't adds a coupon. This is what you've requested in your question: `Would you please let me know how to auto refresh the checkout page after adding/removing a coupon?` – Mr. Jo Aug 26 '21 at 22:41
  • Hi Mr.Jo: Yeah, it adds a coupon, just the problem was it doesn't refresh the page after adding the coupon.. And your first code didn't affect adding a coupon. The second code doesn't allow to add a coupon. Without the second code, it adds a coupon. There is no problem with adding a coupon, the only problem is that it doesn't refresh the page after adding the coupon... – namari Aug 26 '21 at 23:02
  • Hi Mr Jo: it works now => jQuery( document.body ).on( 'applied_coupon_in_checkout removed_coupon_in_checkout', function () { location.reload(); } ); ... It's checkout page so I added _in_checkout. Thank you a lot for your supportive hlep : ) I wanted to vote up on your answer, but I don't have the permission at moment, but I selected your answer, thanks again : ) – namari Aug 27 '21 at 00:08
  • 2
    Hi Mr Jo: How are you? I voted up (I have the permission now hehe), thanks again : ) – namari Sep 04 '21 at 04:28