Cara membuat gambar produk Zoom di halaman kategori Opencart

Discussion in 'OpenCart' started by Fahmi, Feb 10, 2013.

  1. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    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 ) :
    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 )
    [​IMG]

    3. Lalu buka folder tema default kamu dan buat folder js ( lihat gambar )
    [​IMG]

    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.
     
  2. misterius

    misterius Member

    Joined:
    Feb 5, 2013
    Messages:
    267
    Likes Received:
    22
    Trophy Points:
    18
    Google+:
    luamayn bagus. semoga

    luamayn bagus. semoga berhasil ya ndan...
     
  3. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    bloggerblogspot wrote:

    bingung karena belum cobaa,, coba deh pasti ketagihan ntar *help*
     
  4. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    khanza wrote:

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

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    acmilan777 wrote:

    bisa koq ,, nama theme nya apa? situsnya mana? apa masih di localhost? sy pasti bantu :)
     
  6. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    acmilan777 wrote:

    coba minta link livesite nya :)
     
  7. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    localhost?

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

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    acmilan777 wrote:

    rubah ini

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

    nama folder themenya fancycart kan?
     
  9. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    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.
     
  10. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    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"
    
     
  11. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    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
     
  12. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    acmilan777, sy hanya

    acmilan777, sy hanya membantumu memasangkan di category.tpl yg punyamu itu yaah , kamu bisa lihat di tutorial sy lebih lengkapnya , berikut :
    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; ?>
    
     
  13. AhmadWafa

    AhmadWafa Member

    Joined:
    Oct 2, 2013
    Messages:
    867
    Likes Received:
    16
    Trophy Points:
    18
    Google+:
    Saya masih butuh banyak

    Saya masih butuh banyak belajar untuk menggunakan hosting sendiri *dash1*
     
Loading...
Similar Threads - Cara membuat gambar
  1. Fahmi
    Replies:
    14
    Views:
    7,342

Share This Page