1

In Joomla 4, there is the layout joomla.searchtools.default for the filters in a list view that you can see everywhere in the BackEnd.

In a list view of my custom component (FrontEnd), I managed to apply the layout joomla.searchtools.default for the filters. All is working fine.

Now I want to customize the layout. To avoid touching core files, I made a copy of the templates in the layout (joomla.searchtools.default) to my custom component. All is working fine.

Specifically, I want to get rid of the "filter options" button (which hides and shows the filters), but keep the useful "clear" button. This way, users will always see the filters.

There is a template called bar.php where you can see the following code:

<div class="filter-search-actions btn-group">
    <?php if ($filterButton) : ?>
        <button type="button" class="filter-search-actions__button btn btn-primary js-stools-btn-filter">
            <?php echo Text::_('JFILTER_OPTIONS'); ?>
            <span class="icon-angle-down" aria-hidden="true"></span>
        </button>
    <?php endif; ?>
    <button type="button" class="filter-search-actions__button btn btn-primary js-stools-btn-clear">
        <?php echo Text::_('JSEARCH_FILTER_CLEAR'); ?>
    </button>
</div>

In the code snippet, you can see two buttons: JFILTER_OPTIONS and JSEARCH_FILTER_CLEAR

There is other template called filters.php that really displays the filters:

<?php if ($filters) : ?>
    <?php foreach ($filters as $fieldName => $field) : ?>
        <?php if ($fieldName !== 'filter_search') : ?>
            <?php $dataShowOn = ''; ?>
            <?php if ($field->showon) : ?>
                <?php $wa->useScript('showon'); ?>
                <?php $dataShowOn = " data-showon='" . json_encode(FormHelper::parseShowOnConditions($field->showon, $field->formControl, $field->group)) . "'"; ?>
            <?php endif; ?>
            <div class="js-stools-field-filter"<?php echo $dataShowOn; ?>>
                <span class="visually-hidden"><?php echo $field->label; ?></span>
                <?php echo $field->input; ?>
            </div>
        <?php endif; ?>
    <?php endforeach; ?>
<?php endif; ?>

How could I get rid of the JFILTER_OPTIONS button (without losing the visibility of the filters) and maintain the functionality of the JSEARCH_FILTER_CLEAR button?

All is related with the js-stools-container-filters class in the divs' containers, I suppose, but I can't find more information.

Code snippet in the default_filter.php template (the "main" template):

// Load search tools
HTMLHelper::_('searchtools.form', $data['options']['formSelector'], $data['options']);
?>
<div class="js-stools" role="search">
    <?php if ($data['options']['showSelector']) : ?>
    <div class="js-stools-container-selector">
        <?php echo $this->sublayout('selector', $data); ?>
    </div>
    <?php endif; ?>
    <div class="js-stools-container-bar">
        <div class="btn-toolbar">
            <?php echo $this->sublayout('bar', $data); ?>
            <?php echo $this->sublayout('list', $data); ?>
        </div>
    </div>
    <!-- Filters div -->
    <div class="js-stools-container-filters clearfix<?php echo $filtersActiveClass; ?>">
        <?php if ($data['options']['filterButton']) : ?>
        <?php echo $this->sublayout('filters', $data); ?>
        <?php endif; ?>
    </div>
</div>
<?php if ($data['options']['showNoResults']) : ?>
    <?php echo $this->sublayout('noitems', $data); ?>
<?php endif; ?>
1
  • ...just a small note about one of the snippets: Assuming $filters is either an empty or non-empty array, there is no benefit in wrapping a foreach() block in an if() block. If the array is empty, then the foreach() will simply not iterate. If it is not empty, it will iterate. Removing the if() block will allow the foreach() block to move left 1 tab and reduce the need for humans to horizontally scroll to read the code.
    – mickmackusa
    May 30 at 22:18

1 Answer 1

0

Finally I did it (get rid of JFILTER_OPTIONS button, maintaining JSEARCH_FILTER_CLEAR button functionality) touching very little code:

At main filter template file (I named it default_filter.php in my component, it's the default.php in the layout joomla.searchtools.default) fixing the class js-stools-container-filters-visible in the filter's div:

<!-- Filters div -->
<div class="js-stools-container-filters clearfix js-stools-container-filters-visible">

In the bar.php sublayout, deleting the JFILTER_OPTIONS button, and leaving alone the JSEARCH_FILTER_CLEAR button:

<div class="filter-search-actions btn-group">
    <button type="button" class="filter-search-actions__button btn btn-primary js-stools-btn-clear">
        <?php echo Text::_('JSEARCH_FILTER_CLEAR'); ?>
    </button>
</div>

That's it !

1
  • Anyone knows if there are documentation available about "js-stools-container" and related classes ?
    – framontb
    May 31 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.