custom/plugins/ShopWithMeUI/src/Resources/views/storefront/layout/header/header.html.twig line 1

Open in your IDE?
  1. {% block layout_header %}
  2.     {% set isoCode = page.header.activeLanguage.translationCode.code|lower|split('-') %}
  3.     
  4.     {% set flagCountry = isoCode[1] %}
  5.     {% set flagLanguage = isoCode[0] %}
  6.     {% set categories = page.extensions.swmUI.categories %}
  7.     {% set countNotViewNotification = page.extensions.swmUI.countNotViewNotification %}
  8.     {% set totalQuantityCart = page.extensions.swmUI.totalQuantityCart %}
  9.     {# {% if context.customer %}
  10.         {% set amityUserLoginData = amityLogin(context.customer) %}
  11.         {% set amityLock = false %}
  12.     {% else %}
  13.         {% set amityUserLoginData = amityLoginGuest() %}
  14.         {% set amityLock = true %}
  15.     {% endif %} #}
  17.     {% set redirectUrl = app.request.get('_route') %}
  19.     {% set redirectParams = app.request.attributes.get('_route_params') %}
  20.     {% set redirectParameters = redirectParams|json_encode %}
  21.     {% set noti = page.header.extensions.swmUIHeader.notificationCount %}
  22.     <div class="amity-client" data-econsor-amity="true" data-api-key="{{ amityUserLoginData.apiKey }}" data-user-id="{{ amityUserLoginData.users|first.userId }}" data-user-auth="{{ amityUserLoginData.auth }}" data-lock="{{ amityLock }}"></div>
  23.     <div id="swm-header" class="row align-items-center" 
  24.     data-path="{{ path('frontend.notification.list') }}" 
  25.     data-csrf="{{ sw_csrf('frontend.notification.list', {'mode': 'token'}) }}"
  26.     >
  27.         <section class="home_header_container_section position-relative width-full" style="margin: 0;">
  29.             <div id="home_header_container" class="d-flex justify-between items-center">
  30.                 <div class="banner_img home_header_center_logo">
  31.                     <a href="{{ seoUrl('frontend.home.page') }}">
  32.                         <img src="{{ asset('bundles/shopwithmeui/assets/imgs/shopwithme.png') }}" style="width: 131.38px"/>
  33.                     </a>
  34.                 </div>
  35.                 <div id="home_header_center_view" class="d-flex justify-center items-center mobile:d-none" style="gap:32px">
  36.                     <div id="home_header_show_products" class="home_header_center_view-item d-flex">
  37.                         <span class="typo-sub-text-3-pr">{{ "app.header.navigation.product"|trans|sw_sanitize }}</span>
  38.                         <img src="{{ asset('bundles/shopwithmeui/assets/imgs/chevron-down.png') }}"/>
  40.                         <div id="home_header_show_products__menu__layer">
  41.                             <div id="home_header_show_products__menu">
  42.                                 {% for category in categories %}
  43.                                     <a class="home_header_show_products__menu__item"{% if category.id == '4b9877842d644023a899643e1cd8548f' and flagCountry not in ['vn'] %} href="{{ seoUrl('frontend.shop4free') }}" {% else %} href="{{ seoUrl('frontend.current-deals', { category: category.id }) }}"{% endif %}>
  44.                                         <img class="home_header_show_products__menu__item__icon" src="{{ asset('bundles/shopwithmeui/assets/icons/category-' ~ category.id ~ '-icon.svg') }}"/>
  45.                                         {{ category.name }}
  46.                                     </a>
  47.                                 {% endfor %}
  48.                             </div>
  49.                         </div>
  50.                     </div>
  51.                     {% if flagCountry not in ['vn'] %}
  52.                     <a class="home_header_center_view-item" href="{{ seoUrl('frontend.shop4free') }}">
  53.                         <span class="typo-sub-text-3-pr">{{ "app.header.navigation.shop4free"|trans|sw_sanitize }}</span>
  54.                     </a>
  55.                     {% endif %}
  56.                     <a class="home_header_center_view-item" href="{{ seoUrl('frontend.ai.stream') }}">
  57.                         <span class="typo-sub-text-3-pr">{{ "app.header.navigation.aiStream"|trans|sw_sanitize }}</span>
  58.                     </a>
  59.                     <a class="home_header_center_view-item" href="{{ seoUrl('frontend.my.deals') }}">
  60.                         <span class="typo-sub-text-3-pr">{{"app.myDeals"|trans|sw_sanitize}}</span>
  61.                     </a>
  62.                 </div>
  63.                 <div class="home_header_right_view d-flex justify-center items-center" style="gap:16px">
  65.                 {% set isVnCustomer = context.customer is not null and context.customer.defaultShippingAddress.country.iso|upper == 'VN' %}
  66.                 {% if not (isVnCustomer and flagCountry|upper == 'VN') %}
  67.                     <div id="home_header_language" class="dzb-select">
  68.                         <div class="dzb-select__label-value d-flex items-center justify-center" style="gap:8px">
  69.                             <img src="{{ asset('bundles/shopwithmeui/assets/imgs/flag_' ~ flagCountry ~ '.png') }}" alt="English Flag" style="width: 20px;"/>
  70.                             <img src="{{ asset('bundles/shopwithmeui/assets/imgs/chevron-down.png') }}"/>
  71.                         </div>
  73.                         <div class="dzb-select__options">
  74.                             <form method="post" action="{{ path('frontend.checkout.switch-language') }}" class="w-100" data-form-auto-submit="true">
  75.                                 <div class="home_header_languge_container-content d-flex flex-col">
  76.                                     {% block layout_header_actions_language_widget_form_csrf %}
  77.                                         {{ sw_csrf('frontend.checkout.switch-language') }}
  78.                                     {% endblock %}
  79.                                     {% for language in page.header.languages %}
  80.                                         {% set isoCode = language.translationCode.code|lower|split('-') %}
  81.                                         {% set flagCountry = isoCode[1] %}
  82.                                         {% set flagLanguage = isoCode[0] %}
  83.                                         {% if flagCountry not in ['in', 'sk', 'cz'] %}
  84.                                             <button class="dzb-select__options__option swm-btn-no-style home_header_languge_container-item d-flex items-center justify-between border-radius-7" type="submit" name="languageId" value="{{ language.id }}" {% if language.id is same as(page.header.activeLanguage.id) %} disabled {% endif %}>
  85.                                                 <div class="home_header_languge_container-item-left d-flex items-center justify-start" style="gap: 8px">
  86.                                                     <img src="{{ asset('bundles/shopwithmeui/assets/imgs/flag_'~ flagCountry ~'.png') }}" alt="home_header_language_container-item-left-img" class="home_header_language_container-item-left-img">
  87.                                                     <div class="home_header_languge_container-item-left-title">
  88.                                                         <div class="home_header_languge_container-item-left-title-name typo-sub-text-4-smb">
  89.                                                             {{("app.header.language." ~ flagLanguage)|trans|sw_sanitize }}
  90.                                                         </div>
  91.                                                     </div>
  92.                                                 </div>
  93.                                             </button>
  94.                                         {% endif %}
  95.                                     {% endfor %}
  97.                                     <input name="redirectTo" type="hidden" value="{{ app.request.get('_route') }}"/>
  99.                                     {% for key, value in app.request.attributes.get('_route_params') %}
  100.                                         <input name="redirectParameters[{{ key }}]" type="hidden" value="{{ value }}">
  101.                                     {% endfor %}
  102.                                 </div>
  103.                             </form>
  104.                         </div>
  105.                     </div>
  106.                 {% endif %}
  108.                     <img id="home_header_search" class="cursor-pointer" src="{{ asset('bundles/shopwithmeui/assets/icons/ic_search.svg') }}"/>
  109.                     <a id="home_header_cart" href="{{ context.customer is not null ? seoUrl('frontend.checkout.cart.page') : seoUrl('frontend.account.login', { redirectTo: 'frontend.checkout.cart.page' }) }}">
  110.                         <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_cart.svg') }}"/>
  111.                         <div class="quantity_cart {% if totalQuantityCart == 0 %}d-none{% endif %}">{{ totalQuantityCart }}</div>
  112.                     </a>
  114.                     {% if context.customer is not null %}
  115.                         <div id="home_header_noti" class="position-relative">
  116.                             <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_bell.svg') }}"/>
  117.                             <!-- Noti red dot -->
  118.                             <div class="position-absolute home_header_noti_red-dot {% if countNotViewNotification <= 0 %}d-none{% endif %}"></div>
  119.                         </div>
  120.                         <div id="home_header_user" class="swm_ccs_none_mobile">
  121.                             <img src="{{ context.customer.extensions.avatar.url ?: asset('bundles/shopwithmeui/assets/imgs/no_avatar.jpeg') }}"/>
  122.                         </div>
  123.                     {% else %}
  124.                         <div class="home_header_center_view-item text-decoration-none">
  125.                             <a href="{{ seoUrl('frontend.account.login', { redirectTo: redirectUrl, redirectParameters: redirectParameters }) }}" class="mobile:d-none typo-sub-text-3 swm-btn swm-btn-shop4free-secondary swm_button_extra_for_small text-decoration-none">
  126.                                 <div class="d-flex items-center justify-between" style="gap: 4px">
  127.                                     <span class="button-title" style="font-size: 16px;">{{'app.header.navigation.loginSignup'|trans}}</span>
  128.                                     <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  129.                                         <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  130.                                         <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  131.                                     </svg>
  132.                                 </div>
  133.                             </a>
  135.                             <a href="{{ seoUrl('frontend.account.login', { redirectTo: redirectUrl, redirectParameters: redirectParameters }) }}" class="mobile:d-block" style="display: none">
  136.                                 <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  137.                                     <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1" stroke="#000" stroke-width="1.5" stroke-linecap="round"/>
  138.                                     <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  139.                                 </svg>
  140.                             </a>
  141.                         </div>
  142.                     {% endif %}
  143.                 </div>
  144.                 <div id="home_header_notification_rl_container" class="position-absolute">
  145.                     <div class="d-flex justify-between align-center items-center">
  146.                         <div class="d-flex" style="gap: 12px;">
  147.                             <img src="{{ asset('bundles/shopwithmeui/assets/imgs/img_wheel.png') }}" width="50px" height="50px"/>
  148.                             <div class="d-flex" style="gap:4px">
  149.                                 <span class="swm_home_header_text_base color_green">
  150.                                     {{ "app.header.notification.titleSpin"|trans|sw_sanitize }}</span>
  151.                             </div>
  152.                         </div>
  153.                         <div class="d-flex flex-col">
  154.                             <div class="typo-sub-text-3 swm-btn swm-btn-shop4free-secondary">
  155.                                 <span id="swm_btn_next_step" class="signup__button text-body-m white-space-nowrap">
  156.                                     {{ "app.header.notification.spinNow"|trans|sw_sanitize }}
  157.                                 </span>
  158.                             </div>
  159.                         </div>
  160.                         <img id="home_header_notification_rl_icon_close" src="{{ asset('bundles/shopwithmeui/assets/icons/ic_close_circle.svg') }}"/>
  161.                     </div>
  162.                 </div>
  163.                 <div id="home_header_notification_container" class="position-absolute">
  164.                     <div class="d-flex justify-between flex-col width-full" style="gap: 18px">
  165.                         <div class="justify-between d-flex">
  166.                             <span class="home_header_title">
  167.                                 {{ "app.header.notification.title"|trans|sw_sanitize }}
  168.                             </span>
  169.                             <div class="items-center d-flex" style="gap:10px">
  170.                                 <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_double_check_green.svg') }}"/>
  171.                                 <span class="home_header_noti_read">
  172.                                     {{ "app.header.notification.markAsRead"|trans|sw_sanitize }}
  173.                                 </span>
  174.                             </div>
  175.                         </div>
  176.                         <div id="home_header_noti_option_container" class="d-flex items-center width-full">
  177.                             <div class="d-flex justify-center noti_option_each active" data-id="">
  178.                                 <span class="swm_home_header_text_base">
  179.                                     {{ "app.header.notification.viewAll"|trans|sw_sanitize }}
  180.                                 </span>
  181.                                 <div class="justify-center align-center d-flex noti_option_each_count_container active">
  182.                                     <span class="swm_home_header_text_base">
  183.                                         {{ noti.all }}
  184.                                     </span>
  185.                                 </div>
  186.                             </div>
  187.                             <div class="d-flex justify-center noti_option_each" data-id="like">
  188.                                 <span class="swm_home_header_text_base">
  189.                                     {{ "app.header.notification.activity"|trans|sw_sanitize }}
  190.                                 </span>
  191.                                 <div class="justify-center align-center d-flex noti_option_each_count_container">
  192.                                     <span class="swm_home_header_text_base">
  193.                                         {{ noti.like }}
  194.                                     </span>
  195.                                 </div>
  196.                                 </div>
  197.                                     <div class="d-flex justify-center noti_option_each" data-id="followers">
  198.                                         <span class="swm_home_header_text_base">
  199.                                             {{ "app.header.notification.followers"|trans|sw_sanitize }}
  200.                                         </span>
  201.                                     <div class="justify-center align-center d-flex noti_option_each_count_container">
  202.                                     <span class="swm_home_header_text_base">
  203.                                         {{ noti.followers }}
  204.                                     </span>
  205.                                 </div>
  206.                                 </div>
  207.                                     <div class="d-flex justify-center noti_option_each" data-id="invites">
  208.                                         <span class="swm_home_header_text_base">
  209.                                             {{ "app.header.notification.invites"|trans|sw_sanitize }}
  210.                                         </span>
  211.                                     <div class="justify-center align-center d-flex noti_option_each_count_container">
  212.                                     <span class="swm_home_header_text_base">
  213.                                         {{ noti.invites }}
  214.                                     </span>
  215.                                 </div>
  216.                             </div>
  217.                         </div>
  218.                         <div id="home_header_notification_container_list" class="width-full">
  219.                             {# {% sw_include '@Storefront/storefront/component/header/notification.html.twig' %} #}
  220.                         </div>
  221.                     </div>
  222.                 </div>
  224.                 <div id="home_header_search_container" class="position-absolute" data-path="{{ path('frontend.product.search') }}" data-csrf="{{ sw_csrf('frontend.product.search', {"mode": "token"}) }}">
  225.                     <div class="home_header_search_container-content position-relative" style="gap: 12px; max-width: 100%;">
  226.                         <input class="swm_search_form-input width-full " type="text" id="searchProduct" name="search" placeholder="{{ "app.header.search.searchProduct"|trans|sw_sanitize }}"/>
  227.                         <img src="{{ asset('bundles/shopwithmeui/assets/icons/ic_search.svg') }}" alt="Search" class="position-absolute home_header_search_container-content-icon swm_search_form-button">
  228.                         <div class="home_header_search_container-product d-flex flex-col" style="max-height: 50vh; overflow-y: auto;"></div>
  229.                     </div>
  230.                 </div>
  232.                 <div id="home_header_profile_container" class="position-absolute">
  233.                     <div class="home_header_profile_container-box-content d-flex flex-col">
  234.                         <a class="home_header_profile_container-content-profile text-decoration-none" href="{{ seoUrl('frontend.account.home.page') }}">
  235.                             <div class="home_header_profile_container-content position-relative d-flex items-center" style="gap: 12px;">
  236.                                 <div class="home_header_profile_container-content-img d-flex">
  237.                                     <img src="{{ context.customer.extensions.avatar.url ?: asset('bundles/shopwithmeui/assets/imgs/no_avatar.jpeg') }}" width="100%"/>
  238.                                 </div>
  239.                                 <div class="home_header_profile_container-item-left-title">
  240.                                     <div class="home_header_profile_container-item-left-title-name typo-sub-text-3-pr">
  241.                                         {{context.customer.firstName}}
  242.                                         {{context.customer.lastName}}
  243.                                     </div>
  244.                                 </div>
  245.                             </div>
  246.                         </a>
  247.                         <a id="logout_btn--header" href="{{ seoUrl('frontend.account.logout.page') }}" class="typo-sub-text-3 swm-btn swm-btn-shop4free-secondary swm_button_extra_for_small text-decoration-none">
  248.                             <div class="d-flex items-center justify-between" style="gap: 4px">
  249.                                 <span class="button-title" style="font-size: 16px;">{{ "app.logout"|trans|sw_sanitize }}</span>
  250.                                 <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  251.                                     <path d="M9 17C11.1217 17 13.1566 16.1571 14.6569 14.6569C16.1571 13.1566 17 11.1217 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  252.                                     <path d="M1 9H11M11 9L8 6M11 9L8 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  253.                                 </svg>
  254.                             </div>
  255.                         </a>
  256.                     </div>
  257.                 </div>
  258.             </div>
  260.         </section>
  261.     </div>
  262. {% endblock %}