Блог

Главная - Вопросы по программированию - как переключить мини-корзину на Woocommerce

как переключить мини-корзину на Woocommerce

#jquery #wordpress #woocommerce

#jquery #wordpress #woocommerce

Вопрос:

Я хочу, чтобы это добавило мини-корзину для моего сайта. Как скрыть и показать выпадающий список для мини-корзины при нажатии кнопки корзина?

Я использую JS для slidetoggle, но не работаю. Пожалуйста, помогите мне.

 $(document).ready(function() {
  $(".buttonreq").click(function() {
    $(".widget_shopping_cart_content").slideToggle("slow");
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn bg-white buttonreq">
  <a class="text-dark" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'نمایش سبد خرید' );  ?>"> 
    <number><?php echo WC()->cart->get_cart_contents_count( ); ?></number>
    <span calss="cart">سبد خرید <i class="demo-icon text-danger icon-cart">amp;#xe817;</i></span>
  </a>   
</button>
<div class="widget_shopping_cart_content">
  <?php woocommerce_mini_cart(); ?>
</div>

Ответ №1:

Вы можете скрыть widget_shopping_cart_content проверку ниже кода.

 $(document).ready(function() {
  $(".buttonreq").click(function() {
    $(".widget_shopping_cart_content").slideToggle();
  });
}); 
 .widget_shopping_cart_content{display:none;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn bg-white buttonreq">
    <?php _e( 'نمایش سبد خرید' );  ?>
    <number>(5)</number>
    <span calss="cart">سبد خرید <i class="demo-icon text-danger icon-cart">amp;#xe817;</i></span>
</button>
<div class="widget_shopping_cart_content">
  <?php woocommerce_mini_cart(); ?> mini cart
</div>