Opencart 3.x Modullerde Ek Resim Gösterimi

  • Konbuyu başlatan e-ticaretdersleri
  • Başlangıç tarihi
e-ticaretdersleri

e-ticaretdersleri

Üye
17 Ağu 2017
17
18
37
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 :

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

Ekli dosyalar

  • gereklijsvscssdosyalari.rar
    19 KB · Görüntüleme: 6