Микромодуль "Иконка корзины справа" Commerce

Главные вкладки

Аватар пользователя Bios Bios 26 декабря 2014 в 12:27

В недавно открытом интернет-магазине стала наблюдаться динамика того, что посетители часто добавляют товары в корзину, но так и не оформляют заказ. Возможно это случается из-за того, что ссылка на оформление заказа находится в шапке сайта, и не все ее замечают. На других сайтах замечал position: fixed иконки с ссылками на страницу корзины, по моему это достаточно удобное решение.

Готовых вариантов не нашел, поэтому попробовал сделать сам. Надеюсь те кто разбираются в API и верстке откритикуют и укажут на возможные косяки:

Суть модуля: добавляет к страницам сайта иконку корзины справа посередине, при прокрутке иконка неподвижна. Внутри корзины отображается текущее количество товаров в корзине. При клике по иконке пользователя перекидывает на страицу корзины mysite.ru/cart

Сам модуль прикреплен ниже.

Скрин

Код модуля:

<?php
function minicart_page_alter(&$page) {
drupal_add_css(drupal_get_path('module''minicart') . '/minicart.css', array('group' => CSS_DEFAULT'every_page' => TRUE));

  global 

$user;
  
$order commerce_cart_order_load($user->uid);
  
  if (!empty(
$order)) {
    
$order_wrapper entity_metadata_wrapper('commerce_order'$order);
    
$quantity commerce_line_items_quantity($order_wrapper->commerce_line_itemscommerce_product_line_item_types());
    if (
$quantity >=) { $txt 'КУПИТЬ'; } else { $txt ''; }
  } else {
  
$quantity 0;
  
$txt='';
  }
  
$in_cart '<a href="/cart"><div class="right-cart"><div class="cart-count">'.$quantity.'</div>'.$txt.'</div></a>';
  
$page['page_bottom']['minicart'] = array('#markup' => $in_cart); 
}
?>

CSS

.right-cart {
background: url(cart-mini.png) no-repeat 50% 0 #fff;
position: fixed;
top: 50%;
right: 0;
transition: all 0.4s ease 0;
opacity: 0.6;
margin: 0;
width: 50px;
height: 50px;
padding: 0;
z-index: 999;
text-align: center;
font-size: 9px;
letter-spacing: 1px;
}
.right-cart:hover {
opacity: 1;
}
.right-cart .cart-count{
background: none repeat scroll 0 0 red;
border-radius: 12px;
color: #fff;
font-size: 14px;
height: 23px;
line-height: 24px;
margin: -2px 0 18px 9px;
text-align: center;
width: 23px;
}
ВложениеРазмер
Иконка пакета minicart.zip3.28 КБ

Комментарии

Аватар пользователя 1pyb.ru 1pyb.ru 29 декабря 2014 в 16:44

Спасибо.
Только вчера подумал, что не видно корзину и неудобно покупателю каждый раз перемещаться вверх.
Мне понравилось решение.

Но в Хром его не видно(((.

Не знаю как в Мозилле.

Попробуйте сделать его кросбраузерным.

Сам в программировании нуб, так что буду ждать. Думаю, что будет востребованным, а может кто-то присоединится к вам и разовьете модуль.
Спасибо еще раз.