Как мы уже знаем, а те кто не знает, сейчас будут проинформированы 🙂 , начиная с версии opencart 2.2* в CMS появился новый тип опций “image”, который позволяет добавлять картинку к каждой опции. И вот недавно мне задали вопрос – “Как сделать так чтобы при выборе опции данного типа, изображение товара заменялось на изображение опции?”. Не долго размышляя, я начал искать в google, но к моему удивлению ничего похожего не нашел. По этой причине пришлось все делать самостоятельно. Вот об это я и будет данная статья.

Первое, что нужно сделать – это добавить новую опцию с типом “image”. Заходим в административную часть своего сайта в раздел “Каталог”/”Опции” и жмем “Добавить”.

Заполняем все поля и добавляем каждой опции свою картинку (Рис 1.)

Рис 1

      Далее добавляем данную опцию на товар, как любую другую. В результате мы должны получить вот такой вид страницы товара (Рис 2)

Рис 2

      Как мы видим, на странице появилась возможность выбрать нашу опцию и возле каждого значения вывелось изображение, которое мы добавили раннее. Это довольно удобно. Например каждая опция  – это товар в разном цвете и таким образом, покупатель может увидеть например какой вид будет иметь товар о выбранном им цвете. Но есть один недостаток, изображение возле опции, слишком маленькое.

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

1. Создаем модель в которой будем получать изображение опции в исходном размере по id опции.

Создаем файл smoption.php в папке корневая_папка_сайта/catalog/model/module/smoption.php

с текстом :

[php]
<?php
class ModelModuleSmoption extends Model {
public function GetImageById($product_option_id, $product_option_value_id) {
$query = $this->db->query(“select * FROM ” . DB_PREFIX . “option_value ov, (SELECT pov.option_value_id FROM ” . DB_PREFIX . “product_option_value pov

WHERE pov.product_option_id like ” . $product_option_id . ” and pov.product_option_value_id like ” . $product_option_value_id.”) t WHERE ov.option_value_id = t.option_value_id”) ;

return $query->row;
}
}
?>
[/php]

2.  Создаем контроллер который будет обрабатывать все данные

Создаем файл smoption.php в папке корневая_папка_сайт/catalog/controller/module/smoption.php

и добавим туда код :

[php]

<?php
class ControllerModuleSmoption extends Controller {
public function GetImage() {
$this->load->model(‘module/smoption’);
$this->load->model(‘tool/image’);
//получаем исходное изображение опции
$result = $this->model_module_smoption->GetImageById($this->request->post[‘option_id’],$this->request->post[‘option_val_id’]);
// если изображение есть, то создаем две копии данного изображения с нужными размерами(размеры берутся с настроек магазина)

if($result){
$images = array(
‘popup’ => $this->model_tool_image->resize($result[‘image’], $this->config->get(‘config_image_popup_width’), $this->config->get(‘config_image_popup_height’)),// изображение всплывающее при клике
‘thumb’ => $this->model_tool_image->resize($result[‘image’], $this->config->get(‘config_image_thumb_width’), $this->config->get(‘config_image_thumb_height’)) // главное изображение товара
);
}
$this->response->setOutput(json_encode($images));

}
}
?>

[/php]

3.  Пишем скрипт который будет, при клике по опции, заменят изображение

Идем в папку корневая_папка_сайт/catalog/view/theme/напка с названием вашей темы/template/product/product.tpl

Ищем код:

[php]<?php echo $footer; ?>
[/php]

и пере ним вставляем :

[php]
<script>
$(‘.form-group label img’).click(function(){
option_id = (parseInt($(this).prev().attr(“name”).replace(/[^0-9]*/g, “”),10));
option_val_id =$(this).prev().val();

$.ajax({
url:’index.php?route=module/smoption/GetImage’,
type: ‘post’,
data: ‘option_id=’+option_id+’&option_val_id=’+option_val_id,
dataType: ‘json’,
success:function(json){
popup = json.popup;
thumb = json.thumb;
$(‘.thumbnails .thumbnail’).first().attr(‘href’,popup)
$(‘.thumbnails img’).first().attr(‘src’,thumb)
}

});

});

</script>
[/php]

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

Надеюсь данная статья поможет вам сделать ваш магазин еще лучше.

Всем удачи и хороших продаж )

Скачать готовый модуль можно здесь.