Color Picker for the category page, to change background color

[bernat]

I install a color picker to change backgroun image (not a plugin, adding code) because I upload transparent images. I use Farbtastic: http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/ 

In Product page works perfectly, but not in category page, color picker only changes the last product in list, I need it changes all background color of product image listed in category.

Basicaly I envolve the <img> in a <div> that picker changes the background color,

The code I use is (in category list):

• product-list.tpl:
  • The javascript/css:

    • <script type="text/javascript" src="http://www.domain.com/themes/themename/farbtastic/farbtastic.js"></script>
      <link rel="stylesheet" href="http://www.domain.com/themes/themename/farbtastic/farbtastic.css" type="text/css" />

      <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
          var f = $.farbtastic('#picker');
          var p = $('#picker').css('opacity', 1);
          var selected;
          $('.colorwell')
            .each(function () { f.linkTo(this); $(this).css('opacity', 1); })
            .focus(function() {
              if (selected) {
                $(selected).css('opacity', 1).removeClass('colorwell-selected');
              }
              f.linkTo(this);
              p.css('opacity', 1);
              $(selected = this).css('opacity', 1).addClass('colorwell-selected');
            });
        });

       </script>

  • The color picker:

    •                 <div class="selectordecolor">
                          <h4>Cambie el color de fondo</h4>
                          <div id="picker"></div>
                      </div>

• product-list-grid_hover2.tpl:
  • Adding a DIV thath changes color, envolving the images:
    • ​<div class="colorwell">
                          <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, $products_img_normal)}" alt="{$product.name|escape:'htmlall':'UTF-8'}" id="ajax_id_product_{$product.id_product|intval}_pimage" class="product-retina" data-image2x="{$link->getImageLink($product.link_rewrite, $product.id_image, $products_img_normal2x)}" itemprop="image">
                          </div>
    •  

Only need to patch problem in CATEGORY page, because now only changes color for the last product listed,

Any idea?

 

thanks!!!

 

[vekia]

well it's hard to understand code without an access to your website. if it is possible - please share url to your website, it will be much easier to understand the matter of problem

 

thanks in advance

[bernat]

I undestand, but the Prestashop is under maintenance mode, only with allowed IP can see the web. 

I can upload an image: http://creactitud.com/beta/picker.png an if you want you can tell me your public internet IP and I allow you to see the web,

thanks!

[vekia]

i sent you PM with my ip. but.. it's dynamic so we have to do it fast

[bernat]

Hahaha, yes! send-me again new IP and I try to activate in some minutes

thanks!