Freeway Shop Actions suite

Type of Action: This is a suite of Actions, which means that there are different types of Action you need to use to get the full functionality. The Actions may be Page, Folder, Item and/or Standalone Actions. See the instructions below to see how to use each Action within the suite).

What the Action can do: This suite of Actions lets you do the following:
  • It lets you set up "add to cart" buttons for visitors to buy products on your site page
  • It works in conjuction with the shopping cart services at Mal's Ecommerce
  • It lets the visitor choose a specific quantity and one level of variation (such as color or size)
  • It can be set up to calculate State Tax, shipping, etc.

Introduction

Of the many innovations the Internet has brought us, one of the most visible is online shopping. The advantages for merchants are clear—lower overheads in both staff and shop space, provision of greater convenience for their customers, 24/7 and international availability of the store, and the ability to compete on a far more level playing field with larger companies. The spread of internet shopping sites is a testament to all of these.

However, the implementation of an online store has often been difficult, especially for the individual user. A catalogue needs to be presented allowing customers to select products to buy, these product choices must be tracked (usually in the form of the common shopping cart), and all-importantly, a secure way of processing the customer’s payment details is vital.

As is often the case, a demand for services rapidly begets solutions, and there are now numerous companies that offer these services for integration into a web site. PayPal, Verisign, and Authorize.Net are well-known companies who provide secure credit card processing services. Many companies who provide shopping carts link with these (and other) credit card processors.

One of the better shopping carts is Mal’s e-commerce (http://www.mals-e.com) which provides two packages: a free service offering integration with PayPal, Nochex, and Paymate, and a premium service offering integration with VeriSign, Authorize.Net, and a wide variety of other credit card processors.

Using the power of Freeway’s Actions technology, you can take advantage of Mal’s shopping cart to quickly create your own online store. Freeway ships with a complete suite of Shop Actions to provide easy configuration and seamless integration. Simply design your store pages in Freeway as you would for the rest of your web site, apply the Actions in the appropriate places, specify the required settings, publish and upload your site—and a highly functional online store is now yours!

This article will provide you with a tutorial and reference for these Actions and the fundamentals of setting up and using Mal’s e-commerce. Happy online trading!

Tutorial: Setting up a Mal’s e-commerce account

Getting a Mal’s Account

The first step in creating your web store is to set up an account at Mal’s e-commerce. Note that the screenshots here may differ over time.
First navigate to http://www.mals-e.com using your web browser. On the right hand side of the page, click on the Join the Community Now button:



Click on this link to take you to the New Account page:



Here you are required to fill in some personal details. Part of the Terms of Service for Mal’s e-commerce is that you enter valid contact details here, so fill in the required information (you should try to ensure that you enter a valid email address as this will be used to send account details to) and finally click on the Create New Account button.

You will now be presented with a thank you message which has some important information on it:



You should keep a record of the Username and Password that you have been assigned, and also the aitsafe.com server name (these will be names such as ww2.aitsafe.com, ww4.aitsafe, etc.) that your account has been set up on as you will need to enter this into the E-Shop Settings Action later (see later in this section).

Note that your password is case-sensitive, so you will need to use capital and lower-case characters exactly as shown for you to log into your account the next time.

As mentioned earlier, an email containing this information will also be sent to the email address which you specified when creating the account.

Click on the Login Now button to see your Admin page.



Click on the Cart setup tab on the Admin page to see a page of links where you can set up your specific options for your online shop, such as payment methods, sales tax, shipping costs, how the shopping cart will look, etc.

Payment Method Wizard

The first time you visit your Cart setup page, you will be asked to make a choice of which payment methods you want to use – the choices are “Accept credit cards and PayPal” or “Accept credit cards only”. Depending on which choice you make here, you will see different options in the Cart settings.

If you already have accounts set up for payment through other online payment companies (Moneybookers, Nochex, etc.) make sure you have your details ready to be used in the appropriate places.



Select your preferred payment method and click Go.

If you selected the “Accept credit cards and PayPal” option, you will next be asked to choose between the standard PayPal service or the PayPal Pro service. Click on the Select button for the PayPal service you want to use and you will be prompted to enter your PayPal account ID before clicking on the Setup Now button. When the process is complete you will see a message to tell you that the cart is now successfully set up.

Click on the Cart Setup tab to return to the cart settings page.



Cart settings

You can either click on the links on the page or use the menu dropdowns buttons on the left to visit each specific Cart setup options page.

At the top of the list of Cart settings is a panel which shows you that the shopping cart will use default currency and times for the choice you made on your account setup. If you want to change your “local” settings, click on the link to be shown a page where you can choose your country and time zone.

We don’t have space here to run through all the options in the Cart settings (and most of them are very self-explanatory), but we can run through some of the most important ones.

International and Currency setup

Click on the Language, Country, and Currency link. This will take you to a page where you can change international settings for your cart. Firstly select the language you would like text in the cart to appear in:

Next, you should choose the currency you wish to use in your shopping cart.

Although it is possible to set up your cart to use multiple currencies, this is outside the realms of this tutorial. The Reference section later in this chapter provides further details about using multiple currencies. Mal’s e-commerce allows you to set a message to be displayed which describes to customers the currency in which the prices in the shopping cart are shown. The Format menu allows you to select a format in which to display prices there are four options available, so select the currency format most suitable for the currency you are using in your shopping cart. The final option is the Currency menu, which allows you to select the currency you wish to send to your third party credit card processor. Select the currency you wish to use from the menu.

When you have finished, click the Submit Changes button.


IMPORTANT! Link Verification

It is vital for Link Verification to be set up correctly for your shopping cart to work securely. Link verification allows you to force your shopping cart to only work with pages you have created. Without it, it would be possible for someone to link into your cart and buy your products for whatever price they wanted!

To set up link verification, click on the Link verification hyperlink on the Cart Setup page (or click on the Advanced settings button on the menu on the left and choose Link verification).





If you have not done so already, you will need to set a payments password for your shopping cart account, so click on the Click here link to display the New Payment Password window. Enter the password you want to use (note that this is a new password and not the password you use for your Mals account), enter it again to confirm it, then click on the Submit button. Make a record of this password as you will not receive a confirmation email. Now click on the Cart Setup tab to return to the setup page and choose Link verification again.

For now, all you need to do is switch Link Verification on so check the checkbox and click the Submit button. You will need to return to this page later when working in your Freeway document, but for now you can move onto the next step.

Payments

There are many different payment processors which can be used with Mal’s e-commerce; the free service provides a small number, while the premium service provides integration with a great many more. It wouldn’t be feasible to cover all of these different setups, so we shall just focus on PayPal. To use other payment processors, please refer to the Mal’s e-commerce documentation for the specific service you wish to use.



Setting up PayPal integration is in fact very straightforward. On the Cart set-up page, click on the PayPal link in the Payment Methods section. All you need to do is enter your email address in the PayPal Account ID text entry field, and ensure that Website Payments Standard radio button below it is selected.

You don’t even need to have set up a PayPal account for this to work when PayPal receives the first order from your site, they will get in contact with you at the email address you specify in the PayPal Account ID field. Finally, click the Update button at the bottom of the web page to save your changes.

This completes a simple setup of Mal’s e-commerce for use with Freeway. There are plenty more options which can be set, some of which are elaborated on in the Reference section later in this document. For details of options not covered here, please refer to the Mal’s e-commerce documentation.

Link to your cart with Freeway

Initial setup

Although templates are provided for Freeway Shop, for the purposes of this tutorial we will use a blank template and apply all the Actions ourselves to help familiarize you with the Actions used to enable the links to the shopping cart. Therefore, start Freeway and create a new document based on the Blank template.

The first thing you must do for the Actions to work is to specify the web address of your shop. This is the URL of your shop as seen in a web browser. Open the File menu and select Document Setup. Click on the Upload button at the top of the dialog to switch to the Upload panel.

At the bottom of this panel is a field labeled Web Address. In here you should fill in the URL of your shop. For the purposes of this tutorial, you should use the root address of your web site, and it should include http:// at the beginning (for example http://www.softpress.com). It is possible to set this to a subfolder on your web site, and this will be covered in the reference section of this documentation.

It’s now time to start applying the Actions which will enable the integration with your store. The most important of these is the E-Shop Settings Action where you will enter information about your Mal’s e-commerce account. This is an Action which is applied to a folder, so select your Site Folder in the Site Panel. Now open the Actions palette, if it is not already open, and click on the button in the bottom-left corner of the palette. A dialog will appear listing all of the Folder Actions you have available. Select the E-Shop Settings Action and OK the dialog. The Actions palette will now display the E-Shop Settings user interface.



Firstly, fill in your Mal’s user ID into the User ID field, and select the Mal’s server your account was set up on from the MAL Server popup menu (you should have recorded this information at the same time as you recorded your User ID). If you have forgotten or lost this information, log into your Mal’s account and you’ll be able to see which server your account is on in the address bar of your web browser (it will be something like ww4.aitsafe.com).

The next step is a little more involved. You must fill in the Link Verification key code. To obtain this code, you need to log into your Mal’s account and navigate to the Cart set-up page. From here, click on the Link Verification link this will take you back to the Link Verification page which you visited earlier. At the bottom of this web page is a section entitled “Javascript Button Creator”.



To obtain the key code for your account, select the “Hash secret on its own” radio button, enter your Payment password (not your main Mal’s account password; you set the Payment password in the section “Setting up a Mal’s e-commerce account: Initial setup”) into the “Payment password” field, and click on the “Get Validator” button. This will take you to a web page simply containing some text of the form “Hash Secret key for [Your User ID] : [Your Hash Secret key]”. Copy the hash secret key (the string of letters and numbers after the colon), return to Freeway, and paste it into the Key code field in the E-Shop Settings Action.

There are a number of other settings for your cart which can be changed in this Action, available in the Cart section of the Action’s user interface (changing the Cart popup menu reveals different groups of settings), however these mainly relate to the appearance of your cart and will be covered in detail in the Reference section of this documentation. For now, leave them as they are. You’re now ready to move on to creating products to sell on your web site.

Creating a shop page

To demonstrate the basic functionality of Freeway’s integration with Mal’s e-commerce, we’ll create a simple shop selling paint and paint-related products.

First create a simple header image for the page. Draw a graphic item and use the Inspector palette to give it the following dimensions: Left 125px, Width 300px, Height 70px. Click inside the graphic item and type the text “Paint Shop”. Select the text and use the Inspector palette to set its font to Brush Script MT and its size to 72px.



There are several Actions which can be used to create product links to the Mal’s shopping cart. We shall use three of these in this tutorial: E-Buy Button and E-Buy Text which will allow customers to add products to their shopping cart, and E-Review Button to allow them to view their shopping cart.

First we will use E-Buy Button to allow customers to purchase paintbrushes. The E-Buy Button Action can be applied to a graphic item or an HTML form button, and when clicked on by a customer will add the product to their shopping cart in the quantity specified.

Draw a graphic item on your page underneath the header image and import an image of a paintbrush. Next to the graphic item containing the paintbrush image, draw another smaller graphic item and enter into it the text “Buy a paintbrush”. Select this item, open the Item menu, and then the Actions submenu, and select E-Buy Button from the list of Actions.

If it is not already visible, show the Actions palette. Select the item to which you have just applied the Action, and the user interface for the Action will be displayed in the Actions palette:

Here we will set parameters to be passed to the shopping cart. Enter the text “Paintbrush” into the Product field, then enter “5.00” into the Price field, and leave the Quantity field with its default value of 1. Unsurprisingly, when a customer clicks on this button, they will add 1 Paintbrush costing 5.00 currency units to their shopping cart. In fact, you have now entered enough information to be able to test the store.

Select Upload from the File menu, and enter the FTP settings of your web space (remember that your site needs to be uploaded to the same location specified in the Web Address field in the Upload dialog). Click OK to upload your site.

Use your web browser to navigate to your web site. You will see the store page you have created with a header, graphic of a paintbrush, and some graphic text offering you the opportunity to buy a paintbrush. Click on the “Buy a paintbrush” text. Normally at this point you would be taken to your Mal’s shopping cart, however because this is the first time you have uploaded your site, you should see the following message:



The settings that you specify in the E-Shop Settings Action are transferred to Mal’s e-commerce using an automatically generated configuration file. Whenever you change these settings and upload your site, the first time your Mal’s shopping cart is accessed after this, the new settings are loaded into Mal’s from your configuration file and you will see this message to confirm that the configuration file has been loaded correctly. If Mal’s cannot find the configuration file you will see the following message:



If you don’t see this message, you can skip the next paragraph. If you do see this message, the most likely cause is that you have not correctly specified the URL of your shop in the Mal’s e-commerce configuration. To check this, log into your Mal’s e-commerce account and navigate to the Account Details page (the link is in the Management section on the left-hand side of the Mal’s administration page). On the Account Details page, ensure that the Web site URL field contains the correct URL of your shop, and if it doesn’t enter the correct URL and click the Update Record button. Now return to your online shop and try clicking on the “Buy a paintbrush” text again. You should now see the message confirming that the configuration file has been loaded correctly.

To proceed on to the shopping cart, refresh the page in your browser and the Mal’s shopping cart page will be loaded. Here you will see that 1 paintbrush at a price of 5.00 currency units has indeed been added:



At the bottom of the shopping cart there are three buttons. Recalculate allows the customer to change the number of a particular product to buy without needing to return to your shop. When they click on Recalculate, the cost of the products in their shopping cart will be recalculated based on changes they have made. The Go To Payments button will take the customer to the payments page, which will depend on which methods of payment you have set up in your Mal’s account. The third button is Continue Shopping; clicking on this will return the customer to the web page in your shop from which they entered the shopping cart.

We will now use the E-Buy Text Action to create HTML text links for customers to click which will add paint to their shopping cart. Return to Freeway and draw a 300 pixels wide by 200 pixels high HTML item beneath the graphic items we just created for buying a paintbrush. With the item selected, use the Inspector palette to give the item a 1 pixel black border, and padding of 5 pixels.

Click inside the HTML item you just created to get a text cursor and type the text “Purchase Paint”. Now hit the Enter key to add a carriage return and then insert a graphic item into the text flow by selecting Graphic Item from the Insert menu. Select the graphic item and use the Inspector palette to change its size to 30 pixels wide by 30 pixels high, and to align Middle (using the Align popup menu in the Dimensions section), and use the Styles & Colors palette to change its background color to orange:



Click back inside the HTML item (after the graphic item you just inserted) to get the text cursor again, and hit the space bar to add a space character. Open the Insert menu, go to the Action Item submenu and select E-Buy Text. This will insert the E-Buy Text Action into the text flow. Select it to display its options in the Actions palette:



You will notice that this Action has very similar options to the E-Buy Button Action we used earlier, but then this is unsurprising as it is designed to do exactly the same job! The only difference is the presence of a new field, Text in Link, which allows you to specify the text that will be output for the customer to click on. Start by entering “Buy 1 Container of Orange Paint” into this field, and enter “Container of Orange Paint” into the Product field. Change the Price field to “13.00” and leave the Quantity field at its default value of 1. You can now upload your site again and test it to check you can add containers of paint to the cart:



As you will see, the E-Buy Text Action has created a link on the text you entered into the Text in Link field which adds a container of paint to the cart.

You can also use the E-Buy Text (and the E-Buy Button) Action to add different quantities of a product to the cart, if this is desirable. To demonstrate this, we will add another E-Buy Text Action to the page which will allow customers to add 5 containers of paint to their cart. In Freeway, click in the HTML item to get a text cursor positioned after the E-Buy Text Action that you just created. Hit Enter to start a new line, and then insert a 30 pixel wide by 30 pixel high graphic item as you did earlier, and again use the Inspector palette to vertically align it in the middle of the text line. This time give it a purple background color. Once again, add a space after the graphic item and then insert an E-Buy Text Action.



Select the Action and use the Actions palette to change the Text in Link field to “Buy 5 Containers of Purple Paint”, the Product field to “Container of Purple Paint”, and the Price to “15.00” (purple paint is clearly more expensive than orange paint). The final field to change is Quantity, into which you should enter “5”. The price of 15.00 is per unit, so the total cost of these 5 containers will be 75.00. You can now upload and test your store once again to see how 5 containers of purple paint will be added to the cart by clicking on this link.

The final thing that we are going to add to the page is a button which allows the customer to view their cart without adding anything to it. This will be accomplished by using the E-Buy Button Action. Draw a graphic item which is 100 pixels wide by 20 pixels high and place it below the HTML item containing the E-Buy Text Actions. Click inside the graphic item and type the text “Go to Cart”, and using the Inspector palette, change the font to Verdana, and the size to 16px. Select the graphic item and use the Item menu to apply the E-Review Button Action to it. This is all you need to do! There are a couple of options which can be set for this Action, but we won’t use them here. If you once again upload your page, you will now be able to click on the “Go to Cart” button that you just created to view the Mal’s shopping cart.

Setting up a Mal’s e-commerce account

Shipping Calculations

We’ll take a quick break from Freeway to have a look at a couple of the options available within Mal’s e-commerce, so log into your Mal’s account.

Navigate to the Cart set-up page and select the Shipping link. This will allow you to specify the method you wish to use to calculate the amount of shipping to charge your customers. There are eight options available, but only the first three are simple enough to consider in this tutorial see the Mal’s e-commerce documentation for details of the others.

At the top of the Shipping Calculations page there are two text entry fields. The first of these allows you to specify that all orders over a specified value will have free shipping. The second allows you to add a fixed cost to all orders, regardless of shipping method or order value. By default, both of these fields are set to 0.00 which means that both of these options are switched off. To enable them, simply enter a value in the field relevant to the option you wish to enable. To switch the option off again, return the value to 0.00.

Beneath these fields, there is a set of radio buttons to select the shipping calculation method you wish to use in your shopping cart. As mentioned above, we shall only consider the first three here. By default, the No Shipping option is selected and, as would be expected, this means no shipping is calculated by the shopping cart.

Selecting “Option 1: Fixed Value” will add a fixed shipping cost to every order processed by your shopping cart, regardless of the number of items ordered.



Enter the shipping cost you wish to add to the order into the text entry field for this option.

Selecting “Option 2: Calculated from quantity” will apply a fixed cost for every item ordered, i.e. if you set a fixed shopping cost of $2.00 per item, if 5 items are ordered the total shipping cost will be $10.00.



Enter the shipping cost per item into the text entry field for this option.

Selecting “Option 3: Calculated from weight or other value” allows calculation of shipping cost based on a value you can specify later in Freeway.



This option will apply a shipping cost per shipping unit in a similar way to Option 2, but using a value you specify rather than the number of items ordered. Enter the shipping cost per shipping unit in the text entry field for this option. There is also a checkbox at the bottom of the text for the option. By checking this box, you specify that the shipping units used to calculate the shipping cost is the price of the item. This allows you to specify that the shipping cost should be a percentage of the total cost of the order; for example, to specify that the shipping cost should be 10% of the total order, check this box and set the text entry field to 0.10.

Select the radio button corresponding to the shipping calculation you wish to use, and then enter the appropriate details as described above. To confirm your changes, scroll to the bottom of the web page and click the Update Shipping button.

Sales Tax

Return to the Cart set-up page again, and click on the Sales Tax link (which should be just below the Shipping link). You will be taken to the Tax Calculations page we shall only consider the simpler options in this tutorial.

The first setting is the checkbox labeled “Tax Basis”.



These allow you to select whether no tax will be used (the default setting), use a global tax rate that is the same for all products you sell (determined in the next setting) or specify the tax rate for each product separately in Freeway.

The second setting is a text entry field labeled “Default Tax Rate”.



If you chose to use a global tax rate for all your items in the previous options you will need to enter the rate here.

The third setting is the checkbox labeled “Shipping”.



This box is is checked by default which means that any delivery charges for an order will be included in the taxable value. Uncheck this box if you do not wish to charge tax on shipping costs.

Finally, there is another group of radio buttons under the heading “Quote tax before we have their shipping address”.



The first two options will be described here, you will need to consult the Mal’s e-commerce documentation for details of the others. The first radio button (labeled “All orders”) will cause tax to be calculated on all orders. Selecting the second radio button (labeled “Check box”) will add a checkbox in the cart to allow a customer to select whether tax is added to the order. There is also a text entry field for this option which allows you to specify the message that is displayed next to this checkbox.

Changing the shopping cart’s appearance

To make the shopping cart appear more integrated into your web store, there are several options available to customize the appearance of the cart pages. We’ll now change some of these settings, so return to Freeway.

Select the root folder of your site (the folder you applied the E-Shop Settings Action to earlier) in the Site panel, and open the Actions palette if it’s not already visible.

In the Actions palette for the E-Shop Settings Action, there is a popup menu titled Cart:



Each of the options in the popup will display a different group of settings to control the appearance and behavior of the cart. The first thing we will do is set the cart to horizontally center itself in the browser window. Change the Cart popup menu to General; a group of settings containing two popups titled Cart Width and Cart Align will be displayed. Select Center from the Cart Align popup.



Now change the Cart popup menu to Background. In the group of settings displayed, select Other… from the Color popup menu, and select a light yellow color from the color selection dialog that appears. This will set the background color of the cart to the light yellow color you have selected.

Upload your site, and then navigate to your shop page in your browser. Click on one of the buttons or links to add a product to the shopping cart you will be taken to the page informing you that your new configuration settings have been loaded. Refresh this page to view your shopping cart, and you will see that the cart now has a light yellow background and is horizontally centered in the browser window. There are plenty more options to personalize your shopping cart see the Reference for further details.

While you are in the shopping cart, change the quantities of all the products to 0, and click on the Recalculate button. This will empty your shopping cart in preparation for the last stage of this tutorial.

Viewing Orders

The last thing we will look at is how you view orders that customers have made in your shop. To do this, we will pretend to purchase 1 container of orange paint. Return to your shop page, and click on the “Buy 1 Container of Orange Paint” link. This will of course take you to the Mal’s shopping cart which should contain the single container of orange paint that you have just added. Now proceed to the payment process by clicking the “Go To Payments” button. You will be taken to a page that allows the customer to enter their address details; fill in the fields so that you’ll be able to see how this translates into Mal’s later.

When you have entered this information, click the “Continue” button at the bottom of the page to move on. This will show a summary page containing the details of your order and, at the bottom, a list of payment options. As the only payment option that we set up in Mal’s earlier was Paypal, this is the only one that will be listed. Click on the “Continue” button and you will be taken to the payments page on the Paypal web site. There is no need to proceed any further than this because transferring the customer to this page is the last point that your Mal’s shopping cart has in the process; Mal’s will now have made a record of the transaction.

You should now log into your Mal’s e-commerce account once more. In the Cart Links section on the left, click on the link titled “List Orders”. The List Orders page contains a list of all the orders that have been processed by your shopping cart, and you should see the order that you have just made in the list. If you click on the link titled “DETAILS” on the right hand side of the row for your order, you will be taken to a page which contains all of the details for the order, including the products ordered and shipping/billing addresses. One important thing that should be noted is that these orders do NOT confirm payment by the customer, they simply provide you with a record of an order that has been made through the cart. You shouldn’t fulfil orders until you receive confirmation of payment from Paypal or whichever payment processor you decided to use.

This completes the introductory tutorial for Freeway’s integration with Mal’s e-commerce. Explore the Reference section of this documentation for further explanation of features covered in the tutorial, and for details of features not covered in it, for example adding product variations using the E-Buy Form Action.

Reference

E-Shop Settings

The E-Shop Settings Action is applied to the root folder in your Freeway document. To apply it, select the root folder in your Freeway document and click on the button in the bottom-left corner of the Actions palette, then select the E-Shop Settings Action from the list that appears. It contains numerous settings, all related to the identification and behavior of the Mal’s shopping cart.



Mal’s Connection Settings

These settings specify the connection to Mal’s e-commerce:
  • User ID: The User ID you use to log into the Mal’s e-commerce web site.
  • Mal Server: The name of the Mal’s e-commerce server which you were assigned to when you signed up.
  • Add link verification: Check this box if you have turned link verification on for your Mal’s e-commerce account.
  • Key code: If you have turned link verification on, you must enter the hash secret obtained from the Mal’s Administration Area here.

Mal’s Shopping Cart Settings

Selecting different values in the Cart popup menu will display different groups of settings for the appearance and functionality of your Mal’s e-commerce shopping cart.

General



  • Cart Width: Allows you to select the width of the Mal’s shopping cart in the browser. You can select either a fixed-width value or a percentage width value.
  • Cart Align: Specifies the horizontal alignment of the Mal’s shopping cart in the browser window. Options are Left, Center, or Right.

Text


  • Font: Specifies the font that the text in the shopping cart will use.
  • Size: Specifies the size of the text in the shopping cart.
  • Color: Specifies the color of the text in the shopping cart.


Background


  • Color: Specifies the background color of the shopping cart pages.
  • Image: Allows selection of a background image for the shopping cart pages.
  • Position: If a background image has been selected, specifies how the background image should behave when the user scrolls the browser window. There are two values: Scrolls which specifies that the background should scroll with the contents of the page, and Fixed which specifies that the background should remain stationary when the user scrolls the browser window.

Header Image


  • Image: Selects an image to be displayed at the top of all cart pages.
  • Alt Text: Specifies alternative text for the header image if the browser cannot display the image, for example if the user has disabled images.
  • Image Align: Sets the horizontal alignment of the header image on the shopping cart page, aligned to the contents of the page.

Display Header



This section contains settings to control the appearance of display header rows in the cart. These headers are displayed above information which cannot be changed by the customer.
  • Background: Specifies the background color of the header row.
  • Text: Specifies the color used for the text in the header row.

Input Header



This section contains settings to control the appearance of input header rows in the cart. These headers are displayed above information which can be changed by the customer.
  • Background: Specifies the background color of the header row.
  • Text: Specifies the color used for the text in the header row.

Link Colors


  • Normal: Specifies the color of links in the cart that haven’t been visited.
  • Active: Specifies the color of links in the cart when they are clicked on.
  • Visited: Specifies the color of links in the cart that have been visited.

Language and Currency


  • Language: Specifies the language localization that the Mal’s shopping cart will appear in. Choose which language from the popup.
  • Currency: If Multiple Currencies has been set up in the Mal’s Admin area, this will specify which currency to use. This should be a value from 1 to 5, corresponding to the currency number in the Mal’s Admin area. There is no need to change this value if you are not using multiple currencies.


E-Buy Button



The E-Buy Button Action creates an HTML or graphic button which when clicked on the web page will add a specified product to the shopping cart. It can be applied to graphic items and HTML form buttons. To apply it, select the item you wish to apply it to, open the Item menu, open the Actions submenu, and select E-Buy Button.

Options
  • Product: Specifies the name of the product that will be added to the shopping cart when this button is clicked on. It will appear with this name in the shopping cart, and also on orders once they have filtered into your Mal’s account.
  • Price: Specifies the price of the product. There are no currency units as these are set by the cart itself.
  • Tax: If your Mal’s account has been set up so that tax is calculated based on Buy Now links that you create (see the Basis section of the Sales Tax page in Mal’s Admin), then this field will specify the tax percentage to apply for this item.
  • Quantity: Specifies the number of this product which will be added to the shopping cart by clicking on this button.
  • Shipping Units: If your Mal’s account has been set up to calculate shipping costs based on weight or some other value (options 3, 5, 7, and 8 in the Shipping page in Mal’s Admin), this field specifies the weight or other value to be used to calculate shipping. If you are not using these options to calculate shipping, leave this field blank.
  • Tool tip: Specifies a message to be displayed in a popup bubble when the customer hovers their cursor over this button. To automatically insert the contents of the Product field into the tool tip, enter the characters ^o (the first character is created by holding down the Alt key and pressing the i key)—the text in the Product field will be substituted for these characters when you publish your site.
  • Target: Specifies where the new link should be opened. See the section Targeting links on page 282, and To apply a predefined link target on page 283 for a description of what each of these settings do.

E-Buy Text



The E-Buy Text Action creates a HTML text link which when clicked on the web page will add a specified product to the shopping cart. It can be inserted onto the page, or into another HTML item. To insert it, open the Insert menu, open the Action Item submenu, and select E-Buy Text.

Options
The options for the E-Buy Text Action are identical to those for the E-Buy Button Action, apart from one field. Refer to the documentation for the E-Buy Button Action for all other options.
  • Text in Link: This field specifies the text that will actually be output with the link on. To automatically insert the contents of the Product field into the text, enter the characters ^o (the first character is created by holding down the O key and pressing the i key)—the text in the Product field will be substituted for these characters when you publish your site.

E-Buy Form

The E-Buy Form Action is another Action which will allow your customers to add products to their shopping cart, however it is somewhat more advanced than the E-Buy Button and E-Buy Text Actions. It will create a form on your shop page, complete with a “Buy Now” button which the customer clicks to submit their choices to the Mal’s shopping cart. By creating child items of the E-Buy Form you can add HTML form items which give the customer greater control over the quantity and variation (for example a sweater may be available in several sizes) of the product they wish to buy. The E-Buy Form Action works with two other Actions, E-Quantity and E-Product Variation to provide this functionality.

The E-Buy Form Action can be applied to HTML items and HTML tables. To do so, select the item you wish to apply it to and open the Item menu, open the Actions submenu, and select E-Buy Form.



Options
The E-Buy Form options are almost exactly the same as for the E-Buy Button Action. The only differences are that there is no Tool tip field, and the difference in the behavior of the Quantity field, which is described below.
  • Quantity: Specifies the quantity of the product to add to the shopping cart if there is either no E-Quantity Action that is a child of the E-Buy Form Action item, or if there is no valid value selected in the E-Quantity Action which is a child of the E-Buy Form Action.

Adding Quantities and Variations

To make quantity and variation fields available to the customer, you use the E-Quantity and E-Product Variation Actions. These can be applied to certain HTML form items that are children of the item to which the E-Buy Form Action is applied. The types of form items which they can be applied to are checkboxes, radio buttons, text fields and menu/lists, and the items can either be inflow children (clicking inside the E-Buy Form item, and inserting the child form item from the Insert menu) or absolute children (drawing the child form item inside the bounds of the E-Buy Form item).

You use the Item Output panel of the Inspector palette to specify the quantity or variation that the child form item will adjust when the customer clicks the Buy Now button. The specific settings for each type of form item are outlined below.


Form items with the E-Quantity Action applied

Checkbox
  • Value: Enter a number here to specify the quantity of the product that should be added if the customer checks this checkbox.
Radio Button
Create a group of radio buttons as you normally would, and apply the E-Quantity Action to each of them to allow the customer to select one quantity from a number of options.
  • Value: Enter a number here to specify the quantity of the product that should be added if the customer selects this radio button in the group.
Menu/List
Allow the customer to select one quantity from a list. Create Choice/Value pairs for each quantity option you would like to provide.
  • Value: Enter a number here that corresponds to the quantity to add to the shopping cart for the specified Choice.
Text Field
Allow the customer to enter the quantity of the product to add to the shopping cart.


Form items with the E-Product Variation Action applied

Checkbox
  • Value: Enter text here to specify the variation of the product that should be added if the customer checks this checkbox.
Radio Button
Create a group of radio buttons as you normally would, and apply the E-Product Variation Action to each of them to allow the customer to select one variation from a number of options.
  • Value: Enter text here to specify the variation of the product that should be added if the customer selects this radio button in the group.
Menu/List
Allow the customer to select one variation from a list. Create Choice/Value pairs for each variation option you would like to provide.
  • Value: Enter text here that corresponds to the variation to add to the shopping cart for the specified Choice.
Text Field
Allow the customer to enter the variation of the product to add to the shopping cart.


Using a custom button for an E-Buy Form


If you would like to use a button for an E-Buy Form that is different from the one which is added automatically, simply create a child graphic item or HTML button of the E-Buy Form and apply the E-Buy Button Action to the child. Freeway will automatically recognize that this button is present and will use it as the button to submit the form, and will not output the default button.

E-Review Button

The E-Review Button Action creates an HTML or graphic button which when clicked on the web page will transfer the customer to the shopping cart page. It can be applied to graphic items and HTML form buttons. To apply it, select the item you wish to apply it to, open the Item menu, open the Actions submenu, and select E-Review Button.



Options
  • Tool tip: Specifies a message to be displayed in a popup bubble when the customer hovers their cursor over this button.
  • Target: Specifies where the new link should be opened. See the section Targeting links on page 282, and To apply a predefined link target on page 283 for a description of what each of these settings do.


E-Review Text

The E-Review Text Action creates a HTML text link which when clicked on the web page will transfer the customer to the shopping cart page. It can be inserted onto the page, or into another HTML item. To insert it, open the Insert menu, open the Action Item submenu, and select E-Buy Text.



Options
The options for the E-Review Text Action are identical to those for the E-Review Button Action, apart from one field. Refer to the documentation for the E-Review Button Action for all other options.
  • Text in Link: This field specifies the text that will actually be output with the link on.
  • Tool tip: Specifies a message to be displayed in a popup bubble when the customer hovers their cursor over this button.
  • Target: Specifies where the new link should be opened. See the section Targeting links on page 282, and To apply a predefined link target on page 283 for a description of what each of these settings do.