Radio Button Image Selector - Page 2 - Ecwid E-Commerce Forum

MalloryMan · #11 08-20-2013, 09:28 AM

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>

smoothsailingco.com · #12 08-20-2013, 09:39 AM

Try 2px

Edit: nevermind that won't work. I think you need to go back to just using display: inline-block. I'm not sure how to fix the problem while using float

smoothsailingco.com · #13 08-20-2013, 09:56 AM

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',

MalloryMan · #14 08-20-2013, 01:34 PM

Yeah that works perfectly now. Just need to find a way of applying this to all products that use the radio button selectors now...

smoothsailingco.com · #15 08-21-2013, 04:03 AM

Quote:

Originally Posted by MalloryMan

Yeah that works perfectly now. Just need to find a way of applying this to all products that use the radio button selectors now...

I tried looking for products with radio buttons but there are so many and couldn't find any in my quick search.

This might work for other products. I've just replaced the hard coded product ID with the one from the page.

Code:

Ecwid.OnPageLoaded.add(function (page) {
  if (page.type == "PRODUCT") {
    $.ajax({
      url: 'http://app.ecwid.com/api/v1/1039325/product?id=' + page.productId,
      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-' + page.productId + '-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"); 
                  
                }
              );
            });
            
          });
        }
      }
    });
  }
});