Перейти к содержанию
  • В связи с блокировкой банка QIWI оплата через сайт не возможна.
    Для оплаты и получения дополнений просьба писать в личные сообщения
    Admin*у
    После оплаты Вам так же будет доступно скачивание дополнений и обновлений на данном форуме

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


Рекомендуемые сообщения

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

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

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

optionimage1.jpg

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

optionimage2.jpg

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

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

Создаем модель в которой будем получать изображение опции в исходном размере по 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>

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

Ссылка на комментарий

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...