View Single Post
  #13  
Old 08-20-2013, 09:56 AM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

It looks like this works:

Code:
<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:
Code:
productElement.css({display: 'inline-block'});
and removed
Code:
padding: '1px',
and
Code:
float: 'left',