Доброй ночи, пытался интегрировать на движок часть верстки связанной с выводом изображений на карточке товара, в моем случае используется скрипт "лупы", и для правильной работы скрипта используется 3 изображения:
thumb
small
large
В случае с движком, это переменные:
thumb
popup
и добавленная мной для превьюшек small
Вот так вот выглядит код верстки:
<div class="product-view__gallery">
<div class="product-view__gallery__main">
<img id="product-view__gallery__main__img" src="images/inline/small/iphone--1.jpg" width="300" height="300" alt="" data-zoom-image="images/inline/large/iphone--1.jpg" class="product-view__gallery__main__img">
</div>
<div id="product-view__gallery__thumbs" class="product-view__gallery__thumbs">
<div class="product-view__gallery__thumbs__item">
<a href="product.html" data-image="images/inline/small/iphone--1.jpg" data-zoom-image="images/inline/large/iphone--1.jpg" class="product-view__gallery__thumbs__item__link">
<img src="images/inline/thumb/iphone--1.jpg" width="50" height="96" alt="" class="product-view__gallery__thumbs__item__link__img">
</a>
</div>
<div class="product-view__gallery__thumbs__item">
<a href="product.html" data-image="images/inline/small/iphone--2.jpg" data-zoom-image="images/inline/large/iphone--2.jpg" class="product-view__gallery__thumbs__item__link">
<img src="images/inline/thumb/iphone--2.jpg" width="14" height="100" alt="" class="product-view__gallery__thumbs__item__link__img">
</a>
</div>
<div class="product-view__gallery__thumbs__item">
<a href="product.html" data-image="images/inline/small/iphone--2.jpg" data-zoom-image="images/inline/large/iphone--2.jpg" class="product-view__gallery__thumbs__item__link">
<img src="images/inline/thumb/iphone--2.jpg" width="14" height="100" alt="" class="product-view__gallery__thumbs__item__link__img">
</a>
</div>
</div>
<i class="icon--arrow-left product-view__gallery__arrow"></i><i class="icon--arrow-right product-view__gallery__arrow"></i>
</div>
Вот так вот в шаблоне у меня:
<?php if ($thumb || $images) { ?>
<div class="product-view__gallery">
<?php if ($thumb) { ?>
<div class="product-view__gallery__main">
<img id="product-view__gallery__main__img" src="<?php echo $thumb; ?>" width="300" height="300" alt="" data-zoom-image="<?php echo $popup; ?>" class="product-view__gallery__main__img">
</div>
<?php } ?>
<?php if ($images) { ?>
<div id="product-view__gallery__thumbs" class="product-view__gallery__thumbs">
<?php foreach ($images as $image) { ?>
<div class="product-view__gallery__thumbs__item">
<a href="product.html" data-image="<?php echo $image['small']; ?>" data-zoom-image="<?php echo $image['popup']; ?>" class="product-view__gallery__thumbs__item__link">
<img src="<?php echo $image['thumb']; ?>" width="50" height="96" alt="" class="product-view__gallery__thumbs__item__link__img">
</a>
</div>
<?php } ?>
</div>
<i class="icon--arrow-left product-view__gallery__arrow"></i><i class="icon--arrow-right product-view__gallery__arrow"></i>
<?php } ?>
</div>
<?php } ?>
И вот код контроллера в месте решения вопросов по изображениям:
$this->load->model('tool/image');
if ($product_info['image']) {
$this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
} else {
$this->data['popup'] = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
}
if ($product_info['image']) {
$this->data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
$this->document->setOgImage($this->data['thumb']);
} else {
$this->data['thumb'] = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
}
$this->data['images'] = array();
if ($product_info['image']) {
$this->data['images'][] = array(
'popup' => $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),
'small' => $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')),
'thumb' => $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'))
);
}
$results = $this->model_catalog_product->getProductImages($this->request->get['product_id']);
foreach ($results as $result) {
$this->data['images'][] = array(
'popup' => $this->data['popup'] = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),
'small' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')),
'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'))
);
}
И наконец, пример того что у меня получилось сделать. Я добавил еще в списке превьюшек вывод главного изображения туда, чтобы структура и логика сохранилась.
Но, возникла одна неприятность, я заметил что сразу после загрузки страницы, если навести на изображение в обработчике:
<?php if ($thumb) { ?>
<div class="product-view__gallery__main">
<img id="product-view__gallery__main__img" src="<?php echo $thumb; ?>" width="300" height="300" alt="" data-zoom-image="<?php echo $popup; ?>" class="product-view__gallery__main__img">
</div>
<?php } ?>
То через переменную data-zoom-image="<?php echo $popup; ?>" идет почему-то отображение последнего изображения из дополнительных, а не изображение которое главное.
То есть должно идти: /image/cache/data/products/Falcon%20Eye%20FE-D80C-500x500.jpg
А идет почему-то ссылка на отображение пятого полного изображения: /image/cache/data/products/Falcon%20Eye%20FE-D80C-5-500x500.jpg
Вот собственно пример из исходного кода страницы:
<div class="product-view__gallery__main">
<img id="product-view__gallery__main__img" src="/image/cache/data/products/Falcon%20Eye%20FE-D80C-228x228.jpg" alt="" data-zoom-image="/image/cache/data/products/Falcon%20Eye%20FE-D80C-5-500x500.jpg" class="product-view__gallery__main__img" height="300" width="300">
</div>
Подскажите пожалуйста, как решить эту небольшую загвоздку.
Заранее премного благодарен!