Integrating Data Bridge and eCart

1. A dynamic site set up within Dreamweaver
   
2. A blank database
   
3. Dreamweaver CS3 or later
   
4. eCart 5 or later installed and activated in Dreamweaver
   
5. Data Bridge installed and activated in Dreamweaver

First thing's first: You need a connection to your blank database, or how will all of your data get stored? It won't; THAT'S how!

This step doesn't actually create anything within your database. Just a connection that Dreamweaver, and all applications you make within Dreamweaver, can use to connect to the database.

1. In Dreamweaver, make sure your site is selected
   
2. Click Window > Databases
   
3. Click the Add Database ( ) button
   
4. Click MySQL Connection
   
5. Enter your Connection name, MySQL server, User name, Password, and Database as per your specific setup
   
6. Click OK

You now have a connection to your database.

Next on the plate, we need to create our order and product pages in Data Bridge. This will give eCart some database goodness to insert and pull from for your products and orders.

Create your Product Administration pages
These pages will allow you to add new products to your database, and manage existing products.

1. Click WebAssist > Database > DataAssist Pages in the menu bar
   
2. Select Product Administration from the Application Type list
   
3. Ensure the database connection you just made is selected from the Connection list
   
4. Check the Create the database table for me checkbox if it isn't already checked
   
5. The step to create the connection to a database only creates the connection, but nothing within the database itself. This will create the needed table within the database that we connected to above.
   
6. Take note of the database table name that is created for the admin pages
   
7. Click Finish to make the pages
   
8. Close all pages that were opened

Create your Product Catalog pages
These are the pages the users will see. This is what we link with eCart later.

1. Click WebAssist > Database > DataAssist Pages in the menu bar
   
2. Select Product Catalog from the Application Type list
   
3. Ensure the database connection you just made is selected from the Connection list
   
4. Uncheck the Create the database table for me checkbox if it is checked
   
5. Verify the database table is the same as the one created for the admin pages
   
6. Unchecking this will make the catalog pages use the same database as the admin pages. This will link all products correctly.
   
7. Click the Manage Pages tab
   
8. Select the Results page
   
9. Click the Edit button
   
10. Uncheck the Include delete button in results list checkbox
    
11. Click OK
    
12. Select the Detail page
    
13. Click the Edit button
    
14. Uncheck the Include delete button in details list checkbox
    
15. Click OK
    
16. Click Finish to make the pages
    
17. Close all pages that were opened

Create your Orders pages
The Orders pages help you manage orders. eCart will sync with this database table and automatically log new orders.

1. Click WebAssist > Database > DataAssist Pages in the menu bar
   
2. Select Orders from the Application Type list
   
3. Ensure the database connection you just made is selected from the Connection list
   
4. Check the Create the database table for me checkbox if it isn't already checked
   
5. Click Finish to make the pages
   
6. Close all pages that were opened

Your pages are now made. For the most part, we won't touch any of these pages, but we needed them to create the database tables for us to tie in with eCart.

Now that we have our product and order pages made, and our database populated with some shiny new tables, it's time to get cracking on eCart.

Create the eCart Object
The heart of your eCart site is the eCart Object. It really ties the room together.

1. Click Insert > WebAssist > eCart > eCart Object
   
2. Click the Add button
   
3. Click OK to create the eCart Object

Create the shopping cart page

1. Create a new PHP page in your site called cart.php
   
2. Click Insert > WebAssist > eCart > Display Manager
   
3. Click Next
   
4. Click Next again
   
5. Click Finish

Run the eCart Checkout Wizard
For this tutorial, we are skipping payment gateways, tax, shipping, and receipts. You can add these things if you wish, but they won't be covered in the tutorial.

1. Click Insert > WebAssist > eCart > Checkout Wizard
   
2. Set the cart object to the one that was created earlier (eCart1)
   
3. Set the gateway to No payment gateway
   
4. Click Next
   
5. Make sure the I will provide shipping checkbox is unchecked
   
6. Click Next
   
7. Make sure the No thanks, I'll handle tax calculation myself checkbox is checked
   
8. Click Next
   
9. Make sure the No thanks, I'll handle order management myself checkbox is unchecked
   
10. Check the Create using preset checkbox
    
11. Select Default from the drop down list
    
12. Ensure the Connection is set to the connection made earlier
    
13. Click Next
    
14. Make sure the No thanks, I'll handle the receipt myself checkbox is checked
    
15. Click Next
    
16. Click Next on the design options page
    
17. Click Finish on the last step

eCart is now making your checkout pages which, when used, will add an order to the order table of your database that was created earlier.

Now it's time to add your Add to Cart button to the Product Detail page that was created earlier. This will allow users to buy your stuff.

1. Open the product_detail.php page
   
2. Select the Add to Cart button that is currently on the page
   
3. Delete the button
   
4. Look for the opening ( <form... ) and closing ( </form>) tags in Code view, and remove the whole tags.
   
5. eCart buttons include their own form tags, so the existing tag would have created conflicts
   
6. In Code View, place your cursor within the WADADetailsButton div
   
7. Click Insert > WebAssist > eCart > Add to Cart Button
   
8. Click on Look up item ID from recordset
   
9. Set the Recordset to WADAProducts
   
10. Set the ID Column to ProductID
    
11. Type cart.php in the Go to page field
    
12. Click the Bindings tab
    Here we're going to set the values for the product details so the correct product is added to the cart.
    
13. Click Name from the Column list
    
14. Click the Dynamic Data (lightning bolt) button next to the Default value field
    
15. On the Dynamic Data dialog, expand the Recordset (WADAProducts) field
    
16. Select the ProductName variable
    
17. Click OK
    
18. Click Description from the Column list
    
19. Click the Dynamic Data (lightning bolt) button next to the Default value field
    
20. On the Dynamic Data dialog, expand the Recordset (WADAProducts) field
    
21. Select the ProductLongDesc variable
    
22. Click OK
    
23. Click Thumbnail from the Column list
    
24. Click the Dynamic Data (lightning bolt) button next to the Default value field
    
25. On the Dynamic Data dialog, expand the Recordset (WADAProducts) field
    
26. Select the ProductImage variable
    
27. Click OK
    
28. Click Price from the Column list
    
29. Click the Dynamic Data (lightning bolt) button next to the Default value field
    
30. On the Dynamic Data dialog, expand the Recordset (WADAProducts) field
    
31. Select the ProductPrice variable
    
32. Click OK
    
33. Click OK to add the button
    
34. Save your pages

We now have an Add to Cart button on the Product Details page that will add the correct product shown to the cart.

And that's the end of that chapter. You now know how to intermingle eCart and Data Bridge for your own nefarious means. All you have to do is add a product with the product_insert.php file you made earlier, then give your new little ecommerce site a test drive.

Now you can do things to spruce it up, like customize the product search, result, and details pages, customize your shopping cart and checkout pages, and add all your glorious products to appease the spend hungry masses.

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.

Sign in to add comments