Getting Started with Freeway. Shop in a Box

Getting Started with Freeway Shop in a Box

Preface Copyright and acknowledgments Copyright 1997-2006 Softpress Systems Ltd. All rights reserved. Revised Issue May 2006 The Freeway software and this documentation are copyright materials. No part of the Freeway software may be reproduced, transmitted, transcribed, stored in a retrieval system, or translated into any language, or computer language, in any form or by any means without the prior written permission of Softpress Systems Ltd. Additional copies of this guide may be made and distributed provided they include this copyright notice. Softpress Systems Ltd specifically retains title to all Freeway computer software. The software described in this guide is furnished under a license agreement and may only be installed, used, or copied in accordance with the terms of that agreement. Softpress is a trademark of Softpress Systems Ltd in the United States and other countries. Freeway is a trademark of Softpress Systems Ltd, which may be registered in some countries. Apple, Macintosh, Power Macintosh, and the Mac Logo are registered trademarks of Apple Computer Inc. All other product names are trademarks, or registered trademarks of their respective owners. Limitation of liability The information in this guide is believed to be correct as of the date of publication. However, our policy is one of continuous development and so the information in this guide is subject to change without notice, and does not represent a commitment on the part of Softpress Systems Ltd. Contact details You can reach Softpress Systems using the following contact details: Softpress Systems Ltd First Floor 25 Hanborough House Hanborough Business Park Witney, Oxon, OX29 8LH United Kingdom Tel: (+44) 1993 882588 Fax: (+44) 1993 883970 Web: http://www.softpress.com/ Email: info@softpress.com Assumptions and conventions To avoid ambiguity this guide adopts the following conventions: Convention What it means Bold Identifies a name or label that appears on the computer screen. For example: Click the OK button. Computer Identifies text that you key in at the computer keyboard. L O C Represent the special keys on the keyboard: Control, Option (or Alt), Command. 2

About the Freeway documentation Getting Started with Freeway The Getting Started with Freeway guide is the ideal place to start learning about how to get the most out of Freeway. It includes an overview of Freeway s unique features and benefits, information about planning your site and publishing it on the Web, a guided tour of Freeway s main features, and a series of three tutorials showing how to use Freeway to create stunning Web sites. The KnowledgeBase The Softpress Web site also provides an advanced KnowledgeBase containing a wide range of information on every aspect of using Freeway, including technical notes on specific features, tutorials illustrating how to achieve particular effects, answers to frequently asked questions, and examples of sites created by third-party designers using Freeway. The knowledge base is fully searchable and is being extended on a weekly basis to provide answers to any question that users ask about Freeway. Preface Using Freeway The Using Freeway guide provides clear step-by-step instructions for using all the main features of Freeway, including setting up, previewing, and publishing a site, working with pages, text, graphics, tables, and forms, and creating dynamic effects. It is designed to help you translate your vision into a complete, fully working Web site. Freeway Reference The Freeway Reference guide is aimed at more advanced Freeway users, and provides detailed reference information about advanced Web design features that may not be needed by all users. It also provides information about migrating from existing sites created in other Web programs, and a summary of the Freeway preference panels, palettes, and keyboard shortcuts. On-line Help Freeway also includes a comprehensive integrated context-linked on-line help system which you can use to find information about features while you are using the product. This includes the same information as provided in the Using Freeway and Freeway Reference guides. 3

Preface 4

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. One of the better of the 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. And now, using the power of Freeway s Actions technology, you can take advantage of Mal s shopping cart to quickly create your own online store. With Freeway 4.2 and above, a brand new suite of Actions is included to provide easy configuration and seamless integration. Simply design your store pages in Freeway as you would for the rest of your website, 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! Introduction 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 website. PayPal, Verisign, and Authorize.Net are wellknown companies who provide secure credit card processing services. Many companies who provide shopping carts link with these (and other) credit card processors. This document 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! 5

Tutorial setting up Mal s e-commerce 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. First navigate to http://www.mals-e.com using your web browser. On the right hand side of the page, near the bottom, there is a Join Now link: Click on this link to take you to the New Account page: You will now be presented with a thank you message which has some important information on it: You should record the Username and Password that you have been assigned, and also the Server name that your account has been set up on (you will need this later to enter into one of the Actions in your Freeway document). As mentioned earlier, an email containing this information will also be sent to the email address which you specified when creating the account. Setting up a Mal s e-commerce account Initial setup The next step is to log into your Mal s e-commerce account and do some initial setup. Return to the Mal s home page, and enter your user name and password into the Login fields at the top-right of the 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 Join Now button at the bottom of the page. Click on the Login button just beneath to log into the Administration area of your account. 6

Before you progress into the Administration area, you ll be asked to set a Payments Password: Fill in a new password (making sure you record the password you use somewhere) and click on the Submit Password button. A confirmation page will appear reminding you to keep a record of your password. On the left hand side of the page, there are links to take you to various sections of the administration section. The first area to visit is Admin Home, so click on the relevant link. For your store to start working, you will need to enable the cart. To do this, check the checkbox labelled Show cart in the My Admin section on the right hand side of the Admin Home page, and then click the Update button beneath to save the changes. Setting up a Mal s e-commerce account International and Currency setup There are now some initial settings you will need to check and potentially change before starting to use your store. Now you have created a cart in your account, a new section of links will be available on the left hand side of the Admin page, under the heading of Cart Links. Click on the Cart setup link. This will take you to a page containing several links, each pointing to a page where you can maintain various settings for your shopping cart: Tutorial setting up Mal s e-commerce A page will be displayed informing you that your account doesn t have a shopping cart and asking you if you would like to create one. Click the Yes button to create a shopping cart in your account. A confirmation page will be shown notifying you that your Admin settings have been updated. 7

Tutorial setting up Mal s e-commerce 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: 8

Although it is possible to set up your cart to use multiple currencies, this is outside the realms of this tutorial the Reference section 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 default message is All prices are in US dollars. If you are not selling in US dollars, you should change this to something more appropriate, for example All prices are in UK Pounds Sterling. The Format menu allows you to select a format in which to display prices there are three options available, so select the currency format most suitable for the currency you are using in your shopping cart. The final option for currency (the Currency menu) 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. This completes setting up the international options for your account so scroll to the bottom of the web page and click the Submit Changes button. IMPORTANT Setting up a Mal s e-commerce account Link Verification On the Cart set-up page, click on the Link Verification link. 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! For now, all you need to do is switch Link Verification on so check the checkbox and click the Update Record 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. Setting up a Mal s e-commerce account 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 one here 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 setup page, click on the PayPal link in the Payments 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. Tutorial setting up Mal s Payments 9

Tutorial linking Freeway to Mal s Using Freeway to link to Mal s shopping cart Initial setup Although templates are provided for the Freeway E-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 website, 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 website, 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 10

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 it s 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. Using Freeway to link to Mal s shopping cart 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 75px, Width 400px, 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 Sand and its size to 60px. Tutorial creating a shop page 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 website. 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 11

Tutorial creating a shop page 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: 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: 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. 12 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

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 Website 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: 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 Colors palette to change its background color to orange: Tutorial creating a shop page 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 13

Tutorial creating a shop page 14 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 colour. 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. 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. Tutorial further Mal s options 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. 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 15

Tutorial further Mal s options confirm your changes, scroll to the bottom of the web page and click the Update Shipping button. Setting up a Mal s e-commerce account 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 Shipping. This box 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. The next setting is a text entry field labeled Tax Rate. If you wish to use the same tax rate for all products that you sell, you should enter the percentage tax rate as a decimal value in this field; for example, to set a 15% tax rate for all products, enter 0.15 in this field. These allow you to select whether to use the tax rate specified in the Tax Rate field (the first radio button and the default setting) or to specify the tax rate for each product separately (the second radio button if you choose this option, you will set the tax rate for each product in Freeway later). Finally, there is another group of radio buttons under the heading Which Orders Are Taxed. The first three options will be described here consult the Mal s e-commerce documentation for details of the others. The first radio button (labeled None ) will cause no tax to be calculated on any orders. The second radio button (labeled All orders ) will cause tax to be calculated on all orders. Selecting the third 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. Thirdly, there is a group of two radio buttons labeled Basis. 16

Using Freeway to link to Mal s shopping cart 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. Tutorial changing the cart appearance 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. 17

Tutorial viewing orders Using Freeway to link to Mal s shopping cart 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 website. 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. 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. 18 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.

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 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 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. Shopping Cart Settings: 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. Reference Cart Align: Specifies the horizontal alignment of the Mal s shopping cart in the browser window. Options are Left, Center or Right. Shopping Cart Settings: Text 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. 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. 19

Reference Shopping Cart Settings: Background Shopping Cart Settings: 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. 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. Shopping Cart Settings: Header Image Background: Specifies the background color of the header row. Text: Specifies the color used for the text in the header row. Shopping Cart Settings: 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. Image: Selects an image to be displayed at the top of all cart pages. Text: Specifies the color used for the text in the header row. 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. 20

Shopping Cart Settings: Link Colors Normal: Specifies the color of links in the cart that haven t been visited. 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. E-Buy Button: Options Reference 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. Shopping Cart Settings: 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. 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. 21

Reference 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 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 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. 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. Target: Specifies where the new link should be opened. See the section Creating links in frame-based pages in the Freeway Reference Manual for a description of what each of these settings do. 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. 22

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. 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. E-Buy Form: 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 in-flow 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 Settings page 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. Reference 23

Reference 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 to 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. 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 Creating links in frame-based pages in the Freeway Reference Manual for a description of what each of these settings do. 24

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. Reference E-Review 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. 25