Делаем корзину покупок с помощью Codeigniter и JQuery. Часть 5.

В предыдущей части мы реализовали добавление товаров в корзину покупок без AJAX. В этой части будем реализовывать функционал для вывода корзины покупок пользователя.

Выводить товары мы будет в контроллере cart в методе index. Ранее мы оставили заготовку для вывода корзины:

controllers/cart.php

/**
 * Главная страница с товарами
 * @author Nikita Kiselev
 */
public function index()
{
    // Массив, в котором будут храниться товары
    $products = array();

    // Получение товаров из БД
    $products = $this->cart_model->retrieve_products();

    // Корзина пользователя. Пока оставим её пустой
    $user_cart = array();

В массиве $user_cart пока что пусто, пришло время заполнить этот массив для вывода корзины. Просто воспользуемся готовой функицей библиотеки cart:

// Корзина пользователя
$user_cart = $this->cart->contents();

Если всё сделано верно, то открыв сайт, добавив товар в корзину можно увидеть их:

ci-cart.jpg

Удаление товара из корзины

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

Алгоритм для удаления товара из корзины покупок:

  1. При нажатии на кнопку "Удалить", посылаем POST запрос на сервер, в котором будет содержаться row_id. row_id это уникальный индекс товара в корзине текущего пользователя.
  2. Устанавливаем для этого товара количество = 0.
  3. Обновляем корзину

Приступим к реализации. Для начала посмотрим подробнее на шаблон, который выводит корзину пользователя:

application/views/cart-view.php

...
<?php foreach ($cart_items as $row_id => $item) { ?>
    <tr>
        <td>
            <?php print form_open('cart/delete_item/'); ?>
            <input type="submit" value="Удалить"/>
            <input type="hidden" name="rowid" value="<?php print $row_id; ?>"/>
            <?php print form_close(); ?>
        </td>
        <td><?php print $item['name']; ?></td>
        <td><?php print $item['price']; ?></td>
        <td><?php print $item['qty']; ?></td>
        <td><?php print $item['subtotal']; ?></td>
    </tr>
<?php } ?>
...

Нас интересует только вывод товаров корзины в цикле. Массив $cart_items выглядит следующим образом:

user_cart_array.png

Сейчас у меня в массиве 3 товара. Для каждого товара при добавлении в корзину генерируется уникальный rowid. С его помощью можно совершать какие либо действия с определённым товаром из корзины.

Так вот, в форме удаления товара из корзины мы добавляем скрытое поле с этим самым rowid, чтобы потом обнулить его количество и при обновить корзину.

Напишем теперь новый метод delete_item() в контроллере cart для удаления товара из корзины:

/**
 * Удаление товара из корзины
 */
public function delete_item()
{
    // Уникальный rowid товара в корзине
    $rowid = $this->input->post('rowid', true);

    // Проверяем тип запроса. Если true, то запрос передан с помощью
    // AJAX, если false то обычный POST запрос
    $is_ajax = $this->input->is_ajax_request();

    // Массив с результатами работы скрипта
    $result = array(
        'status' => 'error',
        'message' => 'Такого товара нет в корзине',
    );

    if ($rowid) {
        $data = array(
            'rowid' => $rowid,
            'qty'   => 0,
        );

        // Обновляем корзину пользователя
        $this->cart->update($data);

        $result = array(
            'status' => 'success',
            'message' => 'Товар успешно удалён из корзины',
        );
    }

    if ($is_ajax) {
        // Если был AJAX запрос, возвращаем JSON ответ
        $this->output->set_content_type('application/json');
        $this->output->set_output(json_encode($result));
    } else {
        // Выводим сообщение
        $this->session->set_flashdata('message', $result);

        // Редирект на страницу с товарами
        redirect(base_url());
    }
}

С помощью метода $rowid = $this->input->post('rowid', true); мы получаем rowid товара, который нужно удалить из корзины.

Далее создаём массив с данными для обновления корзины. Нужному товару ставим количество (qty) = 0, и обновляем корзину.

$data = array(
    'rowid' => $rowid,
    'qty'   => 0,
);

// Обновляем корзину пользователя
$this->cart->update($data);

Потом идёт уже знакомый код, где в зависимости от типа запроса (AJAX или нет), возвращаем результат в виде JSON или просто редирект на главную с выводом собщения об успешном добавлении товара в корзину.

Теперь товары можно удалять из корзины:

ci_cart_product_delete.png

P.S. Напомню ещё раз. Сначала мы реализуем функционал без использования AJAX, а потом напишем JS скрипт, с помощью которого допишем AJAX функционал к формам.

P.P.S. Т.к. в этом и предыдущих уроках мы делали упор именно на написание серверной части приложения, вид всего что получилось, мягко говоря, не очень. В следующем уроке мы стилизуем приложение с помощью CSS.

На этом я закончиваю пятую часть статьи. В следующем уроке мы добавим функционал кнопку "Очистить корзину", стилизуем вид с помощью CSS и начнём писать самое интересное: javascript код для добавления товаров в корзину с помощью AJAX.