
08-20-2013, 09:56 AM
|
 |
Paid Member
|
|
Join Date: Dec 2011
Location: CA / FL
Posts: 345
|
|
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
and
|