Getting started with Cataloger

We take a closer look at getting the Cataloger module up and running - which allows you to create a directory of items or products - and some simple tricks for a bit of extra flexibility.

cataloger00.png

Often when building a website in CMSMS, you'll want to create a number of product or item pages, and have them listed on (possibly several) other pages or directory pages. One of the best modules for this kind of task is the Cataloger module.

Let's see how simple it is to get this module up and running, and take a look at a few clever tips and short-cuts along the way.

Setting up your User-Defined Attributes

First thing's first: you'll want to define the attributes for each of the items you will create. For our example, we're going to set up a page which will display a list of videogames, which the user can then click to show more information on the game.
(Extensions > Cataloger > Manage User-Defined Attributes > Item Attributes)

From here we create the fields that will be associated for each videogame (Item). Here is an example set of Item Attributes:

  • - Format (Field Type = Dropdown, Value = Xbox 360,PS3,Wii,NDS)
  • - Developer
  • - Price
  • - Description

 

Creating the Category Page template

Now it's time to create the Category Page, which will output all of the videogames we will later create. There are predefined templates available, but, we'd like to have more control than what these offer, so:
(Extensions > Cataloger > Manage Sub-Templates > Add Template)

Paste in this code:

{section name=numloop loop=$items}
<img src="{$items[numloop].image}" alt="" />
    <h3><a href="{$items[numloop].link}">{$items[numloop].title}</a></h3>
        <p>€{$items[numloop].price}</p>
            {if $items[numloop].format == 'PS3'}
                PS3 logo
            {elseif $items[numloop].format == 'Wii'}
                Wii logo
            {elseif $items[numloop].format == 'NDS'}
                NDS logo
            {else}
                Xbox 360 logo
            {/if}
{/section}

As you will see from the above code, we can pick and choose which fields to display on the Category listings page by fetching them from our videogame (Item) array. We can also output other types of content based on the choices that have been selected from our dropdown options, as outlined in the if statement.

You'll notice that the videogame title and also an image is called from this loop, but of course we never created these as fields. That's because we don't need to, these are created when we create the Items themselves, so let's get on with doing that next.

Catalog structure and populating

(Content > Pages > Add New Content)

From Content Type, select Category Page. Give the page a name, and make sure to set Sub - Template to the template we created above. Submit the page to the database.

(Content > Pages > Add New Content)

From Content Type, select Item Page. Give the page a name, and set the Parent to the Category Page we just made. In the Images tab, upload an image into the first image slot. This will be output on the Category page list, so it can usually be considered as a thumbnail/preview image only. Submit the page to the database, and repeat as necessary for as many videogames you want to create.

That's it! We've created a listings page, handpicked the types of fields we want to display for each videogame, and also displayed a logo on the front-end dependant on which options the user has selected in the back-end. Next time, we'll take a look at a trick to allow Items to be displayed on unrelated pages, and how to make the most of the images to create great individual screenshot galleries.

a2 Hosting

Comments