Замена Изображения товара на картинку опции

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

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

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

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

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

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

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

Создаем файл smoption.php в папке корневая_папка_сайта/catalog/model/module/smoption.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;
}
}
?>

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

Создаем файл smoption.php в папке корневая_папка_сайт/catalog/controller/module/smoption.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));

}
}
?>

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

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

Ищем код:

<?php echo $footer; ?>

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

<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>

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