The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
  #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>
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
combinations, images, options, radio button

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:19 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.