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.
After saving the template, press the "BUILDER" button beside your new template.
and then click on the "NEW LAYOUT" button to create your 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.
Now in your section area, press the "+" to add an element and in the modal window, select "Grid".
Click on the "Grid" element and then on "ADD ITEM" button.
Then go to the "Advanced" tab and from the Dynamic Content drop-down, select JFilters Results Items.
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.
After doing that you should see the grid populating the results. Just save your layout and you are done.
Last but not least, add a pagination element to your layout. The final layout should look like this:
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.