Всплывающую корзину
В стандартной Симпле по-умолчанию идет плагин 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"); } });
По идее это все манипуляции :) Настройте стили корзины под себя и пользуйтесь. Что получилось вкупе на картинке ниже