如何在WordPress/Woocommerce中更新地址后运行jQuery？

rbl8hiat 于 2023-05-22 发布在 WordPress

关注(0)|答案(1)|浏览(147)

我使用WordPress，Woocommerce和插件，WooReer（按距离交付成本）.
目标：如果太远，则禁用交付选项，并添加消息传递以让用户知道它太远。（如果总额低于30美元，则无法交付）。
到目前为止：
我已经设置了999,999美元的交货成本，如果它是在交货区之外，我想用一些话来代替，比如，“太远了，交货”。
我有一个子主题，并有一些代码，工程-但它似乎只有工作时，我刷新购物车页面。我需要找到一种方法，让它工作时，产品数量更新的购物车页面上，当一个交货地址更新。
下面是我的代码：
shipping_method_0_local_pickup20 -本地拾取的无线电输入的名称shipping_method_0_wcsdm16 -交货的无线电输入的名称

jQuery(document).ready(function($) {
    
    var total = jQuery('.order-total').text().replace(',','').match(/(\d+)/g)[0];
    
    if(jQuery('#shipping_method_0_local_pickup20').prop('type') == 'hidden' & total >=30 ) {
        var newText = jQuery('.woocommerce-shipping-destination').parent().html().replace("Delivery address", "Enter delivery address");
        jQuery('.woocommerce-shipping-destination').parent().html(newText); 
    } else if(jQuery('#shipping_method_0_local_pickup20').prop('type') == 'hidden') {
        jQuery('.woocommerce-shipping-destination').hide();
        jQuery('.shipping-calculator-button').hide();
        jQuery('#shipping_method_0_local_pickup20').show();
        jQuery('#shipping_method_0_local_pickup20').prop('checked', true);
    } 
    else if(jQuery('#shipping_method_0_wcsdm16').parent().text().indexOf('999,999') != -1 ) {
        jQuery('#shipping_method_0_wcsdm16').hide();
        jQuery('#shipping_method_0_wcsdm16').parent().html('<b>Address too far for delivery</b>') ;
    } else {
        // do nothing
    }
}
)

wordpress

来源：https://stackoverflow.com/questions/76293650/how-can-i-run-jquery-after-an-address-update-in-wordpress-woocommerce

1条答案

按热度按时间

wnrlj8wa1#

第一件事
1.我认为在第一个if语句中，对于AND语句，你需要使用'&&'：

if(jQuery('#shipping_method_0_local_pickup20').prop('type') == 'hidden' && total >=30 ) {

1.如果你不想刷新页面来查看更改，你需要 AJAX 方法，使用admin-ajax API或wp-rest api。不幸的是，我不认为WooReer AJAX 方法来立即更新交付条件而不刷新。你可以自己写（这并不复杂），但如果你觉得这很麻烦
1.一些插件如this AJAX 方法来检查地址。
现在，一些sidenotes：

如果可以的话，避免使用jquery。它太慢了，使用javascript的vanilla函数并不复杂，也没有很大的不便。
避免使用长嵌套的if语句。它不会提高性能，但会使您的代码更容易阅读。就像这样：

window.addEventListener("DOMContentLoaded", () => {
  // Do something
  if (document.querySelector('#shipping_method_0_local_pickup20').type != 'hidden' && document.querySelector('#shipping_method_0_wcsdm16').parentElement.text.indexOf('999,999') != -1 ) {
    // > Hide radio input
    // > Say address is too far
    return; // Escape from the code
  }
  // Type is hidden
  if (total >= 30) {
    // > Change the HTML of shipping destination
    return; // Again, escape
  }
  // Type is hidden and total < 30
  // > Hide shipping destination and calculator button, show local pickup
});

随着时间的推移，这种去嵌套风格会感觉更自然。

赞(0）回复(0）举报 2023-05-22

我来回答

如何在WordPress/Woocommerce中更新地址后运行jQuery？

1条答案

相关问题

热门标签

最新问答