Уберкарт - Работа с изображениями
В этой статье я подробнее остановлюсь на работе с изображениями, как их удобнее настроить для Ваших товаров, как добавить изображения к атрибутам и опциям этих атрибутов. Хочу выразить признательность WaZZup, который натолкнул меня на мысль об этой статье.
Статья о том, как создавать атрибуты и опции, и зачем они вообще могут быть нужны.
Итак, когда я отвечал WaZZup, я упомянул про модуль Ubercart Option Images, скачать который Вы можете здесь. Для него нужен модуль ImageCache . Ведь на самом деле бывает необходимо добавлять изображения, как для видов обивок (пример, который привёл WaZZup), или например Вы торгуете обувью – для каждой модели у Вас есть много разных цветов, и покупатель вполне вероятно захочет посмотреть на картинки – как будет выглядеть чёрный ботинок такой-то модели, как будет выглядеть красный ботинок, и как смотрится салатовый или фиолетовый.
Да, чуть не забыл. Советую Вам также установить модули ImageAPI и Imagefield. Если у Вас будут какие-либо проблемы по работе с ImageСache – пишите в комментариях, я обязательно отвечу.
Итак, модули установлены и включены. Приступаем к делу. Создайте атрибуты и опции для этих атрибутов, если не знаете как, опять же отсылаю Вас сюда :). После чего начинайте создавать продукт (тип материала Product). Готово. Заходите в меню редактирования продукта, подключаете к нему атрибуты (опции для атрибутов подключаются автоматически). Например – создайте атрибут «Цвет» (цвет ботинка) – и две опции к нему – «Чёрный» (чёрный цвет) и например «Бежевый», и подключите всё это к Вашему продукту.
Теперь можно настраивать картинки. Заходите в Administer > Store administration > Configuration > Attribute settings (Управление сайтом > Управление магазином > Настройки > Управление атрибутами) (admin/store/settings/attributes). Там будет написано в самом верху – Для того, чтобы иcпользовать модуль Option Image необходимо создать предустановки (presets) для imagecache, и ссылка на admin/build/imagecache. Идёте прямо по ссылке и создаёте предустановки (кратко буду называть презеты) для imagecache. Например, Вам нужно маленькое изображение для тизера (добавляете презет «Small», скалируете данный презет – опция Add Scale, в которой нужно задать размер для изображения – например 100 на 100), точно так же создаёте презет для отображения на странице товара – например презет «Big» - и скалируете его до размера 300 на 300 пикселей. Готово. Сохраняете изменения.
Возвращаетесь обратно в Управление атрибутами, и теперь Вы уже сможете видеть там окно Option Images (где и будут определены настройки картинок для Ваших опций). Главное, Вы должны там задать Switch Attributes – поставьте там птички напротив тех опций, для которых Вы намерены загружать изображения. В поле Switch Effect можно выбрать эффект Fade (Затухание) - тогда, при смене опций, картинка будет не просто меняться, а как бы «затухать», и вместо неё будет появляться новая картинка. Можете вообще не применять никаких эффектов. После чего Вам необходимо выбрать презеты для трёх главных полей – именно здесь настраивается то, как будет выглядеть Ваша картинка для опций. Это три поля Preview Image Size, Teaser Image Size и Page Image Size – соответственно, размер картинки для превьюшки, тизера (или анонса) и для страницы ноды, то есть Вашего продукта. Можете для превьюшки задать презет «Small», для страницы товара – «Big», как угодно, на Ваше усмотрение.
Готово. Сохраняете изменение, и возвращаетесь в редактирование Вашего продукта. Атрибуты уже добавлены, заходите на вкладку управления опциями Options. И там для каждой опции выбираете картинку, добавляя её в поле Image, расположенное правее всех остальных настроек. Всё. Сохраняете изменения. По умолчанию можете установить например опцию «Чёрный цвет» - и тогда на странице продукта сразу же загрузится картинка с чёрным ботинком. Выбираете внизу соответствующую опцию – картинка изменится. Готово!
Этот метод можно также использовать для того, чтобы показывать различные ракурсы товара. Например, Ваш товар сфотографирован в нескольких ракурсах. Создаёте атрибут «Ракурс» - опции для него 1, 2, 3 и так далее, для каждой опции добавляете картинку – и пожалуйста, покупатель легко может рассмотреть Ваш товар с разных сторон, щёлкая по цифрам.
С уважением, Ёж.
