Создание Корзины товаров
Albireo CMS предлагает готовое решение для создания Корзины для сайта.
Общие сведения
Корзина представляет собой js-скрипт, размещённый в файле шаблона albireo.js, поэтому доступен автоматически для всего сайта.
Работа Корзины основывается на схеме Alpine.store, что позволяет использовать её точечно с полной синхронизацией за счёт событийной модели Alpine.JS.
Код Корзины можно разместить на любой странице сайта.
Настройка Корзины
Сама по себе Корзина не требует настройки, но поскольку данные хранятся в LocalStorage браузера, то можно предварительно задать ключи хранения:
<script>
// Уникальные ключи (если нужно)
window.CART_KEY = "cart_items_<?= str_replace('/', '_', SITE_HOST) ?>";
window.HISTORY_KEY = "orders_history<?= str_replace('/', '_', SITE_HOST) ?>";
</script>
Глобальные переменные CART_KEY и HISTORY_KEY лучше объявить с привязкой к текущему сайту. Это позволит разделить хранилища разных сайтов одного домена. Если сайт один, то настройку CART_KEY и HISTORY_KEY можно исключить.
Добавление товара в Корзину
<button
x-data
@click="$store.cart.add({'id':'prod_001', 'name':'Товар 1', 'price':100, 'max_qty':5})"
class="button">
+ Добавить в корзину Товар 1
</button>
Обычно для добавления товара в Корзину используется кнопка. Поскольку мы используем Alpine.JS, то у неё (или её контейнера) прописывается атрибут x-data.
Чтобы исключить возможные конфликты с парсингом TextSimple, используйте обрамление <!-- nosimple --> ваш код <!-- /nosimple -->.Само же добавление происходит по клику кнопки с помощью метода $store.cart.add().
Используются поля:
id— уникальный идентификатор товараname— название товараprice— цена (только число)max_qty— максимальное количество товара (только число)
При необходимости можно добавить любые другие поля, они будут переданы при отправке заказа.
Вывод количества товаров
Количество товаров в Корзине хранится в $store.cart.totalCount. Примеры вывода:
<div x-data>
<a href="cart">Корзина <span x-text="$store.cart.totalCount">0</span></a>
</div>
<div x-data x-show="$store.cart.totalCount > 0" x-cloak class="mar20-tb">Cart <sup class="t80" x-text="$store.cart.totalCount" ></sup></div>
Вывод товаров Корзины
Для вывода используется таблица.
<div x-data="{ result: ''}">
<table x-show="!$store.cart.isEmpty" class="bor1 bor-solid-t bor-primary400 mar20-t">
<thead>
<tr><th>Товар</th><th>Кол-во</th><th>Сумма</th><th>Действие</th></tr>
</thead>
<tbody>
<template x-for="item in Object.values($store.cart.items)" :key="item.id">
<tr :class="Date.now() - item.added_at > 86400000 ? 'bg-red100' : ''">
<td x-text="item.name"></td>
<td>
<input class="form-input" type="number" x-model.number="item.qty" min="1" :max="item.max_qty"
@input="if(item.qty <= 0) $store.cart.remove(item.id); $store.cart.save()">
</td>
<td x-text="item.price * item.qty"></td>
<td><button class="button" @click="$store.cart.remove(item.id)">x Удалить</button></td>
</tr>
</template>
</tbody>
</table>
<p x-show="!$store.cart.isEmpty">Итого: <span x-text="$store.cart.totalPrice"></span></p>
<form @submit.prevent="result = await $sendDataHtml('<?= ajaxURL('ajaxTest_handler') ?>', {cart: JSON.stringify($store.cart.getOrder())}); $store.cart.checkout('Спасибо! Ваш заказ принят, менеджер свяжется с вами в ближайшее время.')">
<textarea name="order_text" :value="JSON.stringify($store.cart.items)" hidden></textarea>
<button x-show="!$store.cart.isEmpty" type="submit" class="button">Отправить заказ</button>
</form>
<div x-html="result" x-effect="if (result !== '') { setTimeout(() => { result = '' }, 3000) }"></div>
<div x-show="$store.cart.message !== ''"
x-html="$store.cart.message"
x-effect="if ($store.cart.message !== '') { setTimeout(() => { $store.cart.message = '' }, 5000) }"
class="t-primary600 t-bold mar10-tb">
</div>
</div>
Отправка формы происходит через $sendDataHtml, где в поле cart помещается вся Корзина. После отправки выполняется метод $store.cart.checkout, который очищает Корзину, помещает заказ в историю и выводит сообщение через $store.cart.message.
Метод $sendDataHtml универсальный способ отправки AJAX-запросов в Albireo CMS. Также вы можете использовать $sendDataJson, который работает с JSON. Обратите внимание, что в качестве обработчика запроса выступает php-функция ajaxTest_handler(), которая в Albireo CMS используется для тестирования AJAX-запросов. Ответ сервера выводится в блоке с x-html="result".
История заказов
Вывести историю заказов можно так:
<div x-data>
<h3>История заказов</h3>
<button class="button" @click="localStorage.removeItem('orders_history'); $store.cart.history = []">Очистить историю</button>
<template x-for="order in $store.cart.history" :key="order.id">
<div class="bor1 bor-solid-b bor-primary300 mar20-t ">
<p class="t-bold">Заказ № <span x-text="order.id"></span> от <span x-text="order.date"></span></p>
<ul>
<template x-for="item in Object.values(order.items)" :key="item.id">
<li x-text="item.name + ' — ' + item.qty + ' шт. (' + (item.price * item.qty) + ')'"></li>
</template>
</ul>
<p class="t-bold">Итого: <span x-text="order.total"></span></p>
</div>
</template>
</div>
История заказов также хранится в LocalStorage. Обратите внимание, что в коде очистки истории используется ключ orders_history, но если вы определили window.HISTORY_KEY, то нужно указать его.
История ограничивается до 10 заказов, чтобы излишне не загружать память браузера.
Получение данных Корзины на сервере
Обработчик корзины работает как обычный AJAX-handler и вы сами должны решить что именно он будет делать. Например отправлять Корзину на указанный email. (Укажите в качестве обработчика cart_email_handler вместо ajaxTest_handler).
# service/functions/cart.php
function cart_email_handler()
{
if (!isAjax()) exit('Access denied!');
$cart = $_POST['cart'] ?? '';
if (!$cart) exit('Корзина пуста');
$cartArray = json_decode($cart, true);
$cartID = $cartArray['id'] ?? '';
$cartDate = $cartArray['date'] ?? '';
$cartItems = $cartArray['items'] ?? [];
$cartTotal = $cartArray['total'] ?? 0;
$out = '';
$out .= 'Заказ: ' . $cartID . LF;
$out .= 'Дата: ' . $cartDate . LF;
$out .= 'Сумма: ' . $cartTotal . LF;
$out .= '=========================================' . LF . LF;
foreach ($cartItems as $name => $prod) {
$out .= $name . LF . '--------------' . LF;
foreach ($prod as $key => $val) {
$out .= $key . ': ' . $val . LF;
}
$out .= LF;
}
$emailAdmin = getConfig('emailAdmin');
$subject = 'Заказ ' . ' ' . $cartID;
$headers['From'] = getConfig('emailFrom');
mail64($emailAdmin, $subject, $out, $headers);
echo '<div class="t-primary600 mar10-tb">Отправка данных прошла успешно!</div>';
}
Эта функция сформирует письмо примерно такого вида:
Заказ: 20260417093629 Дата: 17.04.2026, 12:36:29 Сумма: 300 ========================================= prod_001 -------------- id: prod_001 name: Товар 1 price: 100 max_qty: 5 brand: adidas qty: 2 added_at: 1776418588269 prod_002 -------------- id: prod_002 name: Товар 2 price: 100 max_qty: 5 qty: 1 added_at: 1776418589409