Plugin

The FAQ plugin is used to display frequently asked questions (FAQs) on the frontend with sorting, pagination, category filtering, and custom templates.

It can be added to a page by creating a content element of type Plugin and selecting the plugin type FAQ System.

Selecting FAQ Plugin in backend — Selecting the FAQ plugin

Plugin settings overview:

FAQ List View

The default view displays a list of FAQ records. Several options can be configured through the plugin:

Sorting

Short By: Select the field used to sort the FAQ list (e.g., title).
Direction of Sorting: Ascending or descending order.

Limit Records

Display Maximum Record: Set the maximum number of FAQs to display (leave empty to show all).

Category Mode

Use this section to filter FAQs based on assigned categories. The following 5 category modes are available:

Show All Category FAQs (ignore): Display all FAQ records, ignoring their categories.
Show FAQ with Selected Category (OR) (or): Show FAQs that belong to any of the selected categories.
Show FAQ with Selected Category (AND) (and): Show FAQs that belong to all selected categories.
Don't Show FAQ with Selected Category (NOTOR) (notor): Exclude FAQs that belong to any of the selected categories.
Don't Show FAQ with Selected Category (NOTAND) (notand): Exclude FAQs that belong to all of the selected categories.

Other category-related options:

Include Subcategories: Also include FAQs from the subcategories of selected categories.
Filter by Item: Enable frontend filtering based on selected categories.
Selected Category: Manually pick one or more categories to filter by.

Pagination

You can enable pagination for long FAQ lists:

Enable Pagination: Toggle to activate pagination.
Display Items Per Page: Number of FAQs shown per page (default: 10).
Maximum Number of Pages: Limit how many pages are created (default: 10).

Template Layout

Select Template Layout: Choose between predefined layout templates (e.g., default, accordion). Custom layouts can be added in your sitepackage.

To register custom layouts, use the following TypoScript:

tx_remotedevsfaq.templateLayouts {
    1 = FAQ-layout
}

This will add a new option called FAQ-layout to the Template Layout dropdown in the backend plugin settings.

Template layout Code add in Page TSconfig

Output of added FAQ layout in Page TSconfig

You can use any number to identify your layout and any label to describe it.

Now it is possible to use a condition in the template to change the layouts, and load a different partial:

  <f:if condition="{faqs}">
    <f:then>
      <div class="faq-container">
        <h1><f:translate key="tx_faq_domain_model_faq.heading" /></h1>
        <f:flashMessages />
        <div class="faq-accordion">
          <f:if condition="{settings.templateLayout} == 1">
            <f:then>
              <f:for each="{faqs}" as="faq" iteration="iterator">
                  <f:render partial="List/Item-new" arguments="{_all}" />
              </f:for>
            </f:then>
            <f:else>
              <f:for each="{faqs}" as="faq">
                <div class="faq-accordion-item">
                  <f:render partial="Item" arguments="{_all}" />
                </div>
              </f:for>
            </f:else>
          </f:if>
        </div>
      </div>
    </f:then>
    <f:else>
        <div class="no-faq-found">
          <f:translate key="list_nofaqfound"  extensionName="rd_faq"/>
      </div>
    </f:else>
  </f:if>

As you can see in this example a different partial is loaded if the layout 1 is used.

Additional Settings

Disable Overwrite Demand: Prevents TypoScript from overriding plugin settings. Keep this checked if you want full control via the content element settings.
Storage Page: Select the page (or folder) where FAQ records are stored. This ensures the plugin loads data from the right place.

---