Блок корзины с картинками

Блок реализует ряд идей, облегчающих процесс покупки. Здесь вы можете найти дополнительную информацию об этом модуле.

Настройка внешнего вида блока

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

Переопределение CSS и замена изображений

Хотелось бы обратить внимание на следующие определения:

• .uc_pic_cart_block_productimage
  Это важный класс, на который стоит обратить внимание, особенно если вы предпочитаете горизонтальный вариант блока, а изображения товаров прямоугольные. Рекомендуется установить высоту в данном свойстве или модифицировать стиль изображения.
• Секция прокрутки, содержащая классы вида ..._scroll и ...scroll:hover, определяет внешний вид кнопок прокрутки. Обратите внимание, что классы ..._def содержат свойство "display: none", чтобы скрыть кнопки прокрутки, когда JavaScript выключен.

В подкаталоге "img" содержится несколько картинок:

• bullet-arrow-down.gif, bullet-arrow-left.gif, bullet-arrow-right.gif, bullet-arrow-up.gif - стрелки;
• cart_empty.gif, cart_full.gif - иконка корзины, пустая или наполненная (на самом деле, это копии стандартных иконок Ubercart);
• dec_product.gif, inc_product.gif, remove_product.gif - иконки "-", "+" и "X" (нарисованные мною);
• no_image.gif - иконка товара по умолчанию, также нарисованная собственноручно.

Вы можете заменить иконки на свои собственные, главное, чтобы это были изображения в формате GIF (хм... использовать, по факту, PNG или JPEG, но с раширением .gif представляется рискованным) с такими же именами, как и по умолчанию. Атрибуты HTML "width" и "height" берутся из картинок; по этому поводу можно не беспокоиться.

Темизация

По сравнению с dev-версиями модуля от 2013 года, в релиз внесено множество изменений в плане темизации и javascript. Создание файлов шаблонов или реализация функций темизации в файле template.php вашей темы сайта должно быть предпочтительным вариантом для настройки внешнего вида блока в случае, если средств CSS недостаточно. Для демонстрации такого подхода была создана подтема Bootstrap.

Иерархия функций темизации:

• uc_pic_cart_block_block_title - заголовок блока
• uc_pic_cart_block_sort_header - заголовок сортировки (Сорт. по: наим | кол | сум)
• uc_pic_cart_block_content - основное содержимое блока
  • uc_pic_cart_block_scroll_btn - одна кнопка прокрутки
  • uc_pic_cart_block_item - элемент корзины
    • uc_pic_cart_block_item_image_product - изображение товара при наличии
    • uc_pic_cart_block_item_image_default - изображение товара по умолчанию
    • uc_pic_cart_block_item_qty_manage - кнопки "+" и "-" наряду с текущим количеством товара
• uc_pic_cart_block_summary - итоги и кнопки

Для полного понимания того, как это работает, изучите файл uc_pic_cart_block.theme.inc или упомянутый выше пример на Bootstrap. Там описаны все используемые переменные.

Прокрутка

В Drupal 7.x темы могут исключать ненужные файл CSS и JS. Вы можете реализовать собственный скрипт прокрутки на уровне темы.

Если вы хотите использовать скрипт прокрутки, поставляемый с модулем, необходимо использовать определенные ID и классы элементов.

Для кнопок прокрутки используйте следующие ID:

• #uc_pic_cart_block_scroll_up: вертикальный блок - кнопка вверх
• #uc_pic_cart_block_scroll_down: вертикальный блок - кнопка вниз
• #uc_pic_cart_block_scroll_left: горизонтальный блок - кнопка налево
• #uc_pic_cart_block_scroll_right: горизонтальный блок - кнопка направо

Другие идентификаторы:

• #uc-pic-cart-block-wrapper: обертка для ajax
• #uc_pic_cart_block_scroll_area: область прокрутки - внешний контейнер (применяются scrollTop/scrollLeft)
• #uc_pic_cart_block_content: область содержимого - внутренний контейнер

Классы:

• .qty: блок управления количеством - важен для расчета величины изменения высоты прокрутки
• .uc_pic_cart_block_item_hor: элемент корзины в горизонтальном блоке - важен для расчета ширины и высоты горизонтального блока
• .uc_pic_cart_block_scroll_area_vert: вспомогательный класс области прокрутки в вертикальном блоке (добавляется скриптом)
• .uc_pic_cart_block_scroll_area_hor: вспомогательный класс области прокрутки в горизонтальном блоке (добавляется скриптом)

Обновление

Если вы редактировали файл CSS и/или иконки, как было описано в предыдущем разделе, возникает проблема с обновлением модуля. Будьте внимательны и обязательно сделайте резервную копию ваших правок, прежде чем обновлять модуль, дабы предотвратить замещение исправленных файлов. Также проверьте новую версию таблицы стилей. Например, файл CSS в 6.x-Beta2 претерпел ряд изменений по сравнению с 6.x-Beta1.

F.A.Q.

Как я могу уменьшить высоту блока в горизонтальном варианте?
Высота блока складывается из высоты заголовка блока, строки сортировки, максимальной высоты иконок товаров и высоты подвала блока.

Высоту заголовка можно рассматривать как постоянную величину, так как все заголовки блоков, скорее всего, должны выглядеть одинаково. Тем не менее, вы можете изменить стиль uc_pic_cart_block_block_title для настройки заголовка блока. Далее, вид строки сортировки определяется классом uc_pic_cart_block_sort_header, более того, вы можете отключить ее вовсе в настройках блока.

Уменьшить иконки товаров можно путем редактирования соответствующего стиля изображений или созданием нового. Во-вторых, вы можете заменить кнопки (dec_product.gif, inc_product.gif, remove_product.gif) на более маленькие (в дистрибутив входят иконки 16x16) или изменить стили #uc_pic_cart_block_content .form-submit или .uc_pic_cart_block_btn. В-третьих, определены классы uc_pic_cart_block_spansum (стоимость товара) и uc_pic_cart_block_spanqty (количество), в которых можно изменить, например, размер шрифта.

Я рекомендую использовать расширение Firebug для Firefox для просмотра стилей элементов страницы, благодаря чему правка CSS значительно облегчается.

Также имеются стили подвала (summary), с помощью которых тоже можно уменьшить высоту блока.

Как насчет Ajax?
В отличие от 6.x-версий, в ветке 7.x поддерживается Ajax для изменения порядка сортировки, а также изменения количества товара и удаления элемента корзины.

Почему не поддерживается "Ajax cart"?
На данный момент этот модуль использует только оригинальный блок Ubercart, поэтому был создан запрос #430040. К тому же модуль выглядит заброшенным (последний коммит был отправлен 02.03.2014 г.).