根据取货和交付按钮显示或隐藏 WooCommerce 结帐字段

Posted 2023-05-09

【中文标题】根据取货和交付按钮显示或隐藏 WooCommerce 结帐字段

【英文标题】：Show or hide WooCommerce checkout fields based on pickup and delivery button

【发布时间】：2020-12-12 11:41:39

【问题描述】：

亲爱的，

我正在使用 sn-p 插件将我的代码添加到我的电子商务项目中，我的送货选项中有取货和送货插件，我想做的是，一旦我选择取货选项，客户地址信息字段将被隐藏，如果选择从餐厅取货，则保持显示和强制显示是不合逻辑的。

我尝试添加一些其他变量，其中一些工作正常，而其他变量在加载页面后仍然出现（在加载和选择拾取之前它们消失了（例如街道）并且在加载街道返回后仍然出现

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;

【参考方案1】：

将类分配给 b、d、f、z 和 s 可能更简单。如果您已经定义了“a”，那么您可以执行以下操作：

$(a).change(function() 
   if ($(a).val() == 'pickup') 
      $(".special").hide();
    else 
      $(".special").show();
   
);

【讨论】：

不幸的是，这对我不起作用，您能帮我回复一下我之前分享的完整代码吗？感谢您的支持。

【参考方案2】：

尝试以下代码，当交付方式为本地取货时，到处禁用提交表单。

您应该将 (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