Как автоматически обновить корзину, когда пользователь удаляет товар? - PullRequest
Новая
       8

Как автоматически обновить корзину, когда пользователь удаляет товар?

0 голосов
/ 05 мая 2018

Я делаю корзину с отдельной страницей. При нажатии кнопки просмотра корзины загружается файл корзины php. Где я зацикливаю переменную сеанса корзины array и показываю на странице. Но когда пользователь нажимает кнопку удаления элемента, он должен быть удален и не показываться после на странице корзины. Теперь, как я могу автоматически обновить страницу корзины без перезагрузки страницы?

Мне нужна идея, как мне это реализовать?

часть петли 

<?php foreach($_SESSION['cart'] as $result)
                            {
                                ?>

кнопка удаления 

<div class="col-sm-6">
   <div class="row">
      <div class="col-sm-2">
        <h6><strong><?php echo $result['price']; ?><span class="text-muted"> x</span></strong></h6>
      </div>
      <div class="col-sm-4">
        <input type="text" class="form-control input-sm" value=<?php echo $result['quantity']; ?>>
      </div>
      <div class="col-sm-2">
        <button type="button" class="btn btn-link btn-sm">
           <span class="fa fa-trash"> </span>
        </button>
      </div>
    </div>
 </div>

полный исходный код здесь

Редактировать 1
Предположим, я получаю страницу ajax, звоните 

$.ajax(
    {
        url: 'makeCartPage.php',
        type: 'POST',
        success: function(msg)
        {
            //here to code to show the new cart page/information
        },
        error: function()
        {
            console.log('cart error');
        }              
    });

Но была проблема с показом ajax возвращаемых данных.

1 Ответ

0 голосов
/ 05 мая 2018

Есть несколько способов сделать это, но один из них - не обновлять список, а просто скрыть элемент, который вы удаляете, поэтому добавьте класс в класс оболочки строк верхнего уровня, например product-wrapper или что-что -вы: 

<div class="row product-wrapper">

Когда вы нажимаете кнопку x, вы запускаете ajax, обновляете сеанс на странице makeCartPage.php, и в случае успеха вы проходите DOM с помощью $(this) и скрываете класс product-wrapper. Что-то вроде: 

$('.text-muted').on('click',function(){
    // Isolate the clicked button
    var deleteButton = $(this);
    // Run ajax to remove the item out of the session
    $.ajax({
        url: 'makeCartPage.php',
        type: 'POST',
        data: {
            "id": /* get your product id here however you are able so you can remove from the session */
        },
        success: function(response) {
            // You want to send back a delete success response when you actually 
            // remove it from the session. If true, do something similar to this
            deleteButton.parents('.product-wrapper').fadeOut('fast');
        },
        error: function(){
            console.log('cart error');
        }
    });
});

Этого должно быть достаточно для начала. Вот скрипка сокрытия:

https://jsfiddle.net/efL891mu/

...