Cara membuat gambar produk Zoom di halaman kategori Opencart

Zoom di halaman produk sudah banyak yang membuatnya, sekarang saya akan mencoba memasang zoom gambar produk di halaman kategori Opencart. Silahkan lihat demo nya terlebih dahulu :
Demo

Sekarang bagaimana langkah-langkah nya ? ( note: hanya untuk tema default dan opencart versi 1.5.4.1 ) :

Spoiler

1. Download plugin jquery berikut http://www.jacklmoore.com/zoom .

2. Rubah ukuran gambar untuk kategori kamu di admin > system > setting > pada tab image ( lihat gambar )


3. Lalu buka folder tema default kamu dan buat folder js ( lihat gambar )


4. Extract dan copy file extensi .js yang kamu download tadi ke tema default folder "js" di atas

5. Buka file pada folder template > product > category.tpl dengan menggunakan text editor.

6. Cari disekitar line 68 atau tepatnya di atas

Code:

<div class="product-compare">

dan pasang kode berikut :

Code:

<script src='catalog/view/theme/default/js/jquery.zoom-min.js'> </script> 
<script> $(document).ready(function(){ $('.image').zoom(); }); </script>

lalu cari

Code:

<div class="image"><a href="<?php echo $product['href']; ?>"><img

dan tambahkan [ width="150px" height="150px" ] di dalam nya contoh :

Code:

<img width="150px" height="150px"

untuk membuat zoom tetap jalan meski berganti list view atau grid, tambahkan pada line 150 atau tepat nya diatas $('.display').html dan pasang kode berikut :

Code:

$(document).ready(function(){ $('.image').zoom(); });

dan juga pada line 187 atau tepatnya di atas $('.display').html lalu pasang juga kode seperti di atas.

7. Simpan dan test kategori opencart anda.

Berikut tutorial untuk menambah fitur zoom gambar produk pada halaman kategori Opencart.
Source : http://www.mfahmi.net/blog/cara-buat-produk-zoom-dikategori-opencart.html

Semoga bermanfaat. dan jangan lupa tinggalkan komentar.

 

luamayn bagus. semoga

luamayn bagus. semoga berhasil ya ndan...

 

bloggerblogspot wrote:

bingung karena belum cobaa,, coba deh pasti ketagihan ntar

 

khanza wrote:

harusnya sih bisa diterapkan,, coba pelajari sistem bekerjanya itu plugin jquery.. pasti bisa sih

 

acmilan777 wrote:

bisa koq ,, nama theme nya apa? situsnya mana? apa masih di localhost? sy pasti bantu

 

acmilan777 wrote:

coba minta link livesite nya

 

localhost?

localhost?.. itu udah dicoba belom sendiri.. coba aja duluu sendiri, masih dilocalhost ini,, takut amaat salah

 

acmilan777 wrote:

rubah ini

Code:

<script src='catalog/view/theme/fancycart/js/jquery.zoom-min.js'> </script>

nama folder themenya fancycart kan?

 

baca dulu tutorialnya pelan

baca dulu tutorialnya pelan-pelan ,, karena itu pake theme default scriptnya di folder default , kalo pake custom ya custom folder

Code:

<script src='catalog/view/theme/default/js/jquery.zoom-min.js'> </script>
<script> $(document).ready(function(){ $('.image').zoom(); }); </script>

kata "default" nya dirubah menjadi folder theme kamu.

 

acmilan777 wrote:

pasti ada yg terlewat , nih

lalu cari

Code:

<div class="image"><a href="<?php echo $product['href']; ?>"><img

dan tambahkan [ width="150px" height="150px" ] di dalam nya contoh :

Code:

<img width="150px" height="150px"

 

apaan itu?

mas pakai

Code:

CODE

kalo mau pasang code siforum ini ( tempel isi category.tpl ) , edit dulu itu yaaa
mas kan pakai theme beda, alangkah baiknya dicoba dulu pakai theme default, kalo berhasil baru nanti dipelajari(sesuaikan) ke theme nya (fancycart) kan

 

acmilan777, sy hanya

acmilan777, sy hanya membantumu memasangkan di category.tpl yg punyamu itu yaah , kamu bisa lihat di tutorial sy lebih lengkapnya , berikut :

Spoiler

Code:

<?php echo $header; ?>
<div id="content">
  <div id="notification"></div>
  <?php echo $column_left; ?><?php echo $column_right; ?>

<div id="content_inside"> 
  <?php echo $content_top; ?>
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?>[url=<?php echo $breadcrumb['href']; ?>]<?php echo $breadcrumb['text']; ?>[/url]
    <?php } ?>
  </div>
  <h1><?php echo $heading_title; ?></h1>
  <?php if ($thumb || $description) { ?>
 
    <?php if ($description) { ?>
    <?php echo $description; ?>
    <?php } ?>
  </div>
  <?php } ?>
  <?php if ($categories) { ?>
  <h2><?php echo $text_refine; ?></h2>
  <div class="category-list">
    <?php if (count($categories) <= 5) { ?>
    <ul>
      <?php foreach ($categories as $category) { ?>
      <li>[url=<?php echo $category['href']; ?>]<?php echo $category['name']; ?>[/url]</li>
      <?php } ?>
    </ul>
    <?php } else { ?>
    <?php for ($i = 0; $i < count($categories);) { ?>
    <ul>
      <?php $j = $i + ceil(count($categories) / 4); ?>
      <?php for (; $i < $j; $i++) { ?>
      <?php if (isset($categories[$i])) { ?>
      <li>[url=<?php echo $categories[$i]['href']; ?>]<?php echo $categories[$i]['name']; ?>[/url]</li>
      <?php } ?>
      <?php } ?>
    </ul>
    <?php } ?>
    <?php } ?>
  </div>
  <?php } ?>
  <?php if ($products) { ?>
  <div class="product-filter">
    <div class="display"><b><?php echo $text_display; ?></b>   <a onclick="display('list');" class="list_view_link"><?php echo $text_list; ?></a>   <a onclick="display('grid');" class="grid_view_link_active"><?php echo $text_grid; ?></a></div>
    <div class="product-compare"><a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a></div>
    <div class="limit"><b><?php echo $text_limit; ?></b>
      <select onchange="location = this.value;">
        <?php foreach ($limits as $limits) { ?>
        <?php if ($limits['value'] == $limit) { ?>
        <option value="<?php echo $limits['href']; ?>" selected="selected"><?php echo $limits['text']; ?></option>
        <?php } else { ?>
        <option value="<?php echo $limits['href']; ?>"><?php echo $limits['text']; ?></option>
        <?php } ?>
        <?php } ?>
      </select>
    </div>
    <div class="sort"><b><?php echo $text_sort; ?></b>
      <select onchange="location = this.value;">
        <?php foreach ($sorts as $sorts) { ?>
        <?php if ($sorts['value'] == $sort . '-' . $order) { ?>
        <option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
        <?php } else { ?>
        <option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
        <?php } ?>
        <?php } ?>
      </select>
    </div>
  </div>
  
  
<script src='catalog/view/theme/fancycart/js/jquery.zoom-min.js'> </script>
<script> $(document).ready(function(){ $('.image').zoom(); }); </script> 
 

  <div class="product-grid">
    <?php foreach ($products as $product) { ?><div class="prod_holder"> 
     <div class="prod_holder_inside">
     <?php if ($product['special']) { ?>
<?php echo '<div class="special_promo"></div>'; ?>
<?php } ?>
    
      <?php if ($product['thumb']) { ?>
       
      <div class="image">[url=<?php echo $product['href']; ?>]<img width="150px" height="150px" src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />[/url]</div>
       
      <?php } ?>
      <div class="name">[url=<?php echo $product['href']; ?>]<?php echo $product['name']; ?>[/url]</div>
      <div class="description"><?php echo $product['description']; ?></div>
      <?php if ($product['price']) { ?>
      <div class="price">
        <?php if (!$product['special']) { ?>
        <?php echo $product['price']; ?>
        <?php } else { ?>
        <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
        <?php } ?>
        <?php if ($product['tax']) { ?>
        <br />
        <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
        <?php } ?>
      </div>
      <?php } ?>
      <?php if ($product['rating']) { ?>

      <?php } ?>

      <div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="sm_button" /></div>

      <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div>
      <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div>
     </div>
    </div><?php } ?>
  </div>
  <div class="pagination"><?php echo $pagination; ?></div>
  <?php } ?>
  <?php if (!$categories && !$products) { ?>
  <div class="content"><?php echo $text_empty; ?></div>
  <div class="buttons">
    <div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>
  </div>
  <?php } ?>
  <?php echo $content_bottom; ?>
  </div>
</div>
<script type="text/javascript"> 
$(document).ready(function(){ $('.image').zoom(); });
  
$('.display').html('<b><?php echo $text_display; ?></b> &nbsp;&nbsp;<a onclick="display(\'list\');" class="list_view_link"><?php echo $text_list; ?></a>   <a onclick="display(\'grid\');" class="grid_view_link_active"><?php echo $text_grid; ?></a>');

$.cookie('display', 'list');
} else {
$('.product-list').attr('class', 'product-grid');

$('.product-grid > div.prod_holder > div.prod_holder_inside').each(function(index, element) {
html = '';

var image = $(element).find('.image').html();

if ($(element).children().hasClass("special_promo")){
html += '<div class="special_promo"></div>'
};

if (image != null) {
html += '<div class="image">' + image + '</div>';
}

html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';

var price = $(element).find('.price').html();

if (price != null) {
html += '<div class="price">' + price  + '</div>';
}

var rating = $(element).find('.rating').html();

if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}

html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';

$(element).html(html);
});
 
$(document).ready(function(){ $('.image').zoom(); }); 
 
$('.display').html('<b><?php echo $text_display; ?></b> &nbsp;&nbsp;<a onclick="display(\'list\');" class="list_view_link_active"><?php echo $text_list; ?></a>   <a onclick="display(\'grid\');" class="grid_view_link"><?php echo $text_grid; ?></a>');

$.cookie('display', 'grid');
}
}

view = $.cookie('display');

if (view) {
display(view);
} else {
display('list');
}
//--></script>
<?php echo $footer; ?>

 

Saya masih butuh banyak

Saya masih butuh banyak belajar untuk menggunakan hosting sendiri *dash1*