Getting started with eCart 6

Tutorial created by Ray Borduin, WebAssist

Categories: eCart, Dreamweaver, PHP

6 ratings | Sign in to rate this tutorial | View comments

next section

What do you need to start?

1. Dreamweaver CS4 or higher.
2. eCart 6 or higher installed and activated in Dreamweaver.
   
3. Site defined in Dreamweaver with a saved PHP page - Watch video tutorial: Setting up a site in Dreamweaver.
   
4. PHP web page and connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.
5. MySQL database. If you do not have one, you can download our free eCommerce MySQL database in this tutorial.
6. Payment gateway account. For assistance, view this tutorial: Online payment solutions.
   
7. Shipping provider account. For assistance, view this tutorial: Online shipping solutions.

next section

Create an eCart Object

The eCart object is the backbone of your eCart functionality. Through the eCart object panel, important settings are defined, such as currency, discounts, shipping, and tax rules. Before using any eCart functionality, you must first have created an eCart object for your Dreamweaver site. The eCart Object panel consists of 7 different tabs for configuring various settings for your cart. At this point, all you need to configure is the General tab. You can leave all the other options at their default settings and reenter this interface at a later date to modify how your cart functions.

1. Open a PHP page of your website from the Dreamweaver Files panel.
   
   
2. Go to WebAssist > eCart > eCart Object to begin.
   
   
3. Click the Add icon.
   
   
   
   
   
4. In the Cart name field, enter a name for your shopping cart.
   
   
5. Review the options on the General tab to ensure that everything fits the store you intend to have. In most cases, the default settings will be correct.
   
   
   
   
   
6. For more assistance, view the 3-part shopping cart tutorial in our eCommerce series, starting at Add a shopping cart.

next section

Add to cart buttons

As an online store, eCart uses Add to Cart buttons that can be placed 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.

1. From the Dreamweaver Files panel, open the page where you want to place 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 and product results pages.
   
   
2. Place your cursor where you wish to insert the Add to Cart button.
   
   
3. Go to the WebAssist menu and choose eCart > Add To Cart Button.
   
   
4. 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.
   
   
5. Starting on the General tab, under Properties, choose whether you want this button to be static or dynamic.
   
   1. 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.
      
   2. Look up item ID from recordset: If you are storing your products in a database, you will want to select this option so that you can retrieve product prices, descriptions, weight, etc., from the database dynamically. (This option is being used for the purposes of this tutorial.)

6. Specify a page you wish the customer to be taken to after adding this product to their cart. Leave blank if you wish the user to remain on the page. But in some cases, you will want them to be taken straight to the shopping cart to proceed with checkout.
   
   
   
   
   
7. Next, select the Bindings tab. Specify the details for the product, or, for dynamic buttons, link the product details to the appropriate columns of your database.

Static Add to Cart Buttons

1. Select the ID column, and in the Default value field, enter an ID for the product.
   
   
2. Select the Name column, and in the Default value field, enter the name for the product.
   
   
3. 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.
   
   
4. 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.
   
   
5. Select the Button tab to choose your button design.
   
   
6. Choose the button that fits best with your design.
   
   
7. Click OK to have the button inserted to your page.
   
   
8. For more assistance, view the Add static product options tutorial in our eCommerce series.

Dynamic Add to Cart Buttons

1. Select the ID column.
   
   
2. Choose the Default value lightning bolt.
   
   
3. Expand the recordset that is being used for your products, and choose the ProductID column. For DataAssist pages, this recordset is most likely WADAproducts.
   
   
4. Click OK.
   
   
5. Repeat this process for the other options. Leave the Quantity set to 1 and updateable. This allows the customer to specify the quantity of that product they wish to purchase.
   
   If you are using our free eCommerce MySQL database, you should have all the default columns required by eCart already in your database.
   
   
6. 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.
   
   
   
   
   
7. Select the Button tab to choose your button design.
   
   
8. Choose the button that fits best with your design.
   
   
9. Click OK to have the button inserted to your page.
   
   
   
   
   
10. For more assistance, view the Add dynamic product options tutorial in our eCommerce series.

next section

Modifying add to cart buttons

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 changed something in your database and need the button updated to reflect that change.

1. Open the Server Behaviors panel by choosing Window > Server Behaviors.
   
   
2. 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.
   
   
   
   
   
3. When the Add to Cart button interface opens make any changes you need and click OK when done.
   
   
   

next section

Your cart display

The next step is to create, configure, and design your shopping cart page using eCart's Display Manager. This is the page where your customer will be taken to review the items they have selected to purchase. From this page, they can update quantities, remove items, and proceed to check out.

1. Create a new PHP page in your site. Name it cart.php or another name of your choice.
   
   If you already have a PHP page that you wish to use as your shopping cart, there's no need to create a new one.

Cart Design: Step 1 of the Display Manager interface allows you to specify the design of your cart.

1. With the new page open, go to WebAssist > eCart > Display Manager.
   
   
2. Choose one of three options in the eCart Display Manager to preview your design: Smartphone, Tablet, and Desktop.
   
   
   
   
   
3. Smartphone:
   
   
   
   
   
4. Tablet:
   
   
   
   
   
5. Desktop:
   
   
   
   
   
6. From the Design menu, choose a design that best works with your website's design
   
   Make sure you select the correct eCart object from the Cart menu. If you only have one eCart object created for this site, it will be selected by default.
7. The Display Type menu provides you with four different types of shopping carts. 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.
   
   
8. 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, you can modify this using the Theme-It interface.
   
   
9. Click the Theme-It button to manage additional colors options.
   
   
   
   
   
10. In the Color Importer tab, you can import a page that uses your site's design and sample colors to use for your cart.
    
    
    
    
    
11. Click Finish and then Next to proceed.

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 can be made available by clicking the add icon.

The cart columns also include Responsive options, Phone Only, Max Tablet, Tablet Only, Min Tablet, Desktop Only, and Always Display. The responsive option determines whether or not the cart columns and the columns contained within cart columns are displayed on a particular device.

1. 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.
   
   
2. Add or delete columns with the add and delete icons.
   
   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.
   
   
   
   
   
3. Select the pencil icon next in Columns to edit the displayed columns.
   
   
4. In the Image folder field, specify the folder where your product images are stored.
   
   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, you would not want to specify a directory in the Image folder field.
   
   
   
   
   
5. Once you have managed your cart columns, click OK and Next to continue.

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.

1. The eCart Display Manager offers 3 options for previewing how your discounts and charges are displayed: Smartphone, Tablet, and Desktop.
   
   
   
   
   
2. Smartphone:
   
   
   
   
   
3. Tablet:
   
   
   
   
   
4. Desktop:
   
   
   
   
   
5. Click Finish to apply these options to your cart.php page.
   
   
6. Save the page (Ctrl or Cmd + S).
   
   
7. For more assistance, view the 3-part shopping cart tutorial in our eCommerce series, starting at Add a shopping cart.

next section

Checkout pages

The last step in applying eCart functionality to your website is to create the checkout pages. eCart's Checkout 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:

1. Set up an account with a supported payment gateway. (Not required if you do not want to process credit cards.)
   
2. Set up an account with a supported shipping provider. (Not required if you do not wish to provide real-time shipping rate look-up.)

With your shopping cart page open, go to WebAssist > eCart > Checkout Wizard.

Settings: The first tab of the Checkout Wizard is where you'll find the general settings for your site and checkout pages.

1. Select the eCart Object of the site that will be used for your checkout pages.
   
   
2. The site address is the URL of the site that contains your shopping cart. Use the default localhost setting for site development on a local testing server.
   
   
3. Next are the filenames of the 4 checkout pages, Checkout page (checkout form), Order confirmation page (confirms billing and shipping information), Success redirect page (landing page after the order is complete), and the Declined page (destination page in the event the order is denied).
   
   
4. Lastly in Settings, the PayPal Express Checkout Return Page section contains the order confirmation URL of the page where your customers will land if they choose to use PayPal's Express Checkout.
   
   
   

Payments: This second tab of the Checkout Wizard allows you to select various payment gateways.

1. Selecting one of the radio buttons determines whether you will use a local seamless checkout or a remote checkout.
   Seamless checkout requires an SSL certificate because payment information is collected at your website. Remote checkout does not require an SSL certificate because the payment information is collected after redirecting to the checkout provider.
2. For Payment Provider, select the provider or company that will be providing your checkout processing.
   
   
3. For Payment Service, select the service you have chosen with your Payment Provider.
   Many Providers offer both remote and local checkout methods. However, some Providers such as PayPal, provide multiple types for both methods.
4. PayPal's Express Checkout can be used exclusively in your checkout process or as an alternative to your selected Provider and Service.
   We recommend including a PayPal Express Checkout button as an additional payment method since it allows your customers to pay with money in their PayPal account or use a credit card on PayPal's website.
5. Select the Lightbox-integrated Checkout, exclusive to PayPal's Express Checkout, which uses iframe technology to embed PayPal's checkout page on your site.
   Lightbox-integrated Checkout requires an SSL certificate in order to guarantee secure transmission of your customer's billing information.
6. When asked to provide your API credentials, enter your Username, Password, and Signature. If you do not have this information, the credentials can usually be found within the account settings on payment providers' websites.
   If you are using a payment provider in addition to PayPal, you may need to enter a set of credentials for that provider, as well as PayPal credentials.
7. For more in-depth information, view the Online payment solutions tutorial in our eCommerce series.
   
   
   

Shipping Settings: The next step allows you to configure your shipping settings. If you do not wish to charge for shipping, deselect the check box and continue to the Taxes tab to configure your tax rules.

1. Enter the Base rate. This is the base price for shipping you want applied to all orders. This will be added to the cost that is calculated through the shipping provider you select.
   
   
2. 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 and also to the base rate if you entered one.
   
   
3. Choose the Shipping Provider service you will be using and fill in the corresponding settings. Alternately, select None if you do not wish to collect shipping charges or prefer to charge a flat rate.
   
   
4. For more assistance, view the Online shipping solutions tutorial in our eCommerce series.
   
   
   

Tax Settings: The next step allows you to choose how you want taxes to be calculated in your checkout process.

1. If your site charges a sales tax or VAT, you can specify a tax rule here. This tax rule can be edited in the eCart Object where you can also create more complex tax rules.
   
   
2. If the shipping charges applied to the cart should be considered taxable, indicate this in the checkbox.
   
   
3. 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 where your business is located.
4. From the Charge to options, choose who you want this tax rate to be applied to, all purchasers or purchasers based on a geographical location. Check with your area's laws and regulations for more information.
   
   
   

Order Management Settings: In this step, you will specify where you want your order information stored in your database.

1. If you do not wish to store the order information in your database, indicate this by placing a check mark in the box.
   
   
2. eCart 6 can automatically create the necessary tables and columns to store the order information in your database by selecting the Create using preset checkbox and choosing the appropriate preset.
   
   
3. If you are using your own custom database, you can click Define for either the Orders or Orders Details presets and bind your own columns in the Add Selected To List interface. You will have the option of saving your own preset for future use.
   
   
   
   
   
4. The first Define button opens Dreamweaver's MySQL Connection interface where new database connections can be defined.
   
   
5. The second Define button opens the Add Selected To List interface where changes to your orders value bindings can be made
   
   
   
   
   
6. The last Define button opens the Add Selected To List interface where changes to your order details value bindings can be made.
   
   
   

Email Receipt Settings: In this step, you will set up your email receipt settings.

1. Uncheck the box if you do not wish to send an email receipt from your site.
   Your payment provider will send an email even if this box is unchecked.
2. Fill in the desired Email to, To display name, From address, From display name, and Subject for the email receipts. Alternately, you can select the lightning bolt to do this dynamically.
   
   
3. Specify the Email object using the dropdown box.
   
   
4. Fill in the remainder of the settings. If you do not know these settings, check with your hosting provider.
   
   
   

Form Designs: This step allows you to choose your checkout form design from preset designs.

1. Choose the desired design and color scheme for your form design.
   
   
2. Select your error format.
   
   
3. Style your button.
   
   
4. Open the Theme-It interface to change the colors being used by elements across your site.
   
   
5. Also using the Theme-It interface, you can choose new images and edit images contained on your website.
   
   
   
   
   
6. When ready, click Finish to have the Checkout Wizard create your checkout functionality.
   
   
7. For more assistance, view the checkout and administration tutorials that walk you through the 7 tabs of the eCart Wizard, starting at the Settings tab.

What to do next?

Test transactions: Now that you have completed the eCart Wizard, checkout functionality has been added to your site. Next, you will want to perform several test transactions to ensure everything is working properly. There are a number of different ways for you to perform test transactions.

1. 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.
   
   
2. 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.

Build an eCommerce site: With eCart technology as the cornerstone of WebAssist's eCommerce series, our in-depth tutorials will walk you though the steps of building an eCommerce site including product catalogs, shopping carts, dynamic product options, static product options, checkout, and back-end administration. Additionally, you will learn about online payment solutions as well as hosting and shipping options. Start with the overview at Introduction to the eCommerce series.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

6 ratings | Sign in to rate this tutorial