Skip to content
  • There are no suggestions because the search field is empty.

Integrating ProductCart with your Website - v4 only [Migration Draft]

Integrating ProductCart with Your Own 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.
  1. Take and HTML page
  2. Remove all navigation, search, and other elements that appear on all pages
  3. Add the ASP code
  4. Split the page into header.asp and footer.asp
That's it!

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.

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 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 a 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 and open and page that is part of your current Web site
  2. Next, remove all 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 and you've gotten yourself a template. By following these next steps, you will quickly apply and save this theme.
 
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: 
<!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>

Replace this text with:
 

<!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 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: 
 <!--#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 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>
 

Editing the default header & footer


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. For instructions on how to modify the default themes, see the Theming Guide within this support base.
 

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 support base for lots of helpful articles on further customizing your store. Other articles can be found throughout the support base on specific topics such as 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.