Дополнительные изображения в категориях opencart. Изображения товара в Opencart. OpenCart - Продолжаем настраивать свой магазин Ч.2

Изображения это дополнительные картинки на странице товара. Количество изображений не ограничено

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

Как оказалось на практике, настройка и генерация всплывающих больших изображений определенного размера совершенно неудобно т.к. во многих магазинах есть как большие изображения товара, так и маленькие. При задании размера большого фото товара, например 800х600, изображения размером 800х400 будут иметь белые полоски, а картинки малых размеров - увеличены и зернистые, что неправильно и некрасиво.

Если сайт имеет в своем наборе разного размера и ориентации изображения, я рекомендую сделать всплывающие оригинальные фото . Для этого открываем файл catalog/controller/product.php ищем строку

$this->data["popup"] = $this->model_tool_image->resize($product_info["image"], $this->config->get("config_image_popup_width"), $this->config->get("config_image_popup_height"));

Заменяем её на

$this->data["popup"] = "/image/".$product_info["image"];

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

"popup" => $this->model_tool_image->resize($result["image"], $this->config->get("config_image_popup_width"), $this->config->get("config_image_popup_height")),

Заменяем на

"popup" => "/image/".$result["image"],

После этих изменений при нажатии на изображение товара у нас в сплывающем окне будет отображено оригинальное фото в оригинальных пропорциях. Данный метод хорош, если использовать fancybox или стандартный colorbox т.к. он автоматически изменяет размеры окна для изображения, и вписывается пропорционально в размеры браузера, если картинка слишком большая. На стандартном colorbox недостаток метода в том, что если изображение больше за размер окна браузера оно выходит за его рамки и появляются полоски прокрутки. Так что лучше использовать fancybox.

Комментарии:

Отправить

Виктор 30.05.2015 скажите, у меня фото открывается не в сплывающем колорбоксе а на отдельной странице в уголку… это не хорошо, как исправить? Ответ сайт 30.05.2015

Судя по всему не работает colorbox либо неправильно подключен. Посмотрите исходный код на странице товара, он должен содержать в себе такие строки:

Также на странице должен быть вызов colorbox:

Если одного из этих кодов нет, надо уже разбираться смотреть шаблон и подключение скриптов.

Быстрый поиск

Описание поле и пояснения принципа работы тегов в Opencart

Opencart поле расположение - описание, как вывести в карточку товара

Opencart размеры (длина x ширина x высота)

Изображение это визитная карточка товара. На этот пункт хотелось бы заострить особое внимание, т.к. всем известно, что «встречают по одежке», это также относится и к товарам.

Opencart из коробки обладает возможностью продавать цифровые товары: книги, музыку, рефераты и другие файлы.

Единица измерения длины в Opencart предназначена для выбора единицы длины ширины и высоты, эти параметры задаются выше в полях ввода.

Дизайн (схема) в Opencart предназначена для связки модулей и страниц, как информационных, так и страниц категорий, продуктов и системных (контакты, карта сайта и тому подобные).

Делюсь скриптом простого удаления всех ненужных фото удаленных товаров

Новое на сайте

Мы знаем что поисковые роботы любят текст на страницах. Однако публикуя тексты помните предназначена ли эта страница для такого текста

Небольшой пример как можно сделать автоматически содержание описания со скролом при клике на заголовок

Обзор платежного шлюза fondy который позволяет сделать онлайн оплату на сайте за любые товары или услуги

Как оптимизировать сайт для google page speed - обзор основного функционала сервиса от гугл для проверки скорости загрузки страницы

Для того что бы вывести кастомную информацию не надо много кода. Достаточно применить правильный подход и пару строк кода. Читаем в статье.

Как мне "посчастливилось" пощупать UMI CMS особенно со стороны переноса данных и почему меня до сих пор тошнит при слове UMI

Всем привет!

Сегодня мы продолжим настройку магазина на openCart, и коснемся мы не большого раздела настроек магазина, но довольно сложного и очень важного, который отвечает за изображения. Точнее, за размеры всех изображений, которые присутствуют на сайте. А так-же, настроим изображение шапки (лого) и так называемого favicon, который, к стати, будет в формате.png. Знаю, это немного не обычно, но это действительно так.

Итак, со вступлением заканчиваем, давайте перейдем к теме. Мы уже настроили наш магазин во вкладках "Общее, Витрина, Локализация, Опции" и добрались до вкладки "Изображения".

Изображения

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

Так вот, предоставляется возможность выбрать абсолютно любое изображение, в произвольном формате, но понятному нашей CMS (это png, JPEG, JPG, GIF). Желательно, что бы размер вашего изображения был 228х68, но это не столь важно, особенно если ваш дизайн предполагает шапку более крупного размера.

Второе изображение - это favicon. Причем формат не привычный нам.ico, а только в формате.png. Изображение должно быть размерами 16 на 16 пикселей, о чем собственно и сказано на странице (хотя, как показала практика, другие размеры так-же при желании можно вставить в favicon).

Необходимые изображения мы загрузили и выбрали, теперь нам предлагают настроить размеры изображений.

Размеры изображений

Размер изображения в списке категорий - это размер изображения, которое выводится в категориях (как добавлять эти изображения я расскажу позже), по умолчанию стоит размер 80х80 пикселей, что выглядит вот так:

Размер большого изображения товара - размер главной фотографии на странице товара.
Размер всплывающего изображения товара - в openCart есть такая опция - при нажатии на изображение товара, оно всплывает и принимает больший размер, что бы посетители могли рассмотреть товар по ближе и по лучше (думаю все знают эту фишку на JQuery). Так вот, в это окне мы указавыем, как размер будет принимать это всплывающее изображение.
Размер изображения в списке товаров - размер изображений товаров, которые выводятся в списке (в категориях, в производителях и т.д.). Раньше я показывал, где находится изображение категорий, там-же можете увидеть изображение в списке товаров (расположено ниже, так-же имеет размер 80х80).
Размер дополнительных изображений товаров - размер изображений, которые находятся под главной фотографией товара, которые мы кстати уже настроили. По умолчанию размер 74х74, что выглядит во так:

Размер изображения аналогичных товаров - думаю все знают что это, поэтому рассказывать много не буду. Изображения аналогичных товаров (обычно это товары из той-же категории), выводятся в низу страницы какого-либо товара.
Размер изображения в списке сравнения - к счастью, opencart позволяет нам такие возможности, как сравнение товаров. Все знают что это, когда сравниваются характеристики, модели и т.д. Выглядит все это следующим образом:

Размер изображения в списке заметок - oc предлагает такую функцию, как "заметки". Любой зарегистрированный пользователь имеет возможность добавить товар в "заметки". сделано это для того, что бы товар оставался у пользователя на виду, и в случае чего - он мог быстренько к нему вернутся. Так вот, в данном разделе мы указываем размер изображения товара в этом списке "заметок".
Размер изображений товаров в корзине - после того, как пользователь прошелся по сайту и нашел нужные ему товары, добавил в корзину и вот он решил все оплатить. Переходит в свою корзину, и видит список заказных товаров с изображением этих товаров. В данном разделе мы указываем размеры этих самых изображений в списке товаров, которые по умолчанию стоят 80х80 пикселей. Кстати, выглядит это все вот так:

Итак, на этот раз все. Всем спасибо за внимание, читайте мои небольшие инструкции по чаще!

Как мы уже знаем, а те кто не знает, сейчас будут проинформированы 🙂 , начиная с версии opencart 2.2* в CMS появился новый тип опций “image”, который позволяет добавлять картинку к каждой опции. И вот недавно мне задали вопрос – “Как сделать так чтобы при выборе опции данного типа, изображение товара заменялось на изображение опции?”. Не долго размышляя, я начал искать в google, но к моему удивлению ничего похожего не нашел. По этой причине пришлось все делать самостоятельно. Вот об это я и будет данная статья.

Первое, что нужно сделать – это добавить новую опцию с типом “image”. Заходим в административную часть своего сайта в раздел “Каталог”/”Опции” и жмем “Добавить” .

Заполняем все поля и добавляем каждой опции свою картинку (Рис 1.)

Как мы видим, на странице появилась возможность выбрать нашу опцию и возле каждого значения вывелось изображение, которое мы добавили раннее. Это довольно удобно. Например каждая опция – это товар в разном цвете и таким образом, покупатель может увидеть например какой вид будет иметь товар о выбранном им цвете. Но есть один недостаток, изображение возле опции, слишком маленькое.

Давайте сделаем так, что бы при выборе опции, главная картинка товара, заменялась на изображение опции.

Создаем модель в которой будем получать изображение опции в исходном размере по id опции.

Создаем файл smoption.php в папке корневая_папка_сайта/catalog/model/module/smoption.php

с текстом:

2. Создаем контроллер который будет обрабатывать все данные

Создаем файл smoption.php в папке корневая_папка_сайт/catalog/controller/module/smoption.php

и добавим туда код:

3. Пишем скрипт который будет, при клике по опции, заменят изображение

Идем в папку корневая_папка_сайт/catalog/view/theme/напка с названием вашей темы/template/product/product.tpl

Ищем код:

и пере ним вставляем:

$(".form-group label img").click(function(){ option_id = (parseInt($(this).prev().attr("name").replace(/[^0-9]*/g, ""),10)); option_val_id =$(this).prev().val();

$.ajax({ url:"index.php?route=module/smoption/GetImage", type: "post", data: "option_id="+option_id+"&option_val_id="+option_val_id, dataType: "json", success:function(json){ popup = json.popup; thumb = json.thumb; $(".thumbnails .thumbnail").first().attr("href",popup) $(".thumbnails img").first().attr("src",thumb) } }); });

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