Rich-text Reply

Dynamic shopping cart contents being smothered/replaced by static optimizely content

dtwilson 11-20-14

Dynamic shopping cart contents being smothered/replaced by static optimizely content

Hi all,

 

I'm setting up a split test to trial a new site-wide header design.

The header (in all variations) contains a mini cart summary (e.g. xx items total £xxx) which gets updated as and when customers add items to their cart via a simple form submit routine which then updates the figures using backend server-side processing (coldfusion code).

 

I have my test all ready, however I've just noticed that my new Variation simply keeps the mini cart display reading at zero (e.g. 0 items total £0.00) regardless of customer shopping activity.

 

In my Variation I haven't made any modifications around the mini cart i.e. it is exactly the same as original. Modifications are elsewhere on the site header.

How do I get it so that the Variation also updates the mini cart info correctly/dynamically?

 

Thanks,

Dave

 

Level 2

adzeds 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

Hi Dave,

How did you make the changes? Through the Edit HTML method or via jQuery in the 'Edit Code' section?

Trying to work out how Optimizely is making the changes.
David Shaw
Level 11
greg 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

DTWILSON, can you share the code for that variation, and possibly also the HTML header code? It's difficult to say what could be causing this without seeing what's under the hood.
Level 2
JDahlinANF 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

[ Edited ]

It sounds like your new variation has changed the HTML structure of the header in such a way that the code that runs automatically to update the mini-cart's vallues is unable to do its job.

 

e.g.,

the page is trying to update the value located at:

$('#header #mini-cart span.item-qty')

 

but your variation has moved that to

$('#new-header #min-cart span.item-qty)

 

As Girgoriy mentioned, being able to see this in action would be helpful to debugging.If you can share a URL to a page and the optimizely_x parameter value to forcce the experiment to run, we can troubleshoot what is going on.

dtwilson 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

[ Edited ]

Thanks everyone,

 

New to Optimizely and to this forum and wasnt sure of the etiquette re posting sample urls etc.

The original variation is http://www.thenewyouplan.com

The split test preview can be seen at: http://www.thenewyouplan.com/?optimizely_show_preview=true&optimizely_token=bb756fcbc60eac0c3a454bc2...

 

You will see what happens if you scroll down the page and click on any of the "add to box" buttons on products - Note, you will briefly see the items and price update correctly, then get quickly masked by the Variation code.

 

In terms of how i edited it - as far I was aware I hadn't made any changes to the content in question and I cannot find any reference to the code within the Experiment Editor's edit code window.

 

The relevant strings are found within a <p> block within the #basket div

Level 2
greg 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

Can you also share the variation code? That might contain clues about what's happening.
Level 2
dtwilson 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

Apologies,

Variation code below:

$("input[name='GBP']").css({"position":"relative", "left":-563, "top":-1});
$("input[name='EUR']").css({"position":"relative", "left":-559, "top":-1});
$("#stripwrap").append("<div id=\"optimizely_308000628\">...</div>");
$("#optimizely_308000628").css({"font-size":"12px", "text-align":"left", "left":"120px"});
$("#optimizely_308000628").html("&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Shop in Euros or £GBP");
$("#optimizely_308000628").css({"position":"relative", "left":0, "top":"6px"});
$("#header").append("<div id=\"optimizely_692623575\">...</div>");
$("#optimizely_692623575").html("The UK &amp; Ireland's Fastest<br>Growing Weight Loss Plan&nbsp;");
$("#optimizely_692623575").css({"font-size":"12px", "text-align":"left", "font-weight":"bold"});
$("#optimizely_692623575").css({});
$("#optimizely_692623575").css({"position":"relative", "left":"-246px", "top":"4px"});
$("#optimizely_692623575").css({"font-size":"13px"});
$("#logo img").css({"position":"relative", "left":0, "top":"-11px"});
$("#strapbar").css({"position":"relative", "left":0, "top":"6px"});
$("#wrapper").css({"position":"relative", "left":0, "top":"103px"});
$("#strapbar").css({"top":"14px"});
$("#optimizely_692623575").css({"top":"13px"});
$("#logo img").css({"top":"1px"});
$("#optimizely_692623575").css({"top":"16px"});
$("#header").css({"position":"relative", "left":0, "top":"7px"});
$("#logo img").css({"top":"-16px"});
$("#optimizely_692623575").css({"top":"6px", "left":"-242px"});
$("#optimizely_308000628").css({"z-index":3172000});
$("#stripwrap").css({"position":"relative", "left":0, "top":0, "z-index":3173000});
$(".last tr > td:eq(1) > input:eq(0)").css({"position":"relative", "left":-470, "top":109});
$(".last tr > td:eq(1) > input:eq(0)").css({"left":"-528px"});
$(".last tr > td:eq(1) > input:eq(0)").css({"left":"-523px"});
$("#stripwrap > ul > li:eq(0)").html("Got a Question? Speak to a Weight-loss Expert +44 28 3833 0720");
$("#stripwrap > ul > li:eq(0)").css({"position":"relative", "left":0, "top":"-27px"});
$("#stripwrap > ul > li:eq(0)").css({"left":"52px"});
$("#logo > h2").css({"display":"none", "visibility":""});
$("#logo > p").css({"display":"none", "visibility":""});
$(".last tr > td:eq(1) > input:eq(0)").css({"top":"43px", "left":"-340px"});
$(".last tr > td:eq(1) > input:eq(0)").css({"top":"46px"});
$(".last tr > td:eq(1) > input:eq(0)").css({"width":36, "height":27});
$("#srchfield").val("Search for Total Food Replacement Meals, Snacks & Drinks");
$(".last tr > td:eq(1) > input:eq(0)").css({"left":"-388px"});
$(".last tr > td:eq(1) > input:eq(0)").css({"left":"-387px", "top":"45px"});
$("#optimizely_308000628").html("&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Shop in Euros or £GBP");
$("#optimizely_308000628").css({"font-weight":"bold"});
$("#srchfield").replaceWith("<input name=\"srchstring\" type=\"text\" id=\"srchfield\" style=\"width: 451px; position: relative; left: -344px; top: 43px; height: 34px; border-color: rgb(238, 238, 238);\" value=\"Search for Total Food Replacement Meals, Snacks & Drinks\" onfocus=\"if(this.value == 'Search for Total Food Replacement Meals, Snacks & Drinks'){this.value = '';}\" onblur=\"if(this.value == ''){this.value='Search for Total Food Replacement Meals, Snacks & Drinks';}\">");
$("#header").prepend("<img id=\"optimizely_677204435\" src=\"//cdn.optimizely.com/img/196773474/fb17b847f51a4d7a97201af50876ca2d.png\" />");
$("#optimizely_677204435").css({"position":"relative", "left":"241px", "top":0, "z-index":3172000});
$("#header").css({"top":"-54px"});
$("#optimizely_677204435").css({"top":"60px"});
$("nav > ul").css({"top":-56});
$("nav").css({"position":"relative", "left":0, "top":"-1px"});
$("#LeftNav").css({"left":"0px", "position":"relative", "top":"0px"});
$("#LeftNav").detach().insertBefore("#wrapper > .clear");
$("nav").css({"width":922, "height":32});
$("#wrapper").css({"top":"52px", "width":942, "height":2962});
$("#wrapper").prepend("<img id=\"optimizely_973570394\" src=\"//cdn.optimizely.com/img/196773474/2f5d4231c6634766a9d0b8d82b3180d8.png\" />");
$("#wrapper").css({"top":"-11px"});
$("#strapbar").css({"z-index":3173000});
$("#optimizely_973570394").css({"position":"relative", "left":"-18px", "top":"1px"});
$("#optimizely_677204435").wrap("<a href=\"http://www.facebook.com/newyoudiet\" target=\"_blank\"></a>");
$("#stripwrap > ul > li:eq(0)").css({"font-size":"12px"});
$("#stripwrap > ul > li:eq(0)").css({"width":384, "height":26, "left":"-10px", "z-index":3174000});
$("#stripwrap > ul > li:eq(0)").css({"width":424, "height":28, "left":"-43px", "z-index":3175000});
$("#ContentArea").css({"width":742, "height":2869});
$("input[name='GBP']").css({"z-index":3172000});
$("input[name='EUR']").css({"z-index":3173000});
$("#LeftNav").css({"width":"190px", "margin":"0px "});
$("#LeftNav").css({"z-index":3172000});
$("#LeftNav").css({"left":"-11px"});
$("#LeftNav").css({"left":"-4px"});
$("#ContentArea").css({"left":7});
$("#ContentArea").css({"left":"11px"});
$("#LeftNav").css({"left":"-6px"});
$("#LeftNav").css({"left":"-4px", "z-index":3173000});
$("#LeftNav").css({"left":"15px", "z-index":3174000});
$("#LeftNav").css({"left":"18px", "z-index":3172000});
$("#LeftNav").css({"left":"16px", "z-index":3173000});
$("#LeftNav").css({"left":"14px", "z-index":3174000});
$("#LeftNav").css({"left":"10px", "z-index":3175000});
$("#LeftNav").css({"left":"8px", "z-index":3177000});
$("#LeftNav").css({"z-index":3178000, "left":"2px"});
$("#LeftNav > p").replaceWith("<p>&nbsp;</p>");
$("#LeftNav").append("<div id=\"optimizely_97576101\">...</div>");
$("#optimizely_677204435").replaceWith("<img id=\"optimizely_677204435\" src=\"//cdn.optimizely.com/img/196773474/fb17b847f51a4d7a97201af50876ca2d.png\" style=\"position: relative; left: 241px; top: 60px; z-index: 3172000;\">");
$("#header").append("<div id=\"optimizely_710254015\">...</div>");
$("#header").css({"z-index":3172000});
$("#optimizely_677204435").attr({"src":"//cdn.optimizely.com/img/196773474/98ba61e6243840eca803649ffcba87c5.png"});
$("#optimizely_677204435").css({"width":461, "height":64, "z-index":3173000});
$("#optimizely_677204435").css({"left":"235px", "top":"66px"});
$("#srchfield").css({"top":"41px"});
$("#srchfield").css({"width":459, "height":36});
$("body > div:eq(4) > p:eq(0)").css({"position":"relative", "left":0, "top":0, "z-index":3174000});
$("#header").css({});
$("#header").css({"top":"-54px", "z-index":"3172"});
$("#header").css({"z-index":"1"});
$("#LeftNav").css({"z-index":"1"});
$("#topstrip").css({"z-index":"1"});
$("#optimizely_308000628").css({"z-index":"317"});
$("#optimizely_677204435").css({"z-index":"31"});
$("#optimizely_677204435").css({"z-index":"1"});
$("#optimizely_308000628").css({"z-index":"1"});
$("#srchfield").css({"z-index":"1"});
$("#srchfield").css({"z-index":""});
$(".last tr > td:eq(1) > input:eq(0)").css({"z-index":"2"});
$("#srchfield").css({"z-index":"1"});
$("#strapbar").css({"z-index":"1"});
$("nav > ul").css({});
$("nav").css({"z-index":"1000"});
$("#slider1 > div:eq(0)").css({"z-index":"1"});
$(".last tr > td:eq(1) > input:eq(0)").css({"top":"42px"});
$("#wrapper").css({"z-index":"1"});
$("#strapbar").css({"z-index":"1000"});
$("#srchfield").css({});
$("#stripwrap").css({"z-index":"2"});
$("#srchfield").css({"width":461, "height":30});
$(".last tr > td:eq(1) > input:eq(0)").css({"top":"41px"});
$("#optimizely_677204435").css({"z-index":"1"});
$("#optimizely_692623575").replaceWith("<div id=\"optimizely_692623575\" style=\"font-size: 13px; text-align: left; font-weight: bold; position: relative; left: -242px; top: 6px;\">The UK &amp; Ireland's Fastest<br>Growing Weight Loss Plan&nbsp;</div>");
$("#header").append("<div id=\"optimizely_568949315\">...</div>");
$("#header > span#fb_count").css({"top":"-80", "position":"relative", "left":"480", "z-index":"2"});
$("#header").replaceWith("<div id=\"header\" style=\"position: relative; left: 0px; top: -54px; z-index: 1;\"><a href=\"http://www.facebook.com/newyoudiet\" target=\"_blank\"><img id=\"optimizely_677204435\" src=\"//cdn.optimizely.com/img/196773474/98ba61e6243840eca803649ffcba87c5.png\" style=\"position: relative; left: 235px; top: 66px; z-index: 1; width: 461px; height: 64px;\"></a>\n <div id=\"logo\">\n <a href=\"/\"><img src=\"/graphics/logo.png\" alt=\"New You logo\" border=\"0\" align=\"left\" style=\"position: relative; left: 0px; top: -16px;\"></a>\n <br>\n <h2 style=\"display: none;\">The New You Diet Plan<br>Total Food Replacements &amp; VLCD</h2>\n <p style=\"display: none;\">Have Fun &amp; Lose Weight Fast - Your transformation starts here!</p>\n </div>\n <div id=\"basket\">\n <div id=\"shoppingbag\">\n <a href=\"/index.cfm?page=eshop/objects/full_cart.cfm\"><img src=\"/graphics/shoppingbox.jpg\" alt=\"bag\"></a>\n </div>\n \n<h2>My Diet Box</h2>\n\n\n<p>Items: 0\n<br>\nTotal: £0.00</p>\n\n<ul>\n<li class=\"first\">\n<a href=\"/MyDietBox\">GO TO BOX</a>\n</li>\n<li>\n<a href=\"/index.cfm?page=eshop/objects/upsell.cfm\" onclick=\"ga('ec:setAction','checkout_option', {'step': 1, 'option': 'Mini cart'});ga('send', 'pageview');\">GO TO CHECKOUT</a>\n</li>\n</ul>\n\n </div>\n\n <div id=\"optimizely_692623575\" style=\"font-size: 13px; text-align: left; font-weight: bold; position: relative; left: -242px; top: 6px;\">The UK &amp; Ireland's Fastest<br>Growing Weight Loss Plan&nbsp;</div><div id=\"optimizely_710254015\" style=\"z-index:2;margin:-40px 0px 0px 480px;position:relative;\"></div></div>");
$("#fb_count").css({"position":"relative", "top":"-450", "left":"500", "z-index":"150"});
$("#fb_count").css({"top":"-625px", "left":"470px"});
$("#fb_count").css({"left":"466px"});
$("#fb_count").css({"position":"absolute", "top":"-190px"});
$("#fb_count").css({"width":"65px"});
$("#fb_count").css({"width":"95px"});
$("#fb_count").css({"top":"-187px"});
$("#srchfield").css({"top":"6px", "left":"-255px"});
$("#srchfield").css({"left":"-31px"});
$(".last div").css({"top":"35px", "left":"-313px"});
$("#stripwrap > ul").css({"position":"relative", "left":0, "top":0, "width":372, "height":29});
$(".last tr > td:eq(0)").css({"position":"relative", "left":0, "top":0, "width":105, "height":32});
$(".last tr > td:eq(1) > input:eq(0)").css({"left":"-37px"});
$("#srchfield").css({"top":"-18px", "left":"-29px"});
$(".last tr > td:eq(0)").html("<div style=\"position: relative; left: 0px; top: -10px;\"><div style=\"position: relative; left: -1px; top: 13px; width: 105px; height: 10px;\"><div style=\"position: relative; left: -313px; top: 35px;\"><input name=\"srchstring\" type=\"text\" id=\"srchfield\" style=\"width: 461px; position: relative; left: -29px; top: -18px; height: 30px; border-color: rgb(238, 238, 238); z-index: 1;\" value=\"Search for Total Food Replacement Meals, Snacks &amp; Drinks\" onfocus=\"if(this.value == 'Search for Total Food Replacement Meals, Snacks &amp; Drinks'){this.value = '';}\" onblur=\"if(this.value == ''){this.value='Search for Total Food Replacement Meals, Snacks &amp; Drinks';}\"></div></div></div>");
$(".last tr > td:eq(0) > div:eq(0) > div:eq(0)").css({"left":"179px", "top":"-7px"});
$("#srchfield").css({"top":"12px", "left":"-209px"});
$(".last tr > td:eq(1) > input:eq(0)").css({"left":10, "top":-4});
$(".last tr > td:eq(1)").html("<div style=\"position: relative; left: 0px; top: 1px;\"><input type=\"image\" src=\"/graphics/srchbtn.jpg\" border=\"0\" style=\"position: relative; left: 10px; top: -4px; width: 36px; height: 27px; z-index: 2;\"></div>");
$(".last tr > td:eq(1) > div:eq(0) > input:eq(0)").css({"top":"38px", "left":"-29px"});
$(".last tr > td:eq(0)").css({"z-index":"0"});
$(".last tr > td:eq(1) > div:eq(0)").css({"z-index":"0"});
$(".last > table").css({"position":"relative", "left":-185, "top":-19, "width":514, "height":34});
$("#srchfield").css({"left":111, "top":-22});
$(".last > table").css({"top":"21px", "left":"-320px"});
$(".last tr > td:eq(1) > div:eq(0) > input:eq(0)").css({"top":"5px", "left":"293px"});
$(".last > table").css({"top":"33px"});
$(".last > table").css({"top":"-8px"});
$("#stripwrap .last").css({"position":"relative", "left":0, "top":"41px"});
$(".last tr > td:eq(1) > div:eq(0) > input:eq(0)").css({});
$(".last tr > td:eq(1) > div:eq(0)").css({});
$(".last tr > td:eq(1) > div:eq(0) > input:eq(0)").css({"z-index":"20"});
$(".last tr > td:eq(1) > div:eq(0) > input:eq(0)").css({"z-index":3173000});
$("#srchfield").css({"z-index":3174000});
$(".last tr > td:eq(1) > div:eq(0)").css({"z-index":3175000, "width":32, "height":33, "left":296, "top":6});
$(".last tr > td:eq(1) > div:eq(0) > input:eq(0)").css({"z-index":3176000, "left":"-4px", "top":"2px"});
$("#stripwrap").replaceWith("<div id=\"stripwrap\" style=\"position: relative; left: 0px; top: 0px; z-index: 2;\">\n <ul style=\"position: relative; left: 0px; top: 0px; width: 372px; height: 29px;\">\n <form method=\"post\">\n <li><input type=\"image\" name=\"GBP\" src=\"/graphics/ukflagb.png\" alt=\"Shop in UK Pounds\" style=\"position: relative; left: -563px; top: -1px; z-index: 3172000;\"><input type=\"image\" name=\"EUR\" src=\"/graphics/roiflag.png\" alt=\"Shop in Euros\" style=\"position: relative; left: -559px; top: -1px; z-index: 3173000;\"></li>\n </form>\n <li style=\"position: relative; left: -43px; top: -27px; font-size: 12px; width: 424px; height: 28px; z-index: 3175000;\">Got a Question? Speak to a Weight-loss Expert +44 28 3833 0720</li>\n \n <li class=\"last\" style=\"position: relative; left: 0px; top: 41px;\">\n <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"position: relative; left: -320px; top: -8px; width: 514px; height: 34px;\">\n <form name=\"CFForm_1\" id=\"CFForm_1\" action=\"/index.cfm?page=eshop/objects/srchresults.cfm\" method=\"post\" onsubmit=\"return _CF_checkCFForm_1(this)\"></form>\n <input type=\"hidden\" name=\"categories\" value=\"0\">\n <tbody><tr>\n <td align=\"right\" style=\"position: relative; left: 0px; top: 0px; width: 105px; height: 32px; z-index: 0;\"><div style=\"position: relative; left: 0px; top: -10px;\"><div style=\"position: relative; left: 179px; top: -7px; width: 105px; height: 10px;\"><div style=\"position: relative; left: -313px; top: 35px;\"><input name=\"srchstring\" type=\"text\" id=\"srchfield\" style=\"width: 461px; position: relative; left: 111px; top: -22px; height: 30px; border-color: rgb(238, 238, 238); z-index: 3174000;\" value=\"Search for Total Food Replacement Meals, Snacks &amp; Drinks\" onfocus=\"if(this.value == 'Search for Total Food Replacement Meals, Snacks &amp; Drinks'){this.value = '';}\" onblur=\"if(this.value == ''){this.value='Search for Total Food Replacement Meals, Snacks &amp; Drinks';}\"></div></div></div></td>\n <td><div style=\"position: relative; left: 296px; top: 6px; z-index: 3175000; width: 32px; height: 33px;\"><input type=\"image\" src=\"/graphics/srchbtn.jpg\" border=\"0\" style=\"position: relative; left: -4px; top: 2px; width: 36px; height: 27px; z-index: 3176000;\"></div></td>\n </tr>\n \n\n </tbody></table>\n </li>\n </ul>\n <div id=\"optimizely_308000628\" style=\"font-size: 12px; text-align: left; left: 0px; position: relative; top: 6px; z-index: 1; font-weight: bold;\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Shop in Euros or £GBP</div></div>");
Level 2
greg 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

[ Edited ]

I see the problem. You have the following in your variation code:

 

$("#header").replaceWith("<div id=\"header\" style=\"position: relative; left: 0px; top: -54px; z-index: 1;\"> ... <p>Items: 0\n<br>\nTotal: £0.00</p> ... </div>");

 

Since the variation gets loaded after the page itself is loaded, the variation code is overwriting the computed values with the above static content. That's also why you see it switch shortly after loading.

 

Whatever you are trying to edit in the #header, you should use a more specific selection so that you are not replacing the entire #header div.

 

More specifically, avoid using the Edit HTML option on an element that contains dynamic content, or else it will be overwritten with static content.

 

(If you really must replace the HTML of the entire div, then you can use regular expressions ("regex") to replace static content with variables, but no need to try that if you can just avoid the above mistake.)

 

Edit: The post below mine shows another way to keep dynamic content, easier than using regex in this case.

Level 2
JDahlinANF 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

Your code inside of where you replace the header specifically sets those values to "0"

 

$("#header").replaceWith("<div id=\"header\" style=\"position: relative; left: 0px; top: -54px; z-index: 1;\"><a href=\"http://www.facebook.com/newyoudiet\" target=\"_blank\"><img id=\"optimizely_677204435\" src=\"//cdn.optimizely.com/img/196773474/98ba61e6243840eca803649ffcba87c5.png\" style=\"position: relative; left: 235px; top: 66px; z-index: 1; width: 461px; height: 64px;\"></a>\n <div id=\"logo\">\n <a href=\"/\"><img src=\"/graphics/logo.png\" alt=\"New You logo\" border=\"0\" align=\"left\" style=\"position: relative; left: 0px; top: -16px;\"></a>\n <br>\n <h2 style=\"display: none;\">The New You Diet Plan<br>Total Food Replacements &amp; VLCD</h2>\n <p style=\"display: none;\">Have Fun &amp; Lose Weight Fast - Your transformation starts here!</p>\n </div>\n <div id=\"basket\">\n <div id=\"shoppingbag\">\n <a href=\"/index.cfm?page=eshop/objects/full_cart.cfm\"><img src=\"/graphics/shoppingbox.jpg\" alt=\"bag\"></a>\n </div>\n \n<h2>My Diet Box</h2>\n\n\n<p>Items: 0\n<br>\nTotal: £0.00</p>\n\n<ul>\n<li class=\"first\">\n<a href=\"/MyDietBox\">GO TO BOX</a>\n</li>\n<li>\n<a href=\"/index.cfm?page=eshop/objects/upsell.cfm\" onclick=\"ga('ec:setAction','checkout_option', {'step': 1, 'option': 'Mini cart'});ga('send', 'pageview');\">GO TO CHECKOUT</a>\n</li>\n</ul>\n\n </div>\n\n <div id=\"optimizely_692623575\" style=\"font-size: 13px; text-align: left; font-weight: bold; position: relative; left: -242px; top: 6px;\">The UK &amp; Ireland's Fastest<br>Growing Weight Loss Plan&nbsp;</div><div id=\"optimizely_710254015\" style=\"z-index:2;margin:-40px 0px 0px 480px;position:relative;\"></div></div>");

 

Rather than placing "0" into the basket, since the structure of the basket is not any different, you should get the HTML of the basket and use that.

 

Perhaps this will work:

var theBasketHTML = window.$('#basket p').html();
$("#header").replaceWith("<div id=\"header\" style=\"position: relative; left: 0px; top: -54px; z-index: 1;\"><a href=\"http://www.facebook.com/newyoudiet\" target=\"_blank\"><img id=\"optimizely_677204435\" src=\"//cdn.optimizely.com/img/196773474/98ba61e6243840eca803649ffcba87c5.png\" style=\"position: relative; left: 235px; top: 66px; z-index: 1; width: 461px; height: 64px;\"></a>\n <div id=\"logo\">\n <a href=\"/\"><img src=\"/graphics/logo.png\" alt=\"New You logo\" border=\"0\" align=\"left\" style=\"position: relative; left: 0px; top: -16px;\"></a>\n <br>\n <h2 style=\"display: none;\">The New You Diet Plan<br>Total Food Replacements &amp; VLCD</h2>\n <p style=\"display: none;\">Have Fun &amp; Lose Weight Fast - Your transformation starts here!</p>\n </div>\n <div id=\"basket\">\n <div id=\"shoppingbag\">\n <a href=\"/index.cfm?page=eshop/objects/full_cart.cfm\"><img src=\"/graphics/shoppingbox.jpg\" alt=\"bag\"></a>\n </div>\n \n<h2>My Diet Box</h2>\n\n\n<p>" + theBasketHTML + "</p>\n\n<ul>\n<li class=\"first\">\n<a href=\"/MyDietBox\">GO TO BOX</a>\n</li>\n<li>\n<a href=\"/index.cfm?page=eshop/objects/upsell.cfm\" onclick=\"ga('ec:setAction','checkout_option', {'step': 1, 'option': 'Mini cart'});ga('send', 'pageview');\">GO TO CHECKOUT</a>\n</li>\n</ul>\n\n </div>\n\n <div id=\"optimizely_692623575\" style=\"font-size: 13px; text-align: left; font-weight: bold; position: relative; left: -242px; top: 6px;\">The UK &amp; Ireland's Fastest<br>Growing Weight Loss Plan&nbsp;</div><div id=\"optimizely_710254015\" style=\"z-index:2;margin:-40px 0px 0px 480px;position:relative;\"></div></div>");

 

 

dtwilson 11-20-14
 

Re: Dynamic shopping cart contents being smothered/replaced by static optimizely content

Thanks Greg and Napoleon - I really should have spotted that but was looking for a $("#basket") line in the code.

I think the problem lay in the fact this was my first attempt at creating a variation and I started dragging and dropping things all over the place before I started to figure out what was going on in the code editor region.

Great learning experience!
Thanks

P.S. Yes I fixed the issue by simply removing that entire #header.replace chunk of code - it was unnecessary.
Level 2