Opencart 1.5.x Ürün Detay Owl Carousel Ve Magnify Popup Modifiyesi

Merhaba arkadaşlarsizlere bugün opencart 1.5.x versiyonlarına ait sürümler için ürün detaydaki ana resim ve ek resimleri biliriz normal sürümlerde ana resim altına serpiştirilmiştir.Biz bunu hem owl carousel ve magnify popup entegresini yapacağız. Bu entegrasyon ile ana resim dahil olmak üzere ekresimleri bir düzene alarak tek görünümde swipe olarak resimleri kaydırmalı ve otomatik geçiş +magnif popup efekti ile daha cancanlı bir hale getireceğiz. Modifikasyonu entegre ettikten sonra adminden seçenek kısmından resimlerin boyutlarıyla ir kaç ayar daha yaptıktan sonra sorunsuz çalışacaktır. Lafı uzatmadan kuralım bu eklentimizi.

...::: Videomuz :::...

İndirme link : Buradan

Opencart 1.5.x Ürün Detay Owl Carousel Ve Magnify Popup Modifiyesi Kurulumu Anlatımı

Dosyamızı Açalım : catalog/controller/

product.php

Bulalım :

$this->document->addScript('catalog/view/javascript/jquery/tabs.js');

Alt Satıra Ekleyelim :



$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');

Bulalım :

$this->document->addScript('catalog/view/javascript/jquery/colorbox/jquery.colorbox-min.js');
$this->document->addStyle('catalog/view/javascript/jquery/colorbox/colorbox.css');

Değiştirelim :

$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
$this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');

Dosyamızı Açalım : catalog/view/theme/seninteman/template/product/

product.tpl

Bulalım :



Üst Satıra Ekleyelim :



Bulalım :

Değiştirelim :

Bulalım Ve Silelim :

<script></script>

Bulalım :

$('input[name=\'captcha\']').val('');
}
}
});
});

Alt Satıra Ekleyelim :

$(document).ready(function() {
$('.owl-carousel').magnificPopup({
type:'image',
delegate: 'a',
gallery: {
enabled:true
}
});
});

Bulalım :



Üst Satıra Ekleyelim :

<script></script>

İşlem bu kadar son olarak sitemizden indrmiş olduğunuz arşivdeki catalog klasörünü olduğu gibi sitenizin ana dizine atınız, daha sonra adminden ayarlardan mağaza yönetiminden seçeneklerden resim boyutlarından ekresim boyutlarını 220 x 220 yapınız.

Kaynak : e-ticaretdersleri

Kiroglumarket ellerine sağlık

Hocam temayı mobil hale getirince resimleri parmakla kaydırma olayının adı nedir kaynak varmı.

bu o olay swipe olarakta geçer

turkojen34

1,5.x için paylaşım yaptıysan link ekleyebilirmisin hocam

şuan yok ama hazırlarım. bana tema ve kullandığın popup bileşenini yazarmısın

turkojen34

Pm atayım hocam