Всплывающая корзина Simpla

В стандартной Симпле есть аяксовая корзина и она достаточно удобна. Но порой бывает необходимо показывать пользователю товар, который он собрал без перехода на страницу оформления заказа. Этим и займемся…

В стандартной Симпле по-умолчанию идет плагин Fancybox для отображения увеличеннных картинок. В возможностях этого плагина есть также способность отображать inline контент и вызов окна с помощью методов. Это и используем.

Первым делом выведем в аяксовой корзине заказанный товар. Открываем файл design/[ваш_шаблон]/html/cart_informer.tpl и делаем его содержимое

{if $cart->total_products>0}
    В <a href="./cart/">корзине</a>
    {$cart->total_products} {$cart->total_products|plural:'товар':'товаров':'товара'}
    на {$cart->total_price|convert} {$currency->sign|escape}
    <div id="cart_popup" style="display: none;">
        <table id="purchases">
            {foreach from=$cart->purchases item=purchase}
            <tr>
                <td class="image">
                    {$image = $purchase->product->images|first}
                    {if $image}<a href="product/{$purchase->product->url}"><img src="{$image->filename|resize:50:50}" alt="{$product->name|escape}"></a>{/if}
                </td>
                <td class="name"><a href="product/{$purchase->product->url}">{$purchase->product->name|escape}</a> {$purchase->variant->name|escape}</td>
                <td class="price">{($purchase->variant->price)|convert} {$currency->sign}</td>
                <td class="amount">{$purchase->amount}</td>
                <td class="price">{($purchase->variant->price*$purchase->amount)|convert} {$currency->sign}</td>                   
            </tr>
            {/foreach}
            <tr>
                <th class="image"></th>
                <th class="name"></th>
                <th class="price" colspan="4">Итого {$cart->total_price|convert} {$currency->sign}</th>
            </tr>
        </table>
        <p><a class="to_cart" href="cart">В корзину</a> <a class="cart_continue" href="javascript:jQuery.fancybox.close();">Продолжить</a></p>
    </div>
{else}
  Корзина пуста
{/if}

Поскольку в переменной $cart уже передается все содержимое, то мы без труда его выведем. Однако надо поправить немного стили, т.к. мы добавили блок cart_popup: открываем файл design/[ваш_шаблон]/css/style.css и в конец файла дописываем

#cart_popup { width: 580px; }
 
.to_cart { float: left; padding: 6px 20px; font-weight: bold; }
.cart_continue { float: right; padding: 6px 20px; }

Это мы выставили ширину самого popup-блока и «раскидали» кнопки по сторонам.

Осталась самая малости — показать корзину при добавлении товара. Модифицируем наш файл design/[ваш_шаблон]/js/ajax_cart.js, добавим после

if(button.attr('data-result-text'))
    button.val(button.attr('data-result-text'));

блок вызова окна

$.fancybox({ href: '#cart_popup', title: 'Корзина покупок',
    'onStart': function() { $("#cart_popup").css("display","block"); },           
    'onClosed': function() { $("#cart_popup").css("display","none"); }
});

По идее это все манипуляции :) Настройте стили корзины под себя и пользуйтесь. Что получилось вкупе на картинке ниже

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)