In this chapter, you will learn how to enhance the user experience by: Allowing customers to search our product catalog effectively Enhancing this search by allowing our customers to fil
Trang 1Enhancing the the User Experience
We now have an e-commerce framework, which allows us to manage products and
show them to our customers; we have also customized this functionality to allow our
customers to be able to customize their purchases Before moving on to the shopping
basket, let us take a step back to focus on some important user experience aspects
to our framework In this chapter, you will learn how to enhance the user
experience by:
Allowing customers to search our product catalog effectively
Enhancing this search by allowing our customers to filter products
Providing wish lists for our customers
Generating recommendations for customers based on previous purchases
Informing customers when their desired products are back in stock
Enabling social aspects such as product ratings and reviews from customers
Juniper Theatricals
Juniper Theatricals want to have a lot of products on their online store, and as a
result they fear that some products may get lost within the website, or not be as
obvious to their customers To help prevent this problem, we will integrate product
searching to make products easy to find, and we will add filters to product lists
allowing customers to see products that match what they are looking for
(for example, ones within their price range)
As some products could still be lost, they want to be able to recommend related
products to customers when they view particular products If a customer wants a
product, and it happens to be out of stock, then they want to prevent the customer
from purchasing it elsewhere; so we will look at stock notifications too
•
•
•
•
•
•
Trang 2The importance of user experience
Our customers' experience on the stores powered by our framework is very
important A good user experience will leave them feeling wanted and valued,
whereas a poor user experience will leave them feeling unwanted, unvalued, and
may leave a bad taste in their mouths
Search
The ability for customers to be able to search, find, and filter products is vital, as if
they cannot find what they are looking for they will be frustrated by our site and go
somewhere where they can find what they are looking for much more easily
There are two methods that can make it much easier for customers to find what they
are looking for:
Keyword search: This method allows customers to search the product
catalog based on a series of keywords
Filtering: This method allows customers to filter down lists of products
based on attributes, refining larger lists of products into ones that better
match their requirements
Finding products
The simplest way for us to implement a search feature is to search the product
name and product description fields To make the results more relevant, we can
place different priorities on where matches were found; for instance, if a word or
phrase is found in both the name and description then that would be of the highest
importance; next would be products with the word or phrase in the name; and
finally, we would have products that just have the word or phrase contained
within the product description itself
So, what is involved in adding search features to our framework? We need
the following:
Search box: We need a search box for our customers to type in words
or phrases
Search feature in the controller: We need to add some code to search the
products database for matching products
Search results: Finally, we need to display the matching products to
the customer
•
•
•
•
•
Trang 3Search box
We need a search box where our customers can type in words or phrases to search
our stores This should be a simple POST form pointing to the path products/search
with a search field of product_search The best place for this would be in our
website's header, so customers can perform their search from anywhere on the
site or store
<div id="search"> id="search"> id="search">
<form action="products/search" method="post">
<label for="product_search">Search for a product</label>
<input type="text" id="product_search" name="product_search" />
<input type="submit" id="search" name="search" value="Search" />
</form>
</div>
We now have a search box on the store:
Controlling searches with the products controller
A simple modification to our products controller will allow customers to search
products We need to make a small change to the constructor, to ensure that it knows
when to deal with search requests Then we need to create a search function to search
products, store the results, and display them in a view
Constructor changes
A simple switch statement can be used to detect if we are viewing a product,statement can be used to detect if we are viewing a product, can be used to detect if we are viewing a product,
performing a search, or viewing all of the products in the database as a list
$urlBits = $this->registry->getURLBits();
if( !isset( $urlBits[1] ) )
{
$this->listProducts();
}
else
{
switch( $urlBits[1] )
Trang 4{
case 'view':
$this->viewProduct();
break;
case 'search':
$this->searchProducts();
break;
default:
$this->listProducts();
break;
}
}
This works by breaking down the URL and, depending on certain aspects of the
URL, different methods are called from within the controller
Search function
We now need a function to actually search our products database, such as
the following:
private function searchProducts()
{
// check to see if the user has actually submitted the search form
if( isset( $_POST['product_search'] ) &&
$_POST['product_search'] != '' )
{
Assuming the customer has actually entered something to search, we need to clean
the search phrase, so it is suitable to run in our database query, and then we perform
the query The phrase is checked against the name and description of the product,
with the name taking priority within the results The highlighted code illustrates the
query with prioritization
// clean up the search phrase
$searchPhrase = $this->registry->getObject('db')->
sanitizeData( $_POST['product_search'] );
$this->registry->getObject('template')->getPage()->
addTag( 'query', $_POST['product_search'] );
// perform the search, and cache the results, ready for the
// results template
$sql = "SELECT v.name, c.path,
IF(v.name LIKE '%{$searchPhrase}%', 0, 1) AS priority,
IF(v.content LIKE '%{$searchPhrase}%', 0, 1)
AS priorityb
FROM content c, content_versions v, content_types t
WHERE v.ID=c.current_revision AND c.type=t.ID
Trang 5AND t.reference='product' AND c.active=1
AND ( v.name LIKE '%{$searchPhrase}%' OR v.content
LIKE '%{$searchPhrase}%' )
ORDER BY priority, priorityb ";
$cache = $this->registry->getObject('db')->cacheQuery( $sql );
if( $this->registry->getObject('db')->
numRowsFromCache( $cache ) == 0 )
{
// no results from the cached query, display the no results
// template
}
If there are some products matching the search, then we display the results to
the customer
else
{
// some results were found, display them on the results page
// IMPROVEMENT: paginated results
$this->registry->getObject('template')->getPage()->
addTag( 'results', array( 'SQL', $cache ) );
$this->registry->getObject('template')->
buildFromTemplates('header.tpl.php',
'products-searchresults.tpl.php', 'footer.tpl.php');
}
}
else
{
// search form not submitted, so just display the search box page
$this->registry->getObject('template')->
buildFromTemplates('header.tpl.php',
'products-searchform.tpl.php', 'footer.tpl.php');
}
}
As the results from the query are stored in a cache, we can simply assign this cache
to a template tag variable, and the results will be displayed Of course, as we need to
account for the fact that there may be no results, we must check to ensure there are
some results, and if there are none, we must display the relevant template
Search results
Finally, we need a results page to display these results on
<h2>Products found </h2>
<p>The following products were found, matching your search for
{query}.</p>