Volusion 5 - Custom Javascript DOM Tip
While Volusion 5 is a powerful ecommerce platform, and has many features that other shopping carts aspire to, the latest version upgrade has, in-fact, removed some of the flexibility that was available in previous versions.
In version 4 or lower, there were a set of .ASP files that a store owner could modify to customize the appearance and functionality of their Volusion. In Volusion 5 the .ASP files are all but gone -- replaced by a single template file, some CSS stylesheets and more options you can set to customize your store.
While some of the new features are nice, the awkward generated code marked up in deeply nested tables is still there -- and it makes it very difficult to modify the appearance of certain pages or sections of your store.
So, what do you do when you want to, or NEED TO add some functionality or design elements, (or remove some) ?
Javascript and DOM to the rescue!
It's hard to to modify things since Volusion uses a single template for 90% of the store's interface including; the home page, category pages, product display pages and areas like the articles and knowledge base, user account area, and much of the rest of the store... one template, that's it.
The way the template works under Volusion 5 is different than it was under version 4 or earlier. In earlier versions you had two files, (a header.asp and a footer.asp file), and the generated content was sandwiched between them using various other .ASP files and server side includes.
Instead of "the sandwich", Volusion now uses DOM, (Document Object Model), and server side scripting to replace the contents of a single DIV tag in the template file, (the one marked up as <div id="content_area"></div>), into which Volusion inserts the generated content. In a typical Volusion template, the content area is the part of the page which appears below the header image, to the right of the sidebar navigation links and above the footer section.
What is between "content_area" opening div and closing div tag is irrelevant... the server replaces it based on the page the template is displaying.
Since Volusion can do this code replacement on the fly, and alter the template, I got to thinking, "How can I modify the generated code, and do it only on certain pages?...
Simple. Not so simple to figure out, but once you see my example, you'll be on your way to modifying Volusion in ways you never though of.
Let's say you want to have something appear on every product page. Rather than trying to edit the custom code into every product record, simply find an unused field and leave yourself a "hook", (for this example we'll use the ProductDescription_AbovePricing field).
By inserting an empty div tag with an ID of our choosing, we can, in effect leave a DOM hook we can tap into and put whatever we want there with Javascript.
Here's the steps and code:
Note: This example does not do anything useful -- but does show you how to do something very useful.
1). In the ProductDescription_AbovePricing field of one product, (or all products) type in:
<div id="myid1" class="myclass1"></div>
2). In the store template's CSS file, add:
.myclass1 { color: red;}
3). in the store's template, add the following near the end of the file, (just before the </body> tag).
<!-- START: JS for ProductDisplay.asp --> <script type="text/javascript"> if(location.href.indexOf('ProductDetails.asp') != -1) { document.getElementById('myid1').innerHTML = '<b>something new and different</b>'; } </script> <!-- END: JS for ProductDisplay.asp -->
That's it. Now when you look at the product display page, (a page with ProductDisplay.asp in the URL), you should see the words "something new and different", (in bold and colored red). I used the CSS to color it red, and the <b></b> tags in the Javascript just to show you how flexible this can be -- you could, in effect put anything into the page.
You can use embedded HTML tags, CSS, DOM, Javascript, images and anything else you can think of -- get creative!
This approach is not limited to the product display pages... you can do it anywhere the generated content has something you can hook into and replace. The example I've used is very simple, but the concept is very powerful. By detecting part of the URL, you know what the user is looking at, by inserting your own DIV, SPAN, or other tag and dynamically replacing the (innerHTML) content of the tag pair, you have a virtually endless way of modifying the look and feel. Of course, you could get creative and detect more refined parts of the URL, such as a Product Code, Category ID or other info, and base your JS replacement on that for a truly refined customization.
###
Have you figured out how to insert ASP in the articles?
Comment by Brian — July 2, 2009 @ 1:30 pm
Thanks for the tip! I only just realized that a huge portion of code is inaccessible via the templates and CSS… still trying to figure out how to control within content_area div, but in the meantime, this is great to know for adding more.
Comment by April — August 14, 2009 @ 6:39 pm
Cheers for this great and helpful tip!
Volusion could have at least put an id on the tables we cant edit!
Comment by justin — September 29, 2009 @ 8:48 am
Thanks for posting this explanation. I’ve been hunting for the .asp’s (ProductDisplay.asp, etc.) for a while now, but now I know they are black-boxed by volusion and you have to use the DOM.
-Tim
Comment by Tim — November 5, 2009 @ 2:16 pm
Hello, I’m trying to use multiple DOM on my site and when I do, It says Done, but with error on page at the bottom of IE8. Also in the code where you have != -1, when I take it off thats when it works but still with errors.
The code I have is:
if(location.href.indexOf(‘ProductDetails.asp’) ) {
document.getElementById(“AdobeRebate”).innerHTML=’<B>Rebate Offer: $20.00 Price After Rebate: $96.99 You Save: $53.00 After MIR </b> Expires: 10/31/2010 <a href=”/v/rebates/adobereb.pdf” rel=”nofollow”>Click Here for Rebate Info</a>’;
}
if(location.href.indexOf(‘ProductDetails.asp’) ) {
document.getElementById(‘bundle’).innerHTML=’Bundle Deals (click image to view description)’;
}
Comment by TLe — January 11, 2010 @ 9:39 pm
I would try a very basic replace, e.g.-
if(location.href.indexOf(‘ProductDetails.asp’) ) {
document.getElementById(“AdobeRebate”).innerHTML=”THIS IS A TEST”;
}
If that works, then try the more complex strings — chances are you have a problem with a quote or other character that needs to be escaped, or your editor has inserted LF/CR or other code that is not visible but messing up the string.
Comment by Randy Harris — January 12, 2010 @ 6:34 am
Really helpful info Randy. Can you please clarify a couple things for me?
1) In Step 3 above, you say, “a page with ProductDisplay.asp in the URL.” Is this correct or should it say, “a page with ProductDetails.asp in the URL.”
2) You mentioned using the ProductDescription_AbovePricing field for the DOM hook. When I insert my (DIV) in Step 1 above as described, it works. If I use another field, it doesn’t work. Can you please explain how the code in Step 3 is associated with the ProductDescription_AbovePricing field?
Thanks for your continued assistance,
Chris b.
Comment by Chris Bruckner — February 23, 2010 @ 4:53 am
1). Yes, good catch — I was using some code and cut and pasted “ProductDisplay.asp“… it should say ProductDetails.asp.
2). Not sure where else you tried to insert the hook, but the javascript will only work once on a page, (if you have multiple divs to update, you would need to loop through them — and/or have separate javascripts if the divs needed different customizations). Also, the div uses a (CSS) id, and you are only supposed to have one element for an id, (for multiple divs with shared attributes you’d use a class, not an id). So, make sure you only have (1) div to test on a product page (using this code), and make sure the div id matches the javascript reference.
Comment by Randy Harris — February 23, 2010 @ 5:06 am
I am realizing some nice adsense revenues while also selling a lot of product on my volusion site. I would like to increase the adsense revenue my inserting the adsense javascript on my product pages displayed on my website. I have had no luck in getting volusion to allow me to access the file necessary to do this.
I would like to know how and where I could ad the javascript for the ad banner, so that it appears on my product page, just above where the browsing person’s history would be shown. Below the product details and option selections. It’s good white space to take advantage of.
I have all the advertising on my site relevant to my content or what the visitor searches for (google cookies).
Any help would be appreciated.
duane
Comment by Duane Dewsbury — August 7, 2011 @ 7:31 pm
I can’t believe you’d want to send traffic away from and online store, but Im pretty sure it can be done.
You would just use the “DOM hook” method I’ve described — the hardest part is probably getting the syntax right so the Adsense code doesn’t get mangled by the javascript that does the replacement.
Have you been able to replace anything using the DOM method?
I’d try to get a single word or image to appear where you want, then work on replacing that with the Adsense ad code.
Comment by Randy Harris — August 7, 2011 @ 7:44 pm
I am very new at coding and have been learning by trial and error. The Volusion platform is making it a bit more difficult, but this article is extremely helpful. I want to add a jQuery Multi Level CSS Menu using this DOM method under one of my main catagories. I was able to get the red text to show by changing the location from ProductDetails.asp to SearchResults.asp and following your steps.
How would I implement HTML instead of text in the code below. I tried adding the code in between ” after .innerHTML, but nothing showed up.
if(location.href.indexOf(‘ProductDetails.asp’) != -1) {
document.getElementById(‘myid1′).innerHTML = ‘something new and different‘;
}
Another issue that I am having is implementing the .css and .js. for the jQuery Multi Level CSS Menu.
Any help or recommendations is appreciated!
Regards
Daniel
Comment by Daniel Ross — August 9, 2011 @ 11:49 pm
Hi Daniel,
Since you need to deal with HTML, CSS, Javascript, DOM, jQuery and Volusion — this isn’t really beginner stuff — but here’s a bit of help that might get you closer.
1). I tried adding the code in between ” after .innerHTML, but nothing showed up.
Most likely this is a syntax / encoding issue — you need to know how to work with Javascript. If the (red) “something new and different” appears, the script works and everything is in place to do the customization.
Also — note that ‘myid1′ refers to a DIV tag — you need to make sure that the Javasciprt is properly coded AND that there is no broken or improperly nested OR conflicting HTML in that code.
2). You can include the javascript in the head section of the template for your store. You’ll need to FTP the files in place, then use an absolute path to be sure they are always found, e.g.- if you upload to the /mystuff/ directory, the script tag and path would be something like —
<script type="text/javascript" src="http://example.com/v/vspfiles/mystuff/jquery-1.2.3.js" ></script>NOTE: there are some jQuery files already loaded in some Volusion installations — use FireFox / Firebug to see what’s already there… On that note, you may also cause some conflicts uploading other jQuery files.
3). you can upload a CSS file to the same directory where your template’s CSS files are located and then add the name of that file to the imports.css file and it will be included.
Randy.
Comment by Randy Harris — August 10, 2011 @ 12:06 am
I also read somewhere that innerHTML does not work with firefox – is this true? If so what other methods can be used that work on all browsers.
Thanks Again
Daniel
Comment by Daniel Ross — September 22, 2011 @ 5:54 pm
That’s most likely a browser issue — your browser is probably setup to view the PDF.
I can’t help or even discuss browser issues — there are too many different browsers, operating systems and versions… (I don’t even want to know what browser you or your users are using)…
With that said — to save a PDF, click “Save a Copy” once it’s in the browser, or, to prevent the browser from displaying a PDF (or any file), RIGHT CLICK on the PDF link and then select “Save Link As…” (or similar function if your browser has one).
Comment by Randy Harris — October 17, 2011 @ 8:12 am