document.writeIn issue for pre-designed code for e-commerce platform

Question

My website currently is using the Volusion e-commerce platform. As you may or may not know, almost the entire backend of the system is locked down. In order for me to add any extra html content to all my product pages, I am given the following bit of java script to add to my template file by Volusion support.

This example shows how you can add some HTML (this one a simple "Need Help? Contact Us!" message) to appear on the bottom of every product page. It could be placed after the closing tag matching the div tag using the ID of "content_area":

<script type="text/javascript"> 
//<![CDATA[ 
if (location.pathname == "/ProductDetails.asp" || location.pathname.indexOf("-p/") != -1 || location.pathname.indexOf("_p/") != -1)
    document.writeln("\n<table align='center' style='border: solid 2px black;'><tr><td align='center' style='background-color:#ccc; font-weight: normal; padding:10px;'><span style='font-size: larger; font-weight: bold;'>Need help on this or any other product?</span><br />Call 1-800-YourNumberHere | <a href='mailto:customerservice@yourcompany.com'>E-mail Us</a> | <a href='/help.asp'>Help On Our Site</a> | <a href='/returns.asp'>Return Policy</a></td></tr></table>\n\n"); 
//]]> 
</script>

However, upon simply adding this stock code to my template file, it would appear to not be working. I am attempting to view it on a page that does meet the url requirements.

Being a novice at java script, the only thing I could glean as a possible problem of the code is that, while in the description of the code they say it targets "a div tag using the ID of content_area", I do not see where in the code this targeting is taking place.

Any help would be appreciated. My product page URL's all end with the "-p/", so I would not need the other conditions in the code.

Thanks!

Answer 1

As you said it would be OK to use jQuery:

$(function () {
    if (location.pathname == "/ProductDetails.asp" || location.pathname.indexOf("-p/") != -1) {
        var content = "<table align='center' style='border: solid 2px black;'><tr><td align='center' style='background-color:#ccc; font-weight: normal; padding:10px;'><span style='font-size: larger; font-weight: bold;'>Need help on this or any other product?</span><br />Call 1-800-YourNumberHere | <a href='mailto:customerservice@yourcompany.com'>E-mail Us</a> | <a href='/help.asp'>Help On Our Site</a> | <a href='/returns.asp'>Return Policy</a></td></tr></table>";

        var el = $('#content_area');

        // If there's an element with id = content_area in the page,
        // let's insert the content after it.
        // Otherwise, let's insert it to the body.
        if (el != null) {
            $(el).after(content);
        }
        else {
            $('body').append(content);
        }
    }
});

Note: If the page doesn't have the jQuery library loaded, you'll need to do that before the code above:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>