In this tutorial, Create a product catalog II of the eCommerce series, you will learn how to complete a dynamic product catalog by creating product administration pages, product catalog pages, and order pages. This tutorial follows Create a product catalog I where you determined if a dynamic product catalog is appropriate for your online store and how to complete the initial set-up.
You'll find a linked index including an overview of each tutorial belonging to the eCommerce series at the bottom of this page.
- Dreamweaver CS4 or higher.
- Data Bridge (alternatively, DataAssist) installed and activated in Dreamweaver.
- Site defined in Dreamweaver. For assistance, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
- PHP web page and connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.
- MySQL database. If you do not have one, you can download our free eCommerce MySQL database in this tutorial.
- Refer to Create a product catalog I for initial set-up of your dynamic product catalog.
Now it is finally time to create your catalog pages. We'll begin with the Product Administration pages. These administrative pages will allow you to add new products to your database and manage existing products.
Important! Occasionally a Dreamweaver window pops up with this message, "This file has been modified outside of Dreamweaver. Do you want to reload it?" This happens when Dreamweaver lags behind your last action for a second or two. You should know this is harmless and of no concern. Always respond by clicking the No button.
- Go to WebAssist > Database > DataAssist Pages in the menu bar.
- In the interface that opens, select your connection that you previously set up. Example: conn_eCommerce.
- Select Product Administration from the Application Type list.
- Check Create the database table for me if it isn't already checked. This will create the needed table within the database that you connected to above.
- Take note of the database table name that is created for the administration pages.
- Click Finish to make the pages.
- Close all pages in Dreamweaver that were opened by the interface.
Next, you will create the Product Catalog pages that will be seen by the public.
In the next eCommerce tutorial, you will learn how to set up a shopping cart which you can link to these pages using eCart.
- Go to WebAssist > Database > DataAssist Pages in the Dreamweaver menu bar.
- In the interface that opens, select your connection that you previously set up. Example: conn_eCommerce.
- Select Product Catalog from the Application Type list.
- Uncheck Create the database table for me to make the product catalog pages use the same database as the product administration pages. This will link all products correctly.
- Go to the Manage Pages tab where you can select which pages are created and their specific options.
- Select the Results page.
- Click the second pencil icon labeled Make changes to: products_results.php.
- For Layout Type, select Public.
- Uncheck Include delete button in results list.
- Click OK.
Why should you uncheck the delete button? This is an error in the existing preset that potentially allows your customers to permanently remove the record from your database. Obviously, this is a function that should not be on a public page! When you are finished with this section, save the preset. Then the next time you use the product catalog preset, it won't attempt to create a delete button.
- Select the Detail page so you can uncheck its delete button for the same reason.
- Click the second pencil icon labeled Make changes to: products_detail.php.
- As you did before, uncheck Include delete button in detail list and click OK.
- Now select the Search page. Click the first pencil icon labeled Set up field labels and form validations under Configure Field Settings.
- This allows you to update labels, fields, and form validations.
- Repeat for Results page.
- Repeat once again for the Detail page.
- You may wish to add additional fields to your search page especially if you are using your own product database.
The product search page created by the DataAssist wizard is configured to search three fields, ProductName, ProductMetaKeywords, and Product Price. These fields may be sufficient if your ProductMetaKeywords are populated properly. If so, feel free to skip straight down to the Finish and Save as preset steps.
- In the Manage Pages tab, select the Search page once again and click on the second pencil icon labeled Make changes to: products_search.php.
- From there, click the plus button to open the Add Selected To List interface.
- Now make your selections, for example, ProductSKU or ProductShortDesc to add these fields to your search form.
- Now you can adjust the search Criterion. For example, you could change ProductSKU to = instead of Includes. This way if your customer already knows the SKU of the product they're interested in, they can search for it directly in the product catalog.
- After you are done with your customizations, click OK.
- Click Finish.
- To store these settings as a preset, check the box and name your preset. In this example, I named it ecommerce.
- Close all pages in Dreamweaver that were opened by the interface.
Lastly, you will create Order pages so you can manage your customers' orders.
In the next eCommerce tutorial, you will learn how use eCart to set up your shopping cart. Additionally, eCart will sync with your database table and automatically log new orders.
- Go to WebAssist > Database > DataAssist Pages in the Dreamweaver menu bar.
- In the interface that opens, select your connection that you previously set up. Example: conn_eCommerce.
- Select Orders from the Application Type list.
- Check Create the database table for me if it isn't already checked.
- Click Finish to make the pages.
Congratulations! You've finished creating your administrative pages, product catalog pages, and order pages for a product catalog.
Peruse the following section for an overview of the WebAssist eCommerce series to determine your next step in the process of setting up your site. For further help, check our Community Forums or post comments to any of the tutorials.
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.
- Introduction to the eCommerce series: An overview of the WebAssist eCommerce series including a detailed description of each tutorial.
- Create a product catalog: Learn to create a dynamic product catalog for an online store.
- 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.
- 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.
- Add a shopping cart: Learn about using eCart to create a responsive shopping cart for selling your products online.
- Create an eCart object to define the structure of your shopping cart.
- 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.
- Design a responsive shopping cart page that holds informational details about the products a customer is purchasing.
- Add dynamic product options I: Learn how to add dynamic product options to your website's online store using eCart's shopping cart functionality.
- 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.
- Add static product options: Learn how to add static product options to your online catalog store.
- 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.
- In the Settings tab, you will choose the general settings for your site and checkout pages.
- In the Payments tab, you will set up payment provider and checkout options.
- In the Shipping tab, you will choose shipping providers and set charges.
- In the Tax tab, you will set the rules for sales tax or VAT.
- In the Orders tab, you will configure your order storage options.
- In the Email tab, you will enter your email server settings.
- In the Form Design tab, you will select your checkout form from preset designs.
- Online payment solutions: Learn about online payment solutions including seamless checkout, remote checkout, and various PayPal checkout options.
- Hosting provider solutions: Learn about and choose between five hosting providers, 1&1, GoDaddy, HostGator, Network Solutions, and DreamHost.
- Online shipping solutions: Learn where and how to set up free shipping accounts with FedEx, UPS, USPS, and Australia Post.
What do you need to start?
Print tutorial
