custom/plugins/EsmComputer/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="footer-trust-elements p-3">
  5.         <div class="container">
  6.             <div class="row" style="margin-bottom: 1.5rem">
  7.                 <div class="col trust-element">
  8.                     <i class="fas fa-check"></i>
  9.                     <span>{{ 'footer.usp.guarantee'|trans|raw }}</span>
  10.                 </div>
  11.                 <div class="col trust-element">
  12.                     <i class="fas fa-check"></i>
  13.                     <span>{{ 'footer.usp.return'|trans|raw }}</span>
  14.                 </div>
  15.                 <div class="col trust-element">
  16.                     <i class="fas fa-check"></i>
  17.                     <span>{{ 'footer.usp.environment'|trans|raw }}</span>
  18.                 </div>
  19.             </div>
  20.             <div class="row">
  21.                 <div class="payment-method-images">
  22.                     <img src="{{  asset('bundles/esmcomputer/assets/images/Visa.svg')|sw_encode_url }}" alt="Visa" height="30px" loading="lazy"/>
  23.                     <img src="{{  asset('bundles/esmcomputer/assets/images/PayPal.svg')|sw_encode_url }}" alt="PayPal" height="30px" loading="lazy"/>
  24.                     <img src="{{  asset('bundles/esmcomputer/assets/images/Mastercard.svg')|sw_encode_url }}" alt="MasterCard" height="30px" loading="lazy"/>
  25.                     <img src="{{  asset('bundles/esmcomputer/assets/images/AmazonPay.svg')|sw_encode_url }}" alt="AmazonPay" height="30px" loading="lazy"/>
  26.                     <img src="{{  asset('bundles/esmcomputer/assets/images/Klarna-logo.svg')|sw_encode_url }}" alt="Klarna" class="klarnapayment" height="30px" loading="lazy"/>
  27.                 </div>
  28.                 <div>
  29.                     <span>
  30.                         <b> FOLGE UNS JETZT: </b> </span>
  31.                     <a href="https://www.instagram.com/esmcomputer/" target="_blank">
  32.                         <img src="{{ asset('bundles/esmcomputer/assets/images/Weiß_2.png') }}" alt="Instagram" title="Instagram" style="width: 30px; height: 30px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
  33.                     </a>
  34.                     <a href="https://www.facebook.com/esmcomputer/?locale=de_DE" target="_blank">
  35.                         <img src="{{ asset('bundles/esmcomputer/assets/images/Weiß_3.png') }}" alt="Facebook" title="Facebook" style="width: 30px; height: 30px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
  36.                     </a>
  37.                     <a href="https://www.youtube.com/channel/UCwn19G22Bkl0RKX8vtbyxsw" target="_blank">
  38.                         <img src="{{ asset('bundles/esmcomputer/assets/images/Weiß_4.png') }}" alt="Youtube" title="Youtube" style="width: 30px; height: 30px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px;cursor: pointer;">
  39.                     </a>
  40.                     <a href="https://www.tiktok.com/@esmcomputer" target="_blank">
  41.                         <img src="{{ asset('bundles/esmcomputer/assets/images/Weiß_1.png') }}" alt="Tiktok" title="Tiktok" style="width: 30px; height: 30px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px;cursor: pointer;">
  42.                     </a>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.     </div>
  48.     <div class="container">
  49.         {% block layout_footer_navigation %}
  50.             <div id="footerColumns"
  51.                  class="row footer-columns"
  52.                  data-collapse-footer="true">
  54.                 {% block layout_footer_payment_shipping_logos %}
  56.                 {% endblock %}
  58.                 {% block layout_footer_navigation_hotline %}
  59.                     <div class="col-lg-6 col-xl-3 footer-column js-footer-column">
  60.                         {% block layout_footer_navigation_hotline_headline %}
  61.                             <div class="footer-column-headline footer-headline js-footer-column-headline js-collapse-footer-column-trigger"
  62.                                  id="collapseFooterHotlineTitle"
  63.                                  data-target="#collapseFooterHotline"
  64.                                  aria-expanded="true"
  65.                                  aria-controls="collapseFooterHotline">
  66.                                 {{ 'footer.serviceHotlineHeadline'|trans|sw_sanitize }}
  67.                                 {% block layout_footer_navigation_hotline_icons %}
  68.                                     <div class="footer-column-toggle">
  69.                                 <span class="footer-plus-icon">
  70.                                     {% sw_icon 'plus' %}
  71.                                 </span>
  72.                                         <span class="footer-minus-icon">
  73.                                     {% sw_icon 'minus' %}
  74.                                 </span>
  75.                                     </div>
  76.                                 {% endblock %}
  77.                             </div>
  78.                         {% endblock %}
  80.                         {% block layout_footer_navigation_hotline_content %}
  81.                             <div id="collapseFooterHotline"
  82.                                  class="footer-column-content collapse js-footer-column-content footer-contact"
  83.                                  aria-labelledby="collapseFooterHotlineTitle">
  84.                                 <div class="footer-column-content-inner">
  85.                                     <p class="footer-contact-hotline">
  86.                                         {{ 'footer.serviceHotline'|trans|raw }}
  87.                                     </p>
  89.                                     <a href="/ueber-uns/" style="font-weight: bold;font-size: 1rem">
  90.                                         {{ 'footer.serviceAbout'|trans }}
  91.                                         <i class="fa-solid fa-angles-right"></i>
  92.                                     </a>
  93.                                     <a href="/karriere" style="font-weight: bold;font-size: 1rem">
  94.                                         {{ 'footer.serviceCareer'|trans }}
  95.                                         <i class="fa-solid fa-angles-right"></i>
  96.                                     </a>
  98.                                 </div>
  99.                             </div>
  100.                         {% endblock %}
  101.                     </div>
  102.                 {% endblock %}
  104.                 {% block layout_footer_navigation_columns %}
  105.                     {% for root in page.footer.extensions.leftCategory.tree %}
  106.                         <div class="col-lg-6 col-xl-3 footer-column js-footer-column">
  107.                             <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger"
  108.                                  data-target="#collapseFooterTitleOne"
  109.                                  aria-expanded="true"
  110.                                  aria-controls="collapseFooterOne">
  112.                                 {{ root.category.translated.name }}
  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>
  123.                             <div id="collapseFooterOne"
  124.                                  class="footer-column-content collapse js-footer-column-content"
  125.                                  aria-labelledby="collapseFooterTitleOne">
  126.                                 <div class="footer-column-content-inner">
  127.                                     <ul class="list-unstyled">
  128.                                         {% for treeItem in root.children %}
  129.                                             {% set category = treeItem.category %}
  130.                                             {% set name = category.translated.name %}
  131.                                             {% set externalLink = category.translated.externalLink %}
  132.                                             {% set openInNewTab = category.linkNewTab %}
  133.                                             <li class="footer-link-item">
  134.                                                 <a class="footer-link"
  135.                                                    href="{% if externalLink %}{{ externalLink }}{% else %}{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}{% endif %}"
  136.                                                    title="{{ name }}" {% if openInNewTab %} target="_blank" {%endif%}>
  137.                                                     {{ name }}
  138.                                                 </a>
  139.                                             </li>
  140.                                         {% endfor %}
  141.                                     </ul>
  142.                                 </div>
  143.                             </div>
  144.                         </div>
  145.                     {% endfor %}
  147.                     {% for root in page.footer.extensions.rightCategory.tree %}
  148.                         <div class="col-lg-6 col-xl-3 footer-column js-footer-column">
  149.                             <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger"
  150.                                  data-target="#collapseFooterTitleTwo"
  151.                                  aria-expanded="true"
  152.                                  aria-controls="collapseFooterTwo">
  154.                                 {{ root.category.translated.name }}
  155.                                 <div class="footer-column-toggle">
  156.                             <span class="footer-plus-icon">
  157.                                 {% sw_icon 'plus' %}
  158.                             </span>
  159.                                     <span class="footer-minus-icon">
  160.                                 {% sw_icon 'minus' %}
  161.                             </span>
  162.                                 </div>
  163.                             </div>
  165.                             <div id="collapseFooterTwo"
  166.                                  class="footer-column-content collapse js-footer-column-content"
  167.                                  aria-labelledby="collapseFooterTitleTwo">
  168.                                 <div class="footer-column-content-inner">
  169.                                     <ul class="list-unstyled">
  170.                                         <li><i class="fas fa-phone mr-2"></i>{{ 'footer.orderHotline'|trans|raw }}</li>
  171.                                         {% for treeItem in root.children %}
  172.                                             {% set category = treeItem.category %}
  173.                                             {% set name = category.translated.name %}
  174.                                             {% set externalLink = category.translated.externalLink %}
  175.                                             {% set openInNewTab = category.linkNewTab %}
  176.                                             <li class="footer-link-item">
  177.                                                 <a class="footer-link"
  178.                                                    href="{% if externalLink %}{{ externalLink }}{% else %}{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}{% endif %}"
  179.                                                    title="{{ name }}" {% if openInNewTab %} target="_blank" {%endif%}>
  180.                                                     {{ name }}
  181.                                                 </a>
  182.                                             </li>
  183.                                         {% endfor %}
  185.                                         <div class="mt-4 w-75 d-flex justify-content-around align-items-center">
  186.                                             <img src="{{ asset('bundles/esmcomputer/assets/images/shopsiegel_leadingshops.png')|sw_encode_url }}" width="75" loading="lazy" alt="Top Shop 2022"/>
  187.                                             <a href="https://www.it-recht-kanzlei.de/Service/pruefzeichen.php?sid=1e5e2-d7d3" target="_blank" class="itrk-pruefzeichen">
  188.                                                 <img src="https://www.it-recht-kanzlei.de/logo/Pruefzeichen_der_IT-Recht_Kanzlei.png?i=2e6cf-14e51-39cd-9083-1" alt="Vertreten durch die IT-Recht Kanzlei" width="75" loading="lazy"/>
  189.                                             </a>
  190.                                         </div>
  191.                                     </ul>
  192.                                 </div>
  193.                             </div>
  194.                         </div>
  195.                     {% endfor %}
  197.                     <div class="col-lg-6 col-xl-3 footer-column js-footer-column">
  198.                         <div class="footer-column-headline footer-headline js-footer-column-headline js-collapse-footer-column-trigger"
  199.                              id="collapseFooterHotlineTitle"
  200.                              data-target="#collapseFooterTitleThree"
  201.                              aria-expanded="true"
  202.                              aria-controls="collapseFooterTitleThree">
  203.                             {{ 'footer.newsletterHeadline'|trans|sw_sanitize }}
  204.                             <div class="footer-column-toggle">
  205.                                 <span class="footer-plus-icon">
  206.                                     {% sw_icon 'plus' %}
  207.                                 </span>
  208.                                 <span class="footer-minus-icon">
  209.                                     {% sw_icon 'minus' %}
  210.                                 </span>
  211.                             </div>
  212.                         </div>
  214.                         <div id="collapseFooterTitleThree"
  215.                              class="footer-column-content collapse js-footer-column-content footer-newsletter"
  216.                              aria-labelledby="collapseFooterTitleThree">
  217.                             <div class="footer-column-content-inner">
  218.                                 <p class="footer-contact-hotline">
  219.                                     {{ 'footer.newsletter'|trans|sw_sanitize }}
  220.                                 </p>
  221.                             </div>
  223.                             {% block layout_footer_navigation_newsletter_elements %}
  224.                                 <div>
  225.                                     <form class="newsletter-form" action="{{ path('frontend.form.newsletter.register.handle') }}"
  226.                                           method="post"
  227.                                           data-form-csrf-handler="true"
  228.                                           data-form-validation="true">
  229.                                         {% block cms_form_newsletter_hidden_fields %}
  230.                                             <div class="form-hidden-fields">
  231.                                                 {% block cms_form_newsletter_csrf %}
  232.                                                     {{ sw_csrf('frontend.form.newsletter.register.handle') }}
  233.                                                 {% endblock %}
  234.                                                 {% set formViolations = app.request.get('errors') %}
  236.                                                 <input type="hidden" name="option" value="{{ constant('Shopware\\Storefront\\Controller\\FormController::SUBSCRIBE') }}"/>
  237.                                                 <input type="submit" class="submit--hidden d-none" />
  238.                                             </div>
  239.                                         {% endblock %}
  240.                                         <div class="form-content">
  241.                                             <div class="form-group input-group mb-0">
  242.                                                 <label for="footerNewsletterMail" class="hidden"></label>
  243.                                                 <input name="email"
  244.                                                        type="email"
  245.                                                        id="footerNewsletterMail"
  246.                                                        placeholder="E-Mail Adresse"
  247.                                                        required="required"
  248.                                                        value="{{ data.get('email') }}"
  249.                                                        class="form-control{% if formViolations.getViolations('/email') %} is-invalid{% endif %}"/>
  251.                                                 {% if formViolations.getViolations( '/email' ) is not empty %}
  252.                                                     {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' with {
  253.                                                         violationPath: ('/email')
  254.                                                     } %}
  255.                                                 {% endif %}
  257.                                                 <button type="submit" class="btn btn-newsletter">
  258.                                             <span class="footer-newsletter-icon">
  259.                                                 {% sw_icon 'paperplane' style {'color': 'dark'} %}
  260.                                             </span>
  261.                                                 </button>
  262.                                             </div>
  263.                                             <div style="display: flex;align-items: flex-start;gap: 0.5rem;margin-top: 0.5rem;">
  264.                                                 <input id="newsletter_privacy" type="checkbox" required />
  265.                                                 <label for="newsletter_privacy">{{ "general.newsletter.privacy"|trans({
  266.                                                         '%url%': path('frontend.cms.page',{ id: config('core.basicInformation.privacyPage') })
  267.                                                     })|raw }}</label>
  268.                                             </div>
  269.                                         </div>
  270.                                     </form>
  271.                                 </div>
  274.                                 <script>
  275.                                     let form = document.querySelector('.newsletter-form');
  276.                                     form.addEventListener('submit', (event) => {
  277.                                         if(form.checkValidity()) {
  278.                                             fetch(form.action, {
  279.                                                 method: 'POST',
  280.                                                 body: new FormData(form)
  281.                                             }).then(response => response.json().then(data => {
  282.                                                 document.querySelector('#exampleModal .modal-body').innerHTML = "<span style='color: #000'>" + data[0].alert + "</span>" + '<br/>' + data[1].alert;
  283.                                                 document.querySelector('.newsletterModalButton').dispatchEvent(new Event('click', {'bubbles': true}))
  284.                                             }));
  285.                                         }
  286.                                         event.preventDefault();
  287.                                     })
  288.                                 </script>
  289.                                 <button class="newsletterModalButton d-none" type="button" data-toggle="modal" data-target="#exampleModal"></button>
  291.                                 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  292.                                     <div class="modal-dialog" role="document">
  293.                                         <div class="modal-content">
  294.                                             <div class="modal-header">
  295.                                                 <h5 class="modal-title" id="exampleModalLabel">{{ 'footer.modalNewsletterHeadline'|trans }}</h5>
  296.                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  297.                                                     <span aria-hidden="true" style="color: #000">&times;</span>
  298.                                                 </button>
  299.                                             </div>
  300.                                             <div class="modal-body">
  302.                                             </div>
  303.                                             <div class="modal-footer">
  304.                                                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'general.close'|trans }}</button>
  305.                                             </div>
  306.                                         </div>
  307.                                     </div>
  308.                                 </div>
  309.                             {% endblock %}
  310.                         </div>
  311.                     </div>
  312.                 {% endblock %}
  314.                 {% block layout_footer_vat %}
  315.                     <div class="footer-vat">
  316.                         <div class="container">
  317.                             <p>
  318.                                 © 2011 - {{ 'now' | date('Y') }} ESM-Computer GmbH
  319.                             </p>
  320.                         </div>
  321.                     </div>
  322.                 {% endblock %}
  324.                 {% block layout_footer_copyright %}
  325.                     
  326.                 {% endblock %}
  327.             </div>
  328.         {% endblock %}
  329.     </div>
  330. {% endblock %}