Joomla Fields As Custom Filters

: 19 Oct 2022

Showcasing the power of Joomla 4 out of the box with no additional extensions I produced this website (https://brianstest.site). One of the features I created was a masonry style view (https://brianstest.site/trips) with no javascript or css edits - just some simple template overrides.

The tutorial below is for creating that view using custom fields. For a slightly simpler version using tags see the Joomla Tags As Custom Filters.

Setup

Create a single category called Trips
Create a field group with the exact same name as the category.
Create the custom fields you need to filter the content eg Departures, Skill, Availability and make sure you place them in the field group you just created.
Create multiple articles in the Trips category
- Add values for the custom fields to each article
- Add Readmore to each article
Create a menu item of type Articles->Category Blog
- Set the Blog Layout as follows
  - 0 Leading Articles
  - 9 Intro Articles
  - 3 Columns
  - Multi Column Direction - Across
- Set the Options as follows
  - Intro Text - Show
  - Category - Hide
  - Author - Hide
  - Create Date (etc) - Hide

Template Override 1

Create overrides for Components->com_content->category
Open the override for /templates/template_name/html/com_content/category/blog.php

Insert the code below before line 16

use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;

Insert the code below before the closing php tag on line 51

$fields = FieldsHelper::getFields('com_content.article');

$filter="";
foreach ($fields as $field) {;
    if ($this->category->title === $field->group_title) {
        foreach (($field->fieldparams->get('options')) as $option) {
            $filter .= ',[value="' . $option->value . '"]:checked ~ .blog-items .blog-item:not([data-category~="' . $option->value . '"])';
        }
    }
}

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->addInlineStyle(ltrim($filter, ",") . '{display: none; opacity: none;}');

On new line 59 insert the following code

<?php $fields = FieldsHelper::getFields('com_content.article'); ?>
<?php foreach ($fields as $field) {;?>
    <?php if ($this->category->title === $field->group_title) {;?>
        <div class="filter-label d-inline-block">
            <?php echo $field->label; ?>
        </div>
        <?php foreach (($field->fieldparams->get('options')) as $option) { ;?>
            <input type="checkbox" class="btn-check" name="CheckBox" id="<?php echo $field->id; ?>-<?php echo $option->value; ?>" value="<?php echo $option->value; ?>">
            <label class="btn btn-outline-primary btn-sm" for="<?php echo $field->id; ?>-<?php echo $option->value; ?>">
                <?php echo $option->name; ?>
            </label>
        <?php }; ?>
    <?php }; ?>
<?php }; ?>

Save & Close the file.

Template Override 2

Open the override for /templates/template_name/html/com_content/category/blog_item.php

Insert the code below before the closing php tag on line 35

// for each field get the value
$filter = implode(" ", array_map(function($field) {return $field->value;}, $this->item->jcfields));
// remove commas and make lowercase
$filter = (strtolower(str_replace(",", "", $filter)));

Edit the next div so that it looks as belwo

<div class="com-content-category-blog__item blog-item"
    itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting"
        data-category="<?php echo $filter; ?>">

Add the following code at the end of the file
```
</div>
```

Optional Template override 3

You may find it useful to have an additional button that will reset all the filters.

Re-Open the override for /templates/template_name/html/com_content/category/blog.php

Insert the following code immediately after the second code block you added

$wa->addInlineScript('function unselectCheckboxes() {const checkboxes = document.querySelectorAll(\'input[type="checkbox"]\');
    checkboxes.forEach((checkbox) => {checkbox.checked = false; });}');

Insert the following code immediately before the third code block you added

<input type="checkbox" class="btn-check" name="ResetAll" id="ResetAll" onclick="unselectCheckboxes()" >
<label class="btn btn-outline-danger btn-sm" for="ResetAll">Reset</label>