View Single Post
  #11  
Old 08-20-2013, 09:28 AM
MalloryMan's Avatar
MalloryMan MalloryMan is offline
 
Join Date: Feb 2012
Posts: 20
Default

No that doesn't seem to want to work... Not too sure what else to do. Its so close!

Heres the edited code below and heres the link to the page: http://www.kooksunlimited.com/shop/#...13&id=26517135

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();
            
            // update label css to show images
            productLabel.css({
              background: 'url("' + productsmallThumbnailUrl + '") repeat scroll 0 0 transparent',
              display: 'inline-block',
              margin: '5px',
              height: '30px',
              padding: '1px',
              'text-indent': '-9999px',
              width: '30px', float: 'left',
            });
            
            // 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>