php - 添加/删除优惠券后无法自动刷新结帐页面(EA Woo Checkout)
问题描述
问题:
结帐页面显示正确的翻译价格,
但在添加/删除优惠券代码后变为默认语言价格。
当我手动刷新页面时,它会显示翻译语言的价格。
需要帮助:
请告诉我如何在添加/删除优惠券后自动刷新结帐页面?
我采取的行动:
我在结帐页面/页脚中厌倦了这些代码,但它没有刷新页面。
控制台显示没有错误。
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');
}
});
订单审核表(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 </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>
谢谢你。
解决方案
你做的事情有点不对。我首先搜索了 WooCommerce jQuery 事件列表并找到了这个:
https://wordpress.stackexchange.com/questions/342148/list-of-js-events-in-the-woocommerce-frontend
对应于帖子,您的 jQuery 代码需要重新设计:
(function ( $ ) {
$( document ).ready( function () {
$( document.body ).on( 'applied_coupon_in_checkout removed_coupon_in_checkout', function () {
location.reload();
} );
} );
})( jQuery );
这回答了你的问题。但如果它是一个好的设计,那么每次重新加载页面是你应该考虑的事情。
推荐阅读
- vue.js - 从 index.html 导入 SCSS 文件不起作用
- content-management-system - TYPO3 9.5.2 Slug:多语言:找不到页面 404 异常,如果不存在页面翻译
- ajax - Zend2:通过 ajax 动态加载部分(例如标签)
- json - 我的片段无法显示来自 json url 的 recyclerview 和数据
- node.js - Node.js 命令行变量无法识别
- c# - 隐藏 xaml 元素,但也能够在 UWP 中使用 RenderTargetBitmap 进行渲染
- python - 我想创建一个表并使用 python 使用行和列选择值
- javascript - 离子日期选择器本地日期格式?
- git - 如何在多分支 git 项目中体面地使用子模块?
- kubernetes-helm - helm get 获取发布图表的语法