orange_ecom_starter-2.0.x-dev/templates/pages/page--products.html.twig

{% extends "page.html.twig" %}

{% block page_body %}
  {#
    Render sidebar to be able to check if it is truly empty.
    Issue: https://www.drupal.org/node/953034.
  #}
  {% set left_sidebar_rendered = render_var(page.left_sidebar) %}
  {# Set column class based on sidebar. #}
  {% set col_class = left_sidebar_rendered or page.store_facets ? 'col-sm-8 col-md-9' : 'col-sm-12' %}

  <div class="site-content">
    <div class="container">
      {% if page.header %}
        <div class="site-content__header">
          {{ page.header }}
        </div>
      {% endif %}

      {% if page.store_filters %}
        <div class="row">
          <div class="col-md-12">
            <div class="store-filters">
              {{ page.store_filters }}
              <div class="store-display-switcher">
                <a href="{{ store_grid_url }}" class="store-display-switcher__item store-display-switcher__item--grid {{ (store_list_view_enabled) != 1 ? 'is-active' : '' }}" title="{{ 'Grid View'|t }}" aria-label="{{ 'Grid View'|t }}"><i class="fas fa-th-large" aria-hidden="true"></i></a>
                <a href="{{ store_list_url }}" class="store-display-switcher__item store-display-switcher__item--list {{ (store_list_view_enabled) == 1 ? 'is-active' : '' }}" title="{{ 'List View'|t }}" aria-label="{{ 'List View'|t }}"><i class="fas fa-bars" aria-hidden="true"></i></a>
              </div>
            </div>
          </div>
        </div>
      {% endif %}

      <div class="row">
        {% if left_sidebar_rendered or page.store_facets %}
          <div class="col-sm-4 col-md-3">
            <aside class="site-sidebar site-sidebar--store" role="complementary">
              {% if page.store_facets %}
                <div class="store-facets">
                  {# Mobile toggle for facets. #}
                  <a href="#" class="store-facets__mobile-toggle">{{ 'Refine Filters'|t }}</a>
                  {# / Mobile toggle for facets. #}

                  <div class="store-facets__wrapper">
                    <div class="store-facets__content">
                      <a href="#" class="store-facets__mobile-close" aria-label="{{ 'Close'|t }}"></a>
                      {{ page.store_facets }}
                    </div>
                  </div>
                </div>
              {% endif %}

              {% if left_sidebar_rendered %}
                {{ page.left_sidebar }}
              {% endif %}
            </aside>
          </div>
        {% endif %}

        <div class="{{ col_class }}">
          <main class="content__main-content clearfix {{ (store_list_view_enabled) == 1 ? 'store-list-view' : 'store-grid-view' }}" role="main">
            <div class="visually-hidden"><a id="main-content" tabindex="-1"></a></div>
            {% if page.highlighted %}
              {{ page.highlighted }}
            {% endif %}
            {% if page.above_content %}
              {{ page.above_content }}
            {% endif %}

            {# Display the searched category term. #}
            {% if searched_category_term %}
              <div class="store__category-teaser">
                {{ searched_category_term }}
              </div>
            {% endif %}

            {% if page.content %}
              {{ page.content }}
            {% endif %}
            {% if page.below_content %}
              {{ page.below_content }}
            {% endif %}
          </main>
        </div>
      </div>
    </div>
  </div>
{% endblock page_body %}