Делаем корзину покупок с помощью Codeigniter и JQuery. Часть 5.
В предыдущей части мы реализовали добавление товаров в корзину покупок без AJAX. В этой части будем реализовывать функционал для вывода корзины покупок пользователя.
Выводить товары мы будет в контроллере cart в методе index. Ранее мы оставили заготовку для вывода корзины:
controllers/cart.php
1234567891011121314
public function index()
{
$products = array();
$products = $this->cart_model->retrieve_products();
$user_cart = array();
В массиве $user_cart пока что пусто, пришло время заполнить этот массив для вывода корзины. Просто воспользуемся готовой функицей библиотеки cart:
12
$user_cart = $this->cart->contents();
Если всё сделано верно, то открыв сайт, добавив товар в корзину можно увидеть их:
++++
ci-cart.jpgС удалением из корзины немного сложней. По умолчанию нет метода удаления товара из корзины. Есть только метод обновления корзины, который в цикле проходит по всем товарам в корзине и удаляет любой товар, количество которого равно 0.
Алгоритм для удаления товара из корзины покупок:
- При нажатии на кнопку "Удалить", посылаем POST запрос на сервер, в котором будет содержаться
row_id. row_id это уникальный индекс товара в корзине текущего пользователя. - Устанавливаем для этого товара количество = 0.
- Обновляем корзину
Приступим к реализации. Для начала посмотрим подробнее на шаблон, который выводит корзину пользователя:
application/views/cart-view.php
12345678910111213141516
...
<?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 для удаления товара из корзины:
123456789101112131415161718192021222324252627282930313233343536373839404142434445
public function delete_item()
{
$rowid = $this->input->post('rowid', true);
$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) {
$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, и обновляем корзину.
1234567
$data = array(
'rowid' => $rowid,
'qty' => 0,
);
$this->cart->update($data);
Потом идёт уже знакомый код, где в зависимости от типа запроса (AJAX или нет), возвращаем результат в виде JSON или просто редирект на главную с выводом собщения об успешном добавлении товара в корзину.
Теперь товары можно удалять из корзины:
++++
ci_cart_product_delete.pngP.S. Напомню ещё раз. Сначала мы реализуем функционал без использования AJAX, а потом напишем JS скрипт, с помощью которого допишем AJAX функционал к формам.
P.P.S. Т.к. в этом и предыдущих уроках мы делали упор именно на написание серверной части приложения, вид всего что получилось, мягко говоря, не очень. В следующем уроке мы стилизуем приложение с помощью CSS.
На этом я закончиваю пятую часть статьи. В следующем уроке мы добавим функционал кнопку "Очистить корзину", стилизуем вид с помощью CSS и начнём писать самое интересное: javascript код для добавления товаров в корзину с помощью AJAX.