Блог

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

Как работает моя функция removeFromCart(e,id): она отправляет запрос post с идентификатором удаленного продукта, сервер затем создает новый файл cookie без удаленного продукта и возвращает недавно отрисованный html-файл, содержащий все содержимое корзины, и помещает его в раздел .cart.

Но проблема в том, что после запроса post выпадающий список закрывается сам по себе. Файлы cookie и html возвращают все правильно.

файл javascript:

 //stops shopping cart dropdown component from closing after clicking 
$(document).on('click', '.cart .dropdown-menu', function (e) {
    //console.log(e);
    e.stopPropagation();
});
 
//open cart dropdown menu with hover
$('.dropdown.cart').hover(function(){ 
    $('.cart-dropdown-button', this).trigger('click'); 
});

function removeFromCart(e,id){
    //post request to delete product from cart
    $.post("delete-product" ,
        {id},
        function(data){
            $(".cart").html(data);
        }); 
    //things I have tried:
   // e.stopPropagation();
    //e.preventDefault();
    //$('.cart-dropdown-button').trigger('click'); 
}
 

мой cart-dropdown.php файл:

 <!-- cart component of the navbar -->
<div class="container dropdown cart">
    <a role="button" type="button" class="btn cart-dropdown-button" data-toggle="dropdown">
      <i class="fas fa-shopping-cart fa-1x"></i>
    </a>
    <!-- cart dropdown items-->
    <div class="dropdown-menu dropdown-menu-right cart-items">
      <!-- updating with ajax -->
      <!-- load cart items-->
      <?php if(empty($cart)): ?>
      <!-- emtpy cart-->
      <div class="dropdown-item"><?=$text["empty_cart"]?></div>
      <?php else : ?>
      <!-- list of items in cart-->
      <ul class="list-group">
        <?php foreach ($cart as $product): ?>
        <li class="list-group-item container">
          <div class="row cart-detail">
            <!-- product info -->
            <button class="delete-product btn"
              onclick="removeFromCart(event,'<?= $product['product_id'] ?>')"
            >
              <i class="fas fa-times"></i>
            </button>
          </div>
        </li>
        <?php endforeach;  ?>
      </ul>
      <?php endif; ?>
    </div>
</div>