javascript - 根据取货和交付按钮显示或隐藏 WooCommerce 结帐字段
问题描述
亲爱的,
我正在使用代码片段插件将我的代码添加到我的电子商务项目中,我的送货选项中有取货和送货插件,我想做的是,一旦我选择取货选项,客户地址信息字段将被隐藏如果选择从餐厅取货,则保持其显示和强制性是不合逻辑的。
我尝试添加一些其他 var,其中一些工作正常,其他在加载页面后仍然出现(在加载和选择拾取之前它们消失了(例如街道)和加载街道返回后仍然出现
https://www.order.ramadaencorekuwait.com/checkout-2/
如果代码有任何问题,请告诉我
add_action('wp_footer', 'custom_checkout_js_script');
function custom_checkout_js_script() {
if( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script language="javascript">
jQuery( function($){
var a = 'input[name="pi_delivery_type"]:checked',
b = 'input[name="billing_address_4"]';
var d = 'input[name="billing_address_3"]';
var f = 'input[name="billing_avenue"]';
var z = 'input[name="billing_address_2"]';
var s = 'input[name="select2-billing_state-container"]';
// Custom function that show hide specific field, based on radio input value
function showHideField( value, field ){
if ( value === 'pickup' ) {
$(field).parent().parent().hide();
} else {
$(field).parent().parent().show();
}
}
// On start after DOM is loaded
showHideField( $(a).val(), b );
showHideField( $(a).val(), d );
showHideField( $(a).val(), f );
showHideField( $(a).val(), z );
showHideField( $(a).val(), s );
// On radio button change live event
$('form.woocommerce-checkout').on('change', a, function() {
showHideField( $(this).val(), b );
showHideField( $(this).val(), d );
showHideField( $(this).val(), f );
showHideField( $(this).val(), z );
showHideField( $(this).val(), s );
});
});
</script>
<?php
endif;
}
解决方案
尝试以下代码,当交付方式为本地取货时,到处禁用提交表单。
您应该将 (28): "local_pickup:28" 替换为您的送货方式的 ID。
add_action( 'woocommerce_after_checkout_form', 'disable_shipping_local_pickup' );
function disable_shipping_local_pickup( $available_gateways ) {
// Part 1: Hide shipping based on the static choice @ Cart
// Note: "#customer_details .woocommerce-shipping-fields" (formerly "#customer_details .col-2", but was too broad & was also hidding additional fields that aren't shipping related that just happened to be in the second column) strictly depends on your theme
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping = $chosen_methods[0];
if ( 0 === strpos( $chosen_shipping, 'local_pickup:28' ) ) {
?>
<script type="text/javascript">
jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();
</script>
<?php
}
// Part 2: Hide shipping based on the dynamic choice @ Checkout
// Note: "#customer_details .woocommerce-shipping-fields" (formerly "#customer_details .col-2", but was too broad & was also hidding additional fields that aren't shipping related that just happened to be in the second column) strictly depends on your theme
?>
<script type="text/javascript">
jQuery('form.checkout').on('change','input[name^="shipping_method"]',function() {
var val = jQuery('input[name^="shipping_method"]:checked').val(); // If it changed, then it must be the radio options so check the one that's selected
if (val.match("^local_pickup:28")) {
jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();
} else {
jQuery('#customer_details .woocommerce-shipping-fields').fadeIn();
}
});
// Also check if the zipcode switched to something where local pickup is the only option (similar to what's done in part 1 above, but happen based on what's currently being entered on the page [watch via ajaxComplete since the options that are available/selected might not be present when the zipcode change happens & it needs to load those in via AJAX])
jQuery(document).ajaxComplete(function(){
if(jQuery('input[name^="shipping_method"]').attr('type') === 'hidden'){ // There's only one option so check the hidden input field with the value
var val = jQuery('input[name^="shipping_method"]').val();
}else{ // Otherwise, it must be the radio options so check the one that's selected
var val = jQuery('input[name^="shipping_method"]:checked').val();
}
if (val.match("^local_pickup:28")) {
jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();
} else {
jQuery('#customer_details .woocommerce-shipping-fields').fadeIn();
}
});
</script>
<?php
}
推荐阅读
- google-sheets - 有没有办法将数组公式与过滤视图结合使用并按日期排序
- file-type - 在 Burp Suite 中,我如何完全隐藏文件类型以允许将 .php 文件上传到不安全的站点?
- android - 为什么安装我的游戏(由 unity 2019 制作)时出现此错误?
- c++ - 为什么我可以将可调用目标存储在与类型不匹配的 std::function 中
- microservices - 通信、高可用性和微服务
- angular - 如何强制 nz-input-number 更改模型 onkeypress 而不是 onblur?
- r - 如何将指定函数应用于数据框中的多个变量?
- xaml - 如何设置堆栈布局的“优先级”?
- jira - 如何获取未链接到测试用例的用户故事?有什么查询吗?我已经尝试过链接问题
- java - 如何使用 CIFS 在 Android Studio 中访问文件