Herkese merhaba arkadaşlar bu gün sizlere Opencart 3.x versiyonları için geçerl sürümlerde kullandığımız modullerde gösterilen resimlerde tek resim yerine aynı ürün detaydaki gibi ek resimlerini de göstereceğiz. Ürün detaydan farklı olarak modullerde gösterilecek olan resimler swap ve carousel içersinde gösterimi sağlanılacaktır. Tüm responsive tema uyumlu Opencart 3.x sürümlerde sorunsuz çalışmakta ve mobile tablet gibi cihazlarımızda profesyonel bir biçimde görüntülenmektedir. Kurmulumu oldukça basittir arkadaşlar şimdi kuruluma başlayalım.
Kurulum Videosu :
Opencart 3.x Modullerde Ek Resim Gösterimi Kurulumu
Dosyamızı Açalım : catalog/controller/extension/module/
featured.php
Bulalım :
Değiştirelim :
Dosyamızı Açalım : catalog/controller/extension/module/
latest.php, bestseller.php ve special.php
Bulalım :
Değiştirelim :
Dosyamızı Açalım : catalog/view/theme/senin-teman/template/extension/module/
latest.twig, bestseller.twig, special.twig, featured.twig
Bulalım :
Değiştirelim :
İşlem Tamamdır.
Kurulum Videosu :
Opencart 3.x Modullerde Ek Resim Gösterimi Kurulumu
Dosyamızı Açalım : catalog/controller/extension/module/
featured.php
Bulalım :
$data['products'][] = array(
Değiştirelim :
$resimler_data = $this->model_catalog_product->getProductImages($product_info['product_id']);
$images = array();
foreach ($resimler_data as $resim_data) {
$images[] = array(
'popup1' => $this->model_tool_image->resize($resim_data['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_related_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_related_height')),
'thumb1' => $this->model_tool_image->resize($resim_data['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_related_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_related_height'))
);
}
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');
$data['products'][] = array(
'images' => $images,
Dosyamızı Açalım : catalog/controller/extension/module/
latest.php, bestseller.php ve special.php
Bulalım :
$data['products'][] = array(
Değiştirelim :
$resimler_data = $this->model_catalog_product->getProductImages($result['product_id']);
$images = array();
foreach ($resimler_data as $resim_data) {
$images[] = array(
'popup1' => $this->model_tool_image->resize($resim_data['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_related_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_related_height')),
'thumb1' => $this->model_tool_image->resize($resim_data['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_related_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_related_height'))
);
}
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');
$data['products'][] = array(
'images' => $images,
Dosyamızı Açalım : catalog/view/theme/senin-teman/template/extension/module/
latest.twig, bestseller.twig, special.twig, featured.twig
Bulalım :
<div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
Değiştirelim :
<br /> <br /><br /> <br />
<div id="latest{{ product.product_id }}" class="owl-carousel">
{% for images in product.images %}
<div class="item text-center">
{% if product.images %}
<a href="{{ product.href }}"><img src="{{ images.popup1 }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a>
{% else %}
<img src="{{ product.popup1 }}" alt="{{ product.name }}" class="img-responsive" />
{% endif %}
</div>
{% endfor %}
</div>
<script type="text/javascript"><!--
$('#latest{{ product.product_id }}').owlCarousel({
items: 1,
autoPlay: 3000,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>
İşlem Tamamdır.