【问题标题】:How to refresh/reload WooCommerce checkout page after adding a coupon code (wordpress)?添加优惠券代码(wordpress)后如何刷新/重新加载 WooCommerce 结帐页面?
【发布时间】:2021-10-21 13:45:49
【问题描述】:

添加优惠券代码后,我需要重新加载整个 WooCommerce 结帐页面。
我尝试了以下代码,但它没有重新加载它。

我需要这个功能的原因:
添加优惠券代码后,评论表的价格变为默认语言价格。
当我刷新页面时,它显示了翻译后的语言价格,所以我需要重新加载它。

请告诉我如何重新加载它?

在结帐页面中添加了此代码:

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

jQuery(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url === '/?wc-ajax=apply_coupon') {
    jQuery('body').trigger('update_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>

申请优惠券:

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

【问题讨论】:

  • 欢迎来到堆栈溢出。为什么要向结帐页面添加两个单独的查询(即使条件相同)?呈现的 HTML 的缩进对我跟随结束标签没有太大帮助 - Apply coupon: 中是否缺少 &lt;/div&gt;

标签: wordpress woocommerce refresh reload


【解决方案1】:

你应该使用

jQuery('body').trigger('update_checkout');

而不是

location.reload();

另类

add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);

function woocommerce_custom_update_checkout()
{
  if (is_checkout()) {
?>
<script type="text/javascript">

  jQuery(document).ready($ => {

    $('input').on('change', () => {

      $('body').trigger('update_checkout');

    });

  });

</script>

【讨论】:

  • 您好 Rajeev Singh:感谢您的评论。我根据您的建议尝试了它(我更新了代码 aobve),但在更新优惠券代码后它仍然没有刷新它。如果可能的话,请告诉我其他方法吗?谢谢。
  • 打开检查(ctrl + shift + i),刷新页面并应用优惠券代码,然后检查js错误,我相信你应用优惠券代码时会出现一些js错误,这就是为什么在下面/休息js的。否则 jQuery('body').trigger('update_checkout');是常见的wp代码
  • 您好 Rajeev Singh:感谢您的帮助。我检查了一个控制台,它没有显示错误。添加优惠券后,我需要刷新整个结帐页面。否则,翻译的语言价格不会改变...对不起,我是新手,很笨拙....
  • 如果可能,分享网站 URL 和测试优惠券代码
  • 嗨,Rajeev:我想知道您是否可以让我知道任何可能的解决方案?
【解决方案2】:

如果有人需要它

它使用以下代码:

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

【讨论】:

    猜你喜欢
    • 2021-04-18
    • 2021-10-26
    • 2020-03-19
    • 1970-01-01
    • 2014-09-08
    • 2016-02-25
    • 2017-07-13
    • 2018-04-12
    • 2021-11-01
    相关资源
    最近更新 更多