coveo-1.0.0-alpha1/modules/coveo_atomic/templates/coveo-atomic-search.html.twig

{#
/**
 * @file
 * Default theme implementation for Coveo atomic search.
 *
 * Available variables:
 * - fields: A list of fields to include for result templates.
 * - facets: A list of structured objects describing main facet listing.
 * - tabs: A list of structured objects describing and tabs.
 *
 * @see template_preprocess_coveo_atomic_search
 *
 * Overall layout structure: https://docs.coveo.com/en/atomic/latest/usage/layouts/
 * Result layout structure: https://docs.coveo.com/en/atomic/latest/usage/displaying-results/result-sections/
 *
 * Look at max-height on atomic-result-section-excerpt to resolve line overflow problem. Something is
 * wrong with the calculation of this property and excerpts don't display correctly out of the box.
 *
 * @ingroup themeable
 */
#}

{# List of fields Coveo should include for result templates. #}
{# Example:
{% set facets = [
  {
    attributes: create_attribute({
      field: "drpl_type",
      label: "Type",
      'aria-label': "Facet for filtering by content type",
    })
  },
  {
    type: "category",
    attributes: create_attribute({
      field: "drpl_topic",
      label: "Topics",
      'aria-label': "Facet for filtering by topics",
    })
  }
] %}
#}
{# Example:
{#
{% set tabs = [
  {
    attributes: create_attribute({
    name: "all",
    label: "All",
    tooltip: "View all",
    'is-active': "true",
    'aria-label': "View all content",
    id: "all",
  })
  },
] %}
#}

<atomic-aria-live></atomic-aria-live>
<atomic-search-interface id="{{ id }}" fields-to-include='{{ fields|atomic_fields(search) }}'>
  <atomic-search-layout>
    {% block search_section %}
      {% embed '@coveo_atomic/atomic/atomic-layout-section.twig' with {atomic_section: "search"} %}
        {% block content %}
          {% if tabs %}
            {% block tab_section %}
              <atomic-tab-manager>
                {% for tab in tabs %}
                  {% include '@coveo_atomic/atomic/atomic-tab.twig' with tab only %}
                {% endfor %}
              </atomic-tab-manager>
            {% endblock %}
          {% endif %}
          <atomic-search-box aria-label="{{ 'Search content'|t }}" placeholder="{{ 'Search...'|t }}"></atomic-search-box>
        {% endblock %}
      {% endembed %}
    {% endblock %}


    {% if facets %}
      {% set facet_section %}
        {% block facet_section %}
          {# @see https://docs.coveo.com/en/atomic/latest/reference/components/atomic-facet-manager/ #}
          <atomic-facet-manager>
            {% for facet in facets %}
              {% include '@coveo_atomic/atomic/atomic-facet.twig' with facet only %}
            {% endfor %}
          </atomic-facet-manager>
        {% endblock %}
      {% endset %}

      {% embed '@coveo_atomic/atomic/atomic-layout-section.twig' with {atomic_section: "facets", facet_section: facet_section} only %}
        {% block content %}
          {{ facet_section }}
        {% endblock %}
      {% endembed %}
    {% endif %}

    {% set status_section %}
      {% block status_section %}
        {% embed '@coveo_atomic/atomic/atomic-layout-section.twig' with {atomic_section: "status"} %}
          {% block content %}
            <atomic-notifications></atomic-notifications>
            <atomic-query-summary></atomic-query-summary>
            <atomic-smart-snippet></atomic-smart-snippet>

            <atomic-sort-dropdown>
              <atomic-sort-expression label="Relevance" expression="relevancy"></atomic-sort-expression>
              <atomic-sort-expression label="Newest" expression="date descending"></atomic-sort-expression>
            </atomic-sort-dropdown>
            {# If you leave off this component, coveo will not detect spelling errors. #}
            <atomic-did-you-mean></atomic-did-you-mean>
          {% endblock %}
        {% endembed %}
      {% endblock %}
    {% endset %}
    {% set results_section %}
      {% block results_section %}
        {% embed '@coveo_atomic/atomic/atomic-layout-section.twig' with {atomic_section: "results"} %}
          {% block content %}
            <atomic-generated-answer></atomic-generated-answer>
            <atomic-result-list>
              <atomic-result-template>
                <template>
                  <atomic-result-section-title>
                    <atomic-result-link></atomic-result-link>
                  </atomic-result-section-title>
                  {# <atomic-result-section-visual image-size="small"></atomic-result-section-visual> #}
                  <atomic-result-section-title-metadata>
                    <atomic-result-fields-list>
                      <atomic-result-date field="date" format="MMMM D, YYYY"></atomic-result-date>
                    </atomic-result-fields-list>
                  </atomic-result-section-title-metadata>
                  <atomic-result-section-excerpt>
                    <atomic-result-text field="excerpt"></atomic-result-text>
                  </atomic-result-section-excerpt>
                  {# <atomic-result-section-bottom-metadata></atomic-result-section-bottom-metadata> #}
                </template>
              </atomic-result-template>
            </atomic-result-list>
            <atomic-query-error></atomic-query-error>
            <atomic-no-results></atomic-no-results>
          {% endblock %}
        {% endembed %}
      {% endblock %}
    {% endset %}
    {% set pagination_section %}
      {% block pagination_section %}
        {% embed '@coveo_atomic/atomic/atomic-layout-section.twig' with {atomic_section: "pagination"} %}
          {% block content %}
            <atomic-pager></atomic-pager>
            <atomic-results-per-page choices-displayed="25,50" initial-choice="25"></atomic-results-per-page>
          {% endblock %}
        {% endembed %}
      {% endblock %}
    {% endset %}

    {% embed '@coveo_atomic/atomic/atomic-layout-section.twig' with {
      atomic_section: "main",
      status_section: status_section,
      results_section: results_section,
      pagination_section: pagination_section,
    } %}
      {% block content %}
        {{ status_section }}
        {{ results_section }}
        {{ pagination_section }}
        {# End main section. #}
      {% endblock %}
    {% endembed %}
  </atomic-search-layout>
</atomic-search-interface>