Корзина Ubercart в popup окне

8 октября 2011 в 15:59
Аватар пользователя zakraben zakraben 0 12

Решил на сайте сделать корзину в сплывающем окне.
Прежде всего хочу сказать спасибо Splash за помощь по выковыриванию данных из корзины.
И за отличный модуль UC JS CART который очень был кстати.
Были использованы модули uc ajax cart для добавления динамической корзины, colorbox для попап окон, uc js cart для динамического подсчета товара, ну и немного допилены tpl и css.
Итак первое это uc ajax cart. В нем есть папка с тимплейтами, немного правим .tpl для реализации внешнего вида и некоторого функционала.
Сюда же добавим скрытый div с содержимым корзины и ссылку colorbox для показа этого содержимого в попап окне.
У меня это так:

<a href="?width=850&height=auto&inline=true#cartOpen" class="colorbox-inline">В корзине <?

$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
function numberProduct($number, $titles) {
    $cases = array (2, 0, 1, 1, 1, 2);
    return $titles[ ($number%100>4 && $number%100<20)? 2 : $cases[min($number%10, 5)] ];
}
?>

Далее как вы увидели в шаблоне есть вывод содержимого корзины <?php print ubercart_popup(); ?>
Это и есть функция которая выдирает содержимое корзины писать её нужно в template.php
Выглядит она так:

function ubercart_popup() {
  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.
Осталось одно, когда мы открываем корзину и добавляем или уменьшаем количество позиций, в самом блоке корзины при закрыти попап окна нихера не меняется. Скорее всего нужно дописать кусок яваскрипт кода для обновления.(займусь позже)
У меня это выглядит вот так все:
корзина ubercart в popup окне

Если кто то из читателей решал этот воброс более изящно, корректно, быстро и еще как нить иначе расскажите плиз.
Всем спасибоу!

Комментарии

По ходу юзания возникли некоторые траблы. В близжайшее время попробую решить и дописать апдейт к статье.

17 октября 2011 в 0:10

как вариант: использовать colorbox c iframe или modalframe - подгружая в него /cart, и сделав для такого попапа свой шаблон (регион с контентом), стили можно вырезать. Так весь js внутри корзины и чекаута будет отрабатывать нормально, но сам попап будет тяжелее за счет подгружаемых js-скриптов.

17 октября 2011 в 1:39

"FORTIS" wrote:
как вариант: использовать colorbox c iframe или modalframe - подгружая в него /cart, и сделав для такого попапа свой шаблон (регион с контентом), стили можно вырезать. Так весь js внутри корзины и чекаута будет отрабатывать нормально, но сам попап будет тяжелее за счет подгружаемых js-скриптов.

При нажатии на кнопку "Оформить заказ" по идее нужно вешать дополнительный js для того что бы страница не открывалась в том же фрейме. Или я не прав?

17 октября 2011 в 12:22

да, лучше даже после оформления заказа на странице с сообщением об успешном заказе под сообщение повесить кнопочку закрытия, и + по таймауту закрывать

17 октября 2011 в 17:08

Отличный вариант, такой вопрос а как сделать чтоб после нажатия добавить в корзину открывало корзину во всплывающем окне ? а так же подскажите как сделать количество товара ?

21 октября 2011 в 19:36

"sight" wrote:
Отличный вариант, такой вопрос а как сделать чтоб после нажатия добавить в корзину открывало корзину во всплывающем окне ? а так же подскажите как сделать количество товара ?

AJAX и темизировать таблицу корзины.

21 октября 2011 в 19:56

"sight" wrote:
что бы войти в корзину через блок нужно кликать два раза.

Напишите запрос для обновления блока, есть еще куча решений, я лишь дал направление куда копать.

2 апреля 2012 в 19:29