Корзина в режиме добавить +1 товар

Допустим, работаем с шаблоном категории, то есть файлом products.tpl.

...
{foreach $products as $item}
    <div class="product">
        Модуль: {name}
        ...
        <div class="variants">
            {foreach $item->variants as $variant}
                {$id = $variant->variant_id}
                ...
                <button onclick="addCart(this, '{$id}')">
                    В корзину
                </button>
            {/foreach}
        </div>
    </div>
{/foreach}
...

Любителям наворотов Тот же пример плюс ещё реализована такая фишка, что при листинге карточек товаров подсвечиваются кнопки тех, что уже находятся в корзине.

...
{foreach $products as $item}
    <div class="product">
        Модуль: {name}
        ...
        <div class="variants">
            {foreach $item->variants as $variant}
                {$id = $variant->variant_id}
                ...
                <button onclick="addCart(this, '{$id}')">
                    {$num = $smarty.cookies.cart.$id|default:0}
                    {if !empty($num)}
                        Уже {$num|escape} шт. в корзине
                    {else}
                        В корзину
                    {/if}
                </button>
            {/foreach}
        </div>
    </div>
{/foreach}
...

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

...
<div class="cartPopup">
    <!-- сюда скрипт добавит результаты -->
</div>
...

Например, разместим его в конце общего макета страницы, то есть файле index.tpl.

<script>
    function readCookie ( name ) {
        ...
    };

    function addCart ( btn, variantId ) {
        jQuery('.cartPopup').html('загружается...').show();
        var N = readCookie('cart[' + variantId + ']');
        jQuery.ajax({
            url: '/cart/add/' + variantId,
            type: 'POST',
            data: { amount: N + 1,
                    ajax: 1 },
            error: function (xhr, status, thrown) {
                jQuery('.cartPopup').html('Ошибка!');
            },
            success: function (data) {
                jQuery('.cartPopup').html(data);
                jQuery(btn).html('Уже в корзине');
            }
        });
    };
</script>

Это предназначено тем, кто любит совсем простые решения. Здесь нет скриптов и всплывающего окна, а клик кнопки открывает страницу корзины с добавлением товара в режиме +1.

...
{foreach $products as $item}
    <div class="product">
        ...
        <div class="variants">
            {foreach $item->variants as $variant}
                {$id = $variant->variant_id}
                {$num = $smarty.cookies.cart.$id|default:0}
                ...
                <a href="/cart/add/{$id}?amount={$num + 1}">В корзину</a>
            {/foreach}
        </div>
    </div>
{/foreach}
...

То же с полем ввода Наверняка есть те, кто предпочитает чтобы карточки товаров содержали поле ввода количества рядом с кнопкой корзины.

...
{foreach $products as $item}
    <div class="product">
        ...
        <div class="variants">
            {foreach $item->variants as $variant}
                {$id = $variant->variant_id}
                {$num = $smarty.cookies.cart.$id|default:0}
                ...
                <form action="/cart/add/{$id}">
                    <input name="amount" type="text" value="{$num + 1}" />
                    <button type="submit">
                        В корзину
                    </button>
                </form>
            {/foreach}
        </div>
    </div>
{/foreach}
...

Раз уж коснулись темы передачи данных в корзину, напомню о ещё одной возможности.

...
<form action="/cart" method="post">
    <input name="rechange" type="hidden" value="1" />
    <button type="submit">
        Очистить корзину
    </button>
</form>
...

Ещё одна мало известная возможность. Предположим, у нас есть варианты товаров с идентификаторами 111, 222, 333 и мы хотим за один клик положить в корзину по единице этих товаров.

...
<form action="/cart" method="post">
    Краски   <input name="amounts[111]" type="text" value="1" /> шт. <br />
    Кисточка <input name="amounts[222]" type="text" value="1" /> шт. <br />
    Альбом   <input name="amounts[333]" type="text" value="1" /> шт. <br />
    <button type="submit">
        В корзину
    </button>
</form>
...