KIS-Cart2002 Setup

Setting up your categories on your catalog page:

Examining where we are

Your PayPal shopping cart

FrontPage skills:

Setting up your categories pages

Let's update the content on your category page

Let's get dirty with HTML, updating the Add to Cart buttons

Updating the View Cart buttons throughout the Web Site

Setting up your Product Detail Page.

Update your 'Zoom" pages

In the contents section, we reviewed the page names, and the .htm counterpart to those names. You will need to know this, as you have the option of customizing your page names to the names you have chosen for your categories. Through the navigation view, we will be changing the names of the categories pages, and the product detail pages. This is optional, but a good idea.

Please visit www.i3dthemes.com/frontpage_basics. From here you can learn the basics of using FrontPage, and much more.

If you don't know this trick already, a short cut key for undoing a step is to press (CTRL+Z) at the same time. This will save you many headaches.
The other really helpful shortcut keys are (CTRL+C) for copying, and (CTRL+V) for pasting.

Let's get started! Print this page for easy reference

Setting up your categories on your catalog page:

import all your product images

(including images for categories):

browse to the folder where you stored your product and category images. select the image files to import.

** TIP** Keep thing simple by importing them into your images folder located in the "cart" directory. Always separate your product images from your web site images. With the images folder selected when you choose to import a file, the files will go directly to that folder, if you do not have any folders selected, the imported files will go to the root directory (with your index.htm page etc.) You can do one image at a time, and to make things really easy, you can drag them from a folder on your hard drive, directly into the images folder, in the cart folder. Or you can optionally drag an image from a web page, directly into the cell you are working on, there are many ways or adding image files to your web site. If you drag them from an outside source into your web page, remember to change the default "save" location when you save the page. Save the images to the "images" folder in the "cart" folder.

open catalog.htm

**TIP** (for all our exercises, we are going assume that you have the images stored in your images folder, located in your cart folder, we will be dragging images from this folder onto your web page. Please ensure that you have your Folder List in view, and we will be working in Page View, and Navigation view for most of the time. If you are unsure at this point of the folders, and or views that we have discussed, please review this image for setup details. To have your Folder List in view, click on the View menu, ensure you can see the "Folder View" option, if not click on the two downward pointing arrows at the bottom of the list, and click. Make sure the icon beside the "Folder View" is selected, it doesn't have a check mark as most selected items do, this one just looks depressed. (literally)

now let's update your catalog page:

Leave the "Featured Items" until your product detail pages are complete. We'll get to this at the end of the setup.

Let's examine where we are

 

With the rest of the set up, we are going to assume that have the following FrontPage skills:

Setting up your categories pages

**We will look at adding more category pages, and adding more items to the category pages at the end of the set up information.**

Lets update your category pages


**TIP**Type the name as " your_category_name.htm" if you have more than one word for your category. Make sure you put an underscore joining your words "_". This is the key located next to the "0   zero" key. Press shift and underscore at the same time. If you do not use and underscore to join your words when naming an HTM document, your visitors will see an ugly and unprofessional "20%" between each word in the address bar. (example: http://www.your%20web%20site.com)

**TIP** this is the only page in your cart which you should, and can rename.  Changing the names (the .htm name) of the product detail pages, and the zoom pages will affect the JavaScript pop-up windows.

Let's update the content on your category page

**DO NOT change the zoom view hyperlink, this text is created through JavaScript, and not regular HTML text, and hyperlinks

**do not edit the information beneath the "zoom view" links. The hyperlinks named "it1 zoom image...it48zoom image" are merely placeholders. Once you have updated your zoom pages later in the setup, you can delete these links if you with to (and we suggest you do)

**DO NOT change the "more info" text under the product info column, this is created from the JavaScript component

Let's get dirty with HTML and your PayPal add to cart, and view cart buttons

**the PayPal image will disappear, and be replaced by a small yellow rectangle, this is the symbol (anchor) for a web component
**alternately, you can delete the default PayPal button, then switch to HTML view and paste the code directly into your HTML window (if you do this method, which is the easiest, just switch to HTML view, and press (CTRL+V) right away, and switch back to normal view. You will see the button, immediately. If for some reason this didn't work, press your (CTRL+Z) keys while you are in page view, to undo this step, and try again. Sometimes if you hold your (CTRL+key) for too long, the action you are trying to perform, will be repeated several times, so be quick.

You can "cheat" , delete the rest of the default PayPal buttons in the column, copy the first "add to cart" button you just made, and paste it into the rest of the empty cells. By adjusting three pieces of the HTML code for the "add to cart" button, you can change the product "Name" "Product item number" and 'Product Price".  This is the only information that changes for each new button that you would create using the PayPal web site.

Click on the second row's PayPal button (this will only work if you added the button with the HTML view and not as a web component) with this image selected, switch to HTML view, you will see the highlighted information below (or something similar. You only need to change three bits of code to change the item Name , Product item number, and price for this shopping cart button. The highlighted code is the code for the button image, the line directly above the highlighted code is the line that you will be working on. There is a second example below.

 <p align="left"><a href="#" onclick="window.open('https://www.paypal.com/cart/add=1&business=i3d%40shaw.ca&item_name=product name&item_number=productnumber&amount=15.99','cartwin','width=600,height=400,scrollbars,location,resizable,status');">
<img src="http://images.paypal.com/images/sc-but-01.gif" border="0" width="70" height="35">


onclick="window.open('https://www.paypal.com/cart/add=1&business=i3d%40shaw.
ca&item_name=product_name&item_number=product_item_number&amount=15.99','
cartwin','width=600,height=400,scrollbars,location,resizable,status');">

if you have trouble with this method, stick with creating you buttons through the PayPal web site, you are given the option to create more buttons when your first button is finished

Updating the View Cart buttons throughout the Web Site

now we are going to update the "view cart" button throughout the whole site. Each category page, and product detail page has a view cart button, you will need to update this button on each of these pages. But don't fear, we are going to update all your buttons in less than 2 minutes

**TIP** the find and replace feature of FrontPage will save you hours of work, by quickly and easily replacing old text, with updated text. We are going to replace the "default" view cart hyperlink with your own "view cart" hyperlink.

 <a href="#" onclick="window.open('https://www.paypal.com/cart/display=1&business=i3d%40shaw.ca','cartwin','width=600,height=400,scrollbars,location,resizable,status');">
 
<img src="https://www.paypal.com/images/view_cart.gif" border="0" width="130" height="32" align="right"></a></td>
  1. starting from the beginning, you will need to have two pages open for this exercise

  2. close all open web pages

  3. open categories2.htm, and categories1.htm, (or whatever they are renamed to)

  4. switch to the page view on categories2.htm, and click on the "view cart" button

it is important that you select a "view cart" button that has not been updated, we want to find out what the "default" code for each button is, so we can change it to the code for your PayPal shopping cart

  1. with the view cart button selected, switch to HTML view

  2. the line of HTML code directly above the highlighted text is what you will be copying, so highlight that entire line of code. The example below is very similar to what you will be copying

  3. highlight the entire line of code, including the opening and closing brackets <  >

<a href="#" onclick="window.open('https://www.paypal.com/cart/display=1&business=i3d%40shaw.ca','cartwin','width=600,height=400,scrollbars,location,resizable,status');">
  1. on the Edit menu, select "Find" or press (CTRL+H for find and replace)

  2. make sure the tab for "Replace" is selected

  3. you will see the text that you highlighted is already added to the "Find What" box

  4. while the Find and Replace window is open, click on the "categories1.htm" page to view it

  5. you will notice the the "Find and Replace" window is still in view, great

  6. on the categories1 page, click on the "view cart" button (single click)

  7. be sure this is the same button that you added from the PayPal web site.

  8. switch to HTML view

  9. copy the code directly above the highlighted HTML code (to copy press CTRL+C)

  10. copy the entire line of code, including the opening and closing brackets <  >

  11. paste this code (CTRL+V) into the "Find and Replace" window, under the second text box named "Replace with"

  12. make sure the following options are selected "All Pages" and "Find in HTML"

  13. click on the "Replace All" button

  14. select yes when you are warned about changing the text in each page, and not being able to undo it

  15. you will see the pages being changed, with a total being displayed

  16. click on the "X" at the top right corner to close the window

  17. you have now changed the links for all you "view cart" buttons.

Example code

 <a href="#" onclick="window.open('https://www.paypal.com/cart/display=1&business=i3d%40shaw.ca','cartwin','width=600,height=400,scrollbars,location,resizable,status');">
 
<img src="https://www.paypal.com/images/view_cart.gif" border="0" width="130" height="32" align="right"></a></td>

The tough part is over.

Learning how to manipulate your HTML code will be a valuable asset for future web site development.

UPdate the information for the rest of your products on your category page, and take a break :)

 

Setting up your Product Detail Page.

(for example, if your first product in your categories1 page is a product called "Scroll Mouse", then you probably changed the title of the product detail page (it1..it48) to Scroll Mouse when you were updating the titles in navigation view. So change the name for this page from it's default of "it1.htm" to  "scroll_mouse.htm". Remember to place an underscore between each word when naming an ".htm" page.

One reason we want to change the page names and titles from their default, (although optional) is because each product detail page (it1.htm...it48.htm) displays a page banner for its Page Title. Kills 2 birds so to speak

You visitors will also see the product name in the address bar, and many search engines will list pages more accurately if the page name is the same as the search parameters key words or phrases.

The left column:

The right column:

Update your 'Zoom" pages

Adding the larger image to your zoom page

That's it, as confusing as it gets, once you have a hang of what to do, you can update a page in a minute or two. the same time it would take to update a database.