View Single Post
  #15  
Old 08-21-2013, 04:03 AM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

Quote:
Originally Posted by MalloryMan View Post
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"); 
                  
                }
              );
            });
            
          });
        }
      }
    });
  }
});
The Following User Says Thank You to smoothsailingco.com For This Useful Post:
Nula (10-15-2016)