Build an eCommerce Website with eZ publish

Publish a Custom Product

Now that we have created a "My Product" product definition, we can create products of this type. To do so, go to the "Content Structure" tab in the administration interface, select "My Product", then proceed as you did above to create a product.

The screenshot below shows the edit screen for our new product. It's very similar to the standard product edit screen we saw earlier, but notice that you now have the possibility to fill in additional product options. Since we added an attribute of the type multioption, we can add one or more options to our product. Options are used to sell variations of a product at a different price. As usual, press the "Send for publishing" button to publish the product.

View this image at full size.

Custom Look and Feel

If you view your Website now, you'll see that the new product is already available. Since we added a price attribute to the product, it's already shoppable. You can add the product to your cart and complete the shopping process.

One problem is that the product doesn't look very nice within the default template, which basically just lists the available attributes. To make the product fit the Website profile, we need to create a custom template for products of the class "My Product".

To create a custom template, go to the administration interface and:

1. Click on the "Design" tab


2. Select "Templates" from the left menu


3. Select "/node/view/full.tpl" from the "Most common templates" list


4. Click the "New override" button


• Enter the name "my_product_full"
• Select "My product" as the class override key
• Select the "View" template


5. Click the "OK" button

We've now created a new override template for the full view of the product. Note that every piece of content -- search results, product lists, right-hand toolbar list, and so on -- can be displayed in different ways. The full view is the default view for the display of any object.

The screenshot below shows the Override edit page with the correct values filled in. After you click the "OK" button on this screen, eZ publish generates a template file which can be edited either with a normal text editor, or via the eZ publish administration interface.

The Template Override list page displays the list of all the existing override templates for the full product view. Our newly created template will appear at the end of this list. Click on the Edit icon on the right-hand side of this list, and you'll see the template edit screen shown below.

To make our product page more pleasing, we edit the template used to display it. In this example, I used the code shown below. I start the template by showing the product's title in <h1> tags. The image is right-aligned using a <div> tag with the class "imageright". The three attributes -- teaser, description and options -- are then listed after one another. The price is rendered using the <h2> header tag. The last part of our template is the form that shows the "Add To Basket" button.

<h1>{$node.name}</h1>  
 
<div class="imageright">  
{attribute_view_gui attribute=$node.object.data_map.image}  
</div>  
 
{attribute_view_gui attribute=$node.object.data_map.teaser}  
{attribute_view_gui attribute=$node.object.data_map.description}  
{attribute_view_gui attribute=$node.object.data_map.options}  
 
<h2>{attribute_view_gui attribute=$node.object.data_map.price}</h2>  
 
<form method="post" action={"content/action"|ezurl}>  
  <input type="submit" class="defaultbutton"  
         name="ActionAddToBasket"  
         value="{"Add to basket"|i18n("design/base")}" />  
  <input type="hidden" name="ContentNodeID" value="{$node.node_id}" />  
  <input type="hidden" name="ContentObjectID" value="{$node.object.id}" />  
  <input type="hidden" name="ViewMode" value="full" />  
</form>

When we view the product using our newly created template, it appears as shown below.

View this image at full size.

The Checkout Process

The shopping process in eZ publish is based on a workflow system. By default, it consists of these four basic steps:

1. Basket


2. User information


3. Order confirmation


4. Order view

However, you can extend the process with as many steps as you like, adding steps before and after order confirmation as required. The step that's most commonly added before order confirmation provides users with the ability to select from a number of different shipping methods. Other steps can be inserted to request that shoppers provide additional information when buying particular products; for example, you might ask for the license holder's name if you were selling licenses. Another step might allow you to show related products that the customer might also want to buy.

After order confirmation, we'd normally add credit card payment. But other integrations, such as sending the order information to another system upon order completion, or assigning the suer to a user group, could also be added. By assigning users to a specific user group as their orders are completed, you can create a shop that is able to sell, for example, content or software. Assigning a user to a group means that you can grant that user extra permissions, for example, permission to download restricted files or view restricted content for a limited period. The workflow consists of one or more workflow events. These workflow events are created via the plugin interface, using the PHP programming language, so you have the freedom to customize the shopping process in eZ publish.

PayPal credit card integration is bundled with eZ publish. Information on how to properly configure this extension is found in the eZ publish documentation.

Getting Help

That's it! You have a fully functional, customised shopping cart, thanks to eZpublish. If, as you develop and customise the site, you need additional help, visit the eZ publish forums, where you can find assistance for the installation, configuration, customization and development of all your eZ publish solutions.