Wookmark with OpenCart (a'la pinterest)

Wookmark with OpenCart (a'la pinterest)

Hello,
I am creating shop on OpenCart and i want to implement Wookmark plugin on category view. I'm talking about this plugin http://www.wookmark.com/jquery-plugin
As "#myContent li" I set ".product-grid > div" but it didn't work. Grid view in shop is using jquery too so maybe this is problem but I dont have enough experience with jquery (almost zero). Could you help me with that?

Here is site where I want to implelent wookmark: http://www.keepalive.pl/index.php?route=product/category&path=62&limit=100

Here is .tpl of this site where I implement the code:
  1. <?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
  2. <div id="content"><?php echo $content_top; ?>
  3.   <div class="breadcrumb">
  4.     <?php foreach ($breadcrumbs as $breadcrumb) { ?>
  5.     <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
  6.     <?php } ?>
  7.   </div>
  8.   <h1><?php echo $heading_title; ?></h1>
  9.   <?php if ($thumb || $description) { ?>
  10.   <div class="category-info">
  11.     <?php if ($thumb) { ?>
  12.     <div class="image"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" /></div>
  13.     <?php } ?>
  14.     <?php if ($description) { ?>
  15.     <?php echo $description; ?>
  16.     <?php } ?>
  17.   </div>
  18.   <?php } ?>
  19.   <?php if ($categories) { ?>
  20.   <h2><?php echo $text_refine; ?></h2>
  21.   <div class="category-list">
  22.     <?php if (count($categories) <= 5) { ?>
  23.     <ul>
  24.       <?php foreach ($categories as $category) { ?>
  25.       <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
  26.       <?php } ?>
  27.     </ul>
  28.     <?php } else { ?>
  29.     <?php for ($i = 0; $i < count($categories);) { ?>
  30.     <ul>
  31.       <?php $j = $i + ceil(count($categories) / 4); ?>
  32.       <?php for (; $i < $j; $i++) { ?>
  33.       <?php if (isset($categories[$i])) { ?>
  34.       <li><a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a></li>
  35.       <?php } ?>
  36.       <?php } ?>
  37.     </ul>
  38.     <?php } ?>
  39.     <?php } ?>
  40.   </div>
  41.   <?php } ?>
  42.   <?php if ($products) { ?>
  43.   <div class="product-filter">
  44.     <div class="limit"><b><?php echo $text_limit; ?></b>
  45.       <select onchange="location = this.value;">
  46.         <?php foreach ($limits as $limits) { ?>
  47.         <?php if ($limits['value'] == $limit) { ?>
  48.         <option value="<?php echo $limits['href']; ?>" selected="selected"><?php echo $limits['text']; ?></option>
  49.         <?php } else { ?>
  50.         <option value="<?php echo $limits['href']; ?>"><?php echo $limits['text']; ?></option>
  51.         <?php } ?>
  52.         <?php } ?>
  53.       </select>
  54.     </div>
  55.     <div class="sort"><b><?php echo $text_sort; ?></b>
  56.       <select onchange="location = this.value;">
  57.         <?php foreach ($sorts as $sorts) { ?>
  58.         <?php if ($sorts['value'] == $sort . '-' . $order) { ?>
  59.         <option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
  60.         <?php } else { ?>
  61.         <option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
  62.         <?php } ?>
  63.         <?php } ?>
  64.       </select>
  65.     </div>
  66.   </div>
  67.  
  68.   <script type="text/javascript">$('.product-grid > div').wookmark({offset: 2});</script>
  69.  
  70.   <div class="product-list">
  71.     <?php foreach ($products as $product) { ?>
  72.     <div>
  73.       <?php if ($product['thumb']) { ?>
  74.       <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
  75.       <?php } ?>
  76.       <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
  77.       <div class="description"><?php echo $product['description']; ?></div>
  78.       <?php if ($product['price']) { ?>
  79.       <div class="price">
  80.         <?php if (!$product['special']) { ?>
  81.         <?php echo $product['price']; ?>
  82.         <?php } else { ?>
  83.         <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
  84.         <?php } ?>
  85.         <?php if ($product['tax']) { ?>
  86.         <br />
  87.         <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
  88.         <?php } ?>
  89.       </div>
  90.       <?php } ?>
  91.       <?php if ($product['rating']) { ?>
  92.       <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
  93.       <?php } ?>
  94.       <div class="cart">
  95.         <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />
  96.       </div>
  97.       <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div>
  98.      
  99.     </div>
  100.     <?php } ?>
  101.   </div>
  102.   <div class="pagination"><?php echo $pagination; ?></div>
  103.   <?php } ?>
  104.   <?php if (!$categories && !$products) { ?>
  105.   <div class="content"><?php echo $text_empty; ?></div>
  106.   <div class="buttons">
  107.     <div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>
  108.   </div>
  109.   <?php } ?>
  110.   <?php echo $content_bottom; ?></div>
  111. <script type="text/javascript"><!--
  112. function display(view) {
  113.     if (view == 'list') {        $('.product-list').attr('class', 'product-grid');                $('.product-grid > div').each(function(index, element) {            html = '';                        var image = $(element).find('.image').html();                        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>';                                    $(element).html(html);        });                                $('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>');                $.cookie('display', 'grid');
  114.     } else {
  115.         $('.product-list').attr('class', 'product-grid');
  116.        
  117.         $('.product-grid > div').each(function(index, element) {
  118.             html = '';
  119.            
  120.             var image = $(element).find('.image').html();
  121.            
  122.             if (image != null) {
  123.                 html += '<div class="image">' + image + '</div>';
  124.             }
  125.            
  126.             html += '<div class="name">' + $(element).find('.name').html() + '</div>';
  127.             html += '<div class="description">' + $(element).find('.description').html() + '</div>';
  128.            
  129.             var price = $(element).find('.price').html();
  130.            
  131.             if (price != null) {
  132.                 html += '<div class="price">' + price  + '</div>';
  133.             }
  134.            
  135.             var rating = $(element).find('.rating').html();
  136.            
  137.             if (rating != null) {
  138.                 html += '<div class="rating">' + rating + '</div>';
  139.             }
  140.                        
  141.             html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
  142.             html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
  143.            
  144.            
  145.             $(element).html(html);
  146.         });   
  147.                    
  148.         $('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>');
  149.        
  150.         $.cookie('display', 'grid');
  151.     }
  152. }
  153. view = $.cookie('display');
  154. if (view) {
  155.     display(view);
  156. } else {
  157.     display('list');
  158. }
  159. //--></script>
  160. <?php echo $footer; ?>