8 октября 2011 в 15:59
Решил на сайте сделать корзину в сплывающем окне.
Прежде всего хочу сказать спасибо Splash за помощь по выковыриванию данных из корзины.
И за отличный модуль UC JS CART который очень был кстати.
Были использованы модули uc ajax cart для добавления динамической корзины, colorbox для попап окон, uc js cart для динамического подсчета товара, ну и немного допилены tpl и css.
Итак первое это uc ajax cart. В нем есть папка с тимплейтами, немного правим .tpl для реализации внешнего вида и некоторого функционала.
Сюда же добавим скрытый div с содержимым корзины и ссылку colorbox для показа этого содержимого в попап окне.
У меня это так:
$a = count(uc_cart_get_contents());
echo $a.' товар'.numberProduct($a, array('','а','ов'));
?></a>
<div class="price-of-cart">на <strong><?php print $total ;?></strong></div>
<div id="myCart" style="display:none;">
<div id="cartOpen">
<h2 class="cart_header">Корзина</h2>
<?php print ubercart_popup(); ?>
</div>
</div>
По внешнему виду так:
Там еще функция для склонения товар, товары, товаров есть:
Далее как вы увидели в шаблоне есть вывод содержимого корзины <?php print ubercart_popup(); ?>
Это и есть функция которая выдирает содержимое корзины писать её нужно в template.php
Выглядит она так:
if (module_exists('uc_cart')) {
$items = uc_cart_get_contents();
if (empty($items)) {
return theme('uc_empty_cart');
}
$output = '';
foreach (uc_cart_cart_pane_list($items) as $pane) {
if ($pane['enabled']) {
$output .= $pane['body'];
}
}
return '<div id = "uc_popup">'. $output .'</div>';
}
}
В общем содержимое уже выводится в попапе, только вот есть несколько моментов. Это не срабатывает яваскрипт для обновления позиций товара из модуля uc ajax cart(как решить не знаю). По этому поводу я отключил в настройках модуля фитчу "Ajaxify cart page".
Далее установите модуль uc js cart - как раз он и позволяет динамически подсчитывать стоимость.
Вот практически и все. Остальное можно сделать средствами css.
Осталось одно, когда мы открываем корзину и добавляем или уменьшаем количество позиций, в самом блоке корзины при закрыти попап окна нихера не меняется. Скорее всего нужно дописать кусок яваскрипт кода для обновления.(займусь позже)
У меня это выглядит вот так все:
Если кто то из читателей решал этот воброс более изящно, корректно, быстро и еще как нить иначе расскажите плиз.
Всем спасибоу!
Комментарии
Круто, спасибо за статью!
В закладки, пригодится!
Спасибо !!! Попробуем как нить...
По ходу юзания возникли некоторые траблы. В близжайшее время попробую решить и дописать апдейт к статье.
как вариант: использовать colorbox c iframe или modalframe - подгружая в него /cart, и сделав для такого попапа свой шаблон (регион с контентом), стили можно вырезать. Так весь js внутри корзины и чекаута будет отрабатывать нормально, но сам попап будет тяжелее за счет подгружаемых js-скриптов.
При нажатии на кнопку "Оформить заказ" по идее нужно вешать дополнительный js для того что бы страница не открывалась в том же фрейме. Или я не прав?
да, лучше даже после оформления заказа на странице с сообщением об успешном заказе под сообщение повесить кнопочку закрытия, и + по таймауту закрывать
Отличный вариант, такой вопрос а как сделать чтоб после нажатия добавить в корзину открывало корзину во всплывающем окне ? а так же подскажите как сделать количество товара ?
AJAX и темизировать таблицу корзины.
что бы войти в корзину через блок нужно кликать два раза.
подпишусь
Возьму темаху..
Напишите запрос для обновления блока, есть еще куча решений, я лишь дал направление куда копать.