How can I add a wrapper to a group by in Drupal 8 views?

Question

I have a (drupal 8.3) view using group by that outputs html like:

<div class="view-content">
  <h3>Category 1</h3>
  <div class="view-row"></div>
  <div class="view-row"></div>
  <div class="view-row"></div>
  <h3>Category 2</h3>
  <div class="view-row"></div>
  <div class="view-row"></div>
  <div class="view-row"></div>
</div>

I would like to hook or template the group by to use a wrapper and achieve:

<div class="view-content">
  <div class="group-wrapper">
    <h3>Category 1</h3>
    <div class="view-row"></div>
    <div class="view-row"></div>
    <div class="view-row"></div>
  </div>
  <div class="group-wrapper">
    <h3>Category 2</h3>
    <div class="view-row"></div>
    <div class="view-row"></div>
    <div class="view-row"></div>
  </div>
</div>

Any ideas how I can accomplish this using Bootstrap theme?

Answer 1

You can accomplish this by customizing the views-view-unformatted.html.twig file:

• Use Twig debugging to determine which version of this template is currently being used. Most likely, it's views-view-unformatted.html.twig in /core/modules/views/templates
• Copy that file to your theme's templates folder.
• Rename the template to this: views-view-unformatted--your-view--your-display.html.twig where your-view is the machine name of your view and your-display is the machine name of your view display.

• Add this code to the template file you created:

  <div class="group-wrapper">
    {% for row in rows %}
      {%
      set row_classes = [
      default_row_class ? 'views-row',
      ]
      %}
    <div{{ row.attributes.addClass(row_classes) }}>
      {% if loop.first and title  %}
        <h3>{{ title }}</h3>
          {% endif %}
          {{ row.content }}
     </div>
    {% endfor %}
  </div>
  

• Flush your site's caches

Please note that spaces in your machine name are repalced with dashes in the name of the template file.