Create a product catalog (eCommerce Series)

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Dreamweaver, PHP

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

next section

What do you need to start?

1. Dreamweaver CS4 or higher.
   
2. Data Bridge (alternatively, DataAssist) installed and activated in Dreamweaver.
   
3. Site defined in Dreamweaver. For assistance, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
   
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.

next section

Dynamic product catalog options

Do you need a dynamic product catalog? Backing up a moment, let's pause to determine whether this two-part tutorial is appropriate for you or if skipping to the the Add a shopping cart tutorial in the WebAssist eCommerce series is warranted.

When wouldn't you need to build a dynamic product catalog? Perhaps you do not sell a variety of products in your store, neither do your products change often or need categorizing. For these situations, creating a database would probably be overkill. Using CSS, HTML, and JavaScript technologies should be sufficient. Another reason for bypassing this tutorial is that your website already has a dynamic product catalog. However you may still need assistance creating a shopping cart, simple and complex product options, check-out, and administrative back-end. The remaining tutorials in this series will walk you through those steps.

When would you need this tutorial? Learning how to create a dynamic product catalog is helpful when you offer multiple products that change often or need categorizing. If so, you will benefit from this tutorial which demonstrates how to use PHP and MySQL database technologies to build your dynamic product catalog. Otherwise, you can safely skip to the last section to review the additional tutorials in the WebAssist eCommerce series and choose your next step.

next section

Database connection options

Data Bridge offers two options for connecting to a database, Dynamic MySQL Connection and MySQL Connection (Dreamweaver's default connection). You can set up a connection for your live website on your hosting company's server using Dynamic MySQL Connection and a connection for testing locally (localhost) using MySQL Connection. (To learn how, follow the link to Create a PHP database connection in the first section of this tutorial.)

The advantage to using Dynamic MySQL Connection is that it holds multiple connections in a single file, eliminating the need for multiple files. For example, a database on localhost would have a username and password. Additionally, a server on GoDaddy would have another set of credentials. With Dynamic MySQL Connection, there would be no need to keep a different connection file on each server. On the other hand, if the database connection was to be used solely for testing, MySQL Connection would be sufficient.

Now I'd like to draw your attention to a mistake commonly made when filling in the Server Folder and Web URL fields. Server Folder and Web URL must point to the same location. Otherwise, your product pages can't connect to your database. In other words, although you can name your site whatever you wish (I'm using ecommerce in this example), both of the fields must contain the identical site name. You should always verify a successful connection with the Test button before proceeding.

next section

Preset options

Using either a sample preset or a custom preset, you can easily create product catalog pages to manage records. For example, I will be using the generic product catalog preset for the Application Type.

But if you are setting up an actual website with a specific product in mind, a generic preset may not be your best choice. In fact, before running the DataAssist wizard, you should first design your website with HTML and CSS. Next you would decide which fields to include in a database to support your design. This upfront planning will result in a database that best accommodates your specific product line.

Continuing that thought, many website owners who have already defined their product line and want to create a catalog often make the mistake of thinking the generic product catalog preset would be their best choice. Actually, this preset is best used as a sample. In contrast, they should proceed with the custom preset <New From Blank> for the Application Type.

Here's a good example, let's say you sell boats. This is a product line that requires unique database fields, such as length-to-beam ratio, wetted surface area, and displacement. In this case, using the generic product catalog preset would require too much customization after creating your pages. You'd be better served by using a custom preset.

next section

What's your next step?

Now that you have decided a dynamic product catalog is appropriate for your online store and are finished with the initial set-up, proceed to Create a product catalog II (eCommerce Series) where you will learn how to create product administration pages, product catalog pages, and order pages for your dynamic product catalog.

WebAssist eCommerce series

With eCart technology as the cornerstone of the WebAssist eCommerce series, these in-depth tutorials will walk you through the steps of building an eCommerce site: product catalogs, shopping carts, product options (both static and dynamic), and checkout including payments. Completing the eCart portion of the series is help for setting up a back-end administration to manage your eCommerce business. Additionally, to be used with or without eCart, you will learn about payment gateway providers, hosting solutions, and online shipping accounts.

1. Introduction to the eCommerce series: An overview of the WebAssist eCommerce series including a detailed description of each tutorial.
   
   
2. Create a product catalog: Learn to create a dynamic product catalog for an online store.
   
   1. In Create a product catalog I, you will learn if a dynamic product catalog is appropriate for your online store and how to complete the initial set-up.
      
   2. In Create a product catalog II, you will learn how to create product administration pages, product catalog pages, and order pages for your dynamic product catalog.

   
   

3. Add a shopping cart: Learn about using eCart to create a responsive shopping cart for selling your products online.
   
   1. Create an eCart object to define the structure of your shopping cart.
      
   2. Place an Add to Cart button on a product catalog which your customers can use to select items to purchase and add them to their shopping cart.
      
   3. Design a responsive shopping cart page that holds informational details about the products a customer is purchasing.

   
   

4. Add dynamic product options I: Learn how to add dynamic product options to your website's online store using eCart's shopping cart functionality.
   
   
5. Add dynamic product options II: Learn how to add dynamic product options, which include options within themselves (for example, incremental pricing), to your website's online store using eCart's shopping cart functionality.
   
   
6. Add static product options: Learn how to add static product options to your online catalog store.
   
   
7. Add checkout and administration: Learn how to manage checkout, payments, and the back-end administration of your eCommerce site using the seven tabs in the eCart Checkout Wizard - Settings, Payments, Shipping, Tax, Orders, Email, and Form Design.
   
   1. In the Settings tab, you will choose the general settings for your site and checkout pages.
      
   2. In the Payments tab, you will set up payment provider and checkout options.
      
   3. In the Shipping tab, you will choose shipping providers and set charges.
      
   4. In the Tax tab, you will set the rules for sales tax or VAT.
      
   5. In the Orders tab, you will configure your order storage options.
      
   6. In the Email tab, you will enter your email server settings.
      
   7. In the Form Design tab, you will select your checkout form from preset designs.

   
   

8. Online payment solutions: Learn about online payment solutions including seamless checkout, remote checkout, and various PayPal checkout options.
   
   
9. Hosting provider solutions: Learn about and choose between five hosting providers, 1&1, GoDaddy, HostGator, Network Solutions, and DreamHost.
   
   
10. Online shipping solutions: Learn where and how to set up free shipping accounts with FedEx, UPS, USPS, and Australia Post.

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.

8 ratings | Sign in to rate this tutorial