Creating a Category Page

Category page displays a category name, description, images and category products.

Start with creating a new page. Choose a template and specify page title and URL. Page title could be just "Category", because LemonStand overrides titles for product category pages with a specific category name. So, if you view a "Computers" category page, the page title will be "Computers". For page URL you can enter /category. Then URL of category pages can be like these: http://yoursite.com/category/computers or http://yoursite.com/category/flowers.

To inform LemonStand that the page you are designing is a category page, go to the Action tab and select the shop:category action in the action drop-down menu. This action checks the page URL and extracts a category URL name from it. Then it loads a category with specified URL name from the database and creates $category PHP variable which you can use in the page code. This variable is an instance of Shop_Category class.

A value of the $category variable can be NULL in case the category, specified in the URL, does not exist. Always compare the $category variable value with NULL before displaying the category contents on the page:

<? if (!$category): ?>
	<h2>We are sorry, the specified category not found.</h2>
<? else: ?>
	... your normal category page ...
<? endif ?>

{% if not category %}
	<h2>We are sorry, the specified category not found.</h2>
{% else %}
	... your normal category page ...
{% endif %}

Displaying category name and description

Return to the Page tab and go to the Content field. We want to output the category name, description and a list of the category products. Here is a simple code demonstrating how you can do it:

<h2><?= h($category->name) ?></h2>
<p class="description"><?= h($category->short_description) ?></p>

<h2>{{ category.name }}</h2>
<p class="description">{{ category.short_description }}</p>

Displaying category images

If you assign images to your categories, you can output them in the following way:

<? foreach ($category->images as $image): ?>
	<img src="<?= $image->getThumbnailPath(100, 100) ?>"/>
<? endforeach ?>

{% for image in category.images %}
	<img src="{{ image.getThumbnailPath(100, 100) }}"/>
{% endfor %}

The code above outputs all category images as thumbnails with length of a biggest size equal to 100 px. If you want the thumbnails to have a fixed width or height with another dimension scaled proportionally use "auto" instead of exact width or height length:

<img src="<?= $image->getThumbnailPath(100, 'auto') ?>"/>

<img src="{{ image.getThumbnailPath(100, 'auto') }}"/>

Finally, if you want to output an image in its original size, use "auto" for both width and height:

<img src="<?= $image->getThumbnailPath('auto', 'auto') ?>"/>

<img src="{{ image.getThumbnailPath('auto', 'auto') }}"/>

Displaying a list of category products

The next article Displaying a list of products explains how you can leverage the power of LemonStand partials for displaying a list of a category products.

See also:

• Shop_Category class

Previous: Displaying a List of Categories
Return to Categories