Implementing front-end pages

The plugin provides several components for building the item list page, category page, item details page and category list for the sidebar.

Item list page

Use the showcaseItems component to display a list of latest showcase items on a page. The component has the following properties:

• pageNumber - this value is used to determine what page the user is on, it should be a routing parameter for the default markup. The default value is {{ :page }} to obtain the value from the route parameter :page.
• categoryFilter - a category slug or URL parameter (:slug) to filter the items by. If left blank, all items are displayed.
• itemsPerPage - how many items to display on a single page (the pagination is supported automatically). The default value is 10.
• noItemsMessage - message to display in the empty item list.
• sortOrder - the column name and direction used for the sort order of the items. The default value is sort_order asc.
• categoryPage - path to the category page. The default value is showcase/category - it matches the pages/showcase/category.htm file in the theme directory. This property is used in the default component partial for creating links to the showcase categories.
• itemPage - path to the item details page. The default value is showcase/item - it matches the pages/showcase/item.htm file in the theme directory. This property is used in the default component partial for creating links to the showcase items.

The showcaseItems component injects the following variables to the page where it's used:

• items - a list of showcase items loaded from the database.
• itemPage - contains the value of the itemPage component's property.
• category - the showcase category object loaded from the database. If the category is not found, the variable value is null.
• categoryPage - contains the value of the categoryPage component's property.
• noItemsMessage - contains the value of the noItemsMessage component's property.

The component supports pagination and reads the current page index from the :page URL parameter. The next example shows the basic component usage on the showcase home page:

title = "Showcase"
url = "/showcase/:page?"

[showcaseItems]
itemsPerPage = "5"
==
{% component 'showcaseItems' %}

The next example shows the basic component usage with the category filter:

title = "Showcase Category"
url = "/showcase/category/:slug/:page?"

[showcaseItems]
categoryFilter = "{{ :slug }}"
==
function onEnd()
{
    // Optional - set the page title to the category name
    if ($this->category) {
        $this->page->title = $this->category->name;
    }
}
==
{% if not category %}
    <h2>Category not found</h2>
{% else %}
    <h2>{{ category.name }}</h2>

    {% component 'showcaseItems' %}
{% endif %}

The item list and the pagination are coded in the default component partial plugins/responsiv/showcase/components/items/default.htm. If the default markup is not suitable for your website, feel free to copy it from the default partial and replace the {% component %} call in the example above with the partial contents.

Item page

Use the showcaseItem component to display a showcase item on a page. The component has the following properties:

• slug - the value used for looking up the item by its slug. The default value is {{ :slug }} to obtain the value from the route parameter :slug.
• categoryPage - path to the category page. The default value is showcase/category - it matches the pages/showcase/category.htm file in the theme directory. This property is used in the default component partial for creating links to the showcase categories.

The component injects the following variables to the page where it's used:

• item - the showcase item object loaded from the database. If the item is not found, the variable value is null.

The next example shows the basic component usage on the showcase page:

title = "Showcase Item"
url = "/showcase/item/:slug"

[showcaseItem]
==
<?php
function onEnd()
{
    // Optional - set the page title to the category name
    if ($this->item) {
        $this->page->title = $this->item->title;
    }
}
?>
==
{% if not item %}
    <h2>Item not found</h2>
{% else %}
    <h2>{{ item.title }}</h2>

    {% component 'showcaseItem' %}
{% endif %}

The item details is coded in the default component partial plugins/responsiv/showcase/components/item/default.htm.

Category list

Use the showcaseCategories component to display a list of showcase item categories with links. The component has the following properties:

• slug - the value used for looking up the current category by its slug. The default value is {{ :slug }} to obtain the value from the route parameter :slug.
• displayEmpty - determines if empty categories should be displayed. The default value is false.
• categoryPage - path to the category page. The default value is showcase/category - it matches the pages/showcase/category.htm file in the theme directory. This property is used in the default component partial for creating links to the showcase categories.

The component injects the following variables to the page where it's used:

• categoryPage - contains the value of the categoryPage component's property.
• categories - a list of showcase categories loaded from the database.
• currentCategorySlug - slug of the current category. This property is used for marking the current category in the category list.

The component can be used on any page. The next example shows the basic component usage on the showcase home page:

title = "Showcase"
url = "/showcase/:page?"

[showcaseCategories]
==
...
<div class="sidebar">
    {% component 'showcaseCategories' %}
</div>
...

The category list is coded in the default component partial plugins/responsiv/showcase/components/categories/default.htm.