custom/plugins/sw-asus/src/Resources/views/storefront/layout/footer/footer.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %}
  3. {% block layout_footer_inner_container %}
  4.     <div class="container">
  5.     {% block layout_footer_navigation %}
  6.         <div class="footer-top">
  7.             <div class="footer-top__element footer-top__shipping">
  8.                 {% sw_icon 'shipping' style { 'pack':'footer' } %}
  9.                 <div>
  10.                     <p>{{ 'footer.footerShippingTitle'|trans|sw_sanitize }}</p>
  11.                     <p>{{ 'footer.footerShippingSubtitle'|trans|sw_sanitize }}</p>
  12.                 </div>
  13.             </div>
  14.             <div class="footer-top__element footer-top__support">
  15.                 {% sw_icon 'support' style { 'pack':'footer' } %}
  16.                 <div>
  17.                     <p>{{ 'footer.footerSupportTitle'|trans|sw_sanitize }}</p>
  18.                     <p>{{ 'footer.footerSupportSubtitle'|trans|sw_sanitize }}</p>
  19.                 </div>
  20.             </div>
  21.             <div class="footer-top__element footer-top__return">
  22.                 {% sw_icon 'return' style { 'pack':'footer' } %}
  23.                 <div>
  24.                     <p>{{ 'footer.footerReturnTitle'|trans|sw_sanitize }}</p>
  25.                     <p>{{ 'footer.footerReturnSubtitle'|trans|sw_sanitize }}</p>
  26.                 </div>
  27.             </div>
  28.             <div class="footer-top__element footer-top__protect">
  29.                 {% sw_icon 'protect' style { 'pack':'footer' } %}
  30.                 <div>
  31.                     <p>{{ 'footer.footerProtectTitle'|trans|sw_sanitize }}</p>
  32.                     <p>{{ 'footer.footerProtectSubtitle'|trans|sw_sanitize }}</p>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.         <div class="break-line"></div>
  38.         <div id="footerColumns" class="row justify-content-between footer-columns" data-collapse-footer="true">
  39.             {% block layout_footer_navigation_hotline %}
  40.                 <div class="footer-column col-lg-3 js-footer-column p-0">
  41.                     {% block layout_footer_navigation_hotline_headline %}
  42.                         <div class="footer-column-headline footer-headline js-footer-column-headline js-collapse-footer-column-trigger"
  43.                              id="collapseFooterHotlineTitle"
  44.                              data-target="#collapseFooterHotline"
  45.                              aria-expanded="true"
  46.                              aria-controls="collapseFooterHotline">
  47.                             {{ 'footer.serviceHotlineHeadline'|trans|sw_sanitize }}
  48.                             {% block layout_footer_navigation_hotline_icons %}
  49.                                 <div class="footer-column-toggle">
  50.                                     <span class="footer-plus-icon">
  51.                                         {% sw_icon 'plus' %}
  52.                                     </span>
  53.                                     <span class="footer-minus-icon">
  54.                                         {% sw_icon 'minus' %}
  55.                                     </span>
  56.                                 </div>
  57.                             {% endblock %}
  58.                         </div>
  59.                     {% endblock %}
  61.                     {% block layout_footer_navigation_hotline_content %}
  62.                         <div id="collapseFooterHotline" class="footer-column-content collapse js-footer-column-content footer-contact" aria-labelledby="collapseFooterHotlineTitle">
  63.                             <div class="footer-column-content-inner">
  64.                                 <p class="footer-contact-hotline">
  65.                                     {{ 'footer.serviceHotline'|trans|sw_sanitize }}
  66.                                 </p>
  67.                             </div>
  68.                         </div>
  69.                     {% endblock %}
  70.                     <div class="break-line d-md-none"></div>
  71.                 </div>
  72.             {% endblock %}
  74.             {% block layout_footer_navigation_columns %}
  75.                 {% for root in page.footer.navigation.tree %}
  76.                     {% block layout_footer_navigation_column %}
  77.                         <div class="footer-column col-lg-3 p-0 js-footer-column footer-column{{ loop.index }}">
  78.                             {% block layout_footer_navigation_information_headline %}
  79.                                 {{ parent() }}
  80.                             {% endblock %}
  82.                             {% block layout_footer_navigation_information_content %}
  83.                                 <div id="collapseFooter{{ loop.index }}" class="footer-column-content collapse js-footer-column-content" aria-labelledby="collapseFooterTitle{{ loop.index }}">
  84.                                     <div class="footer-column-content-inner">
  85.                                         {% block layout_footer_navigation_information_links %}
  86.                                             <ul class="list-unstyled">
  87.                                                 {% for treeItem in root.children %}
  88.                                                     {% set category = treeItem.category %}
  89.                                                     {% set name = category.translated.name %}
  90.                                                     {% set externalLink = category.translated.externalLink %}
  91.                                                     {% block layout_footer_navigation_information_link_item %}
  92.                                                         <li class="footer-link-item">
  93.                                                             {% block layout_footer_navigation_information_link %}
  94.                                                                 {{ parent() }}
  95.                                                             {% endblock %}
  96.                                                         </li>
  97.                                                     {% endblock %}
  98.                                                 {% endfor %}
  99.                                             </ul>
  100.                                         {% endblock %}
  101.                                     </div>
  102.                                 </div>
  103.                             {% endblock %}
  104.                             <div class="break-line d-md-none"></div>
  105.                         </div>
  106.                     {% endblock %}
  107.                 {% endfor %}
  108.             {% endblock %}
  110.             <div class="footer-column col-lg-3 p-0 js-footer-column column-newsletter">
  111.                 <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger" data-target="#collapseFooterTitleNewsletter" aria-expanded="true" aria-controls="collapseFooterNewsletter">
  112.                     {{ 'footer.newsletter.headLine'|trans|sw_sanitize }}
  113.                     <div class="footer-column-toggle">
  114.                         <span class="footer-plus-icon">
  115.                             {% sw_icon 'plus' %}
  116.                         </span>
  117.                         <span class="footer-minus-icon">
  118.                             {% sw_icon 'minus' %}
  119.                         </span>
  120.                     </div>
  121.                 </div>
  122.                 {% set formViolations = app.request.get('errors') %}
  123.                 <div class="footer-column-content collapse js-footer-column-content footer-community-rog cms-block">
  124.                     <div class="footer-column-content-inner footer-newsletter-wrapper cms-element-form">
  125.                         {{ 'footer.newsletter.infoText'|trans|sw_sanitize }}
  126.                         {% sw_include '@Storefront/storefront/element/cms-element-form/form-types/newsletter-form.html.twig'
  127.                             with {
  128.                             action: 'frontend.form.newsletter.register.handle',
  129.                             submitText: 'newsletter.formSubmit'
  130.                         }
  131.                         %}
  132.                     </div>
  133.                 </div>
  134.                 <div class="break-line d-md-none"></div>
  135.             </div>
  138.             <div class="footer-column col-lg-3 p-0 js-footer-column column-payment">
  139.                 <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger" data-target="#collapseFooterTitlePayment" aria-expanded="true" aria-controls="collapseFooterPayment">
  140.                     {{ 'footer.footerPaymentHeadLine'|trans|sw_sanitize }}
  141.                     <div class="footer-column-toggle">
  142.                         <span class="footer-plus-icon">
  143.                             {% sw_icon 'plus' %}
  144.                         </span>
  145.                         <span class="footer-minus-icon">
  146.                             {% sw_icon 'minus' %}
  147.                         </span>
  148.                     </div>
  149.                 </div>
  150.                 <div class="footer-column-content collapse js-footer-column-content footer-payment">
  151.                     <div class="footer-column-content-inner">
  152.                         {% block layout_footer_payment_shipping_logos %}
  153.                             <div class="footer-logos">
  154.                                 {% block layout_footer_payment_logos %}
  155.                                     {% for paymentMethod in page.salesChannelPaymentMethods %}
  156.                                         {% block layout_footer_payment_logo %}
  157.                                             {% if paymentMethod.media %}
  158.                                                 <div class="footer-logo is-payment">
  159.                                                     {% sw_thumbnails 'footer-payment-image-thumbnails' with {
  160.                                                         media: paymentMethod.media,
  161.                                                         sizes: {
  162.                                                             'default': '100px'
  163.                                                         },
  164.                                                         attributes: {
  165.                                                             'class': 'img-fluid footer-logo-image',
  166.                                                             'alt': (paymentMethod.media.translated.alt ?: paymentMethod.translated.name),
  167.                                                             'title': (paymentMethod.media.translated.title ?: paymentMethod.translated.name)
  168.                                                         }
  169.                                                     } %}
  170.                                                 </div>
  171.                                             {% endif %}
  172.                                         {% endblock %}
  173.                                     {% endfor %}
  174.                                 {% endblock %}
  175.                             </div>
  176.                         {% endblock %}
  177.                     </div>
  178.                 </div>
  179.                 <div class="break-line d-md-none"></div>
  180.             </div>
  182.             <div class="footer-column col-lg-3 p-0 js-footer-column column-shipping">
  183.                 <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger" data-target="#collapseFooterTitleShipping" aria-expanded="true" aria-controls="collapseFooterShipping">
  184.                     {{ 'footer.footerShippingHeadLine'|trans|sw_sanitize }}
  185.                     <div class="footer-column-toggle">
  186.                         <span class="footer-plus-icon">
  187.                             {% sw_icon 'plus' %}
  188.                         </span>
  189.                         <span class="footer-minus-icon">
  190.                             {% sw_icon 'minus' %}
  191.                         </span>
  192.                     </div>
  193.                 </div>
  194.                 <div class="footer-column-content collapse js-footer-column-content footer-shipping">
  195.                     <div class="footer-column-content-inner">
  196.                         <div class="footer-logos">
  197.                             {% for shippingMethod in page.salesChannelShippingMethods %}
  198.                                 {% if shippingMethod.media %}
  199.                                     <div class="footer-logo is-shipping">
  200.                                         {% sw_thumbnails 'footer-shipping-image-thumbnails' with {
  201.                                             media: shippingMethod.media,
  202.                                             sizes: {
  203.                                                 'default': '100px'
  204.                                             },
  205.                                             attributes: {
  206.                                                 'class': 'img-fluid footer-logo-image',
  207.                                                 'alt': (shippingMethod.media.translated.alt ?: shippingMethod.translated.name),
  208.                                                 'title': (shippingMethod.media.translated.title ?: shippingMethod.translated.name)
  209.                                             }
  210.                                         } %}
  211.                                     </div>
  212.                                 {% endif %}
  213.                             {% endfor %}
  214.                         </div>
  215.                     </div>
  216.                 </div>
  217.                 <div class="break-line d-md-none"></div>
  218.             </div>
  220.             <div class="footer-column col-lg-3 p-0 js-footer-column column-community-asus">
  221.                 <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger" data-target="#collapseFooterTitleCommunityAsus" aria-expanded="true" aria-controls="collapseFooterCommunityAsus">
  222.                     {{ 'footer.footerCommunityHeadLineAsus'|trans|sw_sanitize }}
  223.                     <div class="footer-column-toggle">
  224.                         <span class="footer-plus-icon">
  225.                             {% sw_icon 'plus' %}
  226.                         </span>
  227.                         <span class="footer-minus-icon">
  228.                             {% sw_icon 'minus' %}
  229.                         </span>
  230.                     </div>
  231.                 </div>
  232.                 <div class="footer-column-content collapse js-footer-column-content footer-community-asus">
  233.                     <div class="footer-column-content-inner">
  234.                         <ul class="list-unstyled">
  235.                             <li class="footer-link-item">
  236.                                 <div class="footer-community-icons">
  237.                                     <a href="{{ 'footer.footerCommunityInstagramLink'|trans|sw_sanitize }}">
  238.                                         {% sw_icon 'icon-footer-instagram' style { 'pack':'footer' } %}
  239.                                     </a>
  240.                                     <a href="{{ 'footer.footerCommunityTwitterLink'|trans|sw_sanitize }}">
  241.                                         {% sw_icon 'icon-footer-twitter' style { 'pack':'footer' } %}
  242.                                     </a>
  243.                                     <a href="{{ 'footer.footerCommunityYoutubeLink'|trans|sw_sanitize }}">
  244.                                         {% sw_icon 'icon-footer-yt' style { 'pack':'footer' } %}
  245.                                     </a>
  246.                                     <a href="{{ 'footer.footerCommunityFacebookLink'|trans|sw_sanitize }}">
  247.                                         {% sw_icon 'icon-footer-facebook' style { 'pack':'footer' } %}
  248.                                     </a>
  249.                                 </div>
  250.                             </li>
  251.                         </ul>
  252.                     </div>
  253.                 </div>
  254.                 <div class="break-line d-md-none"></div>
  255.             </div>
  257.             <div class="footer-column col-lg-3 p-0 js-footer-column column-community-rog">
  258.                 <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger" data-target="#collapseFooterTitleCommunityRog" aria-expanded="true" aria-controls="collapseFooterCommunityRog">
  259.                     {{ 'footer.footerCommunityHeadLineRog'|trans|sw_sanitize }}
  260.                     <div class="footer-column-toggle">
  261.                         <span class="footer-plus-icon">
  262.                             {% sw_icon 'plus' %}
  263.                         </span>
  264.                         <span class="footer-minus-icon">
  265.                             {% sw_icon 'minus' %}
  266.                         </span>
  267.                     </div>
  268.                 </div>
  269.                 <div class="footer-column-content collapse js-footer-column-content footer-community-rog">
  270.                     <div class="footer-column-content-inner">
  271.                         <ul class="list-unstyled">
  272.                             <li class="footer-link-item">
  273.                                 <div class="footer-community-icons">
  274.                                     <a href="{{ 'footer.footerCommunityROGInstagramLink'|trans|sw_sanitize }}">
  275.                                         {% sw_icon 'icon-footer-instagram-rog' style { 'pack':'footer' } %}
  276.                                     </a>
  277.                                     <a href="{{ 'footer.footerCommunityROGTwitterLink'|trans|sw_sanitize }}">
  278.                                         {% sw_icon 'icon-footer-twitte-rog' style { 'pack':'footer' } %}
  279.                                     </a>
  280.                                     <a href="{{ 'footer.footerCommunityROGYoutubeLink'|trans|sw_sanitize }}">
  281.                                         {% sw_icon 'icon-footer-yt-rog' style { 'pack':'footer' } %}
  282.                                     </a>
  283.                                     <a href="{{ 'footer.footerCommunityROGFacebookLink'|trans|sw_sanitize }}">
  284.                                         {% sw_icon 'icon-footer-facebook-rog' style { 'pack':'footer' } %}
  285.                                     </a>
  286.                                 </div>
  287.                             </li>
  288.                         </ul>
  289.                     </div>
  290.                 </div>
  291.                 <div class="break-line d-md-none"></div>
  292.             </div>
  294.         </div>
  295.     {% endblock %}
  297.     {% block layout_footer_bottom %}
  298.         <div class="break-line d-none d-md-block"></div>
  299.         <div class="footer-basicInformation row">
  300.             <div class="footer-basicInformation-links col-12 col-md-6 p-0">
  301.                 {% block layout_footer_service_menu_content %}
  302.                     <ul class="footer-service-menu-list list-unstyled">
  303.                         {% for serviceMenuItem in page.header.serviceMenu %}
  304.                             {% block layout_footer_service_menu_item %}
  305.                                 <li class="footer-service-menu-item">
  306.                                     <a class="footer-service-menu-link"
  307.                                        href="{% if serviceMenuItem.externalLink %}{{ serviceMenuItem.externalLink }}{% else %}{{ seoUrl('frontend.navigation.page', { navigationId: serviceMenuItem.id }) }}{% endif %}"
  308.                                        title="{{ serviceMenuItem.translated.name }}">
  309.                                         {{ serviceMenuItem.translated.name }}
  310.                                     </a>
  311.                                 </li>
  312.                             {% endblock %}
  313.                         {% endfor %}
  314.                     </ul>
  315.                 {% endblock %}
  316.             </div>
  317.             <div class="footer-basicInformation-global col-12 col-md-6 p-0">
  318.                 {% if config('core.basicInformation.imprintPage') is not null %}
  319.                     {{ "footer.footerBasicInformationRights"|trans({
  320.                         '%url%': path('frontend.cms.page', { id: config('core.basicInformation.imprintPage') })
  321.                     })|raw }}
  322.                 {% endif %}
  323.             </div>
  324.         </div>
  326.         <script src="https://fastly.jsdelivr.net/npm/vanilla-lazyload@17.3.0/dist/lazyload.min.js"></script>
  327.         <script data-lazy-load-script>
  328.             let lazyLoadInstance = new LazyLoad({
  329.                 elements_selector: "img, iframe, source",
  330.                 threshold: 600
  331.             });
  332.             function asyncLazyLoad(){
  333.                 let timeout = setTimeout(function(){
  334.                     let lazyLoadInstance = new LazyLoad({
  335.                         elements_selector: "img, iframe, source",
  336.                         threshold: 600
  337.                     });
  338.                 },500);
  339.             }
  340.             window.addEventListener('Listing/afterRenderResponse', asyncLazyLoad);
  341.             window.addEventListener('resize', asyncLazyLoad);
  342.             window.addEventListener('load', asyncLazyLoad);
  344.             document.querySelector('.header-cart').addEventListener('click', function() {
  345.                 let timeout = setTimeout(function(){
  346.                     let lazyLoadInstance = new LazyLoad({
  347.                         elements_selector: "img, iframe, source",
  348.                         threshold: 600
  349.                     });
  350.                 },3000);
  351.             });
  352.             document.querySelector('.btn-buy').addEventListener('click', function() {
  353.                 let timeout = setTimeout(function(){
  354.                     let lazyLoadInstance = new LazyLoad({
  355.                         elements_selector: "img, iframe, source",
  356.                         threshold: 600
  357.                     });
  358.                 },3000);
  359.             });
  360.         </script>
  361.     {% endblock %}
  362.     </div>
  363. {% endblock %}