Creating a Shopping Cart using Zend Framework: Part 2

Exclusive offer: get 50% off this eBook here
Zend Framework 1.8 Web Application Development

Zend Framework 1.8 Web Application Development — Save 50%

Design, develop, and deploy feature-rich PHP web applications with this MVC framework

$23.99    $12.00
by Keith Pope | September 2009 | MySQL Open Source PHP Web Development

Read Creating a Shopping Cart using Zend Framework: Part 1 here.

Creating the Cart Views and Forms

Now that we have our Model and Controller created, we can now start putting everything together and get the cart working.

Cart forms

The Cart will use two forms Storefront_Form_Cart_Add and Storefront_Form_Cart_Table. The add form is displayed next to the products so users can add items to the Cart, and the table form is used to display all the items in the cart so users can edit them.

Add form

The add form can be used by customers browsing the store to quickly add items to their shopping cart. This form will look like the one shown in the screenshot below when it is rendered:

Creating a Shopping Cart using Zend Framework: Part 2

Let's add the code to create the add form now.

application/modules/storefront/forms/Cart/Add.php

class Storefront_Form_Cart_Add extends SF_Form_Abstract
{
public function init()
{
$this->setDisableLoadDefaultDecorators(true);
$this->setMethod('post');
$this->setAction('');
$this->setDecorators(array(
'FormElements',
'Form'
));
$this->addElement('text', 'qty', array(
'decorators' => array(
'ViewHelper'
),
'style' => 'width: 20px;',
'value' => 1
));
$this->addElement('submit', 'buy-item', array(
'decorators' => array(
'ViewHelper'
),
'label' => 'Add to cart'
));
$this->addElement('hidden', 'productId', array(
'decorators' => array(
'ViewHelper'
),
));
$this->addElement('hidden', 'returnto', array(
'decorators' => array(
'ViewHelper'
),
));
}
}

The add form contains four elements—qty, buy-item, productId, and returnto. We can see that it is much like the other forms we have created previously. The only major difference here is that we use the setDisableLoadDefaultDecorators() method to disable the default decorators for the form (not the elements). We do this because we do not want the form to contain the default definition list markup (<dl>). We also only use the ViewHelper decorator on each element so that the <dt> and <dd> tags are omitted

Table form

The table form is going to form the customer shopping cart. Customers will use this form to view, update, and remove items from their cart. This form will look similar to the one showed below when it is rendered:

Creating a Shopping Cart using Zend Framework: Part 2

Let's add the code for the table form now:

application/modules/storefront/forms/Cart/Table.php

class Storefront_Form_Cart_Table extends SF_Form_Abstract
{
public function init()
{
$this->setDisableLoadDefaultDecorators(true);
$this->setDecorators(array(
array(
'ViewScript',
array('viewScript' => 'cart/_cart.phtml')
),
'Form'
));
$this->setMethod('post');
$this->setAction('');
$this->addElement('submit', 'update-cart', array(
'decorators' => array(
'ViewHelper'
),
'label' => 'Update'
));
}
}

Th e table form is highly specialized. Therefore, we have chosen to use a ViewScript decorator. To do this, we fi rst disable the default decorators using the setDisableLoadDefaultDecorators().

We then need to configure the forms decorators. We will only have two decorators for the form, ViewScript and Form. This means that if we render the form, the update-cart element will not be rendered because we have not included the FormElements decorator. This is where the ViewScript decorator comes in. We can use this decorator to render a View script, in this case cart/_cart.phtml. We then have access to all the elements within the form inside this View script, meaning we can create highly specialized markup without needing to use lots of complicated decorators.

Also, the table form will need to have fi elds dynamically added to it as we need a form element for each cart item. We will look at this shortly when we create the View Helper and Views for the Cart.

The ViewScript decorator uses a View Partial to render its view script. This has an overhead as it clones the view instance. Generally, partials should be avoided in large numbers so do not over use them or the ViewScript decorator.

SF_Form_Abstract

You may have noticed that our forms did not subclass Zend_Form as in our previous examples. Also, this time we have extended from the SF_Form_Abstract class. This is because we have done some minor refactoring to the SF library so that we can inject the Model into the form.

library/SF/Form/Abstract.php

class SF_Form_Abstract extends Zend_Form
{
protected $_model;
public function setModel(SF_Model_Interface $model)
{
$this->_model = $model;
}
public function getModel()
{
return $this->_model;
}
}

The new SF_Form_Abstract class subclasses Zend_Form and adds two new methods, setModel() and getModel(). These simply set, and get, the protected $_model property. This then means that when we instantiate the form, we can pass in the model inside the options array.

$form = new SF_Form_Abstract(array('model' => new myModel()));

Here we are taking advantage of the fact that the setOptions() method will look for setters that match elements in the options array. In our case, the setOptions() class will find the setModel() method, call it, and pass in the model. This type of functionality is very common in Zend Framework components. It is always worth checking the setOptions() methods on components to see if you can extend them in this way.

To get the model injected on instantiation, we also need to make a minor change to the SF_Model_Abstract.

library/SF/Model/Abstract.php

public function getForm($name)
{
if (!isset($this->_forms[$name])) {
$class = join('_', array(
$this->_getNamespace(),
'Form',
$this->_getInflected($name)
));
$this->_forms[$name] = new $class(
array('model' => $this)
);
}
return $this->_forms[$name];
}

He re, we simply pass in an array containing the model ($this) when we first instantiate the form class. We now have access to our Model from within our forms.

Cart View Helper

Th e Cart View Helper is responsible for creating many of the display elements for the cart. Therefore, we will break it down and look at each method in turn.

application/modules/storefront/views/helpers/Cart.php

class Zend_View_Helper_Cart extends Zend_View_Helper_Abstract
{
public $cartModel;
public function Cart()
{
$this->cartModel = new Storefront_Model_Cart();
return $this;
}

The main Cart() method instantiates a new Cart Model and then returns a reference to itself so that we can chain calls to the other methods.

application/modules/storefront/views/helpers/Cart.php

public function getSummary()
{
$currency = new Zend_Currency();
$itemCount = count($this->cartModel);
if (0 == $itemCount) {
return '<p>No Items</p>';
}
$html = '<p>Items: ' . $itemCount;
$html .= ' | Total: '.$currency->toCurrency
($this->cartModel->getSubTotal());
$html .= '<br /><a href="';
$html .= $this->view->url(array(
'controller' => 'cart',
'action' => 'view',
'module' => 'storefront'
),
'default',
true
);
$html .= '">View Cart</a></p>';
return $html;
}

The getSummary() method creates the HTML that will be used to display a summary of the cart items and subtotal to the user. This will be displayed below the main category menus.

application/modules/storefront/views/helpers/Cart.php

public function addForm(Storefront_Resource_Product_Item$product)
{
$form = $this->cartModel->getForm('cartAdd');
$form->populate(array(
'productId' => $product->productId,
'returnto' => $this->view->url()
));
$form->setAction($this->view->url(array(
'controller' => 'cart',
'action' => 'add',
'module' => 'storefront'
),
'default',
true
));
return $form;
}

The addForm() method will return a form for adding a single product to the cart. This method accepts one parameter $product that must be an instance of Storefront_Resource_Product_Item. We will use this to render individual add to cart forms for each product.

application/modules/storefront/views/helpers/Cart.php

public function cartTable()
{
$cartTable = $this->cartModel->getForm('cartTable');
$cartTable->setAction($this->view->url(array(
'controller' => 'cart' ,
'action' => 'update'
),
'default'
));
$qtys = new Zend_Form_SubForm();
foreach($this->cartModel as $item) {
$qtys->addElement('text', (string) $item->productId,
array(
'value' => $item->qty,
'belongsTo' => 'quantity',
'style' => 'width: 20px;',
'decorators' => array(
'ViewHelper'
),
)
);
}
$cartTable->addSubForm($qtys, 'qtys');
// add shipping options
$cartTable->addElement('select', 'shipping', array(
'decorators' => array(
'ViewHelper'
),
'MultiOptions' => $this->_getShippingMultiOptions(),
'onChange' => 'this.form.submit();',
'value' => $this->cartModel->getShippingCost()
));
return $cartTable;
}

The cartTable() method will return the table containing all our cart items, their costs, and totals. This will be used to update items in the cart. We create a subform to dynamically add the cart items quantity elements at runtime. The reason we use a subform is so we can easily get the whole set of quantity fi elds from the form, and later iterate over them in the View script.

The form will need to contain an array of quantity text elements so that we can iterate over them in the updateAction in the controller. To create this array, we pass the belongsTo option to the addElement() method, which will tell the form that these elements are an array with the name quantity. We also set the value of the element to the qty held in the cart item. We also need a way of passing the productId for each cart item. To do this, we set the element name to the productId of the item. This also helps us by providing a unique name for each element (we have to cast this to a string). It will create a set of text form elements like:

<input type="text" style="width: 20px;" value="1" id="quantity-21"
name="quantity[21]"/>

<input type="text" style="width: 20px;" value="5" id="quantity-10"
name="quantity[10]"/>

Once we have all the quantity elements in the subform, we then add the whole subform to the main table form using the addSubForm() method. We give this the name of qtys, which we will use in the View script later to retrieve the elements.

We also add the shipping options to the main table form. Here, we use the _getShippingMultiOptions() method to populate the select elements options and set the value to the currently selected shipping option of the cart.

application/modules/storefront/views/helpers/Cart.php

public function formatAmount($amount)
{
$currency = new Zend_Currency();
return $currency->toCurrency($amount);
}

The formatAmount() method is a little helper method we use to display amounts from the Cart. This may not be necessary in the future as there is a proposal for a currency View Helper that we would use instead.

application/modules/storefront/views/helpers/Cart.php

private function _getShippingMultiOptions()
{
$currency = new Zend_Currency();
$shipping = new Storefront_Model_Shipping();
$options = array(0 => 'Please Select');
foreach($shipping->getShippingOptions() as $key => $value) {
$options["$value"] = $key . ' - ' . $currency->toCurrency($value);
}
return $options;
}
}

Our final method is the private _getShippingMultiOptions() method. This is used internally by the cartTable() method to populate the shipping select element's options. This method gets the shipping options from the Shipping Model and creates an array suitable for the multiOptions option.

Cart View scripts

Now that we have all the tools created that we will need to build our cart, we can start creating the user interface.

Cart view.phtml

The view.phtml is the View that is rendered by the viewAction of the CartController. This View includes a title and renders the cartTable form

application/modules/storefront/views/scripts/cart/view.phtml

<h3>shopping <span>cart</span></h3>
<?=$this->Cart()->cartTable();?>

Cart _cart.phtml

The ViewScript decorator attached to the table form will render the _cart.phtml View. When it renders, the ViewScript decorator will create a view partial and pass in the form as the element property for this View script.

application/modules/storefront/views/scripts/cart/_cart.phtml

<div style="padding: 8px;">
<table style="width: 100%;">
<tbody>
<?
$i = 0;
foreach($this->element->getModel() as $item):
?>
<tr <? if($i % 2){ echo 'class="odd"';};?>>
<td><?=$this->Escape($item->name); ?></td>
<td><?=$this->element->qtys->getElement
($item->productId); ?></td>
<td class="rt"><?=$this->Cart()->formatAmount
($item->getLineCost()); ?></td>
</tr>
<?
++$i;
endforeach;
?>
<tr>
<td colspan="2" class="rt">SubTotal:</td>
<td class="rt colRight"><?=$this->Cart()
->formatAmount($this->element->getModel()
->getSubTotal()); ?></td>
</tr>
<tr>
<td colspan="2" class="rt">Shipping: <?=$this->element
->getElement('shipping');?></td>
<td class="rt colRight"><?=$this->Cart()
->formatAmount($this->element->getModel()
->getShippingCost()); ?></td>
</tr>
<tr>
<td colspan="2" class="rt">Total:</td>
<td class="rt"><?=$this->Cart()->formatAmount($this
->element->getModel()->getTotal()); ?></td>
</tr>
</tbody>
</table>
<?=$this->element->getElement('update-cart'); ?>
</div>

The HTML produced by this script will look similar to the following screenshot:

Creating a Shopping Cart using Zend Framework: Part 2

The main aspect here is the line items. We need to iterate over the cart and display each product line item.

<?
$i = 0;
foreach($this->element->getModel() as $item):
?>
<tr <? if($i % 2){ echo 'class="odd"';};?>>
<td><?=$this->Escape($item->name); ?></td>
<td>
<?=$this->element->qtys->getElement($item->productId); ?>
</td>
<td class="rt">
<?=$this->Cart()->formatAmount($item->getLineCost()); ?>
</td>
</tr>
<?
++$i;
endforeach;
?>

Here, we get the Cart Model from the form using our new getModel() method that we created earlier in the SF_Form_Abstract and iterate over it. As we iterate over the Cart Model, we display all the products and line costs. We also get the quantity form elements. To retrieve the correct quantity form element for each product, we access the qtys subform and use the getElement() method. We pass in the items productId as we named our quantity form elements using the productId earlier.

All of the other form data is rendered in a similar way. We either get data from the Cart Model, or get elements from the form itself. By using the ViewScript decorator, we can see that it is much easier to mix form and non-form elements.

Layout main.phtml

application/layouts/scripts/main.phtml

<div class="left categorylist">
<?= $this->layout()->categoryMain; ?>
<? if (0 < count($this->subCategories)):?>
<div class="sub-nav">
<h3>in this <span>category</span></h3>
<ul>
<? foreach ($this->subCategories as $category): ?>
<li><a href="<?=$this->url(array('categoryIdent' =>
$category->ident), 'catalog_category', true
);?>"><?=$category->name; ?></a></li>
<? endforeach; ?>
</ul>
</div>
<? endif; ?>
<div>
<h3>in your <span>cart</span></h3>
<?= $this->Cart()->getSummary(); ?>
</div>
</div>

We need to display the cart summary to the users so that they can see a brief overview of the items in their cart. To do this, we will use the Cart View Helper and the getSummary() method that looks similar to the following screenshot:

Creating a Shopping Cart using Zend Framework: Part 2

Catalog index.phtml

application/modules/storefront/view/scripts/catalog/index.phtml

<p><?=$this->productPrice($product); ?></p>
<?=$this->Cart()->addForm($product); ?>

When displaying a list of products, we want the user to be able to add the product to their cart at that point. To do this, we render the cart add form under the price. This will make our catalog listing look like the one shown below:

Creating a Shopping Cart using Zend Framework: Part 2

Catalog view.phtml

application/modules/storefront/view/scripts/catalog/view.phtml

<p><?=$this->productPrice($this->product); ?></p>
<?=$this->Cart()->addForm($this->product); ?>

Just like the index.phtml, we need to render the cart add form after the product price. This will make our details page look like this:

Creating a Shopping Cart using Zend Framework: Part 2

Summary

In this two-part article series, we learnt about:

  • Creating Models that do not use a database as a data source
  • Using Zend_Session_Namespace
  • Implementing the Cart Views and Controllers
  • More Forms, View Helpers, and so on

If you have read this article you may be interested to view :

Zend Framework 1.8 Web Application Development Design, develop, and deploy feature-rich PHP web applications with this MVC framework
Published: September 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Keith Pope has over ten years of experience in web-related industries and has had a keen interest in programming from an early age. Keith currently works in the airline industry as a technical project manager, providing entertainment systems for aircraft.

He has been working with the Zend Framework since its first preview release, using it in many of his work and personal projects.

Books From Packt

Joomla! 1.5 SEO
Joomla! 1.5 SEO

jQuery 1.3 with PHP
jQuery 1.3 with PHP

Symfony 1.3 Web Application Development
Symfony 1.3 Web Application Development

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs

PHP Team Development
PHP Team Development

Apache MyFaces Trinidad 1.2: A Practical Guide
Apache MyFaces Trinidad 1.2: A Practical Guide

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

Grok 1.0 Web Development
Grok 1.0 Web Development

 

 

 

No votes yet
complete steps integrete shopping cart in zend by
Hi sir, Sir i am doing the steps as you given above but i am not getting properly so please can you explain complete steps of this code.
Link for code by
Where is the code for these tutorial by
In the first chapter is written that the res of the code from the tutorail can be downloaded but i cant find it anywhere

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
h
K
d
F
d
T
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software