Сьогодні одному з моїх замовників який купив готовий інтернет магазин потрібна була невелика доробка сайту, а саме, ему треба було додати до опції товару з типом radio зображення.
Я думаю вам вже відомо що в опціях інтернет магазину на базі opencart до кожного значення є можливість додати картинку, але відображається вона тільки з типом опції ("Зображення"). Сьогодні ж ми розглянемо як зробити так, щоб картинка відображалася і з іншими типами опцій, в даному випадку ми будемо виводити картинки для типів опції radio (перемикач) і checkbox (прапорець).
Як і в більшості випадків для того щоб виконати це завдання потрібно трохи змінювати код інтернет магазину, в даному випадку вам потрібно внести зміни всього лише в один єдиний файл вашого шаблону, а саме в файл який відповідає за картку товару /catalog/view/theme/default/template/product/product.tpl.
Як все виглядає можна подивитися на фото нижче, клікніть для збільшення.
Загалом приступимо, виведемо картинку значення опції для вищевказаних типів опцій. В першу чергу додаємо картинку до типу опції radio (перемикач), для цього відкриваємо вищевказаний файл і шукаємо в ньому шматок коду який відповідає за виведення даного типу опції а саме нам потрібно знайти два рядки:
|
1 2 |
<?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']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /> |
І між цими двома рядками додаємо наступний код який і виведе картинку опції:
|
1 2 3 |
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"> <img align="middle" style="margin-bottom:4px;" src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /> </label> |
Ось власне і все, тепер картинка відобразиться з типом опції radio. Для типу опції checkbox робимо все так само за аналогією, шукаємо вивід опції checkbox тобто такі два рядки:
|
1 2 |
<?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']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /> |
і між цими рядками додаємо виведення зображення:
|
1 2 3 |
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"> <img align="middle" style="margin-bottom:4px;" src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /> </label> |
Все більше нічого вам робити не потрібно, ну хіба що обробити все це красивими CSS стилями для того щоб все красиво виглядало і відображалося.
Та й не забудьте додати в адмінці в значеннях опцій це саме зображення 
.
Бувають ще випадки коли є бажання зробити так щоб при кліці на зображення опції фото збільшувалася в спливаючому вікні як наприклад збільшується картинка товару при кліці, давайте розглянемо ще й цей варіант і зробимо збільшення картинки опції при кліці на неї.
Для того щоб зробити спливаюче вікно картинки опції в повний розмір вам потрібно в тому ж файлі product.tpl замість коду:
|
1 2 3 |
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"> <img align="middle" class="options-popups" src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name']; ?>" /> </label> |
додати інший код а саме:
|
1 2 3 4 5 |
<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']; ?>" class="colorbox" rel="colorbox"> <img align="middle" class="options-popups" src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name']; ?>" /> </a> </label> |
А також потрібно внести зміни в контролер файл /catalog/controller/product/product.php, в ньому знаходимо рядок:
|
1 |
'product_option_value_id' => $option_value['product_option_value_id'], |
і після нього додаємо наступний код:
|
1 |
'options_popups' => $this->model_tool_image->resize($option_value['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')), |
Ось власне і все. Буду радий якщо стаття буде комусь корисною. Удачі вам.
Немає коментарів
Ви можете залишити коментар першим.