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?

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.

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

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.

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.