Revised Tutorial by John Semon II (K-Factor Technologies) - original tutorial by Daniel Bailey & Mister Ed Click on images to see larger views
| |
|
What you need:
store_header.inc
store_footer.inc
These are
files located in the html/html_templates directory. |
 |
| |
|
Step 1 |
If you do not have a template/layout your site isn't already using, go ahead and create one with a html editor of your choise. For this demostration I have kept it simple and created an layout that is a table with four rows.
See example--> |
 |
Step 2 |
| Now that you have your layout finished and both store_header.inc and store_footer.inc opened in your html editor of choice, lets get started. |
 |
Step 3 |
You are basically splitting your layout into three parts.
Part one is your header.
Part two is your body.
Part three is your footer.
Lets work on Part 1, your header. Highlight everything that will include your header.
Edit->Copy (Alt + C) |
 |
|
Go to your store_header.inc file.
Edit->Select All (Alt + A) |
 |
|
Now Edit->Paste (Alt + V)
File->Save |
 |
Step 6 |
Go back to your layout page.
Lets work on Part 3, your footer. Highlight everything that will include your footer.
Edit->Copy (Alt + C) |
 |
Step 7 |
Go to your store_footer.inc file.
Edit->Select All (Alt + A)
|
 |
Step 8 |
Now Edit->Paste (Alt + V)
File->Save |
 |
Final Step |
| Once you have saved everything to your website you are all done!!! |
 |
| |
|
| |
|
Note all these steps are optional.
1) For this goodie, you will need to insert the following code where you want your product category links to go if you want them dynamically created by the script when you add new categories. A left or right border position works best. These will be text links:
<!-- Start Dynamic Link Creation -->
<!--agorascript-pre {
local(%db_ele,$sku,$category,%category_list);
if (!($sc_db_lib_was_loaded =~ /yes/i))
{ &require_supporting_libraries (__FILE__,
__LINE__, "$sc_db_lib_path"); }
&capture_STDOUT;
@category_list = &get_prod_db_category_list;
foreach $category (sort(@category_list)) {
print "<a href=\"agora.cgi?cart_id=m=on&product=",
"$category\">$category</a> \n";
}
&uncapture_STDOUT; }
-->
<!-- End Dynamic Link Creation -->
2) Insert the following code where you want your search button and text area to appear (optional):
<!-- Start Search Code -->
<input type="text" size="13" name="keywords">
<input type="hidden" name="ppinc" value="search">
<input type="hidden" name="exact_match" value="on"> <input
type="submit" name="search_request_button" value="Find It">
<!-- Stop Search Code -->
2) If you would like to insert a cart contents overview or summary, use the following code:
<!-- Start Cart Summary -->
<!--agorascript-pre { # code to count up the CART contents
local (@my_cart_fields,$my_cart_row_number,$result);
local ($count,$price,$product_id,$quantity,$total_cost,$total_qty)=0;
if ((!(-f "$sc_cart_path"))||($sc_processing_order =~ /yes/i))
{return ""}
open (CART, "$sc_cart_path") || &file_open_error("$sc_cart_path",
"display_cart_contents_in_header", __FILE__, __LINE__);
while (<CART>)
{
$count++;
chop;
@my_cart_fields = split (/\|/, $_);
$my_cart_row_number = pop(@my_cart_fields);
push (@my_cart_fields, $my_cart_row_number);
$quantity = $my_cart_fields[0];
$product_id = $my_cart_fields[1];
$price = $my_cart_fields[$sc_cart_index_of_price_after_options];
$total_cost = $total_cost + $quantity * $price;
$total_qty = $total_qty + $quantity;
} # End of while (<CART>)
close (CART);
if ($count > 0) {
$result = '<div align="center">' .
'<center><table border=0 width=580><tr>' .
'<td width="20%" align=left> ' .
'<a href="agora.cgi?dc=1&%%href_fields%%' .
'"><img src="html/images/view_cart.gif" border="0"></a></td>' .
'<td width="60%" align=center><font face="arial" size="2" color="#000000">' .
"Items in cart: $total_qty \n " .
"Subtotal: " . &display_price($total_cost) .
"</font></td>\n" .
'<td width="20%" align=right>' .
'<a href="%%StepOneURL%%?order_form_button.x=1&%%href_fields%%' .
'"><img src="html/images/check_out.gif" border="0">' .
'</a> </td>' .
"</tr></table></center></div>";
} else {
$result = '<center>Your Shopping Cart Is Empty</center>';
}
return $result;
}-->
<!-- End Cart Summary -->
You will need to have an area of at leaset 40 pixels high by 500 pixels wide to display this properly. You will also need to produce the view_cart.gif and check_out.gif images or replace this code with that for a text link. The images go into the html/images directory.
AgoraCart comes with another variatation of this by default that uses text links and also uses other AgoraScript tokens for dynamic efficiency as well as just creates another table row if cart is populated (something in it), other wise the summary does not show if the cart is empty. These are used in the standard headers that come with the cart (4.0K and above) as well as within the basic header/footer manager when it upates the standard headers for you (if you use it) as it's an optional add-on found in the download section of this site).
5) Finally must have the following code at the very bottom of the store_header.inc file:
</form>
Now that you have a header and footer file created, upload them to the html/html-templates directory. A word to the wise: Rename the original store_header.inc and store_footer.inc files to something like store_header_orig.inc so you will not overwrite the original files. This will allow you to refer back to them if you have a problem with something.
That is all that is required to make all non-secure cart generated pages have your look and feel. Do the same thing to create the secure_store_header.inc and secure_store_footer.inc files. If you use relative paths for your images and links, you can use the same header and footer files you created above, just rename them. Make sure you edit all image references to be relative to the agora.cgi script. You may put your images in any directory you like outside of the cgi-bin directory. Most servers will not display an image if it is located within the cgi-bin directory.
The store home page and all static content pages such as privacy policy, about us, etc is another story but just as simple. Here, you will want to start by adding the <body> tag and everything above it. This should include the <html>, <meta>, <title> and </html> tags. Directly below the <body> tag place the folowing code to reference the store_header.inc file you just created:
<!-- Start Header -->
<!--agorascript-post
&capture_STDOUT;
&StoreHeader;
return &uncapture_STDOUT; -->
<!-- End Header -->
A shortcut for calling in the header, in newer versions only, is to use a token instead of the above code. The token would be just this:
%%StoreHeader%%
Next, add the html code for the content of the page. After this place the following code to reference the store_footer.inc file:
<!-- Start Footer -->
<!--agorascript-post
&capture_STDOUT;
&StoreFooter;
return &uncapture_STDOUT; -->
A shortcut for calling in the footer, in newer versions only, is to use a token instead of the above code. The token would be just this:
%%StoreFooter%%
Then add the closing tags for the html page:
</body>
</html>
This procedure works for the creation of ALL static content pages including the frontpage.html file which is located in the html/main directory. In newer versions (starting at 4.0K and above), the frontpage.html file is named index.html and located in the store's html sub directory. Make sure all image references in this main page are relative to the location of agora.cgi. All other static page files should be uploaded to the html/pages directory. These are all .html files. Make sure all image references are relative to the html/pages directory. New versions (4.oK and above) also allow for a new type of static page that will be included into automatic directories. These .html pages would be located with the error.html and index.html page in the html directory of the store. These are useful for privacy policy, about us, warranty, shipping terms and other related company pages.
Use the following code to link to various pages or products.
### Link To A Category ###
agora.cgi?cart_id=%%cart_id%%&product=CATEGORYNAME
(Note: CATEGORYNAME must be exactly as entered inthe database, case sensitive as well)
### Link To An Item By Database Number ###
href="agora.cgi?cart_id=%%cart_id%%&p_id=1234
(Note: 1234 must be the exact product ID number in the database)
### Link To An Item By One Keyword ###
href="agora.cgi?cart_id=%%cart_id%%&keywords=KEYWORD&exact_match=on
### Link To An Item By More Than One Keyword ###
agora.cgi?cart_id=%%cart_id%%&keywords=KEYWORD+KEYWORD&exact_match=on
### Link To A Static Page in html/pages Directory ###
agora.cgi?cart_id=%%cart_id%%&page=FILENAME.html
### Link To A Static Page in html Directory ###
agora.cgi?cart_id=%%cart_id%%&cartlink=FILENAME.html
You can further customize the product and search display by adding the following to the link code above. This will cause the various product page tempolates in the html_templates directory to be used in assempling the product or search results display. If you do not use the &ppinc= code, all product and search results will be displayed using the product_page.inc file.
&ppinc=search
&ppinc=search2
&ppinc=1a
&ppinc=1b
&ppinc=1c
&ppinc=1d
&ppinc=2
&ppinc=4a
Additional tips:
Images - Make all main images no larger than 125 pixels wide or 175 pixels high. Upload to html/images directory using BINARY mode and preferably an FTP client (a program such as CuteFTP, ws_ftp, etc.). Using the database manager upload fields will put them in this directory as well. It works very well. Use it!
Further customization to the <head> section and <body> tag can be made by editing the appropriate lines in the top section of the library/agora.setup.db file. This is also where you edit the size and color of the cart contents table and order form. This edit will appear on all cart generated pages. Remember, this is a PERL file so you must follow the rules of perl when inserting html code. The easiest way to do this is to preceed all html code with:
qq~
and end all html code with
~;
Example:
$sc_standard_head_info = qq~
<meta name="copyright" CONTENT="Copyright 2002-2003 LandSurveys.com, all rights reserved.">
<meta name="keywords" content="keywords">
<meta name="description" content="description">
<title>Land Surveyors Workshops is your online source for Land Surveying instructional materials and seminars.</title>
~;
Make sure you move this and all non-image files using ASCII format. Your FTP software may try to move this file using BINARY mode due to the file extention ".db". If you allow this to happen, the script will stop dead in its tracks and no error will be generated. You will just see a blank white page. Again, it is best to rename the original file before uploading an edited version. It is also best to make one edit at a time, upload and test.
|
|