Creating a simple catalog with ItemManager
This article is a part of the Working with ItemManager series.
Concept
These article isn't particularly difficult at first, but be sure to read it once you're comfortable with the basics: ItemManager API Reference - ItemManager class. Because I don't intend to go into all the details of using basics here.
- In the first part of this tutorial I’ll show you how to make a category list on your GetSimple site using a simple trick of the dummy categories.
- In the second and final part of this tutorial, I'll make a product overview and a functions to display product details for each category.
Why I call it dummy categories?
Basically, the ItemManager's categories are a kind of template for the items and designed to determine the common properties of the items via custom fields. The ItemManager's native categories do not contain dynamic contents such as images, movies, text, etc. It's important to recognize, that the categories are not really be suited for the use in case of creating the product categories. To create product categories we use items (called dummy categories) and assign them the properties (fields) that our product categories require.
Continue with the basis structure of your catalog, that should look as follows:
CATALOG
|
+ Category_1
| |
| + Product_1
| | |
| | + Product_1_details
| |
| + Product_2
| | |
| | + Product_2_details
| |
| + Product_3
| |
| + Product_3_details
| ...
+ Category_2
|
+ Product_1
| |
| + Product_1_details
|
+ Product_2
| |
| + Product_2_details
|
+ Product_3
|
+ Product_3_details
...
...Unfortunately, GetSimple CMS has very bad routing features, which makes the development of dynamic (fake) URL structures unnecessarily difficult.
Of course you could drill out the standard features and write a plugin, that would do the routing for your catalog, I have already demonstrated how this works there: SG Catalog Router. Since this would bloat my simple example unnecessarily, I will leave it in this tutorial and use the default GS pages to define the catalog structure up to the categories. Disadvantage of the usage of GS pages is that if you have created a new product category in ItemManager, you always have to create a corresponding page in GetSimple with the same slug, so that your category could be accessed in front-end.
Preparation
OK, let's create following pages in GS-admin:
- Catalog
The child pages of the Catalog:
- Beans
- Fruits
- Vegetables
Make sure that the resulting page slugs are exactly the same as page names: catalog, beans, fruits and vegetables. After that, you'll need to create a new ItemManager category named Dummy Category (Items of this category act as your dummy categories):
Next, select the Dummy Category, then go to the ItemManager's tab Fields and create there three fields as shown in picture:
Now create a few items for your dummy category named: Beans, Vegetables and Fruits:
Note: The values of the fields Slug should be identical with your GS pages slug you created earlier.
Coding
Ok, the work is done, your dummy categories are now created, let's enjoy the coding!
To output your category list in the frontend, you only need 2 files in the current selected theme: functions.php and catalog.php, if these files already exist, just copy and paste the code below.
I'll start with functions.php file:
<?php
/**
* setlocale — Set locale information (numeric formatting information)
*
* Change that depending on your country
*
*/
setlocale(LC_MONETARY, 'de_DE');
/**
* get the current page slug and parent
*
*/
$slug = (string)get_page_slug(false);
$parent = get_parent(false);
/**
* Bootstrap image resizer lib
*
*/
require_once(GSPLUGINPATH.'imanager/phpthumb/ThumbLib.inc.php');
/**
* Reads all available dummy categories and stores them into the $categories variable
*
*/
if($slug == 'catalog') {
$categories = getCategories();
}
/**
* Reads products of a category or product details and stores them into a variable
*
*/
if($parent == 'catalog') {
if(empty($_GET['product'])) {
$categoryItems = getItems($slug);
} else {
$currentProduct = getItem($slug);
}
}
/**
* A simple function that returns an array of dummy categories
* @return array
*/
function getCategories() {
return imanager()->getItems('slug=dummy-category', 'active=1');
}
/**
* A simple function that returns an array of products
*
* @param string $slug - This is the slug of the products you want to select
* @return array
*/
function getItems($slug) {
$imanager = imanager();
return $imanager->getItems('slug='.$imanager->sanitizer->pageName($slug), 'active=1');
}
/**
* A function that returns a product
*
* @param string $slug - This is the slug of the product you want to select
* @return object
*/
function getItem($slug) {
$imanager = imanager();
return $imanager->getItem('slug='.$imanager->sanitizer->pageName($slug), (int) $_GET['product']);
}
/**
* Resizes images / with the first call creates thumbnails and stores them
*
* @param object $image - This is the image field whose images you want to resize
* @return string
*/
function getResized(Field $image, $size = 200) {
global $SITEURL;
foreach($image->file_name as $key => $name) {
// Check if thumbnail exists
if(!file_exists($image->path[$key].'thumbnail/'.$size.'_'.$name))
{
$thumb = PhpThumbFactory::create($image->fullpath[$key]);
$path_parts = pathinfo($image->fullpath[$key]);
$thumb->resize($size);
$thumb->save($image->url[$key].'thumbnail/'.$size.'_'.$name, $path_parts['extension']);
}
return '<img src="'.$SITEURL.$image->url[$key].'thumbnail/'.$size.'_'.$name.'"
alt="'.(!empty($image->title[$key]) ? ($image->title[$key]) : '').'" width="'.$size.'">';
}
}The content of the functions.php is fairly self-explanatory with the comments, but here's what it does: Each time the catalog page or subpages of the catalog are requested, the script calls the getCategories() function. This function loads all active items of the dummy category and makes them available in a variable $categories. The content of $categories variable is then output in a loop in the catalog.php file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Basic catalog skeleton :: Categories</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/skeleton.css">
</head>
<body>
<div class="container">
<h1>MY PRETTY CATALOG</h1>
<h6>Select a category</h6>
<hr>
<?php
if(!empty($categories)) {
foreach($categories as $category) { ?>
<div class="row">
<div class="eight columns">
<h2><a href="./<?php echo $category->fields->slug->value; ?>/"><?php echo $category->name; ?></a></h2>
<div>
<p><?php echo '<a href="./'.$category->fields->slug->value.'/">'.getResized($category->fields->image).'</a>'; ?></p>
<div class="category_text"><?php echo $category->fields->description->value; ?>
<a href="./<?php echo $category->fields->slug->value; ?>/">Show products</a>
</div>
</div>
<hr>
</div>
</div>
<?php }
}
?>
</div>
</body>
</html>Include the skeleton.css file to make your site look reasonably well. Now, you have to assign the catalog.php template under Pages menu for the Catalog page.
Part 2. Creating the products view
The page for listing categories is ready, now it's time to create items (the products). Next, create product categories in ItemManager: Fruits, Vegetables, and Beans:
At this point we create the structure for our items by assigning the fields to them:
Next, add some products for each category:
Create a new template file, named products.php. In GS pages menu, select each of your category pages (Fruits, Vegetables and Beans) and assign the new products.php template to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Basic catalog skeleton :: Products</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/skeleton.css">
</head>
<body>
<div class="container">
<h1>MY PRETTY CATALOG</h1>
<?php
// Show product list
if(!empty($categoryItems)) { ?>
<h6>Select a product</h6>
<hr>
<?php
foreach($categoryItems as $product) { ?>
<div class="row">
<div class="eight columns">
<h2><a href="./?product=<?php echo $product->id; ?>"><?php echo $product->name; ?></a></h2>
<div>
<p><?php echo '<a href="./?product='.$product->id.'">'.getResized($product->fields->images, 300).'</a>'; ?></p>
<div class="category_text"><?php echo $product->fields->summary->value; ?>
<a href="./?product=<?php echo $product->id; ?>">Products details</a>
</div>
</div>
<hr>
</div>
</div>
<?php }
}
// Schow product details
if(!empty($currentProduct)) { ?>
<h6>Product details</h6>
<hr>
<div class="row">
<div class="eight columns">
<div>
<p><?php echo getResized($currentProduct->fields->images, 500); ?></p>
<h2><?php echo $currentProduct->name; ?></h2>
<div class="category_text"><?php echo $currentProduct->fields->description->value; ?>
<div class="price">Price: <?php echo money_format('%!n €', $currentProduct->fields->price->value); ?></div>
<div class="created">Created: <?php echo date('l jS \of F Y', $currentProduct->fields->date->value); ?></div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</body>
</html>Have you read the part about how to use SimpleItem objects to create an item list with pagination?