Announcement:Materials and articles for ProductCart 5 can be found at our brand new support center.

Create an account to edit articles | See Formatting Syntax for Wiki syntax | We look forward to your contribution!

Integrating ProductCart with your own store design

Overview

Many e-commerce applications limit your ability to customize the look & feel of your online store, therefore preventing you from blending store pages with the rest of your Web site. ProductCart doesn't. ProductCart allows you to build an online store that will merge seamlessly with your Web site. And full support for Cascading Style Sheets in ProductCart v3 and above gives you even more control on the way your store will look.

You can use virtually any graphical interface that you can think of and apply it to ProductCart.

  • If you already have a Web site, it will be a snap for you to make all shopping cart pages blend with the rest of the site.
  • If you are designing a new Web site, you can be as creative as you’d like. ProductCart does not limit you in any way.
  • If you plan to hire a designer, simply send them a link to this page.
  • If you want to start with a pre-designed template and adapt it to ProductCart, you can certainly do that too (e.g. http://www.freecsstemplates.org/).

It's really easy to take any Web page and turn it into the design of your ProductCart-powered e-commerce store

By reading the rest of this section, you will acquire all the information you need to take advantage of a number of ProductCart features that allow you seamlessly merge the shopping cart with the rest of your Web site. A basic understanding of HTML is recommended.

Examples

The best way to appreciate how flexible ProductCart is when it comes to blending with your store design is to take a look at some real stores that use it. You can see hundreds of them listed on Great Online Stores, a directory of e-commerce Web sites powered by ProductCart.

Examples of ecommerce stores that use ProductCart shopping carts

How does it work?

Every storefront file that is part of ProductCart includes two other files that define the way it is presented to store visitors. The files are called header.asp and footer.asp and are located in the pc folder. Because the same files are included with every page generated by ProductCart in your storefront, you only need to worry about creating (or editing) those two files to apply a consistent graphical interface to your entire storefront.

Using your own Web site design

Generating the header and footer from your own Web site design is a simple task. Follow the steps mentioned below under Generating header.asp and footer.asp and you will be applying a custom graphical interface to your ProductCart store in no time.

Editing the "default" design

In many areas of this document we will refer to the “default” header.asp and footer.asp files that are included in ProductCart. When you first install ProductCart, these are the files that make up the graphical interface of the storefront. of course, you are welcome to take the default design for the store, edit it to better meet your needs, and use it.

If you no longer have these files (e.g. you overwrote them while generating your own), you can find them later in this document.

Generating header.asp and footer.asp

First Step: create a template

By template we refer to a Web page that contains the main graphic and navigation elements that make up a Web site's interface. Creating a template is a very simple thing to do. Here is one way to do so:

  1. First, launch your favorite HTML editor (e.g. Microsoft® FrontPage, Macromedia® Dreamweaver, Adobe® GoLive, etc.) and open any page that is part of your current Web site (or create a new page).
  2. Next, remove all the content that is specific to that page only. For example, your “about.html” page will likely contain some text that describes your business. Remove that text, but keep navigation and other graphic elements that are repeated on other pages.
  3. Save the file with a different name (e.g. template.html) and you’ve gotten yourself a template. By following the steps described over the next few pages, you will be able to quickly apply this template to your ProductCart-powered Web store.

Note Macromedia Dreamweaver® Users: when we say template in this document, we are not referring to a Dreamweaver template (*.dwt files). However, if you created a Dreamweaver template for your Web site, you can use it here too. Just follow these simple steps:

  1. Create a new page based on the Dreamweaver template that you created.
  2. Save the page to the productcart/pc folder in your Web site. This way Dreamweaver will automatically recalculate all the links for you.
  3. Detach the page from the template by selecting “Modify/Templates/Detach from Template”. This page will no longer be controlled by your Dreamweaver template. However this is a necessary step to remove the extra code that Dreamweaver adds to the file’s source code.
  4. Save the file and continue with the steps outlined below.

For example, the blank Web page shown below features a few graphic elements at the top, and a navigation menu on the left side. The page content would typically go in the white area in the center of the window, where we placed the “ProductCart's code will go here” message.

ProductCart will blend right into your Web store interface

When you create this page, setup the links and image locations considering that the header.asp and footer.asp files that you will create from it will ultimately be located in the pc sub-folder of the productcart folder (which has likely been renamed). Do this to ensure that you will not end up with broken image links on your store interface. You have two options:

  • Relative image paths
    Assuming that your Web site images are stored in a folder called images located in the root directory of your Web site, and assuming that the productcart folder is also located in the root, the path to those images should be ”../../images/myImage.gif”.
  • Absolute image paths
    You can use an absolute path from the root folder. Assuming that you have positioned the productcart folder in the root of the Web site, the image links would be ”/images/myImage.gif”.
  • A third option is to use absolute URLs (e.g. http://www.myStore.com/images/myImage.gif), but this is not recommended as it can trigger a security alert if you use an SSL certificate on your store. When customers begin the secure checkout, they would be shown an alert as the browser would notice that one or more elements on the page (your images) are being loaded on the HTTP protocol instead of the HTTPS protocol.

Second Step: add the ASP code

Now that you have created a template and edited the image links so that they will not be broken when header.asp and footer.asp are moved into the pc sub-folder, let's focus on the next step, which consists of adding some lines of ASP code to your HTML file so that it properly communicates with ProductCart.

Your HTML template will likely begin with something like the following (this is the code created by Dreamweaver when you generate a new HTML file and is common to a lot of Web pages). Your page might have slightly different code (e.g. it might not include a “DocType” at the top, and/or include additional Meta Tags).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Untitled Document</title>
 </head>

This is called the head section of an HTML page. It includes a definition of what the document is (the first line of the code), the opening HTML and HEAD tags, a special Meta Tag that further defines the type of document, the Title Meta Tag, and the closing HEAD tag.

You will need to replace these lines of code with the following. The code is different depending on whether you are using ProductCart v3 or v4.

ProductCart v3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--#include file="include-metatags.asp"-->
<html>
 <head>
  <%if pcv_PageName<>"" then%>
   <title><%=pcv_PageName%></title>
  <%end if%>
  <%GenerateMetaTags()%>
  <%Response.Buffer=True%> 
  <%
   Set conlayout=Server.CreateObject("ADODB.Connection")
   conlayout.Open scDSN
   Set RSlayout = conlayout.Execute("Select * From layout Where layout.ID=2")
   Set rsIconObj = conlayout.Execute("Select * From icons WHERE id=1")
  %>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link type="text/css" rel="stylesheet" href="pcStorefront.css" />
 </head>

ProductCart v4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--#include file="include-metatags.asp"-->
<html>
 <head>
  <%if pcv_PageName<>"" then%>
   <title><%=pcv_PageName%></title>
  <%end if%>
  <%GenerateMetaTags()%>
  <%Response.Buffer=True%> 
  <%
   Set conlayout=Server.CreateObject("ADODB.Connection")
   conlayout.Open scDSN
   Set RSlayout = conlayout.Execute("Select * From layout Where layout.ID=2")
   Set rsIconObj = conlayout.Execute("Select * From icons WHERE id=1")
  %>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link type="text/css" rel="stylesheet" href="pcStorefront.css" />
  <!--#include file="inc_header.asp" -->
 </head>

The difference between version 3 and version 4 of ProductCart is the addition of the following include statement right before the closing </head> tag.

<!--#include file="inc_header.asp" -->

The bottom of your template will typically end with the following code:

 </body>
</html>

You will need to replace these two lines with the following code, which is also different depending on whether you are using version 3 or version 4 of ProductCart.

ProductCart v3

 <% 
 conlayout.Close
 Set conlayout=nothing
 Set RSlayout = nothing
 Set rsIconObj = nothing
 %>
 </body>
</html>

ProductCart v4

 <!--#include file="inc_footer.asp" -->
 </body>
</html>

Important Notes

  1. You need to replace your existing Title, Description, and Keywords Meta Tags with the code above so that ProductCart can automatically create Meta Tags for your product, category, and content pages for you.
  2. If your store uses a language that employs a different alphabet, make sure to change the charset accordingly
  3. If there are extra lines or other characters in the code, ProductCart may not function properly. Sometimes pasting from a MS Word or PDF document directly into your HTML editor can create problems. Instead of copying and pasting the code from this document, we recommend that open in your HTML editor the default header.asp and footer.asp files located in the pc folder, and copy the code from there. Or you can find the same code in this ZIP file.

    If you create your header.asp and footer.asp files, load a ProductCart page, and receive an error, then probably the culprit is extra characters that were added to the code when you copied it and pasted it. Make sure that you are using the correct code.

Third Step: create "header.asp" and "footer.asp"

Now that you have added the required code to your template, you are ready to create header.asp and footer.asp. To do so:

  1. Open the file and place your mouse cursor at the beginning of the section where the page content should appear. If you are using an HTML editor such as Macromedia® Dreamweaver or Microsoft® FrontPage, you can do this in the design view by positioning the cursor at the center of the table cell (or DIV) that is going to contain the shopping cart content.
  2. Switch to the HTML view to display the code.
  3. Copy all the code from that point to the beginning of the page by dragging your mouse up to the top of the page, paste it into a new Notepad file, and save it as “header.asp”.
  4. Go back to the template file and now copy all the code from that point to the end of the document by dragging your mouse down to the bottom of the page, paste it into a new Notepad file, and save it as “footer.asp”.
  5. You're done!

When you purchased ProductCart, it included the default header.asp and footer.asp files. Use these files as a point of reference if the paragraphs above were not clear to you.

An Example

Let’s look at a basic example of how this process works. The sample page that we are using here is an extremely simply HTML document that organizes its content in a table. The code for the page, our “template page”, would look like this:

<html>
  <head>
    <title>My Template</title>
  </head>
<body>
 <table>
  <tr>
   <td>
     This is my template
     </td>
    </tr>
   </table>
  </body>
</html>

In this basic example, the code for header.asp would look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--#include file="include-metatags.asp"-->
<html>
 <head>
  <%Session.LCID = 1033
   if pcv_PageName<>"" then%>
   <title><%=pcv_PageName%></title>
  <%end if%>
  <%GenerateMetaTags()%>
  <%Response.Buffer=True%> 
  <%
   Set conlayout=Server.CreateObject("ADODB.Connection")
   conlayout.Open scDSN
   Set RSlayout = conlayout.Execute("Select * From layout Where layout.ID=2")
   Set rsIconObj = conlayout.Execute("Select * From icons WHERE id=1")
  %>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link type="text/css" rel="stylesheet" href="pcStorefront.css" />
 </head>
 <body>
  <table>
   <tr>
    <td>

Notice how the code in header.asp stops with the opening tag for the table cell that in our template page contained the text “This is my template”. We removed that text because we don’t want it to show on the store. The code for footer.asp starts with the closing tag for the same table cell:

   </td>
  </tr>
 </table>
 <% 
 conlayout.Close
 Set conlayout=nothing
 Set RSlayout = nothing
 Set rsIconObj = nothing
 %>
 </body>
</html>

Fourth Step: upload the files

Upload both files to the productcart/pc folder on your Web server. You will see that the default version of those files is already located in that folder. Rename the default files before you upload your files to the server so that you can keep them for backup purposes.

Now load any page in the ProductCart storefront (e.g. http://www.yourStore.com/shop/pc/home.asp, where http://www.yourStore.com is your Web site address and shop is the renamed productcart folder ). Is the page loading correctly? If not, go through the following troubleshooting steps:

  • Are you receiving an ASP error? Make sure the code has been copied and pasted properly. Review the Second and Third steps above for more information. Do not copy and paste the code directly from this document into your HTML template.
  • Are images missing? Make sure that you have altered the links to all image files as mentioned under First Step: create a template.
  • Are links to other files broken? Make sure that you have altered the links to account for the fact that you are two levels down from the root. Also make sure that links to other shopping cart pages point to the same directory. For example, a “Search” link should simply point to search.asp since the file is in the same folder. That is, it should look as follows:
<a href="search.asp">Advanced Search</a>

Creating a professional-looking graphical interface for your store might be time consuming. Some ProductCart users that wish to get their store up & running immediately use an interim solution, which consists of using an edited version of the default header.asp and footer.asp files that ship with ProductCart.

ProductCart v4.1, 2011

Default ProductCart storefront interface shipped with version 4.1 in 2011

ProductCart v4

Default ProductCart storefront interface shipped with version 4

ProductCart v3.5

Default ProductCart storefront interface shipped with version 3.5

ProductCart v3.11

Default ProductCart storefront interface shipped with version 3.11

Dynamic Meta Tags

In order to make your Web store more search engine friendly, the code that you have added to header.asp will take care of automatically creating the Title, Description, and Keyword Meta Tags for every page in the storefront. For more information about using Meta Tags in ProductCart, refer to the Search Engine Optimization section.

Adding search, login, etc. to the store design

Go to the ”How To” section of this WIKI for lots of articles on how to add interface elements to your store design, and further control the way information is presented (e.g. only showing something when a customer is logged is vs. logged out of their account). Among others, a common addition to the storefront interface is category navigation.

Additional Notes

jQuery

ProductCart v4 and above include the jQuery JavaScript library. It is used for several features, including “One Page Checkout”.

Make sure that you do not include a separate jQuery library in “header.asp” as you could run into some conflicts if two jQuery libraries are loaded onto the same page (we have had reports of this issue).

The location of the jQuery library in ProductCart is ”includes/jquery”.


QR Code
QR Code Integrating ProductCart with your own store design (generated for current page)