====== 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/]]).
{{productcart:storefront_create_header_footer.gif|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 **[[http://www.greatonlinestores.com|Great Online Stores]]**, a directory of [[http://www.greatonlinestores.com|e-commerce Web sites powered by ProductCart]].
{{:productcart:greatonlinestores.gif|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), [[#editing_the_default_header_footer|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:
- 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).
- 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.
- 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:
- Create a new page based on the Dreamweaver template that you created.
- Save the page to the productcart/pc folder in your Web site. This way Dreamweaver will automatically recalculate all the links for you.
- 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.
- 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:pc-integrate-sample.gif|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 [[:how_to:rename_productcart_folder|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).
Untitled Document
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 ===
<%if pcv_PageName<>"" then%>
<%=pcv_PageName%>
<%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")
%>
=== ProductCart v4 ===
<%if pcv_PageName<>"" then%>
<%=pcv_PageName%>
<%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")
%>
The difference between version 3 and version 4 of ProductCart is the addition of the following include statement right before the closing tag.
----
The bottom of your template will typically end with the following code:
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
%>