This section leads you through the process of using WebClerk to set up an eCommerce site. In this example, you will create an on-line store called "Colorado Kayak." Once you have learned the building process through the use of the data provided, you can create your own data and build your own customized eCommerce site.
There are several additional modifications that can be done to furthur personalize your site not covered in this demo. For further modifications, be sure to read all of chapter 20.
NOTE: Clicking on Reference This will take you to an associated technote. Return here by clicking ONCE on the Back button in the upper center of this window. Clicking on DoThis<--Alert("will launch you to an exercise")--> to help you better understand setting up WebClerk.
ReferenceThis<--Prefabricated Web Site-->, nature of the site
By the end of this lesson, you will have learned the steps to build an online store that is fully capable of taking orders on the internet.
This section is divided into 6 steps to assist you in setting up your eCommerce site:
1. Creating your store
2. Adding items to your store
3. Assigning graphics to items
4. Adding company graphics to the site
5. Setting preferences and starting the WebClerk web server
6. Walk thru Demonstration
1. Creating your store
To begin, you'll want to enter general information about your company. Once completed, your company name will appear at the top of the three main splash screens and throughout the program. Other default information, such as company name and domain, will be referenced throughout the Web Site.
There are two options for entering your company's standard data into the Default Record.
a. GOTO>>File Menu>>Show Defaults
b. Click DoScript<--5--> to have the Tech Note open the Default Record.
Enter your data then click the OK button on the upper left Navigation Pallet.
For more information, ReferenceThis<--Default Record-->.
Remember that you are currently working with a demo data file. When you are ready to implement your own customized eCommerce site, you will need to create a new data file before entering any of your data. For more information on how to create your data file,
ReferenceThis<--Creating your own data file-->
2. Adding items to your store
In this section you will add kayaks to an already existing database. Items may be added in two ways.
a. Import items from a text file. The following example creates a spreadsheet and illustrates how to import a text file into the database.
1. View the sample spreadsheet that has been created by clicking below.
2. The spreadsheet contains items, in this case kayaks, which will be imported into your database. The Publish column (last column) in the spreadsheet should contain either "1" or "0." "1" is used if you want the item to be visible on your on-line catalog, "0" is used if you don't want it to be published to the web.
3. While in the spreadsheet, GOTO little File menu >> Save As. Name your file "kayaks." In the "save as" box, choose Format "Tab/Tab/Return" if you are operating on a Mac (see below),
or ASCII (txt) if you are operating on a Windows platform. Remember where the file was saved, for importing purposes.
4. Press "OK" to save file. Click the "X" in the upper right corner of the spreadsheet. A popup will ask you to save change in the 4D calc document, click "Don't Save".
5. To import the items, GOTO File menu >> Import Editor. The Import editor will open .
a. Press your mouse on the File popup, located second from the right top in the Import Editor, until the list of Files displays (the box should initially say "Defaults"). Select Items and release. The "Field" area list will change to show the fields in the Items file.
b. Click "Open Import File" button in the bottom left. Select the text file for the items which you saved as "kayaks" earlier. The item fields from the text file will display in the left column.
c. Match your data fields, on the left, with the available fields on the right. In this example, the fields in the imported record match the names of the fields in the Items file, so clicking the Auto button will automatically match the available fields to the incoming data. If the fields were different, you would need to double click on the right column or use the Space, Insert, Add and Sub (tract) buttons to match all incoming fields to available fields.
d. Click the Save All button to load all your records. Click "OK" to make the change and "OK" to clear the header.
e. Click the OK button in the Navigation Pallet, upper left, to close the window.
For more information on importing your products and services:
Play Movie: t2_Impor.MOV
Once you have finished importing or adding your items, you may view all the items in the database from Depts>>Production>>Items>>All Items. You'll notice several items already exist in the database.
a. Directly add items from the Item Record field(Not used in this demo).
To view the item record field, DoThis<--Web_AddREc-->.
Fill in all applicable fields for your item. Remember that all underlined fields are mandatory entries. If you wish to have this item published to the internet, you must mark "Pub" (Publish to net) with a value of 1 (upper right side of screen).
When finished adding the necessary item details for your product, click OK in the upper left Navigation Pallet.
LaunchThis<--S15614:Movies:uA_Items.MOV-->(If you have the training CD)
3. Assign Item Graphics
In this section you will learn how to link your items to your graphics. Item graphics are not required for any site, however they are useful in helping shoppers to make a decision on whether or not to purchase your products.
There are three basic options for managing product graphics.
a. Store them internally to the data file by loading or pasting them into the Item Specification field within the item record.
Load graphic into the Item Spec Record (any format, skip if you do not have a graphics application).
1. Open a graphics application. GOTO File >> Open .
2. Navigate to .../jitWeb/images/Item_Images. This folder contains sample item graphics which you will link to products.
3. Open "100030.gif".
4. Save the file in a .pct format
5. GOTO Dept menu >> Production, GOTO Items menu >>Search by item #
6. Type in item 100030. This will pull up a kayak item record. Click on the "General" located in the top left corner of the item record screen, navigate to the Specification page, ensure the Specification box is checked.
7 Click the Get Picture button (top right of screen). The image will be pasted into the spec.
8. Navigate to .../jitWeb/images/item_images/100030.pict.
9. Click on Okay.
Load graphic into the Item Spec Record (Pict format only).
1. GOTO Dept menu >> Production, GOTO Items menu >>Search by item #
2. Type in 100029. This will pull up a kayak item record. Click on the "General" located in the top left corner of the item record screen, navigate to the Specification page and ensure the Specification box is checked.
3. Click the Get Picture button (top right of screen).
4. Navigate to .../jitWeb/images/item_images/100029.pict. Click on Open. The image now appears in your item specification.
To load in multiple graphics to multiple items, create and store your graphics in a folder in PICT format. Name the pictures with the same name as their item number. GOTO Dept menu >> Production, GOTO Items menu >> Import Pictures.... Select your picture folder and the pictures will be loaded.
b. Item graphics may be stored and referenced from an images folder within your jitWeb folder. The path would be something like .../jitWeb/images/yourFolder/itemNum.gif. This is an alternative to storing pictures directly into the item specification. When storing item graphics in this format, ensure that the item graphic name matches the item number. This is how WebClerk dynamically links products to images.
The html page reference for this example is ItemRec3.html (in the jitWeb folder) and its image reference for this html page is similar to <img src="/images/yourFolder/ !jit=4;1!.gif"> (designator for the item number). The kayak graphic for 100031 is referenced in this manner.
c. Pictures may be stored on a webserver with higher bandwidth. This is similar to the example above. The html page reference is similar to <img src="http://www.webclerk. com/ images/yourFolder/!jit=4;1!.gif"> or <img src="http://www.webclerk. com/ images/yourFolder/!jit=4;1!.jpg">.
The reference to the item number designator (!jit=4;1!) can be set to any data base reference, depending on your preference. Review these dynamic database references:
Now that you have assigned some kayak item graphics to a few items, you will need to manage how the items are displayed when shoppers enter the catalog site. For the items above, three different page layout templates are already created which are used to display the kayaks. For detailed information on designing catalog page layouts for your products:
ReferenceThis<--Catalog page layout-->
4. Adding your company graphics to the store.
You personalize your store with your own graphics and backgrounds. This step walks through the graphics that are normally used by WebClerk to build your eCommerce site. You will also add graphics for the "Colorado Kayak" store to the site and modify some of the site's backgrounds.
WebClerk uses six images to adjust the look and feel of your site (Splash Image not shown).
Logo_Main Company's main logo which will appear on several of the store's pages
Logo_Splash Logo which appears on the "front" web page (not shown in image above)
Nav_Logo Small Company Logo on the navigation bar
BkGrnd_Nav_H Horizontal navbar image (used when additonal links are needed)
BkGrnd_Nav_V Verticle navbar image
Bkgrd_Main Background image on desired pages
For our "Colorado Kayak" store example, the six images for the site are stored in the jitWeb/Images/Company_Images folder. The jitWeb folder currently conatains images for the JIT Corp website. To change these images to your kayak store images:
a. From your desktop, navigate to ...jitWeb/Images/CO_Kayak_Images.
b. Copy the six standard images from this folder. Move up one level to the Images folder and paste them (into the jitWeb/images folder).
c. This will overwrite the existing website images, which were images for the JIT Corp website (the JIT Corp images are also located in the jitWeb_jit folder if you wish to use JIT Corp's images again for future practice.