Показывать или скрывать поля оформления заказа в WooCommerce на основе кнопки получения и доставки

#javascript #php #jquery #wordpress #woocommerce

#javascript #php #jquery #wordpress #woocommerce

Вопрос:

Дорогие,

я использую плагин snippet для добавления моего кода в мой проект ecommerace, у меня есть плагин самовывоза и доставки в моей опции доставки, что я пытаюсь сделать, так это то, что как только я выберу опцию самовывоза, поля информации об адресе клиента будут скрыты, что нелогично, чтобы оно отображалось, и обязательно, если выбран вариант самовывоза из ресторана.

я попытался добавить некоторые другие переменные, и некоторые из них работают нормально, а другие все еще появляются после загрузки страницы (перед загрузкой и выбором самовывоза они исчезают (например, улица), а после загрузки street возвращаются и все еще появляются

https://www.order.ramadaencorekuwait.com/checkout-2/

пожалуйста, дайте мне знать, если возникнут какие-либо проблемы с кодом

 add_action('wp_footer', 'custom_checkout_js_script');
function custom_checkout_js_script() {
    if( is_checkout() amp;amp; ! 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();
   }
});
  

Комментарии:

1. к сожалению, у меня это не сработало, не могли бы вы мне помочь и ответить полным кодом в соответствии с тем, которым я делился ранее. Спасибо за вашу поддержку.

Ответ №2:

Попробуйте следующий код, который отключает форму отправки везде, когда способом доставки является местный самовывоз.

Вы должны заменить (28): «local_pickup:28» идентификатором вашего способа доставки.

 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 amp; 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 amp; 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 amp; 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
}