Opencart (ocStore) 1.5x – просмотр изображения товара в сплывающем окне в категории и модулях

Реализовать просмотр больших  изображений в Opencart (ocStore) в каталоге и модулях в всплывающем (модальном) окне, что выводят товары можно с помощью модулей. Данная инструкция раскажет как реализовать данный функционал вручную, правкой кода. Было перепробовано множество модулей разной степени “кривости”, “недоделаности” и замусорености кода разнообназными “бейсенкодами” и в итоге самым оптимальным и простым вариантом оказался ручной способ реализации быстрого просмотра картинок в каталоге Opencart с помощью штатного colorbox, который уже присутствует в движке (по принципу просмотра большого изображения товара во всплывающем окне на странице товара).

Просмотр больших  изображений в модальном окне в Opencart (ocStore) в каталоге

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

/catalog/controller/product/category.php

/catalog/view/theme/ваша_тема/template/product/category.tpl

В category.php добавляем строчку

сразу после:

в функции $this->data[‘products’][] = array(

В файле category.tpl заменяем стандартный вывод превью товаров, для этого строку:

меняем на:

Теперь нужно реализовать вызов colorbox на всех страницах сайта (по-умолчанию функция работает только на странице товара). Для этого в файл

/catalog/view/theme/default/template/common/header.tpl

после

добавляем

и в файле

/catalog/view/theme/default/template/common/footer.tpl

перед закрывающимся тегом </body>

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

opencart быстрый просмотр изображения товара в каталоге и модулях

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

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

Файлы контроллеров находятся в папке:

/catalog/controller/module/

это файлы: bestseller.php, featured.php, latest.php, special.php

И файлы шаблонов вывода в папке:

/catalog/view/theme/default/template/module/

соответственно: bestseller.tpl, featured.tpl, latest.tpl, special.tpl

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

Итак в файлах контроллера добавляем строку:

после

В tpl файлах вывода заменяем:

на

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

 

*Большое изображение – имеется ввиду размеры выставлены в настройках магазина в разделе “Изображения” пункт “Размер большого изображения товара” (та же картинка что показывается в карточке товара при нажатии на основное\дополнительные изображения)

 

Таже можно дополнить функционал воспользовавшись советами из материалов про Адаптивный colorbox и  реализовать Просмотр оригиналов фото.

2 Comments

  1. Здравствуйте! Помогите мне пожалуйста! Мне нужно сделать фото в карточке товара некликабельной. Сейчас при нажатие на фото. посетитель переходить на страницу большого фото, а мне надо сделать, чтобы при нажатии ничего не происходило. Увеличении фото должно быть как сейчас. Заранее спасибо! Пример карточки https://pypsshop.cn.ua/chelovechki/chelovechek-dlya-novorozhdennogo-pechenka-gol-bayka-koz.html

    1. working-out

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *