Додаємо зображення до опції типу 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, в ньому знаходимо рядок:

і після нього додаємо наступний код:

Ось власне і все. Буду радий якщо стаття буде комусь корисною. Удачі вам.

Вас також може зацікавити

Немає коментарів

Ви можете залишити коментар першим.

Залишити коментар

Будь ласка, введіть Ваше ім'я. Будь ласка, введіть адресу електронної пошти. Будь ласка, введіть повідомлення.