Opencart 2.x Modullerde Roll Over Modifikasyon Dersimiz

[By_Surmeneli]

Herkese merhaba bugün sizlere js kullanmadan modullerdeki ürün resimlerine rollover modifikasyonunu anlatacağım. Bu modifikasyonun amacı ürün resmi üzerine mouse ile gelindiğinde o resme ait veritabanındaki kayıtlı i>ikinci resim gösterilmesini sağlamaktır. Misal müşteri bir giyim sitesine geldi kazak resmin üzerine mouse ile geldiğin o resme ait kazağın farklı açıdan çekilmiş resmini göstere bilirsiniz. Dersimize başlıyoruz.

Dosyazmızı açalım : catalog/controller/module
featured.php

bulalım :

if (($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {

Bir üstsatırına ekleyelim :

$images = $this->model_catalog_product->getProductImages($product_info['product_id']);

if(isset($images[0]['image']) && !empty($images[0]['image'])){
$images =$images[0]['image'];
}

Aynı Dosyada Bulalım :

'thumb' => $image,

Bi alt satırına Ekleyelim :

'thumb_swap' => $this->model_tool_image->resize($images, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height')),

Dosyamızı açalım : catalog/view/theme/seninteman/template/module/

featured.tpl

Bulalım :

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>

Değiştirelim :

<?php if ($product['thumb_swap']) { ?>
<div class="image"><a href="<?php echo $product['href']; ?>"><img onmouseout="this.src='<?php echo $product['thumb']; ?>'" onmousemove="this.src='<?php echo $product['thumb_swap']; ?>'" src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
<?php } else {?>
<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
<?php } ?>

İşlemimiz Bu kadardır.

[video=dailymotion] https://www.dailymotion.com/video/x4pmlax[/video]​

Kaynak : e-ticaretdersleri