[MalloryMan]

Hi there,

I have a product with many colour options. What I would like to do is, instead of displaying a list of radio buttons with text on the left, display the image of the actual product in a smaller thumbnail with the text below.

Here is an example: http://mydrapnapkins.com/cocktail-na...cktail-napkins

I would imagine it would be a bit of javascript that pulls the image from the one uploaded in the variations section but just dont know how to implement it.

Anyone??

[smoothsailingco.com]

You'd need to know javascript or jquery (would make it a lot easier) to do it combined with the product api.

<script>
    Ecwid.OnPageLoaded.add(function(page) {
       if ( page.type == "PRODUCT" ) {
            $.ajax({
                url:'http://app.ecwid.com/api/v1/[storeID]/product?id=' + page.productId,
                dataType: 'jsonp',
                success:function(json){
                    // json contains the product information                         
                }
            });
       }
});

That would pull the product information and put it in json which you could use to create the images. What's your store url, I could take a look and if it's not too hard, try to do it.

[MalloryMan]

Hey thats amazing, thanks a lot. The url is http://www.kooksunlimited.com/shop/

[smoothsailingco.com]

I couldn't find the product with radio buttons

[MalloryMan]

Hey sorry its here: http://www.kooksunlimited.com/shop/#...13&id=26517135

[smoothsailingco.com]

Here's what I came up with:

<script>
Ecwid.OnPageLoaded.add(function (page) {
  if (page.type == "PRODUCT" && page.productId == 26517135) {
    $.ajax({
      url: 'http://app.ecwid.com/api/v1/1039325/product?id=26517135',
      dataType: 'jsonp',
      success: function (json) {
        if (json.variations) {
          $.each(json.variations, function (index, product) {
          
            // name, thumbnail image url
            var productName = product.options.Style.text;
            var productsmallThumbnailUrl = product.smallThumbnailUrl;

            // elements
            var productElement = $('#ecwid-productoption-26517135-Style-' + productName.replace(/\ /g, '_'));
            var productInput = productElement.find('input[type=radio]');
            var productLabel = productElement.find('label');
            
            // hide radio button
            productInput.hide();
            
            // update label css to show images
            productLabel.css({
              background: 'url("' + productsmallThumbnailUrl + '") repeat scroll 0 0 transparent',
              display: 'inline-block',
              margin: '5px',
              height: '80px',
              'text-indent': '-9999px',
              width: '80px'
            });
            
            // Could use .addClass instead of hard coding the style, ie: productLabel.addClass('className');
            // Same for .css below that adds border
            
            // handle highlighting of currently selected option
            productLabel.click(function () {
              $(this).css("border", "solid 1px black");
              $("input[type='radio']:checked").each(
                function () {
                  $("label[for='" + this.id + "']").css("border", "none");
                }
              );
            });
            
          });
        }
      }
    });
  }
});
</script>

You'll want to add it after where you put:

<script src="//app.ecwid.com/script.js?1039325" type="text/javascript" charset="UTF-8"></script>

[MalloryMan]

Hey man sorry for the late reply, yeah thats great thank you! I have added a float: left to the css to make the items in a grid instead of a list.

Two things:

1. Is it possible to apply this to all radio buttons accross products?

2. The only thing I cant work out is how to fix the bug where when a user clicks on the image it moves the rest of the selectors... I think its to do with the border being added onclick (which it needs) but cant find a way to add in a margin: -1px to remedy it perhaps or if theres a better way to do that?

Go have a look here: http://www.kooksunlimited.com/shop/#...13&id=26517135

[smoothsailingco.com]

Try adding: Padding: 1px;

Does that fix it?

[smoothsailingco.com]

Try 2px

Edit: nevermind that won't work. I think you need to go back to just using display: inline-block. I'm not sure how to fix the problem while using float

[smoothsailingco.com]

It looks like this works:

<div>
<script type="text/javascript" src="http://app.ecwid.com/script.js?1039325" charset="utf-8"></script>
  
  <script>
Ecwid.OnPageLoaded.add(function (page) {
  if (page.type == "PRODUCT" && page.productId == 26517135) {
    $.ajax({
      url: 'http://app.ecwid.com/api/v1/1039325/product?id=26517135',
      dataType: 'jsonp',
      success: function (json) {
        if (json.variations) {
          $.each(json.variations, function (index, product) {
          
            // name, thumbnail image url
            var productName = product.options.Style.text;
            var productsmallThumbnailUrl = product.smallThumbnailUrl;

            // elements
            var productElement = $('#ecwid-productoption-26517135-Style-' + productName.replace(/\ /g, '_'));
            var productInput = productElement.find('input[type=radio]');
            var productLabel = productElement.find('label');
            
            // hide radio button
            productInput.hide();
            
            productElement.css({display: 'inline-block'});

            // update label css to show images
            productLabel.css({
              background: 'url("' + productsmallThumbnailUrl + '") repeat scroll 0 0 transparent',
              display: 'inline-block',
              margin: '5px',
              height: '30px',
              'text-indent': '-9999px',
              width: '30px'
            });
            
            // Could use .addClass instead of hard coding the style, ie: productLabel.addClass('className');
            // Same for .css below that adds border
            
            // handle highlighting of currently selected option
            productLabel.click(function () {
              $(this).css("border", "solid 1px black");
              $("input[type='radio']:checked").each(
                function () {
                  $("label[for='" + this.id + "']").css("border", "none"); 
                  
                }
              );
            });
            
          });
        }
      }
    });
  }
});
</script>
  
  
<script type="text/javascript"> xSearchPanel("style="); </script>
</div>

<script type="text/javascript">
ecwidMessages = { 
"SearchPanel.search":"GO"
}; 
</script>

<div class="shopContainer">
<script type="text/javascript" src="http://app.ecwid.com/script.js?1039325" charset="utf-8"></script>
<script type="text/javascript">
  xProductBrowser("categoriesPerRow=4","views=grid(5,5) list(10)","categoryView=grid","searchView=list","style="); </script>
  
<noscript>Your browser does not support JavaScript. Please proceed to <a href="http://kooksunlimited.ecwid.com">HTML version of Kooks Unlimited</a></noscript>
<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
   if (page.type == "PRODUCT") {
        $( "#tabs" ).tabs();
   }
})
  </script>
</div>

Added:

productElement.css({display: 'inline-block'});

and removed

padding: '1px',

and

float: 'left',