Загрузка изображений к товару и настройка их показа

10 Апр 2009, 5:47 PM

Примечание:
Статья написана для версии 3.6. Названия и перевод пунктов меню может отличаться от используемой Вами версии.

В этой статье мы будем учиться настраивать вывод изображений к товарам на витрине Вашего интернет-магазина. ViartShop позволяет загружать к товару неограниченное количество изображений и использовать несколько их типов - иконку(показывается в списке товаров табличного вида, корзине и т.п.), изображение для предпросмотра (в списке товаров), большое изображение (для страницы с детальным описанием) и очень большое (для просмотра в отдельном окне или на отдельной странице, в зависимости от настроек). При чём, Вы вольны в выборе, или загрузить одно единственное изображение и скрипт сам создаст из него все вышеперечисленные типы или, Вы можете самостоятельно загружать изображения для каждого типа, да ещё и абсолютно разные. Но и это ещё не всё... Вы можете выбрать разные варианты показа дополнительных изображений... Интересно? Тогда начнём...

1. Сначала необходимо определиться с общими настройками для загружаемых изображений. для этого идём в Администрирование >Товары >Настройки товаров и кликаем на вкладке Изображения:

Здесь всё логически понятно и у Вас не должно быть затруднений с настройками параметров (в крайнем случае, можете всё оставить по-умолчанию). Сохраняем изменения.

2. Теперь идём в Администрирование >Товары и редактируем существующий или создаём новый товар. Для загрузки первого, основного изображения, которое будет показано в списке товаров и на детальной странице, открываем вкладку Изображение и показ:

Здесь вы можете либо по отдельности загрузить файл для каждого из типов изображения (они могут быть разными) или загрузить один файл, чтобы он был преобразован в остальные типы автоматически. Рассмотрим пример со вторым вариантом... Нажмите на ссылку Загрузить изображение. Откроется окно менеджера загрузок:

отметьте те варианты для автоматической генерации типов изображений, которые для Вас необходимы и с помощью кнопки Обзор, выберите файл для загрузки, нажмите Загрузить. Закончив заполнение прочей информации о товаре (тип, ценаЯ, описание и т.п.), сохраните изменения...
Небольшой отступление...
Если Вы желаете использовать ранее загруженные изображения, то рекомендую в Администрирование >Система >Общие настройки включить Показывать превью-изображения для Администратора:

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

3. Теперь давайте посмотрим, как будут выглядеть изображения в пользовательской части в списке товаров (для предпросмотра):

и на странице с детальным описанием товара:

кликнув на увеличить изображение, увеличенное изображение откроется в максимальном размере в зависимости от выбранных ранее в п.1 настроек в новом окне или в этом же.

4. Теперь научимся загружать дополнительные изображения к товару и настраивать их показ. Для этого в списке товаров выберите необходимый и нажмите на пункт Изображения, как на картинке:

в открывшемся окне, по аналогии с менеджером файлов, вы можете загрузить выборочно файлы для каждого из типов изображений или выбрав загрузку для поля Огромное изображение, включить автоматическое создание всех трёх типов из одного файла:

Текст обязательного поля Заголовок изображения будет виден в пользовательской части над изображением, а текст поля (не обязательный параметр) Описание к изображению, под ним. Очень полезная вещь для индексации поисковыми системами...
Таким образом можно загрузить любое количество дополнительных изображений:

Теперь посмотрим как это выглядит в пользовательской части на детальной странице товара:

5. В случаях, когда дополнительных изображений много или много другой информации в описании товара и всей этой информации "тесно" на одной странице в общем списке, для дополнительных фотографий и прочего, можно сделать разделение по закладкам. Для этого необходимо произвести следующие настройки: Администрирование> Модули CMS >Настройки CMS, выберите в разделе Страницы, пункт Подробная страница товара:

на открывшейся странице отметьте курсором в средней колонке пункт Подробности о товаре, а в открывшемся сверху справа окне, выберите под пунктом Показать разделы - описание, изображения..., на разных страницах, разделённых закладками и сохраните изменения:

Теперь, на странице описания товара, должны появиться вкладки, в том числе для фото:

кликнув на которых (в нашем случае на вкладку Фото), мы получим такой вид:

nemo
При копировании статьи или её части, ссылка на www.viarts.ru обязательна

Оцените статью.

Средний рейтинг:

основан на 2 отзывах.

Напишите отзыв.

Положительный отзыв
Игорь (Гость)	28 Ноя 2009, 2:36 PM

А можно узнать что будет если делать не так: "Важно! После загрузки файла нажмите на ссылку закрыть окно, а не кликайте на кнопку закрытия окна менеджера файлов".

Ответ Администратора:
Это было актуально в более ранней версии дистрибутива, когда после нажатия на кнопку "Загрузить", не происходило автоматического прописывания путей в соответствующих полях после загрузки. Т.е. файлы загружались, окно менеджера загрузки закрывалось, а по факту пути не прописывались. Всё корректно работало только если нажималась ссылка "закрыть". Сейчас всё работает корректно. Статья будет исправлена.

См. все отзывы пользователей