custom/plugins/ThemeOkeonline/src/Resources/views/storefront/layout/footer/footer-content-renderer.html.twig line 1

Open in your IDE?
  1. {% set footerContent  = footerContent ? footerContent : 'none' %}
  2. {% set footerImage = footerImage ? footerImage : false %} {# e.g. theme_config('footerStylesLayoutFooterServiceImage') theme_config('footerStylesLayoutFooterBottomImage')#}
  3. {% set footerLocation = footerLocation ? footerLocation : 'general' %} {# e.g. top, bottom #}
  5. {% if footerContent == 'none' %}
  6.     <!--empty-->
  8. {# Footer text #}
  9. {% elseif footerContent == 'text' %}
  10.     {% block footer_snippet_wrapper %}
  11.         <div class="footer-{{ footerLocation }}-content footer-{{ footerLocation }}-{{ footerContent }}">
  12.             {% block footer_snippet_content %}
  13.                 <span>
  14.                     {{ ("oo.footer"~ footerLocation|capitalize ~".text.text")|trans|striptags }}
  15.                 </span>
  16.             {% endblock %}
  17.         </div>
  18.     {% endblock %}
  20. {# Footer text #}
  21. {% elseif footerContent starts with 'categories' %}
  22.     {% block footer_categories_wrapper %}
  23.         <div class="footer-{{ footerLocation }}-content footer-{{ footerLocation }}-{{ footerContent }} d-flex flex-column flex-md-row">
  24.             {% block footer_categories_content %}
  25.                 {% sw_include '@Storefront/storefront/layout/footer/categories-list.html.twig' with { setting: footerContent } %}
  26.             {% endblock %}
  27.         </div>
  28.     {% endblock %}
  30. {# Horizontal USP's #}
  31. {% elseif footerContent == 'usps-horizontal' %}
  32.     {% block footer_usps_wrapper_horizontal %}
  33.         {% set uspKeys = uspKeys ? uspKeys : ['one', 'two', 'three'] %}
  35.         <div class="footer-{{ footerLocation }}-content footer-{{ footerLocation }}-{{ footerContent }}">
  36.             ToDo: Fix horizontal view
  37.             {% block footer_usps_content_horizontal %}
  38.                 <ul class="list-inline list-unstyled">
  39.                     {% for uspKey in uspKeys %}
  40.                         {% block footer_usp_wrapper_horizontal %}
  41.                             <li class="usp-item list-inline-item">
  42.                                 {% block footer_usp_content_horizontal %}
  43.                                     {{ ("oo.footer"~ footerLocation|capitalize ~".usps.usp" ~ uspKey|capitalize)|trans|striptags }}
  44.                                 {% endblock %}
  45.                             </li>
  46.                         {% endblock %}
  47.                     {% endfor %}
  48.                 </ul>
  49.             {% endblock %}
  50.         </div>
  51.     {% endblock %}
  53. {# Vertical USP's #}
  54. {% elseif footerContent == 'usps-vertical' %}
  55.     {% block footer_usps_wrapper_vertical %}
  56.         {% set uspKeys = uspKeys ? uspKeys : ['one', 'two', 'three'] %}
  58.         <div class="footer-{{ footerLocation }}-content footer-{{ footerLocation }}-{{ footerContent }}">
  59.             {% block footer_usps_content_vertical_title_wrapper %}
  60.                 <div class="title {{ theme_config("footerStylesFooter"~ footerLocation|capitalize ~"TitleFont") }}">
  61.                     {% block footer_usps_content_vertical_title_content %}
  62.                         {{ "oo.usps.title"|trans|striptags }}
  63.                     {% endblock %}
  64.                 </div>
  65.             {% endblock %}
  66.             
  67.             {% block footer_usps_content_vertical %}
  68.                 <ul class="list-group list-unstyled">
  69.                     {% for uspKey in uspKeys %}
  70.                         {% set uspText = ("oo.footer"~ footerLocation|capitalize ~".usps.usp" ~ uspKey|capitalize)|trans|striptags %}
  71.                         
  72.                         {% if uspText|length > 1 %}
  73.                             {% block footer_usp_wrapper_vertical %}
  74.                                 <li class="usp-item list-group-item pl-0 pr-0 pt-1 pb-1 border-0">
  75.                                     {% block footer_usp_content_vertical %}
  76.                                         {{uspText}}
  77.                                     {% endblock %}
  78.                                 </li>
  79.                             {% endblock %}
  80.                         {% endif %}
  81.                     {% endfor %}
  82.                 </ul>
  83.             {% endblock %}
  84.         </div>
  85.     {% endblock %}
  87. {# Service image #}
  88. {% elseif footerContent == 'image' %}
  89.     {% block base_footer_service_image_wrapper %}
  90.         <div class="footer-service-image">
  91.             {% block base_footer_service_image_content %}
  92.                 <img src="{{ theme_config('footerStylesLayoutFooterServiceImage') |sw_encode_url }}"
  93.                     alt="{{ "oo.customerService.title"|trans|striptags }}"
  94.                     class="img-fluid footer-top-image-img"
  95.                     style="max-height:300px;"
  96.                 />
  97.             {% endblock %}
  98.         </div>
  99.     {% endblock %}
  100.     
  101. {# Customerservice #}
  102. {% elseif footerContent == 'customer-service-details' %}
  103.     {% block base_footer_service_content_wrapper %}
  104.         <div class="footer-service-content">
  105.             {% block base_footer_service_content_content %}
  106.                 <div class="row">
  107.                     {% block base_footer_service_title_row %}
  108.                         <div class="col-12">
  109.                             {% block base_footer_service_title_wrapper %}
  110.                                 <div class="title {{ theme_config("footerStylesFooter"~ footerLocation|capitalize ~"TitleFont") }}">
  111.                                     {% block base_footer_service_title_content %}
  112.                                         {{ "oo.customerService.title"|trans|striptags }}
  113.                                     {% endblock %}
  114.                                 </div>
  115.                             {% endblock %}
  116.                             {% block base_footer_service_servicedescription_wrapper %}
  117.                                 <p class="serviceDescription">
  118.                                     {% block base_footer_service_servicedescription_content %}
  119.                                         {{ "oo.customerService.description"|trans }}
  120.                                     {% endblock %}
  121.                                 </p>
  122.                             {% endblock %}
  123.                         </div>
  124.                     {% endblock %}
  125.                 </div>
  126.                 <div class="row">
  127.                     {# footer-service-items #}
  128.                     {% sw_include '@parent/storefront/layout/footer/footer-service-items.html.twig' %}
  129.                 </div>
  130.             {% endblock %}
  131.         </div>
  132.     {% endblock %}
  135. {# Newsletter #}
  136. {% elseif footerContent == 'newsletter-form' %}
  137.     {% block base_footer_service_newsletter_wrapper %}
  138.         <div class="footer-newsletter-form">
  139.             {% block base_footer_service_newsletter_content %}
  140.                 <div class="newsletter-footer-small">
  141.                     {% block base_footer_newsletter %}
  142.                         <div class="title {{ theme_config("footerStylesFooter"~ footerLocation|capitalize ~"TitleFont") }}">
  143.                             {% block base_footer_newsletter_text %}
  144.                                 {{ "oo.newsletterForm.signUpTitle"|trans|striptags }}
  145.                             {% endblock %}
  146.                         </div>
  148.                         <div class="content">
  149.                             {{ "oo.newsletterForm.signUpText"|trans|striptags }}
  151.                             {# JS plugin: <plugin_root>/src/Resources/app/storefront/src/plugin/okeonline-newsletter-subscribe/okeonline-newsletter-subscribe.plugin.js #}
  152.                             {# Listens to submitting form, adds it to database, gives feedback (unsuccesfull via API, succesfull via JS/Twig translaton) on the span element #}
  153.                             {# subscribeOption should be any of: direct, subscribe, confirmSubscribe, unsubscribe #}
  154.                             {%  set oo_newsletter_subscribe_plugin_options = {
  155.                                 successText: 'oo.newsletterForm.messageSuccess'|trans,
  156.                                 modal: shopware.theme.newsletterFormInFooterModal,
  157.                                 storefrontUrl: app.request.get('sw-sales-channel-absolute-base-url'),
  158.                                 emptyFieldCaption: '(niet ingevuld)',
  159.                                 subscribeOption: 'direct' 
  160.                             } %}
  161.                             <form data-okeonline-newsletter-subscribe-plugin="true" data-okeonline-newsletter-subscribe-plugin-options='{{ oo_newsletter_subscribe_plugin_options | json_encode  }}'>
  163.                                 {% block base_footer_newsletter_message %}
  164.                                     <span role="message" class="d-none"></span>
  165.                                 {% endblock  %}
  167.                                 <div class="form-group">
  168.                                     <input type="text" name="email" placeholder="{{ 'oo.newsletterForm.inputPlaceholder'|trans }}" />
  169.                                     {% block base_footer_newsletter_submit %}
  170.                                         <button role="button" aria-label="Subscribe">
  171.                                             {% set icon = theme_config('footerSettingsNewsletterSubmitIcon') %}
  172.                                             {% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': icon|default('arrow-right') } %}
  173.                                         </button>
  174.                                     {% endblock %}
  175.                                 </div>
  176.                             </form>
  177.                         </div>
  178.                     {% endblock %}
  179.                 </div>
  180.                 {% block base_footer_newsletter_modal %}
  181.                     {% if theme_config('footerSettingsNewsletterFormModal') %}
  182.                         <div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  183.                             <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
  184.                                 <div class="modal-content">
  185.                                     <div class="modal-body p-0">
  186.                                         <div class="container-fluid">
  187.                                             <div class="row">
  188.                                                 <div class="col-lg-6 p-0"><img src="{{ theme_config('footerSettingsNewsletterFormModalImage') |sw_encode_url }}" class="img-fluid" /></div>
  189.                                                 <div class="col-lg-6 p-3">
  190.                                                     <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close">
  191.                                                         <span aria-hidden="true">&times;</span>
  192.                                                     </button>
  193.                                                     {# TODO: Designer: Place Close button on <lg-sizes outsize modal #}
  194.                                                     {{ "oo.footer.newsletterForm.modalContent"|trans|striptags }}
  195.                                                     <span>{{ theme_config('footerSettingsNewsletterFormCoupon') }}</span>
  196.                                                 </div>
  197.                                             </div>
  198.                                         </div>
  199.                                     </div>
  200.                                 </div>
  201.                             </div>
  202.                         </div>
  203.                     {% endif %}
  204.                 {% endblock %}
  207.                 
  208.                 {% block social_buttons %}
  209.                     {# 'facebook', 'instagram', 'youtube', 'pinterest', 'tiktok', 'whatsapp', 'linkedin', 'twitter' #}
  210.                     {% set mediaChannels = mediaChannels ? mediaChannels : [] %}
  212.                     {% if theme_config('footerSettingsNewsletterMediaFacebook') %}
  213.                         {% set mediaChannels = mediaChannels|merge([
  214.                             'facebook'
  215.                         ]) %}
  216.                     {% endif %}
  218.                     {% if theme_config('footerSettingsNewsletterMediaInstagram') %}
  219.                         {% set mediaChannels = mediaChannels|merge([
  220.                             'instagram'
  221.                         ]) %}
  222.                     {% endif %}
  224.                     {% if theme_config('footerSettingsNewsletterMediaYoutube') %}
  225.                         {% set mediaChannels = mediaChannels|merge([
  226.                             'youtube'
  227.                         ]) %}
  228.                     {% endif %}
  230.                     {% if theme_config('footerSettingsNewsletterMediaPinterest') %}
  231.                         {% set mediaChannels = mediaChannels|merge([
  232.                             'pinterest'
  233.                         ]) %}
  234.                     {% endif %}
  236.                     {% if theme_config('footerSettingsNewsletterMediaTiktok') %}
  237.                         {% set mediaChannels = mediaChannels|merge([
  238.                             'tiktok'
  239.                         ]) %}
  240.                     {% endif %}
  242.                     {% if theme_config('footerSettingsNewsletterMediaWhatsapp') %}
  243.                         {% set mediaChannels = mediaChannels|merge([
  244.                             'whatsapp'
  245.                         ]) %}
  246.                     {% endif %}
  248.                     {% if theme_config('footerSettingsNewsletterMediaLinkedin') %}
  249.                         {% set mediaChannels = mediaChannels|merge([
  250.                             'linkedin'
  251.                         ]) %}
  252.                     {% endif %}
  254.                     {% if theme_config('footerSettingsNewsletterMediaTwitter') %}
  255.                         {% set mediaChannels = mediaChannels|merge([
  256.                             'twitter'
  257.                         ]) %}
  258.                     {% endif %}
  260.                     <div class="d-flex flex-row flex-wrap socialButtons">    
  261.                         {% for mediaChannel in mediaChannels %}
  262.                             {% block social_button %}
  263.                                 <a class="btn btn-primary btn-lg mr-2 mb-2" href="{{ ("oo.newsletterForm.mediaChannel."~ mediaChannel|lower ~".url")|trans|striptags }}">    
  264.                                     {% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': ("oo.newsletterForm.mediaChannel."~ mediaChannel|lower ~".icon")|trans|striptags, class:'fa'} %}
  266.                                     {{ ("oo.newsletterForm.mediaChannel."~ mediaChannel|lower ~".text")|trans({
  267.                                         '%text%': mediaChannel
  268.                                     })|striptags }}
  269.                                 </a>
  270.                             {% endblock %}
  271.                         {% endfor %}
  272.                     </div>
  273.                 {% endblock %}
  274.             {% endblock %}
  275.         </div>
  276.     {% endblock %}
  278. {# Servicepoint navigation #}
  279. {% elseif footerContent == 'servicepoint-navigation' %}
  280.     {% block layout_footer_service_menu_content %}
  281.         {% apply spaceless %}
  282.             <ul class="footer-service-menu-list list-unstyled">
  283.                 {% for serviceMenuItem in page.footer.serviceMenu %}
  284.                     {% block layout_footer_service_menu_item %}
  285.                         <li class="footer-service-menu-item">
  286.                             <a class="footer-service-menu-link"
  287.                             href="{{ category_url(serviceMenuItem) }}"
  288.                             {% if category_linknewtab(serviceMenuItem) %}target="_blank"{% endif %}
  289.                             title="{{ serviceMenuItem.translated.name }}">
  290.                                 {{ serviceMenuItem.translated.name }}
  291.                             </a>
  292.                         </li>
  293.                     {% endblock %}
  294.                 {% endfor %}
  295.             </ul>
  296.         {% endapply %}
  297.     {% endblock %}
  299. {# Payment and shipping logos #}
  300. {% elseif footerContent == 'payment-shipping-logos' %}
  301.     <div class="footer-logos">
  302.         {% block layout_footer_payment_logos %}
  303.             {% for paymentMethod in page.salesChannelPaymentMethods %}
  304.                 {% block layout_footer_payment_logo %}
  305.                     {% if paymentMethod.media %}
  306.                         <div class="footer-logo is-payment">
  307.                             {% set attributes = {
  308.                                 'class': 'lazyload img-fluid footer-logo-image is-'~displayMode,
  309.                                 'data-sizes': "{
  310.                                     'default': '50px'
  311.                                 }",
  312.                                 'alt': (paymentMethod.media.translated.alt ?: paymentMethod.translated.name),
  313.                                 'title': (paymentMethod.media.translated.title ?: paymentMethod.translated.name)
  314.                             } %}
  316.                             {% sw_thumbnails 'footer-payment-image-thumbnails' with {
  317.                                 media: paymentMethod.media,
  318.                                 layout: 'boxed',
  319.                                 sizes: {
  320.                                     'default': '50px'
  321.                                 },
  322.                                 load: false,
  323.                                 loadOriginalImage: true
  324.                             } %}
  325.                         </div>
  326.                     {% endif %}
  327.                 {% endblock %}
  328.             {% endfor %}
  329.         {% endblock %}
  331.         {% block layout_footer_shipping_logos %}
  332.             {% for shippingMethod in page.salesChannelShippingMethods %}
  333.                 {% block layout_footer_shipping_logo %}
  334.                     {% if shippingMethod.media %}
  335.                         <div class="footer-logo is-shipping">
  336.                             {% sw_thumbnails 'footer-shipping-image-thumbnails' with {
  337.                                 media: shippingMethod.media,
  338.                                 sizes: {
  339.                                     'default': '100px'
  340.                                 },
  341.                                 attributes: {
  342.                                     'class': 'img-fluid footer-logo-image',
  343.                                     'alt': (shippingMethod.media.translated.alt ?: shippingMethod.translated.name),
  344.                                     'title': (shippingMethod.media.translated.title ?: shippingMethod.translated.name)
  345.                                 }
  346.                             } %}
  347.                         </div>
  348.                     {% endif %}
  349.                 {% endblock %}
  350.             {% endfor %}
  351.         {% endblock %}
  352.     </div>
  353. {% endif %}