User Guide for the "ProductCart Suite" Dreamweaver Extension

ProductCart Suite is Dreamweaver Extension for ProductCart v3 users

ProductCart Suite is a Dreamweaver extension for users of version 3 of our ProductCart shopping cart software.

It combines into a single extension the extensions available for ProductCart v2.76 ("Create Header & Footer" and "insert ProductCart Links"), and adds some new features.

Although you do not need to own a license of ProductCart to use this extension, the functionality that is provided by the extension is useless unless you are using our shopping carts.

Table of Contents

• Installation
• How to locate the new extension
• How to use it
  • Configuring settings
  • Inserting links
  • Inserting other code elements (e.g. a search box)
  • Running the Create ProductCart Header and Footer command
    • Notes
    • Alert messages

Installation

To install this extension:

• Download the file to your system
• The file name is ProductCartSuite.mxp
• Double click on the file to launch the Macromedia Extensions Manager
• Follow the instructions on the screen to complete the installation

How to locate the new extension

The ProductCart Suite extension is accessible in Dreamweaver via the Insert and Commands menus, and by using the Insert bar (see image below).

• A new ProductCart menu item is added at the bottom of the Insert menu
  The extension allows you to insert a number of elements onto your page (e.g. a search box)
• A new ProductCart menu item is added in the Commands menu
  The extension allows you to run a command called Create ProductCart Header and Footer
• A new ProductCart bar is added to the Insert Bar (see image on the right). To view the Insert Bar, select it under the Windows menu. Once the bar is shown, you can select which bar to show by clicking on the bar name. A list of avaiable bars will be displayed and you should see ProductCart among them.

Back to the top

How to use it

The ProductCart Suite extension allows you to perform a variety of tasks: you will be able to add code snippets to your store interface, such as a search or login box. You will be able to add links that connect any page to the shopping cart. You will also be able to create the ProductCart header.asp and footer.asp files with one click. First, you need to configure a few simple settings.

Configuring Settings

Before you can use any other feature, you need to setup a few settings, which are described here. To do so, you will use the ProductCart Settings window, shown below. To access this window, select Insert > ProductCart > ProductCart Settings...

• Web Store URL
  Enter the full address to your store, without the "productcart" directory (which is often renamed). So if "productcart" directory is in the root, you will enter the full URL of your Web site (e.g. http://www.myStore.com). If "productcart" is in a sub-folder, you will enter the full URL to that folder. For example, if the "productcart" folder were located in the "retail" directory, you would enter http://www.myStore.com/retail/
  
  In the example below, the "productcart" folder has been renamed "shop" on this ProductCart-powered store, and it is located in the root. For more information about renaming the "productcart" folder, see the ProductCart User Guide.

• ProductCart Folder
  The folder that contains all of ProductCart folders. It's called productcart by default, but most ProductCart stores rename it to a more friendly name (e.g. "shop"). For more information about renaming the "productcart" folder, see the ProductCart User Guide.
• CSS
  This setting applies to the Create ProductCart Header and Footer command. Check whether you want to use the following CSS files in your interface (links to the files are added to header.asp when the file is created) :
  • pcStorefront.css: this stylesheet is used extensively in the ProductCart storefront. You should include this file.
  • pcHeaderFooter.css: this stylesheet is used by the default header.asp and footer.asp files. You do not need to use this file unless you are using the default header.asp and footer.asp files.
• Remember these settings
  If you check this box, the settings will be saved within the current Dreamweaver Web site.

Back to the top

Inserting links

ProductCart allows you to easily insert a number of links to frequently used pages in your ProductCart-powered storefront. The links are always absolute (i.e. the full URL to the page), so it doesn't matter where the page is where you are inserting them. The full URL to the page is built based on the settings that you have entered in the ProductCart Settings window described above.

To use the Insert Link feature, select Insert > ProductCart > Links... from the Insert menu, or click on the Insert Link button on the ProductCart Insert Bar. For example, let's assume that you would like to place a text link named "Search my store" in the navigation section of a certain Web page. Follow these simple steps to add the link:

• Start Dreamweaver and load the Web site that you would like to work on.
• Open the page that you would like to edit.
• Place the cursor in the location where you would like to position the link
• select Insert > ProductCart > Links... from the Insert menu, or click on the Insert Link button on the ProductCart Insert Bar.
• The window shown below will be presented to you. Select the type of link you would like to insert following the instructions outlined below, then click on "OK" to insert the link.

In this example, if you wanted to add a "Search my store" link, you would select "Store search page" in the top part of the window, "Text Link" is the bottom part of the window and enter "Search my store" is the input field, and then click "OK".

The following is a description of each of the elements that appear on the "ProductCart Links" window.

Select a Link Type:

• Store home page (featured products)This link will point to the default home page for your ProductCart store (home.asp). For more information on how to manage your home page, see the ProductCart User Guide.
• Store search page. This link will point to your store's search page (search.asp).
• Browse catalog by category. This link will point to the top level directory in your store catalog, allowing your customers to browse the store by category (viewcategories.asp).
• View specials, best sellers, and new arrivals. These links will point to the corresponding pages on your online storefront (showspecials.asp, showbestsellers.asp, and shownewarrivals.asp). For more information on how to manage these pages using the ProductCart Control Panel, see the ProductCart User Guide.
• View shopping cart. This link will load a page that displays the products currently in the shopping cart (viewcart.asp).
• Customer login. This link will load a page that allows existing users of the online store to log into their account, and new store customers to register with the store. If a customer is already logged in, the customer account's home page will be shown instead (custpref.asp).
• Product Details. This link allows you to add a "View details" button or text link to any page of your Web site. The link will load a product details page for the product whose ID is entered in the input field "Enter product ID". The product details page allows store visitors to specify product options, quantity value, and add the product to the shopping cart. ProductCart users: you can view a product's ID by editing a product in the Control Panel.
• Add to cart. This link allows you to add a "Add to cart" button to any page of your Web site. The link add to the shopping cart the product whose ID is entered in the input field "Enter product ID". ProductCart users: you can view a product's ID by editing a product in the Control Panel.

Enter Link Text/Image:

• Text link. Enter the text to be used for the link.
• Image link. Use this feature if you want to use an image link instead of text link. Browse your computer to locate the image to be used for the link.

Click "OK" to add the link to your page.

Back to the top

Inserting other code elements

You can add several, store-related interface elements to your page, such as a login box or a search tool. When you do so, the corresponding code is automatically added to your page. In most cases you will not see anything when you are viewing the page in Design View: don't worry. When you use the page with ProductCart, the code will work properly (and if you switch to Code View you will see what has been added).

In most cases, you will add these code snippets to your page when you are integrating your Web site design with ProductCart, before using the Create ProductCart Header and Footer command.

Here are the interface elements that you can add to your page:

• Shopping Cart Summary
  This interface element shows a summary of the shopping cart contents. It is only shown to the user when something has been added to the shopping cart. Otherwise, it's hidden.
  
  The system will add a link to the include file smallShoppingCart.asp. This file is in the pc folder. Note: you can only use this object within header.asp and footer.asp. You cannot use this feature on any other page. It is typically used when you are integrating your Web site design with ProductCart, before using the Create ProductCart Header and Footer command.
• Login Box
  This feature creates a small login form on your page. Visitors can use it to log into their account. You can add this interface element to any page, including a static, HTML page.

• Search Box
  This feature adds a small search box to the page. Customers will be able to search by keyword or part number. The system will add a link to the include file smallSearchBox.asp. This file is in the pc folder. So this feature works great if you are integrating your Web site design with ProductCart, before using the Create ProductCart Header and Footer command.
  
  If you want to add a search box to a file that is outside of the pc folder, you should not use this feature because it will point to an include file that will not be found. Use this code instead, changing the name of the productcart folder to match your folder structure :

  <form action="/productcart/pc/showsearchresults.asp" name="search" method="get" class="pcForms">
  <input type="hidden" name="resultCnt" value="10">
  <input type="Text" name="keyword" size="14" value="">
  <input type="submit" name="submit" value="Go &gt;&gt;" id="submit">
  <div class="pcSmallText">
  <a href="/productcart/pc/search.asp">More search options</a>
  </div>
  </form>

• ProducCart Navigation
  Use this tool to add to the page the category-based navigation menu that is controlled by the Generate Navigation feature in the ProductCart Control Panel.
  
  The system will add a link to the include file inc_catsmenu.asp. This file is in the pc folder. Note: you can only use this object within header.asp and footer.asp, otherwise all the links to the categories and products will be broken. Therefore, this tool is typically used when you are integrating your Web site design with ProductCart, before using the Create ProductCart Header and Footer command.

Back to the top

Running the Create ProductCart Header and Footer command

This command automates the process of creating the files header.asp and footer.asp. These files reside in the productcart/pc folder and are used by ProductCart to dynamically "build" a graphical interface for your store when generating the shopping cart pages. This is done instantly and invisibly to the user, and allows you to manage the look & feel of your entire store with just 2 files.

Header.asp and footer.asp need to contain special code that ProductCart uses to open and close a connection to the database that powers your Web store. This code is automatically added when the command is run.

1. Create a "template" for your store. This can be done simply by taking a page from your Web site (e.g. about.html), removing the content that is specific to that page, and saving it with a new name (e.g. template.html). Of course, you can get more sophisticated and add content that is specific to the store portion of your Web site (e.g. a different navigation). NOTE: with the word "template" here we are not referring to a Dreamwever template (*.dwt files), but rather simply to a page that contains the graphical interface used across your Web site, without page-specific content.
2. You should end up with a file that has a large, empty area, which is the area where the shopping cart information will be displayed (e.g. where product information, categories, or the shopping cart content will be shown). In terms of the HTML code of the page, this is typically a table cell.
3. Position your mouse cursor in the table cell that defines the main area of the page. We refer to this point on your page as the split point.
4. Select Commands > ProductCart > Create ProductCart Header and Footer...
5. On the window that is displayed, enter the name of the folder that contains all of the ProductCart files and folders. By default, this folder is called "productcart", but if you have likely renamed it (see the ProductCart User Guide for details). If you have renamed it (e.g. "myShop"), enter the new folder name here.
6. On the same window, select either you want links be recalculated using relative paths (e.g. "images/myImage.gif" becomes "../../images/myImage.gif") or absolute paths (e.g. "images/myImage.gif" becomes "/images/myImage.gif").
   
   
   
7. Dreamweaver will now create the "productcart/pc" folder, if it doesn't already exist. If you have entered a folder name other than "productcart", that folder name will be used (e.g. "myShop/pc"). ProductCart will then create header.asp and footer.asp and save them to that folder.
8. You will receive a message indicating that the files were successfully created.
9. If you don't see them in the "Files" area of Dreamweaver, click the Refresh button (F5).
10. If the files already exist, they will be backed up before they new ones are created.

Notes

• The split point typically coincides with an empty table cell. Everything on the page before this point will be used to create header.asp. All the code after this point will be used to create header.asp. Tecnically speaking, the code in header.asp typically ends with an opening table cell tag (<td>), whereas the code in footer.asp typically begins with the corresponding closing tag (</td>).
• If you run the extension again, any existing copies of header.asp and footer.asp will be renamed (backed up) and replaced with the new version.
• Links to background images and CSS files are not automatically recalculated and will have to be manually adjusted. This is because these file references can be written in a variety of ways and checking them automatically would drastically slow down the application.

Alert Messages

The following alert messages are shown in the scenarios described below:

This alert is shown when the file that you are working with has not been saved to the root directory. Move your template (i.e. the file from which you want to create header.asp and footer.asp) to the root of your Dreamweaver Web site. When the extension is run, header.asp and footer.asp will be saved to the "productcart/pc" directory, which is automatically created if it doesn't already exists.

If your ProductCart files reside in another directory (e.g. you have renamed the "productcart" folder "store") and/or if that directory is one or more levels down from the root, simply drag & drop the files in the correct "pc" folder after they have been created, so that all the links are automatically recalculated by Dreamweaver.

This alert is shown if you attempt to use the Create ProductCart Header and Footer extension while in "Code" view. Simply switch Dreamweaver to "Design" view, and select the split point there.

This alert is shown if you attempt to use the Create ProductCart Header and Footer extension after selecting an object (e.g. an image) on the page. To use the extension, you need to position (click) your mouse cursor in an area of the page that can be "split". Typically, a good split point is an empty table cell. Click here for details on the slip point.

This alert is shown when the extension detects that the ASP code required by either header.asp or footer.asp is already on the page. If that is the case, remove it from the page before continuing, or two instances of the code will be added to header.asp and/or footer.asp.

The code that is added to header.asp consists of the following lines:

<!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")
%>

The code that is added to footer.asp is located right before the closing </body></html> tags, and consists of the following lines:

<%
conlayout.Close
Set conlayout=nothing
Set RSlayout = nothing
Set rsIconObj = nothing
%>