var prevArrow = "images/arrow_prev.gif"; var nextArrow = "images/arrow_next.gif"; var loaderGif = "images/loader.gif"; var width = 150; var height = 400; var perpage = 4; function getRelatedProducts(id, file, perpage, rows, width, height, prevArrow, nextArrow, arrowWidth, arrowHeight, carouselType) { if (!prevArrow) { var prevArrow = "images/arrow_prev.gif" } if (!nextArrow) { var nextArrow = "images/arrow_next.gif" } if (!id) { alert('Please specify an ID to append the products to in your function parameters') } if (!file) { alert('Please specify a file in the function parameters.') } if (!rows) { rows == 1 } $('#' + id).html(''); var container = $('<div class="related-product-title-bar"></div><table cellpadding="0" cellspacing="0" border="0"><tr><td class="leftArrow"><a style="cursor:pointer;"><img src="' + prevArrow + '" alt="Scroll Left" style="width: ' + arrowWidth + 'px; height: ' + arrowHeight + 'px;" /></a></td><td class="related-products"><ul style="width:' + Math.round((width * perpage) / rows) + 'px; height: ' + height + 'px;"></ul></td><td class="rightArrow"><a style="cursor:pointer;"><img src="' + nextArrow + '" alt="Scroll Right" style="width: ' + arrowWidth + 'px; height: ' + arrowHeight + 'px;" /></a></td></tr></table>').appendTo('#' + id); loadProduct(id, file, perpage, width, height, 0, carouselType) }; function loadProduct(id, file, perpage, width, height, location, carouselType) { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: file, dataType: "json", success: function(data, status) { if (carouselType == "") { if ($('#' + id + ' .related-product-title-bar').text() === "") { $('<table cellpadding="0" cellspacing="0" border="0" width="100%" background="/images/halloweencostumes/product-subhead-bg.gif"><tr><td><h4 class="productpgsubhead">' + data.current_product[0].name + '</h4></td></tr></table><div class="related-product-page-info"></div>').appendTo('#' + id + ' .related-product-title-bar') } } var totalProducts = data.related_products.length; var bAddSep = false; var firstItem = location + 1; var lastItem = perpage + location > totalProducts ? totalProducts : perpage + location; for (var i = 0; i < totalProducts; i++) { var productHTML = '<li style="width: ' + (width) + 'px; height: ' + (height) + 'px;">'; if (carouselType == "") { productHTML += '<table cellpadding="0" cellspacing="0" border="0" align="center"><tr>'; productHTML += '<td><img src="/images/blank.gif" height="1" width="7" alt="" /></td>'; productHTML += '<td height="290"><div class="related-product-image"><a href="' + data.related_products[location + i].link + '"><img src="' + data.related_products[location + i].image + '" alt="' + data.related_products[location + i].name + '" /></a></div>' } else { productHTML += '<div class="related-product-couple-blank"><a href="' + data.related_products[i].link + '"><img src="' + data.related_products[i].image + '" alt="' + data.related_products[i].name + '" style="width: ' + (width) + 'px; height: ' + (height) + 'px;" /></a></div>' } if (data.related_products[location + i].status) { if (data.related_products[location + i].status == 'sale') { productHTML += '<table cellpadding="0" cellspacing="0" border="0" align="center" width="110" height="16" background="/images/halloweencostumes/on-sale-prod-banner.gif"><tr><td align="center"><font class="productonsale">SALE</font></td></tr></table><img src="/images/blank.gif" height="5" width="1" alt=""><br/>' } else if (data.related_products[location + i].status == 'clearance') { productHTML += '<table cellpadding="0" cellspacing="0" border="0" align="center" width="110" height="16" background="/images/halloweencostumes/clearance-prod-banner.gif"><tr><td align="center"><font class="productclearance">CLEARANCE</font></td></tr></table><img src="/images/blank.gif" height="5" width="1" alt=""><br/>' } } if (carouselType == "") { productHTML += '<div class="related-product-name" align="center"><a href="' + data.related_products[location + i].link + '" class="productname">' + data.related_products[location + i].name + '</a></div>'; if (data.related_products[location + i].salePrice) { productHTML += '<div class="related-product-old-price" align="center">Regular Price: <span>' + data.related_products[location + i].price + '</span></div><div align="center" style="color:#990000; font-size:12px; font-weight:bold;">Sale Price: ' + data.related_products[location + i].salePrice + '</div>' } else { productHTML += '<div style="font-size:14px; font-weight:bold;" align="center">' + data.related_products[location + i].price + '</div>' } productHTML += '<img src="/images/blank.gif" height="5" width="1" alt=""><br/>'; productHTML += '<div class="related-product-description" align="center">' + data.related_products[location + i].description + '</div>'; if (data.related_products[location + i].inStock == "false") { productHTML += '<div class="related-product-comingsoon"><a href="' + data.related_products[location + i].link + '">Coming Soon<br/> Click to be notified when item is back in stock</a></div>' } else { productHTML += '<div class="related-product-instock"><a href="' + data.related_products[location + i].link + '">IN STOCK Ready to Ship!</a></div>' } if ((i + 1) < perpage) { bAddSep = true } else if (((i + 1) % perpage) == 0) { bAddSep = false } else { bAddSep = true } if (i == totalProducts) { bAddSep = false } if (bAddSep) { productHTML += '</td><td valign="middle" class="related-product-divider-vert"></td></tr>' } else { productHTML += '</td><td><img src="/images/blank.gif" height="1" width="7" alt="" /></td></tr>' } productHTML += '</table>' } productHTML += '</li>'; $('#' + id + ' .related-products ul').append(productHTML) } if (carouselType == "") { var totalPages = Math.ceil(totalProducts / perpage); var blanks = ((totalPages * perpage) % totalProducts); for (var j = 0; j < blanks; j++) { $('#' + id + ' .related-products ul').append('<li style="width: ' + (width) + 'px; height: ' + (height) + 'px;">&nbsp;</li>') } } $('#' + id + ' .related-products ul').carouFredSel({ visibleItems: perpage, next: $('#' + id).find('.rightArrow a'), prev: $('#' + id).find('.leftArrow a'), pageCount: $('#' + id + ' .related-product-page-info'), productCount: totalProducts }) }, error: function(data, status) { $('#' + id + ' .related-products ul').html('<li style="width:' + (width - 20) + 'px; padding-left:10px; padding-right:10px; text-align:center; color:red; font-weight:bold;"><h3>Error - Invalid File.</h3></li>') } }) }