Модуль "Динамические изображения опций" для Opencart/Ocstore 3.0.x и 2.3.x. Картинки в опциях в opencart

Как добавить картинку к радио или чекбоксу опции в OpenCart

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

Я думаю вам уже известно что в опциях интернет магазина на базе opencart к каждому значению есть возможность добавить картинку, но отображается она только с типом опции ("Изображение"). Сегодня же мы рассмотрим как сделать так, чтобы изображение отображалось и с другими типами опций, в данном случае мы будем выводить картинки для типов опции radio (переключатель) и checkbox (флажок).

Как и в большинстве случаев для того чтобы выполнить данную задачу нужно немного изменять код интернет магазина, в данном случае вам нужно внести изменения всего только в один единственный файл вашего шаблона, а именно в файл который отвечает за карточку товара /catalog/view/theme/default/template/product/product.tpl.

Как все выглядит можно посмотреть на фото ниже, кликните для увеличения.

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

<?php foreach ($option['option_value'] as $option_value) { ?> <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />

<?php foreach ($option['option_value'] as $option_value) { ?>

<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />

И между этими двумя строками добавляем следующий код который и выведет картинку опции:

</label>

Вот собственно и все, теперь картинка отобразится с типом опции radio. Для типа опции checkbox делаем все так же по аналогии, ищем вывод опции checkbox то есть такие две строки:

<?php foreach ($option['option_value'] as $option_value) { ?> <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" />

<?php foreach ($option['option_value'] as $option_value) { ?>

<input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" />

и между этими строками добавляем вывод изображения:

</label>

Все больше ничего вам делать не нужно, ну разве что обработать все это красивыми CSS стилями для того чтоб все красиво смотрелось и отображалось.

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

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

Для того чтоб сделать всплывающее окно картинки опции в полный размер вам нужно в том же файле product.tpl вместо кода:

</label>

добавить другой код а именно:

<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"> <a href="<?php echo $option_value['options_popups']; ?>" title="<?php echo $option_value['name']; ?>" rel="colorbox"> <img align="middle" src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name']; ?>" /> </a> </label>

<a href="<?php echo $option_value['options_popups']; ?>" title="<?php echo $option_value['name']; ?>" rel="colorbox">

</a>

</label>

А так же потребуется внести изменения в контролер файл /catalog/controller/product/product.php, в нем находим строку:

'product_option_value_id' => $option_value['product_option_value_id'],

и после нее добавляем следующий код:

'options_popups' => $this->model_tool_image->resize($option_value['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),

Вот собственно и все. Буду рад если статья будет кому то полезной. Удачи вам.

web-stydia.com

Изображения в опциях OpenCart (ОпенКарт) и ocStore

Совместимость

OpenCart 2.1, OpenCart 2.3, OCStore 2.1, OCStore 2.3, Opencart.pro 2.1, Opencart.pro 2.3

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

- Не изменяет системные файлы.Обновления- функция подмены значения опции в карточке товара на изображение из опции Скриншот- картинка выбранной опции отображается в корзине Скриншот- картинка выбранной опции отображается в заказе в аккаунте покупателя Скриншот- картинка выбранной опции отображается в заказе в админке Скриншот

- добавлено вывод опций в категории (опционально) - возможно добавление вывод в любой из модулей (новинки, рекомендованные и т.д.)Установка через модификатор в админпанеле.

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

Лицензирование модуля- приобретая модуль вы получаете право его использования на одном публичном домене ( одна покупка - один домен) - использование на локальных серверах не ограничивается - Дополнение является объектом авторского права и принадлежит его создателю - Вы не можете передавать, продавать, распространять, обмениваться и сдавать в аренду какую-либо часть дополнения - Вы не можете размещать дополнение на других сайтах, чтобы оно было доступно для скачивания

Адаптация под ваш шаблон за допоплату - от 300 р. в зависимости от сложности шаблона. Добавление вывода в модули (новинки, рекомендованные и т.д.) 200 р. за модуль.

Вместе дешевле !!!

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

Основное
Способ распространения	Платно
Совместимость	OpenCart 2.1, OpenCart 2.3, OCStore 2.1, OCStore 2.3, Opencart.pro 2.1, Opencart.pro 2.3
VQmod	Нет
Ocmod	Да
Статистика
В первый раз файл добавлен	28.03.2017
Последнее изменение	11.09.2017
Просмотров	4101
Покупок	15

Файлы будут доступны после покупки

liveopencart.ru

Opencart 2.x - изображения опций PRO 2 | Модули, Шаблоны, Движки

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

Основные функции и особенности модуля:

добавлять изображения для опций типов: "Список", "Переключатель", "Флажок" и "Изображение"
добавлять по несколько изображений каждого значения опции
менять основное изображение при выборе опции (опционально)
менять основное изображение товара при наведении курсора мыши на любое из дополнительных изображений (опционально)
показывать изображения опций в списке дополнительных изображений товар (опционально)
оставлять в списке дополнительных изображений товара, только изображения соответствующим выбранным опциям (опционально)
заменять стандартные иконки опции индивидуальными, используется первое изображение опции (опционально)

показывать изображения выбранной опции непосредственно под поле выбора опции (опционально)
показывать изображения выбранных опций в корзине (опционально)
импортировать и экспортировать изображения опций, файл формата XLS (используется библиотека PHPExcel

Большая часть функция модуля может быть включена или выключена на странице модуля, или индивидуально для отдельной опции или товараДля работы модуля требуется vQmod 2.5.1 или вышеНесовместим с модулем MagicZoomPlus и шаблоном BurnEngine.

Совместимость: OpenCart 2.0-2.3. OcStore 2.1. Шаблоны: Watches Shop, Minimal Multi Purpose, Pavilion (BurnEngine), Pav Styleshop, Magazin, Flooring, Leather, UP!, GoShop, shop-store, Fastor, Shine, Flooring, Leather, UP!, GoShop, shop-store, Fastor, Shine, Sebian, Maxstore, VIVA, Cycling Equipment, Greek, Optimal, Marketshop, Pav Sportshop, Kids Market, Petsyshop, Optima, Allure, Eyewear, AudioGear, Claudine, Comohos, Pavilion, Pav Megashop, Eagency, Lexus SuperStore, CosyOne,Moneymaker2, Huge, R.Gen, BASKY, Handbags, Fashion Store, Pavilion minimal, Revolution, Aspire, Coolbaby,Furniture Tool & Hardware, Project-Store, Shoppica (BurnEngine), Welldone, FAB!SH.Внимание - это версия для Opencart / Ocstore 2.* Для Opencart / OcStore 1.5.* используйте Изображения опций PROДемо админки: http://19th29th.ru/poip_2_demo/admin/логин/пароль: demo/demo

lowenet.biz

Модуль "Динамические изображения опций" для Opencart/Ocstore 3.0.x и 2.3.x

Совместимость

OpenCart 2.3, OpenCart 3.0, OCStore 2.3

Модуль "Динамические изображения опций" для Opencart/Ocstore 3.0.x и 2.3.x ОПИСАНИЕ Модуль позволяет задавать конкретные картинки для опций товара прямо в настройках самого товара напротив задаваемой опции и осуществлять замену основного и дополнительных изображений товара при выборе опции товара в Карточке товара. Это, например, когда необходимо показать клиенту как выглядит товар с той, или иной выбранной опцией (например Цвет). Замена картинки и его дополнительных картинок будет происходить как при выборе checkbox, Radio, так Select опций автоматически при выборе опций.

ДЕМО

Посмотреть работу модуляПосмотреть работу админки (demo/demo)

Адаптация под требуемый шаблон (в случае, если код отличается от дефолтовского) происходит путем исправления файла dop.tpl (или для 3.0 - dop.twig) файла (там все наглядно структурировано и понятно даже ля начинающего программиста - старался упростить).

Адаптация под шаблон равна 350 руб

Основное
Способ распространения	Платно
Совместимость	OpenCart 2.3, OpenCart 3.0, OCStore 2.3
VQmod	Нет
Ocmod	Да
Статистика
В первый раз файл добавлен	29.05.2018
Последнее изменение	20.06.2018
Просмотров	809
Покупок	6

Файлы будут доступны после покупки

liveopencart.ru

OpenCart — как сделать всплывающие изображения в опциях товаров | Модули, Шаблоны, Движки

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

Решение этого вопроса пришло в виде модуля «Всплывающие изображения в опциях товаров 1.0.0″. Модуль в два счета сделал, то, что и требовалось: при нажатии на картинку всплывало окно большого размера для просмотра рисунка в деталях, при этом радиокнопка не задействовалась, так что покупатель не мог выбрать цвет ошибочно.

Плюс данного модуля в том, что он сделан на основе vQmod, поэтому в оригинальные файлы магазина изменения не вносятся, ничего не перезаписывается и не меняется. Если модуль не удовлетворит запросы, его легко удалить, не перекапывая кучу папок и файлов магазина.

Модуль на данный момент бесплатен и имеет две версии:

ocStore v1.5.1.3 + vQmod v2.1.6 (Если используется Fancybox)ocStore v1.5.3.1 + vQmod v2.1.6 (Если используется Colorbox)

Сразу скажу, что в моем случае, при магазине версии 1.5.3.1, использовался Fancybox вместо Colorbox, по этой причине и модуль я использовала именно под Fancybox — это важная деталь, так как большую роль играет не версия магазина, а модуль отвечающий за показ изображений.

Установка модуля проста и не вызовет никаких трудностей. Подробное описание установки находится в архиве с модулем.

lowenet.biz