The Link Builder is a program that runs on your desktop and enables you easily to create HTML code for links to the WebBuild E-Commerce module. Once the HTML code is created, you can copy it and paste it into a code cell in a WebBuild Express application.
Installing the Link Builder
Go to http://www.WebBuild.net/other/WBECLB.exe to download the installation program. When prompted, choose to save the WBCECLB.exe executable in a folder on your computer where you can easily locate it. After the file is fully downloaded, run it. The Link Builder is now installed on your computer.
Running the Link Builder
Click the start button and then select "Programs" or "All Programs". You should see "WBEC Link Builder as a choice on the menu. Click it to start the program.
When you run to the Link Builder, you will see a screen similar to the following:
The screen is divided into three parts:
(1) The top portion consists of three tabbed forms into which you can enter data that describe the item being offered for sale and the format of the e-commerce Link.
(2) The middle portion is a row of six buttons. These buttons perform the program's major functions.
(3) The bottom section is a window showing how the Link will appear in your web page. As you make changes in the link parameters, you can click the "Create HTML" button, and you will be able to view the Link as it will appear with the new parameters you have added. You can click the button in the link, and you will be able to see the item added to the WebBuild shopping cart.
The three tabs in the top section are labeled: "Background Properties", "Link Elements", and "Scratch Pad".
Background Properties: this area contains important information about the item that you are offering for sale and the format of the Link. Many of the background properties will be posted to the shopping cart, whether they appear in the actual link or not. Two fields on this tab must be completed: "Application Name", which is the name of your merchant account and must have been assigned by WebBuild Express staff prior to your using the links; "Return Page", which is the full URL of the page to which visitors should return when they click the "continue shopping" link in the shopping cart.
Link Elements: this section allows you to determine the elements that appear in the Link. Three fields on this tab are required: "Stock No.", "Description", and "Price". By entering a numeric value in the "Sequence" column, you can designate that an element appear in the Link, and the order in which it will appear.
Scratch Pad: the scratch pad area contains two panels into which you can copy and paste material for later reuse. This is especially valuable if you are creating drop downs with multiple values that you will use for other items, for example, lists of common styles or colors.
Example
Probably the easiest way to learn how to use the WebBuild E-Commerce Link Builder is to see it in action. We're going to create a link for a shirt that has several different styles, colors, and sizes. We'll also allow the customer to specify a monogram to appear on the shirt pocket.
On the Background Properties tab, we enter "Wellworks" as the application name. (This is a demonstration e-commerce site -- www.wellworks.net -- that you can use to test the Link Builder program, and build sample links). We also leave the box checked that says "Return to Link Page", indicating that the customer should return to the page he/she left when he/she clicks on "Continue Shopping" in the Shopping Cart.
On this tab, will also choose a vertical link orientation by clicking the "Vertical" button.
On the Link elements page we enter the stock no. (BZ 1487), the description (Men's Business Shirt), and the price (34.50). In the "size" field, we enter the sizes (separated by semicolons): Small;Medium;Large;Extra Large. We give "size" a sequence number of 20, indicating that we want the choices for size to appear in the Link before quantity (30), and the "Add to Cart" button (40).
Now will enter the choices for color: Cranberry; Grape; Day-Glo Orange; Chartreuse; Black. We'll give "color" a sequence number of 25, indicating that we want the color choice to come after the size choice, but before "quantity".
We'll use the "Personalization" section to let the customer specify the initials he or she wants for the monogram. We will allow up to three letters in the monogram, so we enter 3 in the "Max Characters" field. In the "Caption" field we enter the word "Monogram". We'll specify a sequence number of 27 for the personalization item, indicating that we want it to appear after the color choices.
We will also choose to display the item's price in the Link by entering a sequence number of 28 next to price.
Now, we need to enter the choices the customer can make for style, but there seems to be nowhere to do that. By clicking the "Additional Customer Variables" button, we can open up an area at the right side of the tab where we can enter up to six additional sets of choices for the customer:
We'll use the area for a variable #3. In the "Variable Name" field we will enter "Style". In the "Values" field we'll enter the styles choices for this item: Button-Down Collar; Plain Collar. We'll give the style choice, a sequence number of 15, indicating that this is the first choice we want the customer to make.
If we now click the "Create HTML" button, the link will appear in the bottom panel. Because we have selected a vertical orientation, not all of the Link appears in the panel. To see the complete link, either scroll down using the right hand scroll bar or click the "Full-Screen View" button.
We can test the Link in the bottom panel or the "Full-Screen View" window by using that the style, size, and color drop downs to select values, inserting a number in the quantity field, and clicking the "Add to Cart" button. You will see the item that you have ordered in the shopping cart. (You can continue the order and checkout process in this demonstration. Note that no credit card charges will be processed).
We can continue to make changes in the Link Builder program and view the results of these changes by clicking the "Create HTML" button. In this example, let's change the order of the size and color choices by giving the color choice sequence number 18. Now if we click the "Create HTML" button, we'll see that "Color" appears before "Size".
Transferring the Link to a WebBuild Express page
You can view the HTML code for the link by clicking the "View HTML" button.
Click the "Copy HTML to Clipboard" button to copy the HTML code for the link to your Windows clipboard. Now go to the page in WebBuild Express where you want the link to appear. Create a new cell (see www.WebBuild.net/wbehelp/page58.htm#WBEANCAddCell). Double click on the border of the cell to edit it:
In the "Cell Type" drop-down menu, select "Code" to make the cell a code cell. Click "OK". The cell will now contain the words "Click To Enter Code". Click in the middle of the cell to open a window for editing the HTML code. Delete the words "Click To Enter Code". With the cursor positioned inside the empty window, hold the control key and press the "V" key to paste the HTML code from the clipboard into the code window. Click the "OK" button to close the window. Your link should now appear on the WebBuild page.
Once you've added a WebBuild E-Commerce Link to your WebBuild page, you can test it in page preview or site preview. If you want or need to make changes in the Link, return to the Link Builder, change the necessary parameters, click the "Create HTML" button, copy the HTML code to the clipboard, return to the WebBuild page, open the code cell, delete the old code, and paste the new code into the cell.
Here is the link that we created with the Link Builder. Try it -- select a shirt in various styles, sizes, and colors, and click on the "Add to Cart" button and see how your item is entered into the Shopping Cart:
Note: you can view a demonstration page that shows this link and others created with the WebBuild Express LinkBuilder at http://www.wellworks.net/shirts.htm.
Tip: you can keep both WebBuild Express and the Link Builder open at the same time, and move from one to the other by selecting each program on the taskbar at the bottom of the Windows screen.
Tip: when you create values for drop-down items, for example "Small; Medium; Large; Extra Large", you can copy them and paste them to the Scratch Pad. This makes it easy at a later time to copy the values from the scratch pad and reuse them when creating a new using the same or similar values. To copy from a field to the scratch pad, highlight the text in the field that you want to copy, press CTRL+C, move to the scratch pad, position the cursor in the scratch pad where you want to paste the text, and press CTRL+V.
That's how the WebBuild E-Commerce Link Builder works to build a relatively simple e-commerce Link. You can experiment with some of the other options that the program offers to create versatile links that enable customers to customize an order for your products.
|
|
