eCart will add invaluable checkout functionality to your online store. This includes the ability to create and design a shopping cart page, add products to a cart, and create all the necessary pages for processing credit card transactions through a payment gateway.
This guide shows you the process for adding eCart to your online store so that you can start selling products online.
eCart does not create your complete online store. It only creates the shopping cart and checkout functionality that must be applied to your website, in order for customers to make purchases, and for your website to process credit card details. You should probably have already set up your product catalog, or the page that you will use to advertise your products.
For more information on creating a product catalog, see the DataAssist Getting Started Guide.
You will need the following items before starting this tutorial:
- Dreamweaver CS3 or later
- eCart 5
- PHP/MySQL Testing Server
For more information see Setting up a Testing Server
- Dynamic Site Defined in Dreamweaver
For more information see Defining a dynamic site in Dreamweaver
- MySQL Database Connection configured
For more information see Creating a MySQL database connection in Dreamweaver
- API credentials for your Payment Gateway account
Only required if you intend to process credit cards on your site.
Click here for a list of supported payment gateways.
- API credentials for your Shipping Provider account
Only required if you intend to provide real-time shipping rate lookup through a shipping service.
Click here for a list of supported shipping providers.
The eCart object is the backbone of your eCart functionality. Through the eCart object panel, you define important settings such as the currency your store will use, as well as specifics such as discounts, shipping, or tax rules.
Before using any eCart functionality, you must first have created an eCart object for your Dreamweaver site.
Before you proceed with using eCart, make sure that you have chosen the correct Dreamweaver site from the Files panel.
- Open any PHP page of your website from the Dreamweaver Files panel.
- From the Insert menu, choose WebAssist > eCart > eCart Object.
This opens the eCart Object panel.
- Click Add in the eCart Object panel.
- In the name field, enter a name for your shopping cart.
- Review the options on the General tab to ensure that everything fits the store you intend to have.
For most customers, the default settings will be correct.
The eCart Object panel consists of 7 different tabs for configuring various settings for you cart. At this point, all you need to configure is the General tab and you can leave all the other options at their default settings. You can reenter this interface at any time to modify how your cart functions.
Just like a typical online store, eCart uses 'Add to cart' buttons that you can place beside each product listing on your website. When clicked, this button will add the item that is for sale to the shopping cart. Customers can continue shopping on your store, adding additional items to their cart, and will then proceed to the shopping cart page when ready to purchase those items.
If you intend to create Add to cart buttons that reference your products in a database, you will need to have a Recordset already created on the page you are adding the button to. If this is a product results or product details page created by DataAssist, this will already have been created for you.
- From the Dreamweaver Files panel, open the page that you want to add your Add to cart button.
If you used DataAssist to create your product catalog, you probably want to insert Add to cart buttons on the product detail page, and on the Product Results page.
- Place your cursor where you wish the Add to cart button to be inserted.
- From the Insert menu, choose WebAssist > eCart > Add To Cart Button.
- From the Add to Cart Button interface, choose the shopping cart you wish to use.
If your site only has one cart connected to it, this will be selected by default.
- Under Properties, choose whether you want this button to be static, or dynamic.
- Add static item to cart: With a static Add to cart button, you will need to specify the details for the product within the Bindings tab of this interface.
- Look up item ID from recordset: If you are storing your products in a database (recommended), you will want to select this option so that you can retrieve product prices, descriptions, weight, etc., from the database dynamically.
- Specify a page you wish the customer to be taken to after adding this product to their cart.
Leave this blank if you wish the user to remain on the page. In some cases, you will want them to be taken straight to the shopping cart to proceed with checkout.
- Select the Bindings tab.
On the Bindings tab, you specify the details for the product, or, for dynamic buttons, you link the product details to the appropriate columns of your database.
Static Add to cart buttons
- Select the ID column, and in the Default value field, enter an ID for the product.
- Select the Name column, and in the Default value field, enter the name for the product.
- Repeat this process for all other options.
In most cases, you will want to leave the Quantity field at 1, and select the Updateable option. This will allow customers to specify how much of that product they wish to purchase.
- Skip to step 17 to learn what to do if the item being added is already in your cart.
Dynamic Add to cart buttons
- Select the ID column.
- Choose the Default value lightning bolt.
- Expand the Recordset that is being used for your products, and choose the ProductID column.
For DataAssist pages, this Recordset is most likely WADAproducts.
- Click OK.
- Repeat this process for the other options.
Leave the Quantity set to 1 and updateable. This allows the customer to specify how much of that product they wish to purchase.
If you are using the Free eCommerce MySQL database (
wa_ecommerce_db.zip) provided by WebAssist, you should have all the default columns required by eCart already in your database.
- From the If Item In Cart section, specify what you would like to be done in the even that the item is already in the cart and the customer adds it again.
By default, the product will be added to the cart an additional time, increasing the value in the quantity column.
- Select the Button tab to choose your button design.
- Choose the button that fits best with your design.
- Click OK to have the button inserted to your page.
Now that you have inserted an Add to cart button, you may need to make changes to the button. For example, if your buttons are static, you may need to modify the price at some point. For dynamic buttons, perhaps you change something in your database and need to update the button to reflect that change.
- Open the Server Behaviors panel by choosing Window > Server Behaviors.
- From the list of Server Behaviors, double-click on the eCart Add From Recordset option.
If you have multiple Add to cart buttons on the page, there will be more than one listed.
- When the Add to cart button interface opens make any changes you need and click OK when done.
The next step is to create your shopping cart page using eCart's Display Manager. This is the page your customer will go to and review the items they have selected to purchase. From this page, they can update quantities to be purchased, remove items, and proceed to check out.
The Display Manager allows you to configure and design your shopping cart display.
Before using the eCart Display Manager, you need to create the PHP page that you intend to use as your shopping cart page.
- Choose File > New.
- Select to create a PHP page, and click OK.
- Press Ctrl (Cmd) + S to save the page.
- Enter cart.php for the file name.
This file name isn't required, just a recommendation.
If you already have a PHP page created that you wish to use as your shopping cart, you do not need to create a new one.
- With your cart.php page open in Dreamweaver, go to Insert > WebAssist > eCart > Display Manager.
- Step 1 of the Display Manager interface allows you to specify the design of your cart.
- Make sure you select the correct eCart object from the Cart menu.
If you only have one eCart object created for this site, that will be selected by default.
- From the Design menu, choose a design that best works with your website's design.
- The Display Type menu provides you with 4 different types of shopping carts that you can use.
In most cases, the Updateable cart is the best choice as it provides your customer with the opportunity to modify the cart contents before checking out.
- Choose the desired settings from the other menu lists to create the cart display that you are looking for.
If the colors do not match up exactly as you would like, that is fine. You can modify this further from the Manage Colors interface.
- Click the Manage Colors button to open the Manage Colors interface.
- Use the options in the Manage Colors interface to change the colors used throughout your site to find a theme that first you website's design.
Using the Color Importer feature, you can import a page that uses your site's design, and sample colors from that page to use for your cart.
- Click OK to close the Manage Colors Interface when you are ready.
- Click Next to proceed to the next step of the Display Manager.
Configuring Cart Columns
Step 2 of the Display Manager allows you to configure the cart columns that will display on your shopping cart page. The cart columns area displays the columns that will be included in the shopping cart display. The most common options are included by default, but others may be available from the + Add option.
The options that are presented to you on this step are the columns that you defined in the eCart object. If you wish to display additional columns, they need to be created in the eCart object, and then added on this page.
- If you wish, reorder any columns by selecting the column, and using the up or down arrows to change their position.
The column listed at the top within this interface will be shown first on the far left of the shopping cart page.
- Select the Thumbnail column, and make sure the Display as image checkbox is selected.
This ensures the appropriate <img src> reference is applied to the items displayed in this column.
- In the Image folder field, specify the folder that you store your product images in.
This assumes that you store only the image file names in the Thumbnail column of your database. Therefore, by specifying the appropriate directory, eCart can use this information with the file name in the database, to create the appropriate file path to the images. If you include the full path to each image in your database, then you would not want to specify a directory in the Image folder field.
Click Next once you have managed all your cart columns.
Handling Discounts and Charges
The final step of the Display Manager allows you to specify how you want Discounts, Charges, Shipping and Tax to be displayed on your shopping cart page. By default, the Summary option is selected, which summarizes each of the options in their own section of the cart display.
- Choose the desired method for displaying each option.
Refer to the preview to determine which option best suits your needs.
- Click Finish to have these options applied to your cart.php page.
- Once the cart page has been updated, press Ctrl (Cmd) + S to save the page.
The last step to getting your eCart functionality applied to your website, is to create the checkout pages using eCart's Checkout Wizard. This wizard guides you through the process of choosing your desired payment gateway, specifying shipping options, tax options, and setting up the appropriate database configuration for your pages.
Before you proceed with creating your checkout pages, you should first ensure you have set up the following:
- Created an account with a supported payment gateway.
Not required if you do not want to process credit cards.
- Created an account with a supported shipping provider.
Not required if you do not wish to provide real-time shipping rate lookup.
- Installed Universal Email
Only required if you wish to configure a confirmation email to be sent to customers after purchasing.
Choose your payment gateway
The first few steps of the Checkout Wizard allow you to choose the payment gateway options you wish to use. If you haven't chosen a payment gateway yet, the information here will help you choose one that best suits your needs.
- With your shopping cart page open, go to Insert > WebAssist > eCart > Checkout Wizard.
- From the menu list at the top, select the eCart Object that will be used for these checkout pages.
- If you do not wish to use PayPal as your payment gateway, choose Accept Credit Cards.
If you do not wish to use a payment gateway, choose No payment gateway and proceed to configuring your shipping options.
- Click Next.
- Depending on what you selected, and payment gateway you are using, the next few steps may be different. Proceed through the wizard, choosing the options for your payment gateway.
You will have the opportunity to include a PayPal Express Checkout button on your checkout page. This button provides an additional option for your customers to make purchases on your website, but is not required.
- When asked for the credentials for your payment gateway, enter the details you have obtained from your payment gateway.
If you do not have this information, contact your payment gateway, or log in to the Business section of their website to locate the API credentials.
- Click Next once you have entered the necessary credentials.
Shipping Options
The next step allows you to configure your shipping options. If you do not wish to charge for shipping, deselect the I will provide shipping checkbox and click Next to configure your tax rules.
- From the Shipping provider menu, choose the shipping provider you have an account with.
If you do not intend to include real-time shipping rate calculations, leave 'None' selected.
- Enter the Base rate.
This is the base price for shipping your want to apply to all orders. This will be added to the cost that is calculated through the shipping provider if you have selected one.
- Enter a per item rate.
This rate will be applied for each item that is included in your cart. This will be added to the cost that is calculated through the shipping provider if you have selected one and also to the base rate if you entered one.
Most online stores do not apply all three types of shipping options provided. Typically, only one of the options is used, or a combination of Shipping Provider lookup in conjunction with one of the other two choices.
- Once you have specified your shipping options, click Next.
If you chose a Shipping Provider, the next step will prompt you for your API access credentials. Enter those details and click Next.
Tax Rules
The next step allows you to choose how you want taxes to be calculated in your checkout process. If you don't wish to apply tax and handle it separately, choose the No thanks, I'll handle tax calculations myself checkbox and click Next to proceed with configuring your database settings.
- In the Tax rate field, enter the tax rate for your business.
In the U.S. you will have a specific tax rate for the state that your business resides in.
- From the Charge to options, choose who you want this tax rate to be applied to.
In most cases, for online purchases, the tax is usually only applied when the customer making the purchase resides in the same state as your business. Check with your area's laws and regulations for more information.
- If you wish tax to be applied to the cost of shipping, select the Include shipping in cart subtotal... checkbox.
In the UK, it is common to apply tax to the shipping as well as the items in the cart.
- When you are ready, click Next.
Database settings for storing order information
On this step, you will specify where you want your order information stored in your database. Your orders will be stored in two database tables, one for storing the summary for each order (total price, customerID, etc.), and another for storing the details for each order (which products were purchased and quantity).
eCart 5 will automatically create the necessary tables in your database, and bind the appropriate data. However, if you wish to use your own custom database, you can manually bind each of the values to the correct database column.
- Select the Create using preset checkbox, and choose the appropriate preset.
If you wish to manually bind these values to your existing database tables, do not check this box and proceed by selecting each database column, and selecting the Value lightning bolt to bind the correct values.
By default, eCart includes a Default preset and a PowerStore preset. Use the default option, unless you are modifying PowerStore using eCart.
- Click Next.
If you are manually binding these values, you will be taken to the Order Details step to repeat the process for this database table.
Email Receipt
If Universal Email is installed, eCart will provide you with this step for the Email Receipt. If you do not have Universal Email installed, you will be taken straight to the page designs step.
- Type the desired From address, From display name, and Subject for the email receipts.
You can also select the lightning bolt to do this dynamically.
- Specify the necessary Email object settings.
If you do not know these settings, check with your hosting provider.
In most situations, entering localhost for the SMTP server will work.
- Click Next.
Page Designs
The Page Designs step allows you to choose from some preset checkout page designs.
- Choose the desired design and color scheme.
- Click Next.
Summary
The final step of the eCart Checkout Wizard is the Summary, which details all the pages that will be created when you click Finish.
- Review the pages that are going to be created, modifying any filenames if desired.
- If your current website contains a Dreamweaver Template, choose that template and editable region.
The content created by the checkout pages will be inserted into the editable region you specified. In most cases this should be the 'body' or 'content' area.
- When ready, click Finish to have the Checkout Wizard create your checkout functionality.
Once you click Finish, it may take a few minutes for the Checkout Wizard finished creating all your pages.
Once you have completed the eCart Checkout Wizard, your checkout functionality has now been added to your site. You will want to start performing some test transactions to make sure everything is working properly. Once all the functionality works as desired, you should start modifying the design of your checkout pages.
Test Transactions
There are a number of different ways for you to perform test transactions. If you are using PayPal as your payment gateway, you have the option to use their Sandbox Testing Server to test using fake API credentials. This is useful, but can take some time to configure to work properly. See Using the PayPal Sandbox for more information.
An alternative is to perform real transactions through your payment gateway for minimal amounts (such as 1 cent). This is the best way to test your actual checkout functionality as it would function for your customers. You can always refund yourself later.
Before you begin...
Print tutorial
