close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Integrating Data Bridge and eCart

Tutorial created by Team WebAssist

Categories: Data Bridge, eCart

rating

Have you ever made an ecommerce site, and as you were grueling through the horrors of making a product catalog thought to yourself, "there has to be a better way..."? Well, There probably is.

This tutorial will teach you the ancient secret of how to generate your eCart site, then use Data Bridge to create some nice Product pages that folks can use to buy your wares.

For this tutorial, we are focusing primarily on integrating eCart with Data Bridge pages, so we won't be setting up fancy things like payment gateways. For more information on advanced eCart setup, check the eCart support page.

arrow downWhat you need to start:

  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

arrow downConnect to your database

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.

arrow downCreate pages in Data Bridge

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.

arrow downSet up a basic eCart site

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.

arrow downUpdate the Product Detail Page

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.

arrow downWhat to do next...

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.

arrow downReviews 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.

Sign in to add comments
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.