Web Variants and Placeholder html

[yellowbird]

I recently made a new website with a placeholder that uses html code. The code functions perfectly in the main site (you can get your code from free at auction nudge). I have a web variant with the site, though it renders in the page in xara on the variant, when you preview through xara or the browser it is just blank. I made a test site with just the place holder and code, resized the place holder to different sizes on additional pages in case the smaller size, length etc was a problem - worked fine. Created a mobile variant with the placeholder, renders in the xara program, but when you preview through xara or a browser, just shows blank. Are there special considerations when using placeholders with code in web variants? Thanks.

[siran]

Could you post the placeholder code? There have been reported similar problems when the placeholder code was missing closing tags.

[yellowbird]

Here is the code: <script type="text/javascript" src="//www.auctionnudge.com/item_build/js/SellerID/a__dot__and__dot__m/siteid/0/theme/responsive/MaxEntries/6/cats_output/dropdown/page/init/show_logo/1/img_size/80"></script><div id="auction-nudge-items" class="auction-nudge"></div>

[jamesd]

Try putting the div before the script

[siran]

I guess that is because all the HTML is added at runtime to the element with id="auction-nudge-items" and if you have the same id on the variant it probably will not be found and updated. IDs have to be unique. Not sure what you can do to fix it.

[jamesd]

ok, as a workaround... just say I have the main page and one variant at 760px.

place into website >> page >> HTML (body)

<script type="text/javascript" src="http://www.auctionnudge.com/item_build/js/SellerID/a__dot__and__dot__m/siteid/0/theme/responsive/MaxEntries/6/cats_output/dropdown/page/init/show_logo/1/img_size/80"></script>
<script>
// for main page
if (document.documentElement.clientWidth > 761) {
    document.querySelector(".auctionScript").innerHTML = "<div id='auction-nudge-items' class='auction-nudge'></div>";
}
// for each variant changing 760 to the variant size
else if (document.documentElement.clientWidth <= 760) {
    document.querySelector(".auctionScript760").innerHTML = "<div id='auction-nudge-items' class='auction-nudge'></div>";
}
</script>

Then place on each variant a placeholder for example on the main variant place <div class="auctionScript"></div> and on a variant of 760 width place <div class="auctionScript760"></div>

Just to note that this will not work on resizing the window but will work on the initial load size of the window

[yellowbird]

I will implement this and let you know how it goes. Thank you very much!