custom/plugins/CogiFooterKit/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. {% set extensionMedia = page.footer.extensions['Media'] %}
  4. {% set extensionFooterKit = page.footer.extensions['CogiFooterKit'] %}
  5. {% set extensionProduct = page.footer.extensions['Product'] %}
  6. {% set footerKit = extensionFooterKit.get('footerKit')|first %}
  7. {% set media = extensionMedia.get('media') %}
  8. {% set product = extensionProduct.get('product') %}
  9. {% set mediaUrl = "" %}
  10. {% set navigationBackgroundImageUrl = "" %}
  11. {% set isSalesChannel = false %}
  13. {% if footerKit is not empty %}
  14.     {% if checkFooterStorefrontId(context, footerKit.salesChannelId) %}
  15.         {% set isSalesChannel = true %}
  16.     {% endif %}
  17. {% endif %}
  19.  {% for itemMedia in media %}
  20.         {% if footerKit.navigationConfig.backgroundImage == itemMedia.id %}
  21.             {% set navigationBackgroundImageUrl = itemMedia.url %}
  22.         {% endif %}
  23. {% endfor %}
  25. {% block layout_footer_inner_container %}
  27.     {% if isSalesChannel %}
  28.         <div id="footerColumns"
  29.             class="row footer-columns col-12 m-0 p-0 border-top border-bottom-0"
  30.             data-collapse-footer="true"
  31.             style= "
  32.                 background: {{ footerKit.navigationConfig.backgroundColor }};
  33.                 {% if navigationBackgroundImageUrl %}
  34.                     background-image: url('{{ navigationBackgroundImageUrl }}');
  35.                     background-position: {{ footerKit.navigationConfig.backgroundImagePosition }};
  36.                     background-size: {{ footerKit.navigationConfig.backgroundImageFit}};
  37.                     background-repeat: {{ footerKit.navigationConfig.backgroundImageRepeat }};
  38.                 {% endif %}
  39.                 ">
  41.             {% if footerKit.navigationConfig.active %}
  44.                 <div class="container col-12"
  45.                 style="padding: {{ footerKit.navigationConfig.verticalSpacing ? footerKit.navigationConfig.verticalSpacing : "25px" }} {{ footerKit.navigationConfig.horizontalSpacing ? footerKit.navigationConfig.horizontalSpacing : "25px" }} !important;
  46.                 ">
  47.                     <div class="row">
  48.                         {% if footerKit.navigationConfig.serviceHotline %}
  49.                             {% block layout_footer_navigation_hotline %}
  50.                                 <div class="col-md-3 footer-column js-footer-column pb-4">
  51.                                     {% block layout_footer_navigation_hotline_headline %}
  52.                                         <div class="footer-column-headline footer-headline js-footer-column-headline js-collapse-footer-column-trigger"
  53.                                                 id="collapseFooterHotlineTitle"
  54.                                                 data-target="#collapseFooterHotline"
  55.                                                 aria-expanded="true"
  56.                                                 aria-controls="collapseFooterHotline"
  57.                                                 style="color: {{ footerKit.navigationConfig.fontColor }};">
  58.                                             {{ 'footer.serviceHotlineHeadline'|trans|sw_sanitize }}
  59.                                             {% block layout_footer_navigation_hotline_icons %}
  60.                                                 <div class="footer-column-toggle">
  61.                                                     <span class="footer-plus-icon">
  62.                                                         {% sw_icon 'plus' %}
  63.                                                     </span>
  64.                                                     <span class="footer-minus-icon">
  65.                                                         {% sw_icon 'minus' %}
  66.                                                     </span>
  67.                                                 </div>
  68.                                             {% endblock %}
  69.                                         </div>
  70.                                     {% endblock %}
  72.                                     {% block layout_footer_navigation_hotline_content %}
  73.                                         <div id="collapseFooterHotline"
  74.                                                 class="footer-column-content collapse js-footer-column-content footer-contact"
  75.                                                 aria-labelledby="collapseFooterHotlineTitle">
  76.                                             <div class="footer-column-content-inner">
  77.                                                 <p class="footer-contact-hotline">
  78.                                                     {{ 'footer.serviceHotline'|trans|sw_sanitize }}
  79.                                                 </p>
  80.                                             </div>
  81.                                             <div class="footer-contact-form">
  82.                                                 {{ 'footer.serviceContactLink'|trans({
  83.                                                     '%url%': path('frontend.cms.page', { id: config('core.basicInformation.contactPage') })
  84.                                                 })|raw }}
  85.                                             </div>
  86.                                         </div>
  87.                                     {% endblock %}
  88.                                 </div>
  89.                             {% endblock %}
  90.                         {% endif %}
  92.                         {% if footerKit.navigationConfig["active"] %}
  93.                             {% block layout_footer_navigation_columns %}
  94.                                 {% for root in page.footer.navigation.tree %}
  95.                                     {% block layout_footer_navigation_column %}
  96.                                         <div class="col-md-3 footer-column js-footer-column">
  97.                                             {% block layout_footer_navigation_information_headline %}
  98.                                                 <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger"
  99.                                                         data-target="#collapseFooterTitle{{ loop.index }}"
  100.                                                         aria-expanded="true"
  101.                                                         aria-controls="collapseFooter{{ loop.index }}"
  102.                                                         style="color: {{ footerKit.navigationConfig.fontColor }};">
  103.                                                     {{ root.category.translated.name }}
  104.                                                     {% block layout_footer_navigation_information_icons %}
  105.                                                         <div class="footer-column-toggle">
  106.                                                             <span class="footer-plus-icon">
  107.                                                                 {% sw_icon 'plus' %}
  108.                                                             </span>
  109.                                                             <span class="footer-minus-icon">
  110.                                                                 {% sw_icon 'minus' %}
  111.                                                             </span>
  112.                                                         </div>
  113.                                                     {% endblock %}
  114.                                                 </div>
  115.                                             {% endblock %}
  117.                                             {% block layout_footer_navigation_information_content %}
  118.                                                 <div id="collapseFooter{{ loop.index }}"
  119.                                                         class="footer-column-content collapse js-footer-column-content"
  120.                                                         aria-labelledby="collapseFooterTitle{{ loop.index }}">
  121.                                                     <div class="footer-column-content-inner">
  122.                                                         {% block layout_footer_navigation_information_links %}
  123.                                                             <ul class="list-unstyled">
  124.                                                                 {% for treeItem in root.children %}
  125.                                                                     {% set category = treeItem.category %}
  126.                                                                     {% set name = category.translated.name %}
  127.                                                                     {% set externalLink = category.translated.externalLink %}
  128.                                                                     {% block layout_footer_navigation_information_link_item %}
  129.                                                                         <li class="footer-link-item">
  130.                                                                             {% block layout_footer_navigation_information_link %}
  131.                                                                                 {% if category.type == 'folder' %}
  132.                                                                                     <div>{{ name }}</div>
  133.                                                                                 {% else %}
  134.                                                                                     <a class="footer-link"
  135.                                                                                         {% if footerKit.navigationConfig.fontColorLink or footerKit.navigationConfig.fontColorLinkHover %}
  136.                                                                                             onMouseOver="this.style.color='{{ footerKit.navigationConfig.fontColorLinkHover }}'"
  137.                                                                                             onMouseOut="this.style.color='{{ footerKit.navigationConfig.fontColorLink }}'"
  138.                                                                                         {% endif %}
  139.                                                                                        href="{{ category_url(category) }}"
  140.                                                                                        {% if category_linknewtab(category) %}target="_blank"{% endif %}
  141.                                                                                        title="{{ name }}">
  142.                                                                                         {{ name }}
  143.                                                                                     </a>
  144.                                                                                 {% endif %}
  145.                                                                             {% endblock %}
  146.                                                                         </li>
  147.                                                                     {% endblock %}
  148.                                                                 {% endfor %}
  149.                                                             </ul>
  150.                                                         {% endblock %}
  151.                                                     </div>
  152.                                                 </div>
  153.                                             {% endblock %}
  154.                                         </div>
  155.                                     {% endblock %}
  156.                                 {% endfor %}
  157.                             {% endblock %}
  158.                             {% block custom_navigation_blocks %}
  159.                                 {% for block in footerKit.navigationBlock %}
  160.                                     {% if block.active %}
  161.                                         {% block layout_footer_navigation_block_column %}
  162.                                             <div class="{{ block.col }} footer-column js-footer-column">
  163.                                                 {% block layout_footer_navigation_block_headline %}
  164.                                                     <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger"
  165.                                                          data-target="#collapseFooterTitle{{ loop.index }}"
  166.                                                          aria-expanded="true"
  167.                                                          aria-controls="collapseFooter{{ loop.index }}"
  168.                                                          style="color: {{ footerKit.navigationConfig.fontColor }};">
  169.                                                         {{ block.title }}
  170.                                                         {% block layout_footer_navigation_block_icons %}
  171.                                                             <div class="footer-column-toggle">
  172.                                                                 <span class="footer-plus-icon">
  173.                                                                     {% sw_icon 'plus' %}
  174.                                                                 </span>
  175.                                                                 <span class="footer-minus-icon">
  176.                                                                     {% sw_icon 'minus' %}
  177.                                                                 </span>
  178.                                                             </div>
  179.                                                         {% endblock %}
  180.                                                     </div>
  181.                                                 {% endblock %}
  183.                                                 {% block layout_footer_navigation_block_content %}
  184.                                                     <div id="collapseFooter{{ loop.index }}"
  185.                                                          class="footer-column-content collapse js-footer-column-content"
  186.                                                          aria-labelledby="collapseFooterTitle{{ loop.index }}">
  187.                                                         <div class="footer-column-content-inner">
  188.                                                             {% block layout_footer_navigation_block_links %}
  189.                                                                 {{ block.block|raw }}
  190.                                                             {% endblock %}
  191.                                                         </div>
  192.                                                     </div>
  193.                                                 {% endblock %}
  194.                                             </div>
  195.                                         {% endblock %}
  196.                                     {% endif %}
  197.                                 {% endfor %}
  198.                             {% endblock %}
  199.                         {% endif %}
  200.                     </div>
  201.                 </div>
  202.             {% endif %}
  203.             {% block layout_footer_information_custom %}
  204.                 {% if footerKit.informationConfig.basicSettings.active and footerKit.informationConfig.basicSettings.informationType == 'custom' %}
  205.                     <div class="col-12 d-flex row customColumns m-0
  206.                     {% if footerKit.informationConfig.basicSettings.center %}
  207.                         justify-content-center
  208.                     {% endif %}
  209.                     "
  210.                     style="background: {{ footerKit.informationConfig.basicSettings.backgroundColor }}; padding: {{ footerKit.informationConfig.basicSettings.verticalSpacing ? footerKit.informationConfig.basicSettings.verticalSpacing : "25px" }} {{ footerKit.informationConfig.basicSettings.horizontalSpacing ? footerKit.informationConfig.basicSettings.horizontalSpacing : "25px" }};">
  211.                         {% if footerKit.productSliderTitle %}
  212.                             <div class="col-12 d-flex justify-content-center" style="background: {{ footerKit.informationConfig.basicSettings.backgroundColor }};">
  213.                                 <h3 class="p-0 m-0 py-3" style="color: {{ footerKit.informationConfig.basicSettings.titleColor }};"> {{ footerKit.productSliderTitle }} </h3>
  214.                             </div>
  215.                         {% endif %}
  216.                         {% for informationBlock in footerKit.informationBlock %}
  217.                             {% if informationBlock.active %}
  218.                                 <div class="{{ informationBlock.col }}">
  219.                                     {{ informationBlock.block|raw }}
  220.                                 </div>
  221.                             {% endif %}
  222.                         {% endfor %}
  223.                     </div>
  224.                 {% endif %}
  225.             {% endblock %}
  227.             {% block layout_footer_information_dynamic_products %}
  228.                 {% if footerKit.informationConfig.basicSettings.active and footerKit.informationConfig.basicSettings.informationType == 'dynamic' %}
  229.                     <div class="col-12 d-flex row customColumns m-0 p0 justify-content-center"
  230.                         style="background: {{ footerKit.informationConfig.basicSettings.backgroundColor }}; padding: {{ footerKit.informationConfig.basicSettings.verticalSpacing ? footerKit.informationConfig.basicSettings.verticalSpacing : "25px" }} {{ footerKit.informationConfig.basicSettings.horizontalSpacing ? footerKit.informationConfig.basicSettings.horizontalSpacing : "25px" }};">
  231.                         {% if footerKit.productSliderTitle %}
  232.                             <div class="col-12 d-flex justify-content-center" style="background: {{ footerKit.informationConfig.basicSettings.backgroundColor }};">
  233.                                 <h3 class="p-0 m-0 py-3" style="color: {{ footerKit.informationConfig.basicSettings.titleColor }};"> {{ footerKit.productSliderTitle }} </h3>
  234.                             </div>
  235.                         {% endif %}
  236.                         {% sw_include '@FooterKit/storefront/layout/footer/tools/product-slider.html.twig' with {'product': product } %}
  237.                     </div>
  238.                 {% endif %}
  239.             {% endblock %}
  241.             <div class="row col-12 p-0 m-0">
  242.                 {% block layout_footer_payment_logos %}
  243.                     {% if footerKit.paymentShippingConfig.paymentActive %}
  244.                         <div class="footer-logo- is-payment col-12 d-flex row m-0
  245.                         {% if footerKit.paymentShippingConfig.paymentActive == footerKit.paymentShippingConfig.shippingActive %}
  246.                             col-md-6
  247.                             justify-content-md-end
  248.                             justify-content-center
  249.                         {% else %}
  250.                             col-md-12
  251.                             justify-content-center
  252.                         {% endif %}
  253.                         " style="background: {{ footerKit.paymentShippingConfig.backgroundColor }}; padding: {{ footerKit.paymentShippingConfig.verticalSpacing ? footerKit.paymentShippingConfig.verticalSpacing : "25px" }} {{ footerKit.paymentShippingConfig.horizontalSpacing ? footerKit.paymentShippingConfig.horizontalSpacing : "25px" }};">
  254.                             <div style="display: flex; justify-content: center; align-items: center;">
  255.                                 <span class="m-0" style="font-size: 18px; font-weight: 600; text-align: center; color: {{ footerKit.paymentShippingConfig.fontColor }};">{{ footerKit.paymentString|trans }}</span>
  256.                             </div>
  257.                             {% for paymentMethod in page.salesChannelPaymentMethods %}
  258.                                 {% block layout_footer_payment_logo %}
  259.                                     {% if paymentMethod.media %}
  260.                                         <div class="img-wrapper m-2">
  261.                                             {% sw_thumbnails 'footer-payment-image-thumbnails' with {
  262.                                                 media: paymentMethod.media,
  263.                                                 sizes: {
  264.                                                     'default': '35px'
  265.                                                 },
  266.                                                 attributes: {
  267.                                                     'class': 'img-fluid footer-logo-image',
  268.                                                     'alt': (paymentMethod.media.translated.alt ?: paymentMethod.translated.name),
  269.                                                     'title': (paymentMethod.media.translated.title ?: paymentMethod.translated.name)
  270.                                                 }
  271.                                             } %}
  272.                                         </div>
  273.                                     {% endif %}
  274.                                 {% endblock %}
  275.                             {% endfor %}
  276.                         </div>
  277.                     {% endif %}
  278.                 {% endblock %}
  280.                 {% block layout_footer_shipping_logos %}
  281.                     {% if footerKit.paymentShippingConfig.shippingActive %}
  282.                         <div class="is-shipping footer-logo- is-payment col-12 d-flex row m-0
  283.                         {% if footerKit.paymentShippingConfig.shippingActive == footerKit.paymentShippingConfig.paymentActive %}
  284.                             col-md-6
  285.                             justify-content-md-start
  286.                             justify-content-center
  287.                         {% else %}
  288.                             col-md-12
  289.                             justify-content-center
  290.                         {% endif %}
  291.                         " style="background: {{ footerKit.paymentShippingConfig.backgroundColor }}; padding: {{ footerKit.paymentShippingConfig.verticalSpacing ? footerKit.paymentShippingConfig.verticalSpacing : "25px" }} {{ footerKit.paymentShippingConfig.horizontalSpacing ? footerKit.paymentShippingConfig.horizontalSpacing : "25px" }};">
  292.                             <div style="display: flex; justify-content: center; align-items: center;">
  293.                                 <span class="m-0" style="font-size: 18px; font-weight: 600; text-align: center; color: {{ footerKit.paymentShippingConfig.fontColor }};">{{ footerKit.shippingString|trans }}</span>
  294.                             </div>
  295.                             {% for shippingMethod in page.salesChannelShippingMethods %}
  296.                                 {% block layout_footer_shipping_logo %}
  297.                                     {% if shippingMethod.media %}
  298.                                         <div class="img-wrapper m-2">
  299.                                             {% sw_thumbnails 'footer-shipping-image-thumbnails' with {
  300.                                                 media: shippingMethod.media,
  301.                                                 sizes: {
  302.                                                     'default': '35px'
  303.                                                 },
  304.                                                 attributes: {
  305.                                                     'class': 'img-fluid footer-logo-image',
  306.                                                     'alt': (shippingMethod.media.translated.alt ?: shippingMethod.translated.name),
  307.                                                     'title': (shippingMethod.media.translated.title ?: shippingMethod.translated.name)
  308.                                                 }
  309.                                             } %}
  310.                                         </div>
  311.                                     {% endif %}
  312.                                 {% endblock %}
  313.                             {% endfor %}
  314.                         </div>
  315.                     {% endif %}
  316.                 {% endblock %}
  317.             </div>
  318.         </div>
  320.         {% if footerKit.bottomConfig.basicSettings.active %}
  321.             <div class="col-12 p-0" style="background: {{ footerKit.bottomConfig.basicSettings.backgroundColor }};">
  322.                 {% block social_media_block %}
  323.                     {% if footerKit.bottomConfig.socialMediaSettings.active %}
  324.                         <div class="col-12" style="padding: {{ footerKit.bottomConfig.socialMediaSettings.verticalSpacing ? footerKit.bottomConfig.socialMediaSettings.verticalSpacing : "25px" }} {{ footerKit.bottomConfig.socialMediaSettings.horizontalSpacing ? footerKit.bottomConfig.socialMediaSettings.horizontalSpacing : "25px" }};">
  325.                             <div class="d-flex justify-content-center col-12 p-0">
  326.                                 <h1 style="font-weight: 600; font-size: 1.2rem; color: {{ footerKit.bottomConfig.socialMediaSettings.fontColor }};">{{ footerKit.socialMediaString|trans }}</h1>
  327.                             </div>
  328.                             <ul class="nav col-12 p-0" style="display: flex; flex-flow: row wrap; justify-content: center;">
  329.                                 {% for socialMedia in footerKit.bottomConfig.socialMedia %}
  330.                                     {% if socialMedia.active %}
  331.                                         <li class="m-1 d-flex justify-content-center align-center">
  332.                                             {% for itemMedia in media %}
  333.                                                 {% if socialMedia.media == itemMedia.id %}
  334.                                                     {% set mediaUrl = itemMedia.url %}
  335.                                                     <a
  336.                                                         href="{{ socialMedia.url }}"
  337.                                                         {% if footerKit.bottomConfig.socialMediaSettings.tab %}
  338.                                                             target="_blank"
  339.                                                         {% endif %}
  340.                                                         >
  341.                                                         <img style="height: {{ footerKit.bottomConfig.socialMediaSettings.iconSize ? footerKit.bottomConfig.socialMediaSettings.iconSize : "30px" }}"
  342.                                                                 src="{{ mediaUrl }}"
  343.                                                                 alt="socialMedia1">
  344.                                                     </a>
  345.                                                 {% endif %}
  346.                                             {% endfor %}
  347.                                         </li>
  348.                                     {% endif %}
  349.                                 {% endfor %}
  350.                             </ul>
  351.                         </div>
  352.                     {% endif %}
  353.                 {% endblock %}
  356.                 {% block layout_footer_company_logo %}
  357.                     {% if footerKit.bottomConfig.companyLogoSettings.active %}
  358.                         <div class="d-flex justify-content-center col-12"
  359.                             style="padding: {{ footerKit.bottomConfig.companyLogoSettings.verticalSpacing ? footerKit.bottomConfig.companyLogoSettings.verticalSpacing : "25px" }} {{ footerKit.bottomConfig.companyLogoSettings.horizontalSpacing ? footerKit.bottomConfig.companyLogoSettings.horizontalSpacing : "25px" }};">
  360.                             {% for itemMedia in media %}
  361.                                 {% if footerKit.bottomConfig.companyLogoSettings.media == itemMedia.id %}
  362.                                     {% set mediaUrl = itemMedia.url %}
  363.                                     <img style="height: {{ footerKit.bottomConfig.companyLogoSettings.size ? footerKit.bottomConfig.companyLogoSettings.size : "50px" }}" src="{{ mediaUrl }}" alt="logo">
  364.                                 {% endif %}
  365.                             {% endfor %}
  366.                         </div>
  367.                     {% endif %}
  368.                 {% endblock %}
  370.                 {% block layout_footer_custom_link %}
  371.                     {% if footerKit.bottomConfig.customLinkSettings.active %}
  372.                         <ul class="nav d-flex justify-content-center col-12 p-1 customLink" style="padding: {{ footerKit.bottomConfig.customLinkSettings.verticalSpacing ? footerKit.bottomConfig.customLinkSettings.verticalSpacing : "0px" }} {{ footerKit.bottomConfig.customLinkSettings.horizontalSpacing ? footerKit.bottomConfig.customLinkSettings.horizontalSpacing : "0px" }} !important;">
  373.                             {% for customLink in footerKit.customLink %}
  374.                                 {% if customLink.active %}
  375.                                     <li class="nav-item">
  376.                                         <a class="nav-link"
  377.                                             {% if footerKit.bottomConfig.customLinkSettings.fontColor or footerKit.bottomConfig.customLinkSettings.fontColorHover %}
  378.                                                 onMouseOver="this.style.color='{{ footerKit.bottomConfig.customLinkSettings.fontColorHover }}'"
  379.                                                 onMouseOut="this.style.color='{{ footerKit.bottomConfig.customLinkSettings.fontColor }}'"
  380.                                             {% endif %}
  381.                                             style="color: {{ footerKit.bottomConfig.customLinkSettings.fontColor }}; transition: all {{ footerKit.bottomConfig.customLinkSettings.transitionTime }};
  382.                                                     font-size: {{ footerKit.bottomConfig.customLinkSettings.fontSize ? footerKit.bottomConfig.customLinkSettings.fontSize : ".875rem" }}"
  383.                                             href="{{ customLink.url }}"
  384.                                             {% if footerKit.bottomConfig.customLinkSettings.tab %}
  385.                                                 target="_blank"
  386.                                             {% endif %}
  387.                                             >
  388.                                             {{ customLink.name|trans }}
  389.                                         </a>
  390.                                     </li>
  391.                                 {% endif %}
  392.                             {% endfor %}
  393.                         </ul>
  394.                     {% endif %}
  395.                 {% endblock %}
  397.                 {% block layout_footer_vat %}
  398.                     {% if footerKit.bottomConfig.basicSettings.vatActive %}
  399.                         <div class="footer-vat-new d-flex justify-content-center new-footer col-12"
  400.                             style="color: {{ footerKit.bottomConfig.basicSettings.vatFontColor }}; padding: {{ footerKit.bottomConfig.basicSettings.vatVerticalSpacing ? footerKit.bottomConfig.basicSettings.vatVerticalSpacing : "0" }} {{ footerKit.bottomConfig.basicSettings.vatHorizontalSpacing ? footerKit.bottomConfig.basicSettings.vatHorizontalSpacing : "10px" }};">
  401.                             {% if context.taxState == "gross" %}
  402.                                 <p>{{ "footer.includeVat"|trans|sw_sanitize }}</p>
  403.                             {% else %}
  404.                                 <p>{{ "footer.excludeVat"|trans|sw_sanitize }}</p>
  405.                             {% endif %}
  406.                         </div>
  407.                     {% endif %}
  408.                 {% endblock %}
  409.             </div>
  410.         {% endif %}
  411.     {% else %}
  412.         {{ parent() }}
  413.     {% endif %}
  415. {% endblock %}