1

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">
  • 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 Feb 6 '17 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 Feb 6 '17 at 12:58
  • @Berdir do you have any suggestions? Thanks – meez Feb 6 '17 at 18:42
0

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.

  • 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 Feb 7 '17 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 Feb 7 '17 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 Feb 7 '17 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 Feb 8 '17 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!

  • will above work for every contributed module? i want to override for ultimenu – Aditya Joshi May 15 '18 at 21:49
  • it does work for ultimenu contributed module – Aditya Joshi May 15 '18 at 21:54

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.