-
-
Save puleos/3171049 to your computer and use it in GitHub Desktop.
PP IO Implementation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Product Detail Right Gutter */ | |
| function PD_RIGHT_zp(a, b, c, d, e, f, g, h, i, j) { | |
| var builder = new ZoneBuilder(); | |
| var template = "upsellNarrowTemplate"; | |
| var divTarget = "upsell-right"; | |
| var categoryId = '5001'; | |
| var upsellCount = 12; | |
| if (showNewProductWebsite === "true") { | |
| template = "upsellNarrowTemplate2"; | |
| } | |
| console.log("RIGHT params:", divTarget, template); | |
| builder | |
| .init(a, b, c, d, e, f, g, h, i, false, categoryId, 2, 25, "") | |
| .render(template, divTarget, upsellCount, | |
| {selector: 'carousel-right', visible: 3, wrap: 'circular', vertical: true, scroll: 3, itemLoadCallback: carouselright_itemLoadCallback}); | |
| } | |
| /* Add Product Right Gutter */ | |
| function AP_RIGHT_zp(a, b, c, d, e, f, g, h, i, j) { | |
| var builder = new ZoneBuilder(); | |
| var template = "upsellNarrowTemplate"; | |
| var divTarget = "upsell-right"; | |
| var categoryId = '5006'; | |
| var upsellCount = 12; | |
| console.log("RIGHT params:", divTarget, template); | |
| builder | |
| .init(a, b, c, d, e, f, g, h, i, false, categoryId, 2, 25, "") | |
| .render(template, divTarget, upsellCount, | |
| { selector: 'carousel-right', visible: 3, wrap: 'circular', vertical: true, scroll: 3, itemLoadCallback: carouselright_itemLoadCallback }); | |
| } | |
| /* Product Detail Bottom */ | |
| function PD_BTM_zp(a, b, c, d, e, f, g, h, i, j) { | |
| var builder = new ZoneBuilder(); | |
| var template = "upsellTemplate"; | |
| var divTarget = "upsell-bottom"; | |
| var categoryId = '5001'; | |
| var upsellCount = 12; | |
| builder | |
| .init(a, b, c, d, e, f, g, h, i, false, categoryId, 2, 25, "") | |
| .render(template, divTarget, upsellCount, | |
| {selector: 'carousel-bottom', visible: 3, wrap: 'circular'}); | |
| } | |
| /* Recently Browsed Zone */ | |
| function BROWSED_zp(a, b, c, d, e, f, g, h, i, j) { | |
| var builder = new ZoneBuilder(); | |
| var template = "upsellTemplate"; | |
| var divTarget = "upsell-browsed"; | |
| var categoryId = '5002'; | |
| var upsellCount = 12; | |
| console.log("BTM params:", divTarget, template); | |
| builder | |
| .init(a, b, c, d, e, f, g, h, i, false, categoryId, 2, 25, "") | |
| .render(template, divTarget, upsellCount, | |
| {selector: 'carousel-bottom', visible: 3, wrap: 'circular'}); | |
| } | |
| /* Recent Purchases Zone */ | |
| function HP_FEAT1_zp(a, b, c, d, e, f, g, h, i, j) { | |
| var builder = new ZoneBuilder(); | |
| var template = "upsellNarrowHomePageTemplate"; | |
| var divTarget = "header-home-slot1"; | |
| var categoryId = '5004'; | |
| var upsellCount = 12; | |
| console.log("BTM params:", divTarget, template); | |
| builder | |
| .init(a, b, c, d, e, f, g, h, i, false, categoryId, 2, 25, "") | |
| .render(template, divTarget, upsellCount, | |
| { selector: 'carousel-bottom1', visible: 4, wrap: 'circular', itemLoadCallback: carouselbottom1_itemLoadCallback }); | |
| } | |
| /* Recent Purchases Zone */ | |
| function HP_FEAT2_zp(a, b, c, d, e, f, g, h, i, j) { | |
| var builder = new ZoneBuilder(); | |
| var template = "upsellNarrowHomePageTemplate"; | |
| var divTarget = "header-home-slot2"; | |
| var categoryId = '5005'; | |
| var upsellCount = 12; | |
| console.log("BTM params:", divTarget, template); | |
| builder | |
| .init(a, b, c, d, e, f, g, h, i, false, categoryId, 2, 25, "") | |
| .render(template, divTarget, upsellCount, | |
| { selector: 'carousel-bottom2', visible: 4, wrap: 'circular', itemLoadCallback: carouselbottom2_itemLoadCallback }); | |
| } | |
| /* Recent Purchases Zone */ | |
| function PURCH_zp(a, b, c, d, e, f, g, h, i, j) { | |
| var builder = new ZoneBuilder(); | |
| var template = "upsellTemplate"; | |
| var divTarget = "upsell-browsed"; | |
| var categoryId = '5003'; | |
| var upsellCount = 12; | |
| console.log("BTM params:", divTarget, template); | |
| builder | |
| .init(a, b, c, d, e, f, g, h, i, false, categoryId, 2, 25, "") | |
| .render(template, divTarget, upsellCount, | |
| {selector: 'carousel-bottom', visible: 3, wrap: 'circular'}); | |
| } | |
| /* Shopping CART Zone */ | |
| function IO_CART_zp(a, b, c, d, e, f, g, h, i, j) { | |
| var builder = new ZoneBuilder(); | |
| var template = "upsellTemplate"; | |
| var divTarget = "upsell-bottom"; | |
| var categoryId = '5000'; | |
| var upsellCount = 12; | |
| builder | |
| .init(a, b, c, d, e, f, g, h, i, false, categoryId, 2, 25, "") | |
| .render(template, divTarget, upsellCount, | |
| {selector: 'carousel-bottom', visible: 3, wrap: 'circular'}); | |
| } | |
| /************************************************* | |
| * ZoneBuilder: Renders a | |
| **************************************************/ | |
| var ZoneBuilder = function () { | |
| var recommendations = []; | |
| var reviewData = []; | |
| /************************************************* | |
| * init(): formats the CM IO data into an array of | |
| * review data objects | |
| **************************************************/ | |
| this.init = function (a_product_ids, zone, symbolic, target_id, category, | |
| rec_attributes, target_attributes, h, i, j, categoryId) { | |
| if (symbolic !== '_NR_') { | |
| var n_recs = a_product_ids.length; | |
| var nn_recs = target_attributes.length; | |
| for (var ii = 0; ii < n_recs; ii++) { | |
| reviewData.push({ | |
| productNumber: a_product_ids[ii], | |
| productImage: rec_attributes[ii][0], | |
| productUrl: '/recommendations-'+ categoryId + '/product-' + a_product_ids[ii], | |
| potency: rec_attributes[ii][2], | |
| price: rec_attributes[ii][3], | |
| salePrice: rec_attributes[ii][4], | |
| name: rec_attributes[ii][5], | |
| saleId: rec_attributes[ii][6], | |
| saleDesc: rec_attributes[ii][7], | |
| prodId: rec_attributes[ii][8], | |
| productForm: rec_attributes[ii][9], | |
| otherSize: rec_attributes[ii][10], | |
| reviewStars: rec_attributes[ii][11], | |
| addUrl: '/pages/addprod.asp?pid=' + rec_attributes[ii][8] + '&btnaction=add&promo=4&pageid=1&cid=' + categoryId, | |
| addUrl2: '/pages/addprod.asp?pid=' + rec_attributes[ii][8] + '&btnaction=add&fquantity=2&promo=4&pageid=1&cid=' + categoryId, | |
| reviewNumber: rec_attributes[ii][12].replace('.', "_"), | |
| reviewUrl: '//puritanspride.ugc.bazaarvoice.com/3330-en_us/' + rec_attributes[ii][12].replace('.', "_") + '/5/rating.gif' | |
| }); | |
| } | |
| } | |
| return this; | |
| }; | |
| this.render = function (template, divId, count, carousel) { | |
| $.get('/pages/upsell_module.htm', function (templates) { | |
| $('body').append(templates); | |
| $('#' + template).tmpl(reviewData.slice(0,count)) | |
| .appendTo('#' + divId + ' ul'); | |
| // if carousel options were passed render it | |
| if(carousel) | |
| { | |
| $('#' + carousel.selector).jcarousel(carousel); | |
| } | |
| }); | |
| return this; | |
| }; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script id="upsellTemplate" type="text/x-jquery-tmpl"> | |
| <li class="upsell-container"> | |
| <table border="1" width="250" height="440" > | |
| <tr><td> | |
| <p id="item-image"> | |
| <a href="${productUrl}" title="${name.replace("�", "™")}"><img src="${productImage}" alt="${name.replace("�", "™")}" /></a></p> | |
| {{if reviewStars > 0}} | |
| <p><img src="${reviewUrl}" /><a href="${productUrl}" class="blue">${parseInt(reviewStars)} Reviews </a> </p> | |
| {{else}} | |
| <p><img src="http://images.vitaminimages.com/pp/images/ratings_0.jpg" /> <a href="${productUrl}" class="blue" >Write the first review </a></p> | |
| {{/if}} | |
| <p class="bold-text item-name-upsell"><a href="${productUrl}" title="${name.replace("�", "™")}">${name.replace("�", "™")}</a></p> | |
| <p class="item-potency">${productForm}</p> | |
| <p class="item-other-sizes"><a href="${productUrl}?NewPage=1#siblings" title="Other Sizes Available">${otherSize} Other Sizes Available</a></p> | |
| </tr><tr><td valign="bottom"> | |
| {{if saleId == 5 || saleId == 31 }} | |
| <div id="item-pricing"><div class="item-promo-special"></div><div class="item-promo"> | |
| ${bogoTxt}</div><div class="item-price"> 2 for $${price}</div> | |
| <div id="item-addtocart"><a href="${addUrl}" title="Add to Cart"><span>Add to Cart</span></a></div> | |
| </div> | |
| <div id="item-pricing"><div class="item-promo-special"></div><div class="item-promo"> | |
| ${btgtTxt}</div><div class="item-price"> 5 for $${price * 2}</div> | |
| <div id="item-addtocart"><a href="${addUrl2}" title="Add to Cart"><span>Add to Cart</span></a></a></div> | |
| </div> | |
| {{else saleId == 2}} | |
| <div id="item-pricing"><div class="item-promo-special"></div><div class="item-promo"> | |
| ${bogtTxt}</div><div class="item-price"> 3 for $${price}</div> | |
| <div id="item-addtocart"><a href="${addUrl}" title="Add to Cart"><span>Add to Cart</span></a></div> | |
| </div> | |
| <div id="item-pricing"><div class="item-promo-special"></div><div class="item-promo"> | |
| ${btgfTxt}</div><div class="item-price"> 6 for $${price * 2}</div> | |
| <div id="item-addtocart"><a href="${addUrl2}" title="Add to Cart"><span>Add to Cart</span></a></a></div> | |
| </div> | |
| {{else saleId == 30}} | |
| <div id="item-pricing"><div class="item-promo-special"></div><div class="item-promo"> | |
| ${bogtTxt}</div><div class="item-price"> 3 for $${price}</div> | |
| <div id="item-addtocart"><a href="${addUrl}" title="Add to Cart"><span>Add to Cart</span></a></div> | |
| </div> | |
| <div id="item-pricing"><div class="item-promo-special"></div><div class="item-promo"> | |
| ${btgfTxt}</div><div class="item-price"> 6 for $${price * 2}</div> | |
| <div id="item-addtocart"><a href="${addUrl2}" title="Add to Cart"><span>Add to Cart</span></a></a></div> | |
| </div> | |
| {{else}} | |
| <div id="item-pricing-single"><div class="item-promo-special"></div><div class="item-promo"> | |
| ${specialPriceTxt}</div><div class="item-price"> $${salePrice}</div> | |
| <div id="item-addtocart-single"><a href="${addUrl}" title="Add to Cart"><span>Add to Cart</span></a></div> | |
| </div> | |
| {{/if}} | |
| </td> | |
| </tr> | |
| </table> | |
| </li> | |
| </script> | |
| <script id="upsellNarrowTemplate" type="text/x-jquery-tmpl"> | |
| <li class="upsell-container"> | |
| <p> | |
| <a href="${productUrl}" title="${name.replace("�", "™")}"><img src="${productImage}" alt="${name.replace("�", "™")}" style="height: 100px" /></a></p><br /> | |
| {{if reviewStars > 0}} | |
| <p><img src="${reviewUrl}" /><a href="${productUrl}" class="blue">${parseInt(reviewStars)} Reviews </a> </p> | |
| {{else}} | |
| <p><img src="http://images.vitaminimages.com/pp/images/ratings_0.jpg" /> <a href="${productUrl}" class="blue" >Write the first review </a></p> | |
| {{/if}} | |
| <p class="bold-text item-name-upsell"><a href="${productUrl}" title="${name.replace("�", "™")}"> | |
| ${name.replace("�", "™")}</a></p> | |
| <p class="item-potency">${productForm}</p><br /> | |
| {{if saleId == 5 || saleId == 31 }} | |
| <p class="bold-text"><span class="item-promo">${bogoTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}&ajax=true" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell.png" /></span></a></p> | |
| <!-- <p class="bold-text"><span class="item-promo">${btgfTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl2}" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell.png" /></span></a></p> --> | |
| {{else saleId == 2 }} | |
| <p class="bold-text"><span class="item-promo">${bogtTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}&ajax=true" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell.png" /></span></a></p> | |
| {{else saleId == 30 }} | |
| <p class="bold-text"><span class="item-promo">${bogtTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}&ajax=true" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell.png" /></span></a></p> | |
| {{else}} | |
| <p class="bold-text"><span class="item-promo">${specialPriceTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}&ajax=true" title="Add to Cart" class="soft-cart-add"><span style="position: relative; width: 170px;"> | |
| <img src="/images/b_addtocart_upsell.png" /></span></a></p> | |
| {{/if}} | |
| </li> | |
| </script> | |
| <script id="upsellNarrowHomePageTemplate" type="text/x-jquery-tmpl"> | |
| <li class="upsell-container"> | |
| <table border="1" width="150" height="310" > | |
| <tr> | |
| <td valign="top"> | |
| <a href="${productUrl}" title="${name.replace("�", "™")}"><img src="${productImage}" alt="${name.replace("�", "™")}" style="height: 100px" /></a></p> | |
| {{if reviewStars > 0}} | |
| <p><img src="${reviewUrl}"/><br/><br/><a href="${productUrl}" class="blue">${parseInt(reviewStars)} Reviews </a> </p> | |
| {{else}} | |
| <p><img src="http://images.vitaminimages.com/pp/images/ratings_0.jpg" width="85" height="16" /><br/><br/> <a href="${productUrl}" class="blue" >Write the first review </a></p> | |
| {{/if}} | |
| <p class="bold-text item-name-upsell"><a href="${productUrl}" title="${name.replace("�", "™")}"> | |
| ${name.replace("�", "™")}</a></p> | |
| <p class="item-potency">${productForm}</p> | |
| </tr> | |
| <tr> | |
| <td valign="bottom"> | |
| {{if saleId == 5 || saleId == 31 }} | |
| <p class="bold-text"><span class="item-promo">${bogoTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell.png" /></span></a></p> | |
| <!-- <p class="bold-text"><span class="item-promo">${btgfTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl2}" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell.png" /></span></a></p> --> | |
| {{else saleId == 2 }} | |
| <p class="bold-text"><span class="item-promo">${bogtTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell.png" /></span></a></p> | |
| {{else saleId == 30 }} | |
| <p class="bold-text"><span class="item-promo">${bogoTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell.png" /></span></a></p> | |
| {{else}} | |
| <p class="bold-text"><span class="item-promo">${specialPriceTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}" title="Add to Cart" class="soft-cart-add"><span style="position: relative; width: 170px;"> | |
| <img src="/images/b_addtocart_upsell.png" /></span></a></p> | |
| {{/if}} | |
| </td> | |
| </tr> | |
| </table> | |
| </li> | |
| </script> | |
| <script id="upsellNarrowTemplate2" type="text/x-jquery-tmpl"> | |
| <li class="upsell-container"> | |
| <p> | |
| <br/> | |
| <a href="${productUrl}" title="${name.replace("�", "™")}"><img src="${productImage}" alt="${name.replace("�", "™")}" style="height: 100px" /></a></p><br /> | |
| {{if reviewStars > 0}} | |
| <p><img src="${reviewUrl}" /><a href="${productUrl}" class="blue">${parseInt(reviewStars)} Reviews </a> </p> | |
| {{else}} | |
| <p><img src="http://images.vitaminimages.com/pp/images/ratings_0.jpg" /> <a href="${productUrl}" class="blue" >Write the first review </a></p> | |
| {{/if}} | |
| <p class="bold-text item-name-upsell"><a href="${productUrl}" title="${name.replace("�", "™")}"> | |
| ${name.replace("�", "™")}</a></p> | |
| <p class="item-potency">${productForm}</p><br /> | |
| {{if saleId == 5 || saleId == 31 }} | |
| <p class="bold-text"><span class="item-promo">${bogoTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}&ajax=true" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell2.png" /></span></a></p> | |
| <!-- <p class="bold-text"><span class="item-promo">${btgfTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl2}" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell2.png" /></span></a></p> --> | |
| {{else saleId == 2 }} | |
| <p class="bold-text"><span class="item-promo">${bogtTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}&ajax=true" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell2.png" /></span></a></p> | |
| {{else saleId == 30 }} | |
| <p class="bold-text"><span class="item-promo">${bogtTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}&ajax=true" class="soft-cart-add" title="Add to Cart"><span><img src="/images/b_addtocart_upsell2.png" /></span></a></p> | |
| {{else}} | |
| <p class="bold-text"><span class="item-promo">${specialPriceTxt}</span> $${salePrice}</p> | |
| <p><a href="${addUrl}&ajax=true" title="Add to Cart" class="soft-cart-add"><span style="position: relative; width: 170px;"> | |
| <img src="/images/b_addtocart_upsell2.png" /></span></a></p> | |
| {{/if}} | |
| </li> | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment