Using Joomla fields to filter materials

This tutorial, prepared by Brian Tieman, provides a case study on how you can use custom fields to filter Joomla content by modifying the template layout.

Installation

• Create one category called “Trips”.

• Create a field group with the same name as the category.

Create custom fields needed to filter content, such as “Departures”, “Skills”, “Availability”and be sure to place them in the field group you just created.

Template override #1

Create overrides for components->com_content->category.

Open the layout for /templates/template_name/html/com_content/category/blog.php.
Paste the code below before line 16.

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

Paste the code below before php closing 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 and close file.

Template override #2

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

Paste the code below before with the php closing 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 next div so it looks like below.

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

Add the following code at the end of the file:

</div>

Overriding template #3 (optional)

You might want to provide an additional button that resets all filters.

Reopen the override for /templates/template_name/html/com_content/category/blog.php.
Paste the following code right away after the second block of code you added:

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

Paste the following code directly before third added block of code:

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

Result

Joomla in Telegram: