Article
About the Author
Bård Farstad
Bård is one of the co-founders of eZ systems. He has been working professionally with CMS development since 1999 and have written many general purpose libraries like XML parser, SOAP library (client/server), and XML-RPC library (client/server). He is also one of the main developers of the eZ publish CMS. In his spare time he likes to play with his daughter, and play the guitar, and is also into aquascaping.
Build an eCommerce Website with eZ publish
This tutorial provides step-by-step instructions for creating a custom ecommerce site with online credit card processing functionality, using eZ publish.
Through this tutorial, I'll explain how to:
- set up different product categories
- publish products
- create custom product structures
- use custom templates for product pages
- extend the checkout process
- integrate the site with online payment gateways
No programming experience is needed, though you may need the help of a friendly sysadmin to install eZ publish. You can also use the eZ publish LiveCD to follow this tutorial.
Requirements
In order to follow this tutorial, you'll need:
- Apache Web server
- PHP, version 4.3.4 or greater
- A modern relational database, such as MySQL, version 3.23.x or greater, or PostgreSQL, version 7.3 or greater.
- System administration skills, or the services of the Web server's sysadmin
Installation
To get an online business running with eZ publish you first need to have the application installed. You can find complete installation documentation on the ez.no Website.
Setup
After installation, you must run the Web-based setup wizard in order to configure your installation of eZ publish.
When the setup wizard asks you to choose a "site type", select "shop", as shown below.
After selecting the site type, you're asked to choose the site's functionality. Select "News" in addition to the functions already suggested. The site functionality options define the kinds of content you can publish on your site; you can change your selections after installation if you wish. Here's the configuration screen.
The screenshot below shows what the default eZ publish shop configuration looks like after setup.
Customization
Once eZ publish is installed, you're ready to begin customizing the Website.
The default setup for an eZ publish ecommerce site includes the basic features of an online store, including:
- catalogue (including features like lists of new products and most popular products)
- shopping cart
- search functionality
Our first customization is to change the look and feel of the site to a more appropriate design. For the purpose of this tutorial, you might like to use the standard red "Theme 8" that's bundled with eZ publish, or you may wish to download additional themes. By default, the menus in eZ publish are shown both at the top and on the left-hand side of a page. We can change this to create a double-level top menu, which contains our navigation in two levels at the top of the screen.
Another useful change is to make the lists of new products and most popular products display on all pages, instead of just on the product pages.
Information on how you can change theme and adjust the menus and tool bars is covered in the SitePoint article titled, Build a WebDav-Enabled Intranet with eZ publish. To learn more about how to change the design with eZ publish, try the article Build Table-less CSS Layouts with eZ publish.
With these customizations in place, the Web site looks like the screenshot shown below.
Shopping
Now that we have installed and configured the basic eZ publish installation, we can test-drive it: let's shop for a product.
For the moment, we'll use one of the products that already exists in the installation. Test the shopping process by following these steps:
- Choose the "Black Box" product from the "Latest products" list
- Click "Add to basket"
- Click "Checkout"
- Fill inn account information including name, email and address details
- Click "Continue"
- Click "Confirm" and the order is completed
To verify that the order was successfully completed, go to the administration interface and look at the order list, which you can access by clicking on the Webshop tab in the administration interface. The screenshot below shows the order list with two completed orders.
Adding New Products
Shopping for test products is okay, but you're probably more interested in getting your own products into the store. To add a new product, go to the administration interface and:
- Click on the "Content structure" tab in the administration interface
- Click on the "Products" folder in the left-hand menu
- Select "Product" in dropdown at the bottom of the product list (as shown in screenshot below)
You will be presented with the product edit screen. Fill in the necessary fields and click on the "Send for publishing" button. Your product is now instantly available from the Website -- and is shoppable! You can find it in the products folder, and in the Latest Products list. You can also search for it, as all content in eZ publish is automatically indexed by the built-in search engine.
Custom Products
Most online stores need to accommodate products that have more properties than are available in eZ publish's standard product type. To accommodate a custom type of product, we will create a new content class called "My Product"; this will form a base type for products that have additional properties. To do this:
- Go to the "Setup" tab in the administration interface
- Click "Classes" in the left hand menu
- Click the "Content" class group
- Click the "New class" button
- Enter the name "My Product" as class name
- Add your desired class attributes
- Click the "OK" button
An eZ publish class is basically a list of defined attributes. Each attribute can hold information in a specific format, for example, text, XML, an image or a price.
Below is a screenshot of the class edit screen once you've added and filled in all the extra attributes. At the bottom of the class edit screen, you'll see a dropdown for selecting datatypes. You can add a datatype as an attribute: select the appropriate datatype, then click the "Add Attribute" button. Using this tool, you can customize the content model to fit your exact needs. When you have added all your desired attributes, click the "OK" button to save your class definition.
Add the following attributes to the class:
- Title (Text line)
- Teaser (XML text)
- Description (XML text)
- Options (Multioption)
- Image (Image)
- Price (Price)
