Добавляем изображение к опции типу radio и checkbox
Как добавить картинку к радио или чекбоксу опции в OpenCart
Создание, разработка, изготовление сайтов | WEB-STYDIA.COM

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

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

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

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

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

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

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

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

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

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




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

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

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

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

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

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

Вас также может заинтересовать

Есть один комментарий

  •   22.06.2018 в 16:09

    Great post. I was checking continuously this blog and I’m impressed! Extremely helpful info specially the last phase :) I handle such info much. I was looking for this particular information for a long time. Thanks and good luck.

    Ответить

Оставить комментарий

Пожалуйста, введите Ваше имя. Пожалуйста, введите действительный адрес электронной почты. Пожалуйста, введите сообщение.