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.

office@lexipixel.com