templates/frontend/components/top.html.twig line 1

Open in your IDE?
  1. {% trans_default_domain 'store' %}
  2. {% set addon = '24h' %}
  3. {% if app.request.locale == 'cz' %}
  4.     {% set addon = '48h' %}
  5. {% endif %}
  6. {% if app.request.locale == 'ro' %}
  7.     {% set addon = '72h' %}
  8. {% endif %}
  9. <div class="hide-tablet">
  10. {% for banner in topBanners|slice(0,1) %}
  11.     {% if banner.endDate %}
  12.         <script>
  13.             // Set the date we're counting down to
  14.             var countDownDate = new Date("{{ banner.endDate|date('M') }} {{ banner.endDate|date('d') }}, {{ banner.endDate|date('Y') }} {{ banner.endDate|date('H') }}:{{ banner.endDate|date('i') }}:{{ banner.endDate|date('s') }}").getTime();
  15.             // Update the count down every 1 second
  16.             var x = setInterval(function() {
  17.                 // Get today's date and time
  18.                 var now = new Date().getTime();
  19.                 // Find the distance between now and the count down date
  20.                 var distance = countDownDate - now;
  21.                 // Time calculations for days, hours, minutes and seconds
  22.                 var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  23.                 var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  24.                 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  25.                 var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  26.                 // Display the result in the element with id="demo"
  27.                 document.getElementById("countdown").innerHTML = '<strong>'+days + "</strong> {{ 'days'|trans }} <strong>" + hours + "</strong> {{ 'hours'|trans }} <strong>"
  28.                     + minutes + "</strong> {{ 'minutes'|trans }} <strong>" + seconds + " </strong>{{ 'seconds'|trans }} ";
  29.                 // If the count down is finished, write some text
  30.                 if (distance < 0) {
  31.                     clearInterval(x);
  32.                     document.getElementById("countdown").innerHTML = "{{ 'promo_expired'|trans }}";
  33.                 }
  34.             }, 1000);
  35.         </script>
  36.     {% endif %}
  37.     {% if banner.url %}
  38.         <a href="{{ banner.url }}">
  39.     {% endif %}
  40.     <div style="background: {{ banner.background }}; color: {{ banner.textColor }};" id="topBanner">
  41.         {% set width = 50 %}
  42.         {% if banner.endDate %}
  43.             {% set width = 33 %}
  44.         {% endif %}
  45.         <div style="float: left; width:{{ width }}%; text-align: right; padding:8px;">
  46.             {{ banner.textLeft|trans|raw }}
  47.         </div>
  48.         {% if banner.endDate %}
  49.             <div style="float: left; width:33%; text-align: center; padding:8px;">
  50.                 {{ 'banner_to_end'|trans }}: <span id="countdown"></span>
  51.             </div>
  52.         {% endif %}
  53.         <div style="float: left; width:{{ width }}%; text-align: left; padding:8px;">
  54.             {{ banner.textRight|trans|raw }}
  55.         </div>
  56.     </div>
  57.     {% if banner.url %}
  58.         </a>
  59.     {% endif %}
  60. {% endfor %}
  61. </div>
  62. <div id="header_container" {% if topBanners|length %}class="lower_header"{% endif %}>
  63. <hdr-cmp inline-template v-cloak>
  64.     <header id="main-head">
  65.         <!-- START OF TOP BAR -->
  66.         <div class="ext-bg color-gray is-hidden-mobile">
  67.             <div id="top-bar" class="container mobile-560">
  68.                 <div class="columns is-mobile is-marginless">
  69.                     <div class="column left slogan">
  70.                         <span class="navbar-item has-text-weight-normal header-text-color font-size-13" style="font-weight: normal;" href="#">
  71.                             {% if app.request.locale == 'ro' %}
  72.                                 <a href="https://wa.me/40745599121">
  73.                                     <img src="/images/ico/whatsapp_black.svg" class="phone-ico" style="max-height: 30px!important; width:14px; height:14px;"/>
  74.                                 </a>
  75.                             &nbsp;&nbsp;
  76.                             <img src="/v2/ico/phone.svg" class="phone-ico" alt="phone ico"/>
  77. &nbsp;
  78.                                 <a href="https://wa.me/40745599121">{{ language.helpline }}</a>
  79.                             {% else %}
  80.                                 <img src="/v2/ico/phone.svg" class="phone-ico" alt="phone ico"/>
  81.                                 &nbsp;{{ language.helpline }}
  82.                             {% endif %}
  83.                         </span>
  84.                         {% if helplineHours %}
  85.                             <span class="navbar-item is-hidden-mobile has-text-weight-light font-size-13 header-text-color">{{ 'call_center_work_hours'|trans }}: {{ helplineHours.name }}</span>
  86.                         {% endif %}
  87.                     </div>
  88.                     <div class="column right top-right-menu">
  89.                         {% for article in articles %}
  90.                             {% if article.header %}
  91.                                 <a class="navbar-item font-size-13 has-text-weight-light header-text-color" href="{{ path('single_article', {'id':article.id, 'slug':article.slug}) }}">
  92.                                     {{ article.title }}
  93.                                 </a>
  94.                             {% endif %}
  95.                         {% endfor %}
  96.                         <a class="navbar-item font-size-13 header-text-color has-text-weight-light" href="{{ path('blog') }}">{{ 'blog'|trans }}</a>
  97.                         <a class="navbar-item font-size-13 header-text-color has-text-weight-light" href="{{ path('contact') }}">{{ 'contact'|trans }}</a>
  98.                     </div>
  99.                 </div>
  100.             </div>
  101.         </div>
  102.         <!-- END OF TOP BAR -->
  103.         <!-- START OF MIDDLE BAR -->
  104.         <div id="middle-bar" class="container">
  105.             <div class="columns is-mobile is-marginless">
  106.                 <div class="column is-one-quarters-mobile left">
  107.                     <burger-menu inline-template v-cloak activesub="1">
  108.                         <Slide
  109.                                 :cross-icon="false"
  110.                                 :is-open="open"
  111.                                 :width="menuWidth">
  112.                             <div class="columns">
  113.                                 <!-- START OF LOGO FOR MOBILE -->
  114.                                 <div class="column is-full-mobile">
  115.                                     <a class="navbar-item image logo" href="{{ path('homepage') }}">
  116.                                         <img src="{{ staticImages[locale].logo}}" alt="logo {{ language.shopName }}">
  117.                                     </a>
  118.                                 </div>
  119.                                 <!-- END OF LOGO FOR MOBILE -->
  120.                                 <!-- START OF LOGO FOR TABLET -->
  121.                                 <!-- </div> -->
  122.                             </div>
  123.                             <div class="columns">
  124.                                 <!-- END OF LOGO FOR TABLET -->
  125.                                 <!-- <div class="column"> -->
  126.                                 <div class="top-info-bar" style="margin-left: 20px; margin-top: 20px; margin-bottom: 10px;">
  127.                                     <div class="navbar-item">
  128.                                         <img style="height:36px;" class="margin-right-8" src="/v2/ikonki_nowe.png" alt="">
  129.                                     </div>
  130.                                     <div class="navbar-item">
  131.                                     <span class="header-text-color">
  132.                                         {{ '16_years_market_300_customers'|trans|raw }}
  133.                                     </span>
  134.                                     </div>
  135.                                     <a id="closeBurger" style="position:fixed; top:25px; display: none">
  136.                                         <i class="fa fa-times" style="font-size:24px;"></i>
  137.                                     </a>
  138.                                 </div>
  139.                             </div>
  140.                             <!-- START OF BURGER MENU CONTENT -->
  141.                             <!-- START OF ACCORDION TITLE -->
  142.                             <div class="level is-mobile main-category-mobile" @click="toggleFirstTab">
  143.                                 <div class="level-left">
  144.                                     <div class="level-item">
  145.                                         {{ 'all_products'|trans }}
  146.                                     </div>
  147.                                 </div>
  148.                                 <div class="level-right">
  149.                                     <span class="icon">
  150.                                         <i :class="[ 'fas', unfoldFirstTab ? 'fa-caret-up' : 'fa-caret-down' ]"></i>
  151.                                     </span>
  152.                                 </div>
  153.                             </div>
  154.                             <!-- END OF ACCORDION TITLE -->
  155.                             <!-- START OF ACCORDION CONTENT -->
  156.                             <nav class="mobile-menu-nav" v-if="unfoldFirstTab">
  157.                                 <div class="container">
  158.                                     <!-- START OF ALL PRODUCTS -->
  159.                                     <div class="columns content mega-container">
  160.                                         <div class="column is-half">
  161.                                             <h4 class="is-mobile-menu-title">{{ 'rooms'|trans }}</h4>
  162.                                             {% for category in categories|slice(0,15) %}
  163.                                                 <a data-image="{% if category.imageName2 %}/images/category/{{ category.imageName2 }}{% endif %}" {% if requestCategory and category.id == requestCategory %}class="active" {% endif %} class="navbar-item" href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
  164.                                                     <div class="navbar-content">
  165.                                                         <p>{{ category.name }}</p>
  166.                                                     </div>
  167.                                                 </a>
  168.                                             {% endfor %}
  169.                                         </div>
  170.                                         <div class="column is-half">
  171.                                             {% for category in categories|slice(15,30) %}
  172.                                                 <a data-image="{% if category.imageName2 %}/images/category/{{ category.imageName2 }}{% endif %}" class="navbar-item" href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
  173.                                                     <div class="navbar-content">
  174.                                                         <p>{{ category.name }}</p>
  175.                                                     </div>
  176.                                                 </a>
  177.                                             {% endfor %}
  178.                                         </div>
  179.                                     </div>
  180.                                     <!-- END OF ALL PRODUCTS -->
  181.                                     <!-- START OF KINDS -->
  182.                                     <div class="columns content mega-container">
  183.                                         <div class="column is-half">
  184.                                             <h4 class="is-mobile-menu-title">{{ 'furnitureTypes'|trans }}</h4>
  185.                                             {% for furnitureType in furnitureTypes|slice(0,10) %}
  186.                                                 <a data-image="{% if furnitureType.imageName %}/images/category/{{ furnitureType.imageName }}{% endif %}" {% if requestFurnitureType and requestFurnitureType == furnitureType.id%}class="active" {% endif %} class="navbar-item" href="{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}">
  187.                                                     <div class="navbar-content">
  188.                                                         <p>{{ furnitureType.name }}</p>
  189.                                                     </div>
  190.                                                 </a>
  191.                                             {% endfor %}
  192.                                         </div>
  193.                                         <div class="column is-half">
  194.                                             {% for furnitureType in furnitureTypes|slice(10,30) %}
  195.                                                 <a data-image="{% if furnitureType.imageName %}/images/category/{{ furnitureType.imageName }}{% endif %}" {% if requestFurnitureType and requestFurnitureType == furnitureType.id%}class="active" {% endif %} class="navbar-item" href="{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}">
  196.                                                     <div class="navbar-content">
  197.                                                         <p>{{ furnitureType.name }}</p>
  198.                                                     </div>
  199.                                                 </a>
  200.                                             {% endfor %}
  201.                                         </div>
  202.                                     </div>
  203.                                     <!-- END OF KINDS -->
  204.                                 </div>
  205.                             </nav>
  206.                             <!-- END OF ACCORDION CONTENT -->
  207.                             <!-- START OF ACCORDION TITLE -->
  208.                             <div class="level is-mobile main-category-mobile" @click="toggleSecondTab">
  209.                                 <div class="level-left">
  210.                                     <div class="level-item">
  211.                                         {{ 'delivery24Products'|trans }}
  212.                                     </div>
  213.                                 </div>
  214.                                 <div class="level-right">
  215.                                     <span class="icon">
  216.                                         <i :class="[ 'fas', unfoldSecondTab ? 'fa-caret-up' : 'fa-caret-down' ]"></i>
  217.                                     </span>
  218.                                 </div>
  219.                             </div>
  220.                             <!-- END OF ACCORDION TITLE -->
  221.                             <!-- START OF ACCORDION CONTENT -->
  222.                             <nav v-if="unfoldSecondTab">
  223.                                 <div class="container">
  224.                                     <!-- START OF ALL PRODUCTS -->
  225.                                     <div class="columns content mega-container">
  226.                                         <div class="column is-half">
  227.                                             <h4 class="is-mobile-menu-title">{{ 'rooms'|trans }}</h4>
  228.                                             {% for category in cat24h|slice(0,15) %}
  229.                                                 <a data-image="{% if category.imageName2 %}/images/category/{{ category.imageName2 }}{% endif %}" {% if requestCategory and category.id == requestCategory %}class="active" {% endif %} class="navbar-item" href="{{ path('category', {'av24h':'24h', 'id':category.id, 'slug':category.slug}) }}">
  230.                                                     <div class="navbar-content">
  231.                                                         <p>{{ category.name }} {{ addon }}</p>
  232.                                                     </div>
  233.                                                 </a>
  234.                                             {% endfor %}
  235.                                         </div>
  236.                                         <div class="column is-half">
  237.                                             {% for category in cat24h|slice(15,30) %}
  238.                                                 <a data-image="{% if category.imageName2 %}/images/category/{{ category.imageName2 }}{% endif %}" {% if requestCategory and category.id == requestCategory %}class="active" {% endif %} class="navbar-item" href="{{ path('category', {'av24h':'24h', 'id':category.id, 'slug':category.slug}) }}">
  239.                                                     <div class="navbar-content">
  240.                                                         <p>{{ category.name }} {{ addon }}</p>
  241.                                                     </div>
  242.                                                 </a>
  243.                                             {% endfor %}
  244.                                         </div>
  245.                                     </div>
  246.                                     <!-- END OF ALL PRODUCTS -->
  247.                                     <!-- START OF KINDS -->
  248.                                     <div class="columns content mega-container">
  249.                                         <div class="column is-half">
  250.                                             <h4 class="is-mobile-menu-title">{{ 'furnitureTypes'|trans }}</h4>
  251.                                             {% for furnitureType in furnitureTypes24h|slice(0,10) %}
  252.                                                 <a data-image="{% if furnitureType.imageName %}/images/category/{{ furnitureType.imageName }}{% endif %}" {% if requestFurnitureType and requestFurnitureType == furnitureType.id%}class="active" {% endif %} class="navbar-item" href="{{ path('furnitureType', {'customFilter':'24h', 'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}">
  253.                                                     <div class="navbar-content">
  254.                                                         <p>{{ furnitureType.name }} {{ addon }}</p>
  255.                                                     </div>
  256.                                                 </a>
  257.                                             {% endfor %}
  258.                                         </div>
  259.                                         <div class="column is-half">
  260.                                             {% for furnitureType in furnitureTypes24h|slice(10,30) %}
  261.                                                 <a data-image="{% if furnitureType.imageName %}/images/category/{{ furnitureType.imageName }}{% endif %}" {% if requestFurnitureType and requestFurnitureType == furnitureType.id%}class="active" {% endif %} class="navbar-item" href="{{ path('furnitureType', {'customFilter':'24h', 'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}">
  262.                                                     <div class="navbar-content">
  263.                                                         <p>{{ furnitureType.name }} {{ addon }}</p>
  264.                                                     </div>
  265.                                                 </a>
  266.                                             {% endfor %}
  267.                                         </div>
  268.                                     </div>
  269.                                     <!-- END OF KINDS -->
  270.                                 </div>
  271.                             </nav>
  272.                             <!-- END OF ACCORDION CONTENT -->
  273.                             <!-- START OF ACCORDION TITLE -->
  274.                             <div class="level is-mobile main-category-mobile" @click="toggleThirdTab">
  275.                                 <div class="level-left">
  276.                                     <div class="level-item is-red">
  277.                                         {{ 'promotions'|trans }}
  278.                                     </div>
  279.                                 </div>
  280.                                 <div class="level-right is-red">
  281.                                     <span class="icon">
  282.                                         <i :class="[ 'fas', unfoldThirdTab ? 'fa-caret-up' : 'fa-caret-down' ]"></i>
  283.                                     </span>
  284.                                 </div>
  285.                             </div>
  286.                             <!-- END OF ACCORDION TITLE -->
  287.                             <!-- START OF ACCORDION CONTENT -->
  288.                             <nav v-if="unfoldThirdTab">
  289.                                 <div class="container">
  290.                                     <!-- START OF ALL PRODUCTS -->
  291.                                     <div class="columns content mega-container">
  292.                                         <div class="column is-half">
  293.                                             {% for category in promoCategories %}
  294.                                                 <a href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
  295.                                                     <div class="navbar-content">
  296.                                                         <p>{{ category.name }}</p>
  297.                                                     </div>
  298.                                                 </a>
  299.                                             {% endfor %}
  300.                                         </div>
  301.                                     </div>
  302.                                     <!-- END OF ALL PRODUCTS -->
  303.                                 </div>
  304.                             </nav>
  305.                             <!-- END OF ACCORDION CONTENT -->
  306.                             <div class="level is-mobile main-category-mobile">
  307.                                 <div class="level-left">
  308.                                     <div class="level-item">
  309.                                         {% for category in promoCategories %}
  310.                                             {% if category.id == 237 %}
  311.                                                 <a class="" href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
  312.                                                     Outlet
  313.                                                 </a>
  314.                                             {% endif %}
  315.                                         {% endfor %}
  316.                                     </div>
  317.                                 </div>
  318.                             </div>
  319.                             <!-- START OF ASK ABOUT PRODUCT -->
  320.                             <div class="level is-mobile main-category-mobile">
  321.                                 <div class="level-left">
  322.                                     <div class="level-item">
  323.                                         {% if countProducts %}
  324.                                             <a href="{{ path('send_request') }}" class="">{{ 'askForProduct'|trans }} <i class="margin-left-8 fas fa-long-arrow-alt-right"></i></a>
  325.                                         {% endif %}
  326.                                     </div>
  327.                                 </div>
  328.                                 <div class="level-right">
  329.                                     <div class="level-item">
  330.                                         {% if countProducts %}
  331.                                             <span class="icon">
  332.                                                 <i class="fa fa-long-arrow-alt-right"></i>
  333.                                             </span>
  334.                                         {% endif %}
  335.                                     </div>
  336.                                 </div>
  337.                             </div>
  338.                             <!-- END OF ASK ABOUT PRODUCT -->
  339.                             <ul class="burger-menu-bottom">
  340.                                 {% for article in articles %}
  341.                                     {% if article.header %}
  342.                                         <li>
  343.                                             <a href="{{ path('single_article', {'id':article.id, 'slug':article.slug}) }}">
  344.                                                 {{ article.title }}
  345.                                             </a>
  346.                                         </li>
  347.                                     {% endif %}
  348.                                 {% endfor %}
  349.                                 <li><a href="{{ path('blog') }}">{{ 'blog'|trans }}</a></li>
  350.                                 <li><a href="{{ path('contact') }}">{{ 'contact'|trans }}</a></li>
  351.                             </ul>
  352.                             <!-- START OF CONTACT -->
  353.                             <div class="bm-down-section">
  354.                                 <div class="column is-block is-full has-text-centered">
  355.                                     <a class="navbar-item has-text-weight-medium active-item" href="#">
  356.                                         {% if app.request.locale == 'ro' %}
  357.                                             <a href="https://wa.me/40745599121">
  358.                                                 <img src="/images/ico/whatsapp_black.svg" class="phone-ico" style="max-height: 30px!important; width:14px; height:14px;"/>
  359.                                             </a>
  360.                                             &nbsp;&nbsp;
  361.                                             <img src="/v2/ico/phone.svg" class="phone-ico" alt="phone ico"/>
  362.                                             &nbsp;
  363.                                             <a href="https://wa.me/40745599121">{{ language.helpline }}</a>
  364.                                         {% else %}
  365.                                             <i class="fas fa-phone"></i>
  366.                                             {{ language.helpline }}
  367.                                         {% endif %}
  368.                                     </a>
  369.                                 </div>
  370.                                 {% if helplineHours %}
  371.                                     <div class="column is-block is-full has-text-centered">
  372.                                         <span>{{ 'call_center_work_hours'|trans }}: {{ helplineHours.name }}</span>
  373.                                     </div>
  374.                                 {% endif %}
  375.                             </div>
  376.                             <!-- END OF CONTACT -->
  377.                         </Slide>
  378.                     </burger-menu>
  379.                     <a class="navbar-item image logo" href="{{ path('homepage') }}">
  380.                         {% if app.request.locale == 'ro' %}
  381.                             <img id="mobile-logo" class="mobile-logo" src="{{ staticImages[locale].logo}}" alt="Logo {{ language.shopName }}" style="height: auto !important;">
  382.                         {% else %}
  383.                             <img id="mobile-logo" class="mobile-logo" src="{{ staticImages[locale].logo}}" alt="Logo {{ language.shopName }}">
  384.                         {% endif %}
  385.                     </a>
  386.                 </div>
  387.                 <!-- START OF MIDDLE SEARCH INPUT -->
  388.                 <div id="Search" class="column left is-hidden-mobile">
  389.                     <form action="{{ path('search') }}" id="search_form">
  390.                         <div class="field has-addons">
  391.                             <p class="control is-expanded">
  392.                                 {% set searchQuery = '' %}
  393.                                 {% if app.request.query.get('query') %}
  394.                                     {% set searchQuery = app.request.query.get('query') %}
  395.                                 {% endif %}
  396.                                 {% if app.request.query.get('search') %}
  397.                                     {% set serachData = app.request.query.get('search') %}
  398.                                     {% if searchData['query'] is defined %}
  399.                                         {% set searchQuery = searchData['query'] %}
  400.                                     {% endif %}
  401.                                 {% endif %}
  402.                                 <input id="search_autocomplete" name="query" type="text" class="input" value="{{ searchQuery }}" placeholder="{{ 'search'|trans }}...">
  403.                             </p>
  404.                             <div class="control">
  405.                                 <button type="submit" class="button"><img alt="search" class="loop-search" src="/v2/ico/loop_search.svg" /></button>
  406.                                 <div style="display: inline-block; position: absolute; margin-top: 0px; margin-left: -80px; z-index: 100000" id="search_loader_container">
  407.                                     <img id="search_loader" style="max-width: 15px; margin-top:15px; display: none; z-index: 10000000" src="/images/ajax-loader.gif">
  408.                                 </div>
  409.                             </div>
  410.                         </div>
  411.                     </form>
  412.                 </div>
  413.                 <!-- END OF MIDDLE SEARCH INPUT -->
  414.                 <div class="column left info-bar is-hidden-touch">
  415.                     <div class="navbar-item">
  416.                         <img style="height:36px;" class="margin-right-8" src="/v2/ikonki_nowe.png" alt="">
  417.                     </div>
  418.                     <div class="navbar-item">
  419.                         <span class="header-text-color">
  420.                             {{ '16_years_market_300_customers'|trans|raw }}
  421.                         </span>
  422.                     </div>
  423.                 </div>
  424.                 <div class="column right header-product-bar">
  425.                     <a href="{{ path('compare_products_summary') }}" class="navbar-item with-counter compare-element">
  426.                         <img src="/v2/ico/compare.svg" />
  427.                         <span class="counter compareCounter {% if compareCounter > 0 %}has-items{% endif %}">{{ compareCounter }}</span></a>
  428.                     <a href="{{ path('cart') }}" class="navbar-item with-counter">
  429.                         <img src="/v2/ico/cart.svg" />
  430.                         <span class="counter {% if countProducts %}has-items{% endif %}">{{ countProducts }}</span>
  431.                     </a>
  432.                     {% if app.user is defined and app.user and app.user.id and app.user.registered %}
  433.                         <a href="{{ path('my_account') }}" class="navbar-item">
  434.                             <img src="/v2/ico/profile.svg" />
  435.                         </a>
  436.                     {% else %}
  437.                         <a href="{{ path('fos_user_security_login_extension') }}" class="navbar-item">
  438.                             <img src="/v2/ico/profile.svg" />
  439.                         </a>
  440.                     {% endif %}
  441.                     <a href="#" id="Search-icon" class="navbar-item is-hidden-tablet" @click="toggleSearchBar">
  442.                         <img id="loop_search_mobile" src="/v2/ico/loop_search_mobile.svg" />
  443.                     </a>
  444.                 </div>
  445.             </div>
  446.         </div>
  447.         <form action="{{ path('search') }}">
  448.             <div class="search-bar color-gray navbar is-hidden-tablet" v-show="showSearchBar" v-cloak>
  449.                 <div class="field has-addons">
  450.                     <p class="control is-expanded">
  451.                         <input name="query" type="text" class="input" value="{{ app.request.query.get('query') }}" placeholder="{{ 'search'|trans }}...">
  452.                     </p>
  453.                     <div class="control">
  454.                         <button type="submit" class="button"><img src="/v2/ico/loop_search.svg" style="height:20px;" /></button>
  455.                     </div>
  456.                 </div>
  457.             </div>
  458.         </form>
  459.         <!-- END OF MIDDLE BAR -->
  460.         <!-- START OF BOTTOM BAR -->
  461.         <div id="bottom-bar" class="container is-hidden-touch">
  462.             <nav class="navbar ">
  463.                 <div class="navbar-brand desktop">
  464.                 </div>
  465.                 <div id="navMenubd" class="navbar-menu">
  466.                     <div class="navbar-start">
  467.                         <div class="navbar-item has-dropdown is-mega"
  468.                              :class="openAll ? 'is-active' : ''">
  469.                             <div class="navbar-link has-text-weight-medium"
  470.                                  :class="hoverAllProducts ? 'is-regular-link-hovered' :  ''" href="#"
  471.                                  @mouseover="overAll"
  472.                                  @click="toggleAll">
  473.                                 {{ 'all_products'|trans }}
  474.                             </div>
  475.                             <div class="navbar-dropdown"
  476.                                  @mouseover="hoverAllProducts = true"
  477.                                  @mouseleave="leaveAll">
  478.                                 <div class="container">
  479.                                     <div class="columns content mega-container">
  480.                                         <div class="column is-one-fifth">
  481.                                             <div class="columns">
  482.                                                 <div class="column">
  483.                                                     <h4 class="is-mega-menu-title">{{ 'rooms'|trans }}</h4>
  484.                                                     {% for category in categories|slice(0,15) %}
  485.                                                         <a data-target="all-prod-image" data-image="{% if category.imageName2 %}/images/category/{{ category.imageName2 }}{% endif %}" class="navbar-item" href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
  486.                                                             <div class="navbar-content">
  487.                                                                 <p>{{ category.name }}</p>
  488.                                                             </div>
  489.                                                         </a>
  490.                                                     {% endfor %}
  491.                                                 </div>
  492.                                                 <div class="column">
  493.                                                     <h4 class="is-mega-menu-title">&nbsp;</h4>
  494.                                                     {% for category in categories|slice(15,30) %}
  495.                                                         <a data-target="all-prod-image" data-image="{% if category.imageName2 %}/images/category/{{ category.imageName2 }}{% endif %}" class="navbar-item" href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
  496.                                                             <div class="navbar-content">
  497.                                                                 <p>{{ category.name }}</p>
  498.                                                             </div>
  499.                                                         </a>
  500.                                                     {% endfor %}
  501.                                                 </div>
  502.                                             </div>
  503.                                         </div>
  504.                                         <div class="column is-one-fifth is-offset-2">
  505.                                             <div class="columns">
  506.                                                 <div class="column">
  507.                                                     <h4 class="is-mega-menu-title">{{ 'furnitureTypes'|trans }}</h4>
  508.                                                     {% for furnitureType in furnitureTypes|slice(0,10) %}
  509.                                                         <a data-target="all-prod-image" data-image="{% if furnitureType.imageName %}/images/category/{{ furnitureType.imageName }}{% endif %}" class="navbar-item" href="{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}">
  510.                                                             <div class="navbar-content">
  511.                                                                 <p>{{ furnitureType.name }}</p>
  512.                                                             </div>
  513.                                                         </a>
  514.                                                     {% endfor %}
  515.                                                 </div>
  516.                                                 <div class="column">
  517.                                                     <h4 class="is-mega-menu-title">&nbsp;</h4>
  518.                                                     {% for furnitureType in furnitureTypes|slice(10,30) %}
  519.                                                         <a data-target="all-prod-image" data-image="{% if furnitureType.imageName %}/images/category/{{ furnitureType.imageName }}{% endif %}" class="navbar-item" href="{{ path('furnitureType', {'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}">
  520.                                                             <div class="navbar-content">
  521.                                                                 <p>{{ furnitureType.name }}</p>
  522.                                                             </div>
  523.                                                         </a>
  524.                                                     {% endfor %}
  525.                                                 </div>
  526.                                             </div>
  527.                                         </div>
  528.                                         <div class="column is-offset-2">
  529.                                             <div class="navbar-content">
  530.                                                 <img id="all-prod-image" class="megamenu-img" src="/images/wszystkie_produkty.jpg" alt="Szybka dostawa w 24h">
  531.                                             </div>
  532.                                         </div>
  533.                                         <!-- <div class="column desktop widescreen all-products-image center">
  534.                                             <img src="/images/chair.png" alt="">
  535.                                         </div> -->
  536.                                     </div>
  537.                                 </div>
  538.                             </div>
  539.                         </div>
  540.                         <div class="navbar-item has-dropdown is-mega"
  541.                              :class="open24h ? 'is-active' : ''">
  542.                             <div class="navbar-link has-text-weight-medium"
  543.                                  :class="hover24h ? 'is-regular-link-hovered' :  ''" href="#"
  544.                                  @mouseover="over24h"
  545.                                  @click="toggle24h">
  546.                                 {{ 'delivery24Products'|trans }}
  547.                             </div>
  548.                             <div id="blogDropdown"
  549.                                  class="navbar-dropdown "
  550.                                  @mouseover="hover24h = true"
  551.                                  @mouseleave="leave24h">
  552.                                 <div class="container">
  553.                                     <div class="columns content mega-container">
  554.                                         <div class="column is-one-fifth">
  555.                                             <div class="columns">
  556.                                                 <div class="column">
  557.                                                     <h4 class="is-mega-menu-title">{{ 'rooms'|trans }}</h4>
  558.                                                     {% for category in cat24h|slice(0,15) %}
  559.                                                         <a data-target="prod-image-24" data-image="{% if category.imageName2 %}/images/category/{{ category.imageName2 }}{% endif %}" class="navbar-item" href="{{ path('category', {'av24h':'24h', 'id':category.id, 'slug':category.slug}) }}">
  560.                                                             <div class="navbar-content">
  561.                                                                 <p>{{ category.name }} {{ addon }}</p>
  562.                                                             </div>
  563.                                                         </a>
  564.                                                     {% endfor %}
  565.                                                 </div>
  566.                                                 <div class="column">
  567.                                                     <h4 class="is-mega-menu-title">&nbsp;</h4>
  568.                                                     {% for category in cat24h|slice(15,30) %}
  569.                                                         <a data-target="prod-image-24" data-image="{% if category.imageName2 %}/images/category/{{ category.imageName2 }}{% endif %}" class="navbar-item" href="{{ path('category', {'av24h':'24h', 'id':category.id, 'slug':category.slug}) }}">
  570.                                                             <div class="navbar-content">
  571.                                                                 <p>{{ category.name }} {{ addon }}</p>
  572.                                                             </div>
  573.                                                         </a>
  574.                                                     {% endfor %}
  575.                                                 </div>
  576.                                             </div>
  577.                                         </div>
  578.                                         <div class="column is-one-fifth is-offset-2">
  579.                                             <div class="columns">
  580.                                                 <div class="column">
  581.                                                     <h4 class="is-mega-menu-title">{{ 'furnitureTypes'|trans }}</h4>
  582.                                                     {% for furnitureType in furnitureTypes24h|slice(0,10) %}
  583.                                                         <a data-target="prod-image-24" data-image="{% if furnitureType.imageName %}/images/category/{{ furnitureType.imageName }}{% endif %}" class="navbar-item" href="{{ path('furnitureType', {'customFilter':'24h', 'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}">
  584.                                                             <div class="navbar-content">
  585.                                                                 <p>{{ furnitureType.name }} {{ addon }}</p>
  586.                                                             </div>
  587.                                                         </a>
  588.                                                     {% endfor %}
  589.                                                 </div>
  590.                                                 <div class="column">
  591.                                                     <h4 class="is-mega-menu-title">&nbsp;</h4>
  592.                                                     {% for furnitureType in furnitureTypes24h|slice(10,30) %}
  593.                                                         <a data-target="prod-image-24" data-image="{% if furnitureType.imageName %}/images/category/{{ furnitureType.imageName }}{% endif %}" class="navbar-item" href="{{ path('furnitureType', {'customFilter':'24h', 'furnitureTypeId':furnitureType.id, 'slug':furnitureType.slug}) }}">
  594.                                                             <div class="navbar-content">
  595.                                                                 <p>{{ furnitureType.name }} {{ addon }}</p>
  596.                                                             </div>
  597.                                                         </a>
  598.                                                     {% endfor %}
  599.                                                 </div>
  600.                                             </div>
  601.                                         </div>
  602.                                         <div class="column is-offset-2">
  603.                                             <div class="navbar-content">
  604.                                                 {% if app.request.locale == 'cz' %}
  605.                                                     <img class="megamenu-img" id="prod-image-24" src="/images/48h_cz.png" alt="48h">
  606.                                                 {% elseif app.request.locale == 'sk' %}
  607.                                                     <img class="megamenu-img" id="prod-image-24" src="/images/24h_sk.png" alt="48h">
  608.                                                 {% elseif app.request.locale == 'ro' %}
  609.                                                     <img class="megamenu-img" id="prod-image-24" src="/images/ro/box_24h-01.jpg" alt="48h">
  610.                                                 {% else %}
  611.                                                     <img class="megamenu-img" id="prod-image-24" src="/images/maj_2019/box_24h.jpg" alt="Szybka dostawa w 24h">
  612.                                                 {% endif %}
  613.                                             </div>
  614.                                         </div>
  615.                                         <!-- <div class="column desktop widescreen all-products-image center">
  616.                                             <img src="/images/chair.png" alt="">
  617.                                         </div> -->
  618.                                     </div>
  619.                                 </div>
  620.                             </div>
  621.                         </div>
  622.                         <div class="navbar-item has-dropdown is-mega"
  623.                              :class="openSales ? 'is-active' : ''">
  624.                             <div class="navbar-link is-red-navbar-link has-text-weight-medium"
  625.                                  :class="hoverSales ? 'is-red-navbar-link-hovered' :  ''" href="#"
  626.                                  @mouseover="overSales"
  627.                                  @click="toggleSales">
  628.                                 {{ 'header_promotions'|trans }}
  629.                             </div>
  630.                             <div id="moreDropdown"
  631.                                  class="navbar-dropdown "
  632.                                  @mouseover="hoverSales = true"
  633.                                  @mouseleave="leaveSales">
  634.                                 <div class="container">
  635.                                     <div class="columns content mega-container">
  636.                                         <div class="column is-one-quarter">
  637.                                             {% for category in promoCategories %}
  638.                                                 {% if category.id == 121 %}
  639.                                                     <a style="font-weight: normal; background: #f9f9fb" class="navbar-item sales-card" href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
  640.                                                 {% endif %}
  641.                                             {% endfor %}
  642.                                                 <div class="navbar-content">
  643.                                                     <h5 class="has-text-weight-semibold title">{{ 'discount_category_header'|trans }}</h5>
  644.                                                     <p>{{ 'dicount_category_header_helper'|trans }}
  645.                                                         {% for category in promoCategories %}
  646.                                                             {% if category.id == 121 %}
  647.                                                                 <strong>
  648.                                                                     {{ 'visit_category'|trans }}
  649.                                                                     &#187;
  650.                                                                 </strong>
  651.                                                             {% endif %}
  652.                                                         {% endfor %}
  653.                                                     </p>
  654.                                                 </div>
  655.                                             </a>
  656.                                             {% for category in promoCategories %}
  657.                                                 {% if category.id == 237 %}
  658.                                                     <a style="font-weight: normal; background: #f9f9fb" class="navbar-item sales-card" href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
  659.                                                 {% endif %}
  660.                                             {% endfor %}
  661.                                                 <div class="navbar-content">
  662.                                                     <h5 class="has-text-weight-semibold title">{{ 'outlet'|trans }}</h5>
  663.                                                     <p>{{ 'outlet_helper_text'|trans }}
  664.                                                         {% for category in promoCategories %}
  665.                                                             {% if category.id == 237 %}
  666.                                                                 <strong>
  667.                                                                     {{ 'visit_category'|trans }}
  668.                                                                     &#187;
  669.                                                                 </strong>
  670.                                                             {% endif %}
  671.                                                         {% endfor %}
  672.                                                     </p>
  673.                                                 </div>
  674.                                             </a>
  675.                                             {% if strefaOkazji is defined and strefaOkazji.id is defined and strefaOkazji.id and app.request.locale == 'pl' %}
  676.                                                 <a style="font-weight: normal; background: #f9f9fb" class="navbar-item sales-card" href="{{ path('landing-page-front', {'slug':strefaOkazji.slug, 'id':strefaOkazji.id}) }}">
  677.                                                     <div class="navbar-content">
  678.                                                         <h5 class="has-text-weight-semibold title">{{ 'strefa_okazji_title'|trans }}</h5>
  679.                                                         <p>{{ 'strefa_okazji_promo_helper_text'|trans }} <br/>
  680.                                                             <strong>
  681.                                                                 {{ 'visit_category'|trans }}
  682.                                                                 &#187;
  683.                                                             </strong>
  684.                                                         </p>
  685.                                                     </div>
  686.                                                 </a>
  687.                                             {% endif %}
  688.                                         </div>
  689.                                         <div class="column">
  690.                                             <div class="columns">
  691.                                                 {% for banner in mainBanners|slice(0,3) %}
  692.                                                     <!-- START OF ARTICLE -->
  693.                                                         <div class="column is-one-third sales-chair">
  694.                                                             <div>
  695.                                                                 <div class="card">
  696.                                                                     <div class="card-image1">
  697.                                                                         <div class="image">
  698.                                                                             <a href="{{ banner.url }}">
  699.                                                                                 <img style="max-height: 180px!important;" src="/images/important/{{ banner.imageName }}" />
  700.                                                                             </a>
  701.                                                                             <div style="text-align:center; font-weight: 500; background: {{ banner.color }}!important; color: {{ banner.campaignTextColor }}!important;">
  702.                                                                                 {{ banner.title }}
  703.                                                                             </div>
  704.                                                                         </div>
  705.                                                                     </div>
  706.                                                                 </div>
  707.                                                             </div>
  708.                                                         </div>
  709.                                                     <!-- END OF ARTICLE -->
  710.                                                 {% endfor %}
  711.                                             </div>
  712.                                             <div class="columns">
  713.                                                 {% for banner in mainBanners|slice(3,6) %}
  714.                                                     <!-- START OF ARTICLE -->
  715.                                                     <div class="column is-one-third sales-chair">
  716.                                                         <div>
  717.                                                             <div class="card">
  718.                                                                 <div class="card-image1">
  719.                                                                     <div class="image">
  720.                                                                         <a href="{{ banner.url }}">
  721.                                                                             <img style="max-height: 180px!important;" src="/images/important/{{ banner.imageName }}" />
  722.                                                                         </a>
  723.                                                                         <div style="text-align:center; font-weight: 500; background: {{ banner.color }}!important; color: {{ banner.campaignTextColor }}!important;">
  724.                                                                             {{ banner.title }}
  725.                                                                         </div>
  726.                                                                     </div>
  727.                                                                 </div>
  728.                                                             </div>
  729.                                                         </div>
  730.                                                     </div>
  731.                                                     <!-- END OF ARTICLE -->
  732.                                                 {% endfor %}
  733.                                             </div>
  734.                                         </div>
  735.                                     </div>
  736.                                 </div>
  737.                             </div>
  738.                         </div>
  739.                         <div class="navbar-link is-red-navbar-link is-arrowless has-text-weight-medium">
  740.                             {% if app.request.locale == 'ro' %}
  741.                                 <a style="color:#ac7c09" href="https://www.mobila24.ro/varf-gama/272/c">{{ 'premium'|trans }}</a>
  742.                             {% else %}
  743.                                 <a style="color:#ac7c09" href="/premium/272/c">{{ 'premium'|trans }}</a>
  744.                             {% endif %}
  745.                         </div>
  746.                         {% if app.request.locale == 'pl' %}
  747.                             <div class="navbar-link is-red-navbar-link is-arrowless has-text-weight-medium" style="margin-left:20px;">
  748.                                 <a style="color:#ac7c09" href="/meble-smart/312/c">{{ 'Meble smart'|trans }}</a>
  749.                             </div>
  750.                         {% endif %}
  751.                         {% if app.request.locale == 'cz' %}
  752.                             <div class="navbar-link is-red-navbar-link is-arrowless has-text-weight-medium" style="margin-left:20px;">
  753.                                 <a style="color:#ac7c09" href="/nábytek-smart/312/c">{{ 'Nábytek Smart'|trans }}</a>
  754.                             </div>
  755.                         {% endif %}
  756.                         {% if app.request.locale == 'sk' %}
  757.                             <div class="navbar-link is-red-navbar-link is-arrowless has-text-weight-medium" style="margin-left:20px;">
  758.                                 <a style="color:#ac7c09" href="/nábytok-smart/312/c">{{ 'Nábytok Smart'|trans }}</a>
  759.                             </div>
  760.                         {% endif %}
  761.                         {% if app.request.locale == 'ro' %}
  762.                             <div class="navbar-link is-red-navbar-link is-arrowless has-text-weight-medium" style="margin-left:20px;">
  763.                                 <a style="color:#ac7c09" href="/mobilier-smart/312/c">{{ 'Mobilier Smart'|trans }}</a>
  764.                             </div>
  765.                         {% endif %}
  766.                     </div>
  767.                     <div class="navbar-end">
  768.                         <div class="column right product-question">
  769.                             {% if countProducts %}
  770.                                 <a href="{{ path('send_request') }}" class="header-text-color has-text-weight-medium navbar-item">{{ 'askForProduct'|trans }} <i class="margin-left-8 fas fa-long-arrow-alt-right"></i></a>
  771.                             {% else %}
  772.                                 {#
  773.                                 <a href="" class="right has-text-weight-medium header-text-color">
  774.                                     Sprawdź zamówienie
  775.                                 </a>
  776.                                 #}
  777.                             {% endif %}
  778.                         </div>
  779.                     </div>
  780.                 </div>
  781.             </nav>
  782.         </div>
  783.         <!-- END OF BOTTOM BAR -->
  784.     </header>
  785. </hdr-cmp>
  786. </div>