JFilters - YOOtheme Pro Integration

JFilters - YOOtheme

YOOtheme Pro is a powerful page builder for Joomla. It simplifies the customization of the Joomla pages, favoring speed, without the need to write a single line of code. That being said, we were asked several times, whether the JFilters results can be customized through YOOtheme Pro. Since we are constantly trying to improve our users' experience, we made that possible.

For that to happen, you have to download and install our JFilters - YOOtheme Pro integration plugin. After installing it, please go to your System > Plugins , find the plugin named "System - JFilters for YOOtheme Pro" and enable it.

Now you can start customizing your JFilters results in YOOtheme Pro.
Go to System > Site Template Styles, select "yootheme Default" and then click on the "CUSTOMIZE" button.

Now that that the page builder is open, you need to load the JFilters results page. Hence perform a filtering using the JFilters filtering module, from one of your pages, to load the results page.

Once the results page is loaded, go to TEMPLATES and click on the "NEW TEMPLATE" button. Then give a name to your template and select "JFilters Results" as Page.

Yootheme create JFilters template

After saving the template, press the "BUILDER" button beside your new template.

template builder

and then click on the "NEW LAYOUT" button to create your layout.

new layout

We suggest editing your page's main section, and format it in a way, that allows to have a main column for the results and a column for the filtering module.

layout columns

Now in your section area, press the "+" to add an element and in the modal window, select "Grid".

grid panel

Click on the "Grid" element and then on "ADD ITEM" button.

grid add item

Then go to the "Advanced" tab and from the Dynamic Content drop-down, select JFilters Results Items.

grid add item advanced

By doing that you are mapping the grid's items to JFilters results items and each of them will become a grid item.

The next step, is to map each of the grid item's elements to a JFilters results item's element. To do that go to the Content tab, and for each of the shown fields, press the Dynamic link, at their right top corner. There from the list, select the element that you want to map for that grid's element.

You can also select custom fields, in your dynamic content drop-down. This allows you to also show custom fields in the results.

After doing that you should see the grid populating the results. Just save your layout and you are done.

Yootheme grid content

Last but not least, add a pagination element to your layout. The final layout should look like this:

Yootheme - Jfilters layout elements

We just scratched the surfice of what you can do with YOOtheme Pro. To learn more on it, please visit the official YOOtheme PRO page.

You can download and use the layout we created for YOOtheme Pro and JFilters.