WooCommerce: скрыть калькулятор доставки в зависимости от выбранного способа доставки

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

Мой Javascript / jQuery довольно ржавый, поэтому я не знаю, что делаю не так.

Приведенный ниже код - это то, что я пробовал до сих пор. Он работает так, как я хочу, при загрузке страницы (= если выбрана бесплатная доставка ИЛИ если это единственный доступный способ доставки, калькулятор доставки будет скрыт.

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

Это также не сработает, если в корзину добавлено дополнительное количество продуктов (путем увеличения количества продуктов непосредственно на странице корзины), чтобы достичь минимальной суммы для бесплатной доставки.

jQuery(document).ready(function() {
    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
        jQuery(".woocommerce-shipping-calculator").css("display","none");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block");

    }
});


jQuery("input[type=radio]").click(function() {
    if(jQuery("*[id*=free_shipping]").is(':checked')){
        jQuery(".woocommerce-shipping-calculator").css("display","none !important");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block !important");

    }
})

Любая помощь будет высоко ценится !

Спасибо


javascript wordpress jquery woocommerce shipping-method
person Alexis Gautier    schedule 22.09.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте следующий сценарий, он сработает. Фактически, при каждом выборе радиобокса селектор доставки перезагружался, и всякий раз, когда вы перезагружаете HTML-элемент, событие .click () требует новой привязки к нему. В jQuery мы раньше называли его .live (), а теперь используем .on (). Он сохраняет привязку нетронутой с новым перезагруженным элементом с тем же селектором или идентификатором.

jQuery(document).ready(function($) {
if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
    jQuery(".woocommerce-shipping-calculator").css("display","none");
}
else{
    jQuery(".woocommerce-shipping-calculator").css("display","block");

}    
jQuery('body').on('click', "input[type=radio]",function() {
 
  if(jQuery("*[id*=free_shipping]").is(':checked')){
    setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);          
  }
  else{
    setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
  }  
});
});
person WordPress Mechanic    schedule 22.09.2020
comment
Привет, большое спасибо за ваш вклад. Я не уверен, как работает уведомление о стеке, поскольку я все еще новичок, использующий его, но я опубликовал новую проблему в качестве нового ответа на сообщение. Я вовсе не хочу быть настойчивым, чтобы вы это проверили, просто хотел убедиться, что вы знаете, что я поблагодарил вас за вашу помощь, и если бы у вас были какие-либо идеи, как исправить проблему с тележкой обновлений, это было бы замечательно. Спасибо ! - person Alexis Gautier; 29.09.2020

arrow_upward
0
arrow_downward

Большое спасибо за ваше объяснение и код.

Он почти отлично работает, за исключением тех случаев, когда я пытаюсь обновить свою корзину. Если у меня есть тележка, достаточная для активации бесплатной доставки (более 150 евро), а затем я удаляю продукт, чтобы она была ниже 150 евро, и нажимаю обновить корзину, тогда будут отображаться обычные способы доставки, но калькулятор доставки больше не будет отображаться . Чтобы он снова отображался, мне нужно будет щелкнуть переключатель одного из способов доставки.

Я пытался настроить код, который вы мне дали, делая что-то подобное, но не смог заставить его работать: /

jQuery(document).ready(function($) {
    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
        jQuery(".woocommerce-shipping-calculator").css("display","none");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block");

    }

    jQuery('body').on('click', "input[type=radio]",function() {

      if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden')){
        setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);
      }
      else{
        setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
      } 
    });
});


jQuery("input[type=submit]").on('click', function() {

    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden')){
      setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);
    }
    else{
      setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
    } 
  });

Я пробовал использовать ".button" вместо "input[type=submit]", а также пытался поместить этот дополнительный код внутрь всего jQuery(document).ready(function($) {[...]}).

Также у меня есть еще один вопрос: скрытие / отображение калькулятора доставки не повредит внутренней работе WooCommerce, верно? Потому что я тоже писал на wordpress.org, и кто-то из службы поддержки Woo сказал мне, что это довольно сложная тема для разработки. Так что мне интересно, не следует ли мне этого делать?

Спасибо еще раз !

person Alexis Gautier    schedule 24.09.2020