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

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

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

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

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

  • #uc_pic_cart_block_content .form-submit
    Были обнаружены некоторые артефакты в темах Garland и Pixture Reloaded (между прочим, очень хорошая тема), в частности блок "плыл" в подвале Garland'а, в Pixture кнопки были слишком большие и т.п. Это первое определение, которое нужно изменить, если кнопки выглядят нежелательным образом.
  • .uc_pic_cart_block_productimage
    Еще один класс, на который стоит обратить внимание, особенно если вы предпочитаете горизонтальный вариант блока, а изображения товаров прямоугольные. Рекомендуется установить высоту в данном свойстве или модифицировать предустановку ImageCache.
  • Секция прокрутки, содержащая классы вида ..._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" берутся из картинок; по этому поводу можно не беспокоиться.

Обновление

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

F.A.Q.

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

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

Уменьшить иконки товаров можно путем редактирования соответствующей предустановки ImageCache или созданием новой. Во-вторых, вы можете заменить кнопки (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?
Что ж... Блок не использует Ajax/AHAH, поэтому каждое действие вызывает перезагрузку страницы. С другой стороны, модуль работает даже при отключенном JavaScript. Я подумываю насчет добавления Ajax'а, но мне потребуется некоторое время для овладения этой технологией. Возможно, я добавлю что-нибудь "аяксное" в следующих версиях.

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

Продолжение следует...