ZedSeries Listing Tutorial (part #1)

Today was released ZedSeries Listing 1.6.0.stable, it is compatible with Contao 2.9 and is shipped with an inline guide. The following tutorial is taken from the inline guide. The project page is located at http://www.zedseries.com/zedseries-listing-extension-for-typolight.html. The issues are managed through bitbucket at http://bitbucket.org/zedseries/zedseries_listing/issues/. You can also visit the project page of ZedSeries Listing on Contao.org website.

In order to show how ZedSeries Listing module works we are going to build a Faq Listing/Viewer. We will create the following three modules:

• F.A.Q. Categories listing (will show a list of F.A.Q. categories)
• F.A.Q. listing (will show a list of F.A.Q. belonging to the selected category)
• F.A.Q. details (will show the answer of a specific F.A.Q.)

Getting Started

In order to follow this tutorial you need at least:

• some F.A.Q., so you'll have to go to the FAQ module and create some categories and then some faq.
• three pages that will contain the above modules

and you need to be able to do some operations (e.g. module creation) because this steps are not explained.

Basic styling with CSS

ZedSeries Listing comes with an example stylesheet, you can find it in the contrib folder of zedseries_listing directory.

The quickest way to incorporate it, is to add the following line:

<link rel="stylesheet" href="system/modules/zedseries_listing/contrib/zedseries_listing_style.css" media="screen" />

to the "Additional head tags" section of your layout

F.A.Q. Categories listing

This module will show a list of all F.A.Q. categories.

Our listing will contain the id, title and headline of each f.a.q. category sorted by title and without pagination. We link each faq category to another listing module with an url like this: (assuming that we have a category which title is "faq-category" with id 1)

http://www.example.com/faq-listing-page/i/1/t/faq-category.html

We'll add the ability to search by title.

F.A.Q. Categories listing configuration

Create a new module of type "ZedSeries Listing" and fill in the fields as illustrated below:

The result (once you have put the module inside an article) should be something like this:

Now it's time to create our F.A.Q. Listing module

F.A.Q. Listing

Our F.A.Q. Listing module will display all the F.A.Q. that belong to a selected category.

Our list will be searchable for a specific question.

This time we'll add a "condition" to show only the faq of a specific category. The condition will be:

pid={{request::i}}

since in the database the pid field of table tl_faq is associated with the id field of the tl_faq_category table.

We use the {{request::i}} insert tag to retrieve the "i" param from the url. If you followed the previous step you know that the i url name is associated with the field "id" of tl_faq_category.

We'll link this module to another module with an url like this: (assuming that we have a faq which alias is "our-faq-question")

http://www.example.com/faq-details-page/question/our-faq-question.html

Create a module and fill in as illustrated below:

The result will be something like this:

F.A.Q. Details module

This module will show the selected question and the answer. It is the simplest module of our tutorial since we have to select the fields we want to show and the "source" listing module.

Create a module of type "ZedSeries Listing Details" and fill in as illustrated below:

The result will be something like this:

Final notes

ZedSeries Listing module is a powerful module that speed up data listing with a litte effort (you have to deal with fields, table and url schema).

Every output generated by the ZedSeries Listing modules can be customized, take a look at How to use helper in template writing

However this topic will be covered in the next version of this guide.

If you want to get notified about the updates of this guide you can follow the zedserieslab's tweets

Feel free to comment below if you have any questions.