Если кнопка включена, то это событие onclick - PullRequest
Новая
       43

Если кнопка включена, то это событие onclick

1 голос
/ 23 мая 2019

Я хочу показывать всплывающее окно при нажатии кнопки «Добавить в корзину» (но только когда кнопка активна!), Поэтому я думаю, что могу использовать div, который оборачивает кнопку, изменяя класс с «отключен» на « включен "Я использовал JQuery, но это не так важно, если это JQuery или чистый Javascipt.

Я заставил его работать на codepen, но не работает на моем сайте? См. Код: https://codepen.io/Molin449/pen/mYXPXv

Есть идеи, что я делаю не так? 

$('.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled .single_add_to_cart_button').click(function(){
  $("#CartPopup").css("display", "block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!--The popup div-->
<div id="CartPopup" class="CartPopup"></div>

<!--This is the div that changes between disabled and enabled-->
<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">

<!--The button where i want the onclick event (only when active)-->
<button type="submit" class="single_add_to_cart_button">Tilføj til kurv</button> <a href="https://www.profiltech.dk/kurv/" class="added_to_cart wc-forward" title="Se kurv">Se kurv</a></div>

1 Ответ

0 голосов
/ 23 мая 2019

Обновлено

В Wordpress / Wooccommerce сначала нужно использовать явное jQuery() готовое событие (вложение краткости $)…

Теперь в Woocommerce,Вы можете использовать disabled class (как @RoryMcCrossan предложил в своем комментарии) , поэтому , когда ваша кнопка не будет иметь класс disabled, этосможет показать свет. 

jQuery( function($){
    $('.single_add_to_cart_button').click(function(){
        if( ! $(this).hasClass('disabled') ) {
            $("#CartPopup").css("display", "block");
        }
    });
});
#CartPopup{
  display:none;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!--The popup div-->
<div id="CartPopup" class="CartPopup"></div>

<!--This is the div that changes between disabled and enabled-->
<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">

<!--The button where i want the onclick event (only when active)-->
<button type="submit" class="single_add_to_cart_button">Tilføj til kurv</button> <a href="https://www.profiltech.dk/kurv/" class="added_to_cart wc-forward" title="Se kurv">Se kurv</button></div>

И не будет работать, если ваша кнопка имеет вид: 

<button type="submit" class="single_add_to_cart_button disabled">Tilføj til kurv</button>
...