View Single Post
  #6  
Old 08-09-2013, 07:37 PM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

Here's what I came up with:

Code:
<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:
Code:
<script src="//app.ecwid.com/script.js?1039325" type="text/javascript" charset="UTF-8"></script>

Last edited by smoothsailingclothing; 08-09-2013 at 07:40 PM.