custom/plugins/ChespackTwoTheme/src/Resources/views/storefront/layout/navigation/flyout.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/navigation/flyout.html.twig' %}
  3. {# Use SW standard template with custom changes #}
  4. {% block layout_navigation_flyout %}
  5.     {% set category = navigationTree.category %}
  6.     {% set name = category.translated.name %}
  7.     {% block layout_navigation_flyout_bar %}
  8.         <div class="row navigation-flyout-bar">
  9.             {% block layout_navigation_flyout_bar_category %}
  10.                 <div class="col">
  11.                     <div class="navigation-flyout-category-link">
  12.                         {% block layout_navigation_flyout_bar_category_link %}
  13.                             {% if category.type == 'page' %}
  14.                                 <a class="nav-link"
  15.                                    href="{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}"
  16.                                    itemprop="url"
  17.                                    title="{{ name }}">
  18.                                     {% block layout_navigation_flyout_bar_category_link_text %}
  19.                                         {{ "general.toCategory"|trans|sw_sanitize }} {{ name }}
  20.                                         {% sw_icon 'arrow-right' style {
  21.                                             'color': 'primary',
  22.                                             'pack':'solid'
  23.                                         } %}
  24.                                     {% endblock %}
  25.                                 </a>
  26.                             {% endif %}
  27.                         {% endblock %}
  28.                     </div>
  29.                 </div>
  30.             {% endblock %}
  32.             {% block layout_navigation_flyout_bar_close %}
  33.                 <div class="col-auto">
  34.                     <div class="navigation-flyout-close js-close-flyout-menu">
  35.                         {% block layout_navigation_flyout_bar_close_content %}
  36.                             {% block layout_utilities_offcanvas_close_icon %}
  37.                                 {% sw_icon 'x' %}
  38.                             {% endblock %}
  39.                         {% endblock %}
  40.                     </div>
  41.                 </div>
  42.             {% endblock %}
  43.         </div>
  44.     {% endblock %}
  46.     {% block layout_navigation_flyout_content %}
  47.         {% set customFields = category.translated.customFields %}
  49.         <div class="row navigation-flyout-content{% if customFields.chespack_category_cta_active_1 == true or customFields.chespack_category_cta_active_2 == true %}{% else %} navigation-flyout-content-no-teaser{% endif %}">
  50.             {% block layout_navigation_flyout_categories %}
  51.                 <div class="{% if customFields.chespack_category_cta_active_1 == true or customFields.chespack_category_cta_active_2 == true %}col-7{% else %}col{% endif %}">
  52.                     <div class="navigation-flyout-categories">
  53.                         {% block layout_navigation_flyout_categories_recoursion %}
  54.                             {% sw_include '@Storefront/storefront/layout/navigation/categories.html.twig' with {
  55.                                 navigationTree: navigationTree.children,
  56.                                 navigationMedia: category.media,
  57.                                 page: page
  58.                             } only %}
  59.                         {% endblock %}
  60.                     </div>
  61.                 </div>
  62.             {% endblock %}
  64.             {# Added category CTA-teasers #}
  65.             {% block layout_navigation_flyout_teaser %}
  66.                 {% if customFields.chespack_category_cta_active_1 == true
  67.                     or customFields.chespack_category_cta_active_2 == true %}
  68.                     <div class="col-5">
  69.                         <div class="navigation-flyout-teaser">
  70.                             {% block layout_navigation_flyout_teaser_1 %}
  71.                                 {% if customFields.chespack_category_cta_active_1 == true %}
  72.                                     <div class="navigation-flyout-teaser-cta-1">
  73.                                         {% if customFields.chespack_category_cta_link_1 is not empty %}
  74.                                             <a class="navigation-flyout-teaser-link"
  75.                                                href="{{ customFields.chespack_category_cta_link_1 }}"
  76.                                                {% if customFields.chespack_category_cta_link_new_window_1 %}target="_blank"{% endif %}
  77.                                                title="{{ customFields.chespack_category_cta_title_1 }}">
  78.                                         {% endif %}
  79.                                             <div class="navigation-flyout-teaser-texts">
  80.                                                {% if customFields.chespack_category_cta_title_1 %}
  81.                                                    <div class="navigation-flyout-teaser-title h4">
  82.                                                        {{ customFields.chespack_category_cta_title_1 }}
  83.                                                    </div>
  84.                                                 {% endif %}
  85.                                                 {% if customFields.chespack_category_cta_text_1 %}
  86.                                                    <div class="navigation-flyout-teaser-text">
  87.                                                        {{ customFields.chespack_category_cta_text_1 }}
  88.                                                    </div>
  89.                                                 {% endif %}
  90.                                             </div>
  92.                                             {% if categoryMediaFirst is not empty %}
  93.                                                 <div class="img-wrap">
  94.                                                     {% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {
  95.                                                         media: categoryMediaFirst,
  96.                                                         sizes: {
  97.                                                             'default': '250px'
  98.                                                         },
  99.                                                         attributes: {
  100.                                                             'alt': (customFields.chespack_category_cta_title_1 ?: ''),
  101.                                                             'title': (customFields.chespack_category_cta_title_1 ?: '')
  102.                                                         }
  103.                                                     } %}
  104.                                                 </div>
  105.                                             {% endif %}
  107.                                             {% sw_icon 'arrow-head-right' %}
  109.                                         {% if customFields.chespack_category_cta_link_1 is not empty %}
  110.                                             </a>
  111.                                         {% endif %}
  112.                                     </div>
  113.                                 {% endif %}
  114.                             {% endblock %}
  116.                             {% block layout_navigation_flyout_teaser_2 %}
  117.                                 {% if customFields.chespack_category_cta_active_2 == true %}
  118.                                     <div class="navigation-flyout-teaser-cta-2">
  119.                                         {% if customFields.chespack_category_cta_link_2 is not empty %}
  120.                                             <a class="navigation-flyout-teaser-link"
  121.                                                href="{{ customFields.chespack_category_cta_link_2 }}"
  122.                                                {% if customFields.chespack_category_cta_link_new_window_2 %}target="_blank"{% endif %}
  123.                                                title="{{ customFields.chespack_category_cta_title_2 }}">
  124.                                         {% endif %}
  125.                                             <div class="navigation-flyout-teaser-texts">
  126.                                                {% if customFields.chespack_category_cta_title_2 %}
  127.                                                    <div class="navigation-flyout-teaser-title h4">
  128.                                                        {{ customFields.chespack_category_cta_title_2 }}
  129.                                                    </div>
  130.                                                 {% endif %}
  131.                                             </div>
  133.                                             {% if categoryMediaSecond is not empty %}
  134.                                                 <div class="img-wrap">
  135.                                                     {% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {
  136.                                                         media: categoryMediaSecond,
  137.                                                         sizes: {
  138.                                                             'default': '250px'
  139.                                                         },
  140.                                                         attributes: {
  141.                                                             'alt': (customFields.chespack_category_cta_title_2 ?: ''),
  142.                                                             'title': (customFields.chespack_category_cta_title_2 ?: '')
  143.                                                         }
  144.                                                     } %}
  145.                                                 </div>
  146.                                             {% endif %}
  148.                                             {% if customFields.chespack_category_cta_text_2 %}
  149.                                                 <div class="navigation-flyout-teaser-text h4">
  150.                                                     {{ customFields.chespack_category_cta_text_2 }}
  151.                                                 </div>
  152.                                             {% endif %}
  154.                                             {% sw_icon 'arrow-head-right' %}
  156.                                         {% if customFields.chespack_category_cta_link_2 is not empty %}
  157.                                             </a>
  158.                                         {% endif %}
  159.                                     </div>
  160.                                 {% endif %}
  161.                             {% endblock %}
  162.                         </div>
  163.                     </div>
  164.                 {% endif %}
  165.             {% endblock %}
  166.         </div>
  167.     {% endblock %}
  168. {% endblock %}