[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?

[MalloryMan]

No too sure where to put that in the code?

[smoothsailingco.com]

Oops!

This area:

            productLabel.css({
              background: 'url("' + productsmallThumbnailUrl + '") repeat scroll 0 0 transparent',
              display: 'inline-block',
              margin: '5px',
              padding: '1px',
              height: '80px',
              'text-indent': '-9999px',
              width: '80px'
            });