Post by gangsar.swapurba » Wed Mar 27, 2013 10:08 am

Mohon maaf sebelumnya kalau bahasa yang digunakan terlalu santai karena memang ini dibuat di waktu senggang saya.

Saya mau share tentang cara pengintegrasian plugin Elevate Zoom http://www.elevateweb.co.uk/image-zoom ke halaman kategori & produk opencart karena kita semua tahu, kalau plugin Cloud Zoom http://www.starplugins.com/cloudzoom itu sebenarnya tidak gratis kalau digunakan untuk tujuan komersial.
Contohnya bisa dilihat di sini :
Image
http://demo.gangsar.swapurba.com/doku/i ... ry&path=20

Image
http://demo.gangsar.swapurba.com/doku/i ... duct_id=40.

Untuk halaman kategori.
1. Controller
Karena yang ingin dimodifikasi adalah halaman kategori, maka controller yang harus diubah adalah catalog/controller/product/category.php.
Pertama, yang kita butuhkan dan belum ada untuk membuat extension ini adalah gambar kategori versi besar ( gambar kategori yang ingin dijadikan versi zoomnya ).
Untuk setiap item kategori yang ada di halaman kategori itu asal muasalnya berasal dari

Code: Select all

$this->data['products'] = array(); //#baris ke 192     
. Dan, gambar thumb yang ada di tiap item kategori itu berasal dari

Code: Select all

'thumb' => $image, //#baris ke 240     
. Nah, sekarang kita tinggal menambahkan gambar yang untuk versi zoomnya seperti ini

Code: Select all

'popup' => $popup, //#baris ke 251     
dan

Code: Select all

if ($result['image']) {
          $popup = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
        } else {
          $popup = false;
        } #baris ke 214. 
 
Dan yang terakhir tambahkan script plugin Elevate Zoomnya. Misalnya di awal tubuh fungsi index.

Code: Select all

$this->document->addScript('catalog/view/javascript/jquery.elevateZoom-2.5.5.min.js');
    
    $this->data['config_image_thumb_width'] = $this->config->get('config_image_thumb_width');
    
    $this->data['config_image_thumb_height'] = $this->config->get('config_image_thumb_height'); #baris ke 4.      
Di sini ada variabel config_image_thumb_width dan config_image_thumb_height yang digunakan untuk mengatur panjang dan lebar window zoomnya.

2. View
File template yang digunakan di halaman kategori adalah catalog/view/theme/default/template/product/category.tpl. Jadi, file yang akan diubah di sini, ya file ini.
Di file ini, yang perlu ditambahkan hanyalah atribut data-zoom-image di element img item kategori tersebut berada dengan cara menambahkan kode seperti ini

Code: Select all

data-zoom-image="<?php echo $product['popup']; ?>"
di baris ke 73.
Lalu yang terakhir tinggal menambahkan beberapa baris kode javascript untuk mengaktifkan plugin Elevate Zoomnya di bagian akhir file.

Code: Select all

<script>
  $(".image img").elevateZoom({
    cursor: 'pointer',
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 500,
    lensFadeIn: 500,
    lensFadeOut: 500,
    zoomWindowOffetx: 25,
    zoomWindowOffety: -30,
    borderSize: 1,
    borderColour:'#E7E7E7',
    zoomWindowWidth: <?php echo $config_image_thumb_width ?>,
    zoomWindowHeight: <?php echo $config_image_thumb_height ?>,
    lensBorderSize: 0
  }); 
</script> #baris ke 201.
Untuk halaman produk.
1. Controller
Sama seperti di controller di halaman kategori sebelumnya, kita membutuhkan beberapa gambar yang dibutuhkan untuk mengisi sebagai thumbnail gambar item. Di baris ke 307 tambahkan kode sebagai berikut:

Code: Select all

if ($product_info['image']) {
        $this->data['thumb_kecil'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'));
      } else {
        $this->data['thumb_kecil'] = '';
      } 
dan buat juga gambar untuk thumbnail ukuran sedangnya untuk tiap-tiap gambar tambahannya dengan cara menambahkan

Code: Select all

'thumb_sedang' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')) 
, di baris ke 323.
Agar gambar utamanya dapat dimasukkan ke dalam area gambar tambahan di halaman produknya, kita tambahkan gambar ukuran popup, thumbnail kecil, dan thumbnail sedangnya ke dalam $this->data['images']. Lebih bagus lagi ditambahkannya di posisi awal

Code: Select all

$main_image = array('popup' => $this->data['popup'], 
                          'thumb_sedang' => $this->data['thumb'],
                          'thumb' => $this->data['thumb_kecil']
                          );

      array_unshift($this->data['images'], $main_image);. 
Dan yang terakhir, sama seperti di controller kategori sebelumya, tambahkan script plugin Elevate Zoom, misalnya, di awal tubuh fungsi index.

Code: Select all

$this->document->addScript('catalog/view/javascript/jquery.elevateZoom-2.5.5.min.js'); 
2. View
Hampir sama seperti di modifikasian di file template yang digunakan di halaman kategori sebelumnya, selain menambahkan data-zoom-image di element img yang dijadikan gambar produknya, tambahkan pula id pada div yang membungkus gambar tambahannya yang nanti akan digunakan untuk membentuk gallery kepada plugin Elevate Zoomnya. Tambahkan

Code: Select all

id="img_01"  data-zoom-image="<?php echo $popup; ?>"
setelah

Code: Select all

src="<?php echo $thumb; ?>"
di elemen img gambar utamanya dan tambahkan

Code: Select all

data-image="<?php echo $image['thumb_sedang']; ?>" data-zoom-image="<?php echo $image['popup'];
dan ubah pula nilai href menjadi

Code: Select all

javascript:void(0); 
di elemen a yang menjadi parent elemen img gambar tambahannya.
Yang terakhir adalah menambahkan beberapa baris untuk mengaktifkan plugin Elevate Zoomnya di bagian bawah file template.

Code: Select all

<script>
  $("#img_01").elevateZoom({
    gallery:'gallery_01', 
    galleryActiveClass: 'active',
    cursor: 'pointer',
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 500,
    lensFadeIn: 500,
    lensFadeOut: 500,
    zoomWindowOffetx: 25,
    zoomWindowOffety: -5.5,
    borderSize: 1,
    borderColour:'#E7E7E7'
  }); 
  
  $("#img_01").bind("click", function(e) {  
    var ez =   $('#img_01').data('elevateZoom'); 
    ez.closeAll();
  });
</script> #baris ke 474.
Sekarang waktunya melihat hasil kerja kita ! Silahkan ditest di browser apakah di halaman kategori dan produknya sudah muncul zoom gambarnya ?

File2nya bisa didownload di sini: http://uploads.gangsar.swapurba.com/fre ... t_zoom.zip

Blog Manager 2 - The Only Advanced Blog Extension for OpenCart 2.0 has coming!!!
Image


Blog Manager - The Only Advanced Blog Extension for OpenCart
Image


OpenCart Tips and Tutorials
Image


User avatar
Active Member

Posts

Joined
Tue Mar 20, 2012 8:39 am
Location - Indonesia

Post by tulip_craft » Wed Mar 27, 2013 4:48 pm

mantap om..

All about Crochet and Knitting, a Handicraft Store -> http://tulip-craft.com


User avatar
New member

Posts

Joined
Tue Dec 04, 2012 5:54 pm

Post by dunks » Wed Mar 27, 2013 5:40 pm

saat dipindah list dan grid gk jalan mas brey :D

Ingat Gadget, Ingat DroidLime https://www.droidlime.com/


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

User avatar
Active Member

Posts

Joined
Tue Mar 20, 2012 8:39 am
Location - Indonesia

Post by dunks » Fri Mar 29, 2013 6:17 pm

gangsar.swapurba wrote:sudah dibetulin, om. thanks. mohon koreksinya takut masih ada yang kurang lagi.
sipp mantap mas brey,, 1 lagi nih,, sebaiknya gambar kategori yg samping deskripsi kategori mending gk usah pakai zoom :) dan #cboxTitle di product page bagusan text-align left,, nanti ane pake ah..

Ingat Gadget, Ingat DroidLime https://www.droidlime.com/


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

Post by dunks » Sat Mar 30, 2013 12:36 am

aah satu lagi mas brey ,, untuk vqmod nya jgn ke default aja buat tpl nya, contoh:

Code: Select all

<file name="catalog/view/theme/*/template/product/product.tpl">
biar bisa buat semua template ;)

Ingat Gadget, Ingat DroidLime https://www.droidlime.com/


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

User avatar
Active Member

Posts

Joined
Tue Mar 20, 2012 8:39 am
Location - Indonesia

Post by goris » Mon May 20, 2013 9:38 pm

maaf om, mau tanya;

kalau code pada controller produk :

$main_image = array('popup' => $this->data['popup'],
'thumb_sedang' => $this->data['thumb'],
'thumb' => $this->data['thumb_kecil']
);

array_unshift($this->data['images'], $main_image);.

itu ditaruh di baris ke berapa yah ?

Newbie

Posts

Joined
Mon May 20, 2013 9:27 pm

Post by goris » Tue May 21, 2013 3:05 pm

maaf om, mau tanya;

kalau code pada controller produk :

$main_image = array('popup' => $this->data['popup'],
'thumb_sedang' => $this->data['thumb'],
'thumb' => $this->data['thumb_kecil']
);

array_unshift($this->data['images'], $main_image);.

itu ditaruh di baris ke berapa yah ?
SOLVED ;D
maaf mastah, sudah terpecahkan. :)

sekarang yang jadi pertannyaan , kenapa kalau pas sy klik image nya untuk di thumbnail muncul pesan error :

1. pakai browser mozilla firefox :
muncul pesan error : Request unsuccessful: [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/toko/catalog/view/java ... 7.1.min.js :: .send :: line 4" data: no]

Image

Error di mozilla firefox

2. pakai browser google chrome :
muncul pesan error : Request unsuccessful: Error: NETWORK_ERR: XMLHttpRequest Exception 101

Image

Error di google chrome
Mohon bantuan nya y mastah :)

Newbie

Posts

Joined
Mon May 20, 2013 9:27 pm
Who is online

Users browsing this forum: No registered users and 7 guests