3

I need to overwrite and adjust the twig (template) files from the Facet module in my custom subtheme? Is that possible? I need to change below markup and CSS classes (to debug faster, I also added my template suggestion here):

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'item_list' -->
<!-- BEGIN OUTPUT from 'themes/custom/my_theme/templates/dataset/item-list.html.twig' -->
<div class="item-list">
    <ul data-drupal-facet-id="contactvoorkeur" class="js-facets-checkbox-links">
        <li class="facet-item">
            <input type="checkbox" class="facets-checkbox" id="contactvoorkeur-email" data-facetsredir="/search-person/cards?f[0]=contactvoorkeur%3Aemail">
            <label for="contactvoorkeur-email">

                <!-- THEME DEBUG -->
                <!-- THEME HOOK: 'facets_result_item' -->
                <!-- BEGIN OUTPUT from 'modules/contrib/facets/templates/facets-result-item.html.twig' -->
                E-mail <span class="facet-count">(4)</span>
                <!-- END OUTPUT from 'modules/contrib/facets/templates/facets-result-item.html.twig' -->

            </label>

            <a href="/search-person/cards?f[0]=contactvoorkeur%3Aemail" rel="nofollow" data-drupal-facet-item-id="contactvoorkeur-email" style="display: none;">
                <!-- THEME DEBUG -->
                <!-- THEME HOOK: 'facets_result_item' -->
                <!-- BEGIN OUTPUT from 'modules/contrib/facets/templates/facets-result-item.html.twig' -->
                E-mail <span class="facet-count">(4)</span>
                <!-- END OUTPUT from 'modules/contrib/facets/templates/facets-result-item.html.twig' -->

            </a>
        </li>
        <li class="facet-item">
            <input type="checkbox" class="facets-checkbox" id="contactvoorkeur-post" data-facetsredir="/search-person/cards?f[0]=contactvoorkeur%3Apost">
            <label for="contactvoorkeur-post">

            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'facets_result_item' -->
            <!-- BEGIN OUTPUT from 'modules/contrib/facets/templates/facets-result-item.html.twig' -->
            Post <span class="facet-count">(2)</span>
            <!-- END OUTPUT from 'modules/contrib/facets/templates/facets-result-item.html.twig' -->

            </label>

            <a href="/search-person/cards?f[0]=contactvoorkeur%3Apost" rel="nofollow" data-drupal-facet-item-id="contactvoorkeur-post" style="display: none;">

                <!-- THEME DEBUG -->
                <!-- THEME HOOK: 'facets_result_item' -->
                <!-- BEGIN OUTPUT from 'modules/contrib/facets/templates/facets-result-item.html.twig' -->
                Post <span class="facet-count">(2)</span>
                <!-- END OUTPUT from 'modules/contrib/facets/templates/facets-result-item.html.twig' -->

            </a>
        </li>
    </ul>
</div>

My main goal is to:

1) How do I add a bootstrap css-class list-group to the existing facet class js-facets-checkbox-links. So I get:

<ul data-drupal-facet-id="contactvoorkeur" class="list-group js-facets-checkbox-links">

2) And how do I replace an existing facet class facet-item with list-group-item:

<li class="list-group-item">
Improve this question
3
  • 3
    Yes, that is certainly possible. But I assume you're asking because it doesn't work for you, which means you need to provide more details (which template, which module, what did you try) to get an actually useful answer
    – Berdir
    Commented Feb 6, 2017 at 7:16
  • @Berdir the difficulty is because e.g. the css class js-facets-checkbox-links is added by this file in the facet module folder CheckboxWidget.php. I have to extend this css class to js-facets-checkbox-links list-group? But I don't want to overwrite the contrib module file!
    – meez
    Commented Feb 6, 2017 at 12:58
  • @Berdir do you have any suggestions? Thanks
    – meez
    Commented Feb 6, 2017 at 18:42

3 Answers 3

Reset to default
1

Facets doesn't define a template, it uses an existing generic template from core. So technically, your question title is not reflecting what you are actually asking/need to do.

That means there isn't a specific template that you can just override and you need a slightly different approach.

It is good practice to allow for a more specific template by using something like '#theme' => 'item_list__facets' or so, then you could at least provide a template for all facets block, although it possibly would need to be even more specific/flexible.

That said, using preprocess/template_suggestions_alter() hooks, you should be able to add that class or provide a custom template for it, with some assumptions.

Basically, you define a function `yourtheme_preprocess_item_list($variables). In $variables, you should fine the data you need to identify the block you want to change, for examples based on the data attributes or classes that should be somewhere in there. You can try dpm() or so but I'd recommend setting up an IDE with a real debugger which offers way better experience in looking at complex data structures.

And then you can alter it based on whatever you want, e.g. to add some more classes to it.

Improve this answer
4
  • Ok thanks. 1) In my_theme.theme I made the preprocess function for the item_list: function crm_theme_preprocess_item_list($variables) { // my code }. But like you suggested: How do I have to use then '#theme' => 'item_list__facets'? I don't get this part? If I have this set correct, does that mean if I debug the HTML I will get e.g. a template suggestion like item-list--facet.html.twig? 2) And in this preprocess function, how do I add/change a CSS class to the <ul> element? And the <li> element off the list-item?
    – meez
    Commented Feb 7, 2017 at 11:54
  • 1
    As I said, you need to look at the data in $variables, identify your case and then add a class, or do the same to add template suggestions. '#theme' => 'item_list__facets' is not something you can do, it is something that you could suggest as an improvement in the issue queue of that module, you could point to this question.
    – Berdir
    Commented Feb 7, 2017 at 17:18
  • Thanks. You wright above 'or do the same to add template suggestions'. What do you mean exactly? Where/how do I achieve this?
    – meez
    Commented Feb 7, 2017 at 21:33
  • when I inspect/search with kint($variables); in the preprocess function, on the <ul> where I want to add the CSS class I found $var['attributes']['data-drupal-facet-id']. But how do I add a CSS class to this <ul> element in my preprocess function?
    – meez
    Commented Feb 8, 2017 at 5:36
1

Since you didn't clarify any specific module, i'll explain it with Paragraphs.

In the Paragraphs folder there is a folder called "templates", this will be the default template used by all fields that use paragraphs.

If you copy these templates and paste them into your own custom theme you can edit them as much as you like, using twig debug you can specify it per field.

Don't forget to clear your cache when editing!

Improve this answer
2
  • will above work for every contributed module? i want to override for ultimenu
    – Aditya Joshi
    Commented May 15, 2018 at 21:49
  • it does work for ultimenu contributed module
    – Aditya Joshi
    Commented May 15, 2018 at 21:54
0

In my case I am working with Drupal 9 and I wanted to change a twig template from Better Exposed Filter module. As Kimimaruu suggested I did not need a theme suggestion to create my own template. In most cases (most contrib modules and themes should support this) I just copied the template from the contributed module and placed it in my custom theme folder theme/custom/mytheme/templates/form.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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