templates/front/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html class="no-js" lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <meta name="csrf-token" content="{{ csrf_token('front_api') }}">
  10.     {% set company = Globals.getCompany() %}
  11.     {% set companyName = company.name is iterable ? (company.name|first|default('')) : (company.name|default('')) %}
  13.     {% set companyLogo = company.logo is iterable ? (company.logo|first|default('')) : (company.logo|default('')) %}
  14.     {% set companyFooterLogo = company.footerLogo is iterable ? (company.footerLogo|first|default('')) : (company.footerLogo|default('')) %}
  15.     {% set companyAddress = company.address is iterable ? (company.address|first|default('')) : (company.address|default('')) %}
  16.     {% set companyPhone = company.phone is iterable ? (company.phone|first|default('')) : (company.phone|default('')) %}
  17.     {% set companyMail = company.mail is iterable ? (company.mail|first|default('')) : (company.mail|default('')) %}
  18.     {% set companyWebsite = company.website is iterable ? (company.website|first|default('')) : (company.website|default('')) %}
  19.      {% set companySocialLinks = company.socialLinks is iterable ? company.socialLinks : [] %}
  20.     {% set companyTitle = websiteSettingService.get('title', '') %}
  21.     {% set companyDescription = websiteSettingService.get('description', '') %}
  22.     {% set companyKeywords = websiteSettingService.get('keywords') is iterable ? (websiteSettingService.get('keywords')|first|default('')) : (websiteSettingService.get('keywords')|default('')) %}
  23.     {% set themeVars = websiteSettingService.get('themeVars') is iterable ? websiteSettingService.get('themeVars') : {} %}
  25.     <title>{% block title %} {{ companyTitle }} {% endblock %}</title>
  27.      {% block extra_head %}
  28.         <script>
  29.             window.webBaseUrl = '{{ absolute_url(asset('images/web'))|split('?')[0] }}';
  30.             window.imageBaseUrl = '{{ app.request.schemeAndHttpHost }}/images';
  33.             window.websiteSettings = {{ websiteSettings|json_encode|raw }};
  34.             window.CATALOG_FILTER_MAX_PRICE = Number(
  35.                 (window.websiteSettings && window.websiteSettings.catalogFilterMaxPrice) || 999999
  36.             ) || 999999;
  38.             window.APP_CLIENT = {{ app.user ? {
  39.                 id: app.user.id,
  40.                 firstName: app.user.firstName,
  41.                 telephone: app.user.phone,
  42.                 telephone2: app.user.secondPhone,
  43.                 email: app.user.email,
  44.                 country : app.user.country,
  45.                 region  : app.user.region,
  46.                 adresse: app.user.adress,
  47.                 isLogged: true
  48.             }|json_encode|raw : 'null' }};
  50.         </script>
  51.     {% endblock %}
  52.     <meta name="description"
  53.           content="{% block meta_description %}{{ seo_description|default('')|e }}{% endblock %}">
  55.     {% block meta %}
  56.         <meta name="keywords" content="{{ companyKeywords }}">
  57.         {#<meta name="description" content="{{ companyDescription }}">#}
  58.         <meta name="author" content="{{ companyName }}">
  59.         {# Facebook OG #}
  60.         <meta property="og:image" content="{{ asset(companyLogo)  }}">
  61.         <meta property="og:url" content=""{{ companyWebsite  }}">
  62.         <meta property="og:type" content="article">
  63.         <meta property="og:title" content="{{ companyTitle }}">
  64.         <meta property="og:description" content="{{ companyDescription }}">
  65.         {# Twitter OG #}
  66.         <meta name="twitter:title" content="{{ companyTitle }}">
  67.         <meta name="twitter:description" content="{{ companyDescription }}">
  68.         <meta name="twitter:image" content="{{ asset(companyLogo) }}">
  69.         <meta name="twitter:card" content="summary_large_image">
  70.     {% endblock %}
  72.     <script>
  73.         var BASE_URL="{{ app.request.schemeAndHttpHost ~ app.request.baseUrl }}";
  74.         // Filtres des tailles et couleurs
  75.         var taillesFilter = [];
  76.         var couleursFilter = [];
  77.         var CATEGORIES = {{ Globals.getCategories()|json_encode|raw }};
  78.         var CATEGORY_URL_TYPE = {{ Globals.getCategoryUrlType()|json_encode|raw }};
  79.         var MIXED_ASPECT_RATIO = {{ Globals.getMixedAspectRatio()|json_encode|raw }};
  80.         var TOP_SALES_PERIOD = {{ Globals.getTopSalesPeriod()|json_encode|raw }};
  82.         {# URLs images globales #}
  83.         window.IMG_PATHS = {
  84.             thumbSquare: '{{ IMG_THUMB_280 }}',
  85.             thumbPortrait: '{{ IMG_THUMB_300 }}',
  86.             web: '{{ IMG_WEB }}',
  87.             zoom: '{{ IMG_ZOOM }}'
  88.         };
  90.     </script>
  92.     {# Favicon #}
  94.     {# Template CSS #}
  95.     {% block stylesheets %}
  97.         <link rel="stylesheet" href="{{ asset('front/assets/css/base.css') }}">
  98.         <link rel="stylesheet" href="{{ asset('assets/bootstrap5/css/bootstrap.min.css') }}">
  100.         <link href="{{ asset('front/assets/toast/css/nice-toast-js.min.css') }}" rel="stylesheet" type="text/css" />
  101.          <link rel="icon" type="image/png" href="{{ asset('front/assets/imgs/theme/favicon.png')}}">
  102.         <link rel="shortcut icon" href="{{ asset('front/assets/imgs/theme/favicon.png') }}" type="image/x-icon">
  103.         <link rel="stylesheet" href="{{ asset('front/assets/css/main.css') }}">
  104.         <link rel="stylesheet" href="{{ asset('assets/css/front-theme.css') }}">
  105.         <link rel="stylesheet" href="{{ asset('front/assets/css/custom-style.css') }}">
  106.         <link rel="stylesheet" href="{{ asset('front/assets/css/filter-modal.css') }}">
  109.         {# UIcons Flaticon #}
  110.         <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-regular-straight/css/uicons-regular-straight.css">
  111.         <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css">
  112.         <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css">
  113.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
  116.         <style>
  117.             :root {
  118.                 --primary-color: {{ themeVars['--primary-color']|default('#2B2D2F') }};
  119.                 --secondary-color: {{ themeVars['--secondary-color']|default('#3F444A') }};
  120.                 --secondary-color-dark: {{ themeVars['--secondary-color-dark']|default('#1F2327') }};
  121.                 --secondary-color-light: {{ themeVars['--secondary-color-light']|default('#E8E6E1') }};
  122.                 --accent-color: {{ themeVars['--accent-color']|default('#C3A98B') }};
  123.                 --text-color: {{ themeVars['--text-color']|default('#1F1F1F') }};
  124.                 --text-muted: {{ themeVars['--text-muted']|default('#7A7A7A') }};
  125.                 --danger-color: {{ themeVars['--danger-color']|default('#B23A3A') }};
  126.                 --border-color: {{ themeVars['--border-color']|default('#E3E3E3') }};
  127.                 --font-family-base: {{ themeVars['--font-family-base']|default('"Space Grotesk", "Inter", system-ui, sans-serif') }};
  128.                 --font-family-heading: {{ themeVars['--font-family-heading']|default('"Poppins", "Inter", sans-serif') }};
  129.                 --font-family-meta: {{ themeVars['--font-family-meta']|default('"IBM Plex Sans", "Inter", sans-serif') }};
  130.                 --surface-color: {{ themeVars['--surface-color']|default('#FFFFFF') }};
  131.                 --surface-muted: {{ themeVars['--surface-muted']|default('#F8F9FA') }};
  132.                 --header-top-bg: {{ themeVars['--header-top-bg']|default('#000000') }};
  133.                 --header-top-color: {{ themeVars['--header-top-color']|default('#FFFFFF') }};
  134.                 --header-main-bg: {{ themeVars['--header-main-bg']|default(themeVars['--secondary-color-light']|default('#E8E6E1')) }};
  135.                 --header-main-border: {{ themeVars['--header-main-border']|default(themeVars['--border-color']|default('#E3E3E3')) }};
  136.                 --success-color: {{ themeVars['--success-color']|default('#16A34A') }};
  137.                 --warning-color: {{ themeVars['--warning-color']|default('#F59E0B') }};
  138.                 --rating-color: {{ themeVars['--rating-color']|default('#FFC107') }};
  139.                 --danger-soft-bg: {{ themeVars['--danger-soft-bg']|default('#FBE9E9') }};
  140.             }
  141.         </style>
  142.     {% endblock %}
  143.     <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '1239578710475196'); fbq('track', 'PageView'); </script>
  144. </head>
  145. <body>
  146. {# Google tag (gtag.js) #}
  147. <script async src="https://www.googletagmanager.com/gtag/js?id=G-4XS6978LX1"></script>
  148. <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-4XS6978LX1'); </script>
  149.     <header class="header-area site-header header-style-4 header-height-2">
  152.         {# BARRE 1 — INFOS UNIQUEMENT #}
  153.         {% set headerTop = websiteSettingService.get('headerTop', null) %}
  155.         {% if headerTop and headerTop.enabled %}
  156.         <div class="header-top text-white">
  157.             <div class="container text-center small">
  159.                 {% if headerTop.mode == 'marquee' %}
  160.                 <marquee behavior="scroll"
  161.                         direction="left"
  162.                         scrollamount="{{ headerTop.speed|default(4) }}">
  163.                     {% for item in headerTop.messages %}
  164.                         {{ item.text
  165.                             |replace({
  166.                                 '{{ freeDeliveryAmount }}': FREE_DELIVERY_AMOUNT,
  167.                                 '{{ companyName }}': companyName
  168.                             })
  169.                         }}
  170.                         {% if not loop.last %} – {% endif %}
  171.                     {% endfor %}
  172.                 </marquee>
  173.                 {% endif %}
  175.             </div>
  176.         </div>
  177.         {% endif %}
  180.         {# BARRE 2 — LOGO + MENU + ACTIONS #}
  181.         {% set frontCategories = Globals.getCategories() %}
  183.         <div class="header-middle d-lg-block">
  184.             <div class="container">
  185.                 <div class="d-flex align-items-center justify-content-between">
  187.                     <div class="header-action-icon-2 d-lg-none mobile-nav-trigger-wrap">
  188.                         <a href="#" class="burger-icon burger-icon-style-2" aria-label="Ouvrir le menu" role="button">
  189.                             <span class="burger-icon-top"></span>
  190.                             <span class="burger-icon-mid"></span>
  191.                             <span class="burger-icon-bottom"></span>
  192.                         </a>
  193.                     </div>
  195.                     {# Logo gauche (INCHANGÉ) #}
  196.                     <div class="logo logo-width-1">
  197.                         <a href="{{ path('home') }}">
  198.                             <img src="{{ asset(companyLogo) }}" alt="{{ companyName }} logo">
  199.                         </a>
  200.                     </div>
  202.                     {# Menu principal (INCHANGÉ) #}
  203.                     <nav class="header-nav d-none d-lg-flex" aria-label="Navigation principale">
  204.                         <ul class="main-nav">
  205.                             <li>
  206.                                 <a class="{% if app.request.attributes.get('_route') == 'home' %}active{% endif %}"
  207.                                 href="{{ path('home') }}">
  208.                                     <span class="fi-rs-home"></span>
  209.                                 </a>
  210.                             </li>
  212.                             {% for entry in frontCategories %}
  213.                                 {% set activeSubs = entry.getSubCategories()|filter(c => c.isActive) %}
  214.                                 {% set hasSubs = activeSubs|length > 0 %}
  216.                                 <li class="has-submenu {{ hasSubs ? 'has-children' : '' }}">
  217.                                     <a href="{{ path('front_category', { id: entry.id, name: entry.name|slug }) }}">
  218.                                         {{ entry.name }}
  219.                                         {% if hasSubs %}
  220.                                         {% endif %}
  221.                                     </a>
  223.                                     {% if hasSubs %}
  224.                                         <ul class="submenu">
  225.                                             {% for subCategory in activeSubs %}
  226.                                                 <li>
  227.                                                     <a href="{{ path('front_category', { id: subCategory.id, name: subCategory.name|slug }) }}">
  228.                                                         {{ subCategory.name }}
  229.                                                     </a>
  230.                                                 </li>
  231.                                             {% endfor %}
  232.                                         </ul>
  233.                                     {% endif %}
  234.                                 </li>
  235.                             {% endfor %}
  237.                             <li><a href="{{ path('front_products_new') }}">NOUVEAUTÉS</a></li>
  238.                             <li><a href="{{ path('front_products_promo') }}">PROMOTIONS</a></li>
  239.                             <li><a href="{{ path('pack_products') }}">NOS PACKS</a></li>
  241.                         </ul>
  242.                     </nav>
  244.                     {# Actions droite #}
  245.                     <div class="header-action-right app">
  246.                         <div class="header-action-2">
  248.                             {# Bouton recherche #}
  249.                             <div class="header-action-icon-2 position-relative">
  250.                                 <button type="button"
  251.                                         class="search-trigger"
  252.                                         id="headerSearchTrigger"
  253.                                         aria-label="Ouvrir la recherche"
  254.                                         aria-expanded="false"
  255.                                         aria-controls="headerSearchBar">
  256.                                     <img class="svgSearch"
  257.                                         src="{{ asset('front/assets/imgs/theme/icons/icon-search.svg') }}"
  258.                                         alt="{{ companyName }}">
  259.                                 </button>
  261.                             </div>
  262.                             {# Barre de recherche (dropdown) #}
  263.                             <div id="headerSearchBar" class="header-search-bar d-none" role="dialog" aria-label="Recherche">
  264.                                 <div class="header-search-inner">
  265.                                     <input type="search"
  266.                                         id="search"
  267.                                         class="form-control form-control-sm"
  268.                                         placeholder="Rechercher un produit..."
  269.                                         autocomplete="off">
  271.                                     <button type="button" id="button-search-desktop" class="btn btn-sm btn-primary">
  272.                                         Rechercher
  273.                                     </button>
  274.                                 </div>
  276.                                 <div id="headerSearchResults" class="header-search-results d-none" aria-live="polite">
  277.                                     <div class="hsr-grid">
  278.                                         <div class="hsr-products-col">
  279.                                             <div class="hsr-products-head">
  280.                                                 <div class="hsr-title">Produits</div>
  281.                                                 <div class="hsr-nav">
  282.                                                     <button type="button" id="hsrPrev" class="hsr-nav-btn" aria-label="Précédent">‹</button>
  283.                                                     <button type="button" id="hsrNext" class="hsr-nav-btn" aria-label="Suivant">›</button>
  284.                                                 </div>
  285.                                             </div>
  286.                                             <div class="hsr-products-grid" id="hsrProducts"></div>
  287.                                         </div>
  290.                                         <div class="hsr-cats-col">
  291.                                             <div class="hsr-title">Suggestions</div>
  292.                                             <div class="hsr-suggest-block">
  293.                                                 <div class="hsr-suggest-label">Catégories</div>
  294.                                                 <div class="hsr-cats-list" id="hsrCategories"></div>
  295.                                             </div>
  296.                                             <div class="hsr-suggest-block">
  297.                                                 <div class="hsr-suggest-label">Références</div>
  298.                                                 <div class="hsr-cats-list" id="hsrReferences"></div>
  299.                                             </div>
  300.                                         </div>
  301.                                     </div>
  304.                                     <div class="hsr-footer">
  305.                                         <button type="button" class="btn btn-sm btn btn-secondary" id="hsrClose">Fermer</button>
  306.                                         <a href="#" class="btn btn-sm btn-primary" id="hsrViewAll">Voir tous les résultats</a>
  307.                                     </div>
  308.                                 </div>
  309.                             </div>
  311.                             {# Favoris #}
  312.                             <div class="header-action-icon-2">
  313.                                 <a href="{{ path('front_wishlist') }}" id="wishlistLink">
  314.                                     <img class="svgInject"
  315.                                         src="{{ asset('front/assets/imgs/theme/icons/icon-heart.svg') }}"
  316.                                         alt="{{ companyName }}">
  317.                                     <span class="pro-count blue" id="wishlistCount">0</span>
  319.                                 </a>
  320.                             </div>
  322.                             {# Panier #}
  323.                             {% verbatim %}
  324.                             <div class="header-action-icon-2" id="app2" v-cloak>
  325.                                 <a class="mini-cart-icon" :href="route_cart">
  326.                                     <img :src="base_url+'/front/assets/imgs/theme/icons/icon-cart.svg'">
  327.                                     <span class="pro-count blue">{{ cart.length }}</span>
  328.                                 </a>
  329.                             </div>
  330.                             {% endverbatim %}
  332.                             {# Connexion #}
  333.                             {% if not app.user %}
  334.                                 <div class="header-action-icon-2">
  335.                                     <a href="{{ path('user_login') }}">
  336.                                         <i class="fi-rs-user"></i>
  337.                                     </a>
  338.                                 </div>
  339.                             {% else %}
  340.                                 <div class="header-action-icon-2">
  341.                                     <a href="{{ path('user_account') }}">
  342.                                         <img src="{{ asset('front/assets/imgs/theme/icons/icon-user.png') }}" alt="user">
  343.                                     </a>
  344.                                 </div>
  345.                             {% endif %}
  347.                         </div>
  349.                     </div>
  351.                 </div>
  352.             </div>
  353.         </div>
  355.         <div class="mobile-header-active mobile-header-wrapper-style">
  356.             <div class="mobile-header-wrapper-inner">
  357.                 <div class="mobile-header-top">
  358.                     <div class="mobile-header-logo">
  359.                         <a href="{{ path('home') }}">
  360.                             <img src="{{ asset(companyLogo) }}" alt="{{ companyName }} logo">
  361.                         </a>
  362.                     </div>
  363.                     <div class="mobile-menu-close close-style-wrap close-style-position-inherit">
  364.                         <button class="close-style search-close" type="button" aria-label="Fermer le menu">
  365.                             <i class="icon-top"></i>
  366.                             <i class="icon-bottom"></i>
  367.                         </button>
  368.                     </div>
  369.                 </div>
  371.                 <div class="mobile-header-content-area">
  372.                     <div class="mobile-search search-style-3 mobile-header-border">
  373.                         <form action="{{ path('home') }}" method="get" onsubmit="return false;">
  374.                             <input type="search" id="search-mobile" name="name" placeholder="Rechercher un produit..." autocomplete="off">
  375.                             <button type="button" id="button-search-mobile"><i class="fi-rs-search"></i></button>
  376.                         </form>
  377.                     </div>
  379.                     <div class="mobile-menu-wrap mobile-header-border">
  380.                         <nav aria-label="Navigation mobile">
  381.                             <ul class="mobile-menu">
  382.                                 <li><a href="{{ path('home') }}">Accueil</a></li>
  383.                                 {% for entry in frontCategories %}
  384.                                     {% set activeSubs = entry.getSubCategories()|filter(c => c.isActive) %}
  385.                                     {% set hasSubs = activeSubs|length > 0 %}
  386.                                     <li class="{{ hasSubs ? 'menu-item-has-children' : '' }}">
  387.                                         <a href="{{ path('front_category', { id: entry.id, name: entry.name|slug }) }}">
  388.                                             {{ entry.name }}
  389.                                         </a>
  390.                                         {% if hasSubs %}
  391.                                             <ul class="dropdown">
  392.                                                 {% for subCategory in activeSubs %}
  393.                                                     <li>
  394.                                                         <a href="{{ path('front_category', { id: subCategory.id, name: subCategory.name|slug }) }}">
  395.                                                             {{ subCategory.name }}
  396.                                                         </a>
  397.                                                     </li>
  398.                                                 {% endfor %}
  399.                                             </ul>
  400.                                         {% endif %}
  401.                                     </li>
  402.                                 {% endfor %}
  403.                                 <li><a href="{{ path('front_products_new') }}">Nouveautés</a></li>
  404.                                 <li><a href="{{ path('front_products_promo') }}">Promotions</a></li>
  405.                                 <li><a href="{{ path('pack_products') }}">Nos packs</a></li>
  406.                                 <li><a href="{{ path('front_wishlist') }}">Mes favoris</a></li>
  407.                                 <li><a href="{{ path('cart_show') }}">Mon panier</a></li>
  408.                                 {% if app.user %}
  409.                                     <li><a href="{{ path('user_account') }}">Mon compte</a></li>
  410.                                 {% else %}
  411.                                     <li><a href="{{ path('user_login') }}">Connexion</a></li>
  412.                                 {% endif %}
  413.                             </ul>
  414.                         </nav>
  415.                     </div>
  416.                 </div>
  417.             </div>
  418.         </div>
  420.         <div id="notify-app">
  421.             <div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
  422.                 <div class="modal-dialog modal-dialog-centered">
  423.                     <div class="modal-content">
  424.                         <div class="modal-header">
  425.                             <h5 class="modal-title" id="notifyModalLabel">Prévenez-moi</h5>
  426.                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  427.                         </div>
  428.                         <div class="modal-body">
  429.                             <p class="text-muted">Recevez un email dès que cette taille sera à nouveau disponible.</p>
  430.                             <div class="mb-3">
  431.                                 <label class="form-label">Adresse email</label>
  432.                                 <input type="email" class="form-control" v-model="notifyEmail" placeholder="email@exemple.com">
  433.                             </div>
  434.                             <p class="small text-secondary" v-if="notifyProduct">
  435.                                 Produit sélectionné : <strong v-text="notifyProduct.name"></strong>
  436.                             </p>
  437.                         </div>
  438.                         <div class="modal-footer">
  439.                             <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
  440.                             <button type="button" class="btn btn-primary" @click="submitNotify">Prévenez-moi</button>
  441.                         </div>
  442.                     </div>
  443.                 </div>
  444.             </div>
  445.         </div>
  446.     </header>
  449.     {# Modale Notification Produit ajouté au panier #}
  450.     <div id="cart-toast" class="cart-toast" aria-live="polite" aria-atomic="true">
  451.         <div class="cart-toast-content">
  452.             <img id="cart-toast-img" alt="">
  453.             <div class="cart-toast-text">
  454.                 <div class="title" id="cart-toast-title"></div>
  455.                 <div class="meta" id="cart-toast-meta"></div>
  456.             </div>
  457.             <button type="button" class="bs-close" aria-label="Fermer" onclick="CartToast.hide()">×</button>
  458.         </div>
  459.     </div>
  461.     {# Modale panier : confirmation ajout (panel) #}
  462.     <div class="modal fade" id="cartConfirmModal" tabindex="-1" aria-hidden="true">
  463.         <div class="modal-dialog modal-dialog-centered modal-md modal-fullscreen-sm-down">
  464.             <div class="modal-content">
  466.                 <div class="modal-header">
  467.                     <h5 class="modal-title">Produit ajouté au panier</h5>
  468.                     <button type="button" class="close ms-auto" data-bs-dismiss="modal" data-bs-dismiss="modal" aria-label="Fermer">
  469.                         <span aria-hidden="true">&times;</span>
  470.                     </button>
  471.                 </div>
  473.                 <div class="modal-body d-flex align-items-start" style="gap:14px;">
  474.                     <img id="cartConfirmImage" src="" alt="" style="width:96px;aspect-ratio:var(--product-aspect-ratio,1);object-fit:contain;">
  476.                     <div class="flex-grow-1" style="font-size:14px;">
  477.                         <div id="cartConfirmName" style="font-weight:600;"></div>
  479.                         <div class="small text-muted mt-1">
  480.                             <span class="me-1">Couleur :</span><span id="cartConfirmColor"></span>
  481.                         </div>
  483.                         <div class="small text-muted">
  484.                             <span class="me-1">Taille :</span><span id="cartConfirmSize"></span>
  485.                         </div>
  487.                         <div class="small text-muted">
  488.                             <span class="me-1">Référence :</span><span id="cartConfirmRef"></span>
  489.                         </div>
  491.                         <div class="small mt-2">
  492.                             <span class="me-1">Quantité :</span><strong id="cartConfirmQty"></strong>
  493.                         </div>
  494.                     </div>
  495.                 </div>
  497.                 <div class="modal-footer">
  498.                     <button class="btn btn-outline-dark btn-sm" data-bs-dismiss="modal">Continuer mes achats</button>
  499.                     <a href="{{ path('cart_show') }}" class="btn btn-dark btn-sm">Voir mon panier</a>
  500.                 </div>
  502.             </div>
  503.         </div>
  504.     </div>
  506.      {#Modale Commande rapide#}
  507.      {#
  508.     <div id="quickOrderPanel" class="quick-order-panel">
  510.         <div class="panel-header">
  511.             <h5>Commander rapidement</h5>
  512.             <button type="button" class="close-panel" @click="closeQuickOrderPanel">&times;</button>
  513.         </div>
  515.         <div class="panel-body">
  517.             <div class="panel-product d-flex" style="gap:14px;">
  518.                 <img :src="quickOrder.img"
  519.                     alt=""
  520.                     style="width:96px;aspect-ratio:var(--product-aspect-ratio,1);object-fit:contain;">
  521.                 <div>
  522.                     <div style="font-weight:600;">${ produit.name }</div>
  523.                     <div class="small text-muted">
  524.                         ${ selectedDeclinaison.couleur.name } · ${ selectedDeclinaison.taille }
  525.                     </div>
  526.                 </div>
  527.             </div>
  529.             <hr>
  531.             <div class="mb-3">
  532.                 <label class="form-label">Nom & Prénom</label>
  533.                 <input type="text" class="form-control" v-model="quickOrder.name">
  534.             </div>
  536.             <div class="mb-3">
  537.                 <label class="form-label">Adresse complète</label>
  538.                 <textarea class="form-control" rows="2" v-model="quickOrder.address"></textarea>
  539.             </div>
  541.             <div class="mb-3">
  542.                 <label class="form-label">Téléphone</label>
  543.                 <input type="tel" class="form-control" v-model="quickOrder.phone">
  544.             </div>
  546.             <div class="mb-3">
  547.                 <label class="form-label">Remarques</label>
  548.                 <textarea class="form-control" rows="2" v-model="quickOrder.note"></textarea>
  549.             </div>
  551.         </div>
  553.         <div class="panel-footer">
  554.             <button class="btn btn-outline-dark btn-sm" @click="closeQuickOrderPanel">
  555.                 Annuler
  556.             </button>
  557.             <button class="btn btn-dark btn-sm" @click="submitQuickOrder">
  558.                 Confirmer la commande
  559.             </button>
  560.         </div>
  562.     </div>
  563.     #}
  568.     {% block body %}{% endblock %}
  569.     {% block footer %}
  570.         <footer class="main bg-grey-9">
  572.             {#-- Section footer --#}
  573.             <section class="section-padding footer-mid">
  574.                 <div class="container pt-15 pb-20">
  575.                     <div class="row gy-4">
  576.                         {# Bloc : Logo & description #}
  577.                         <div class="col-lg-5 col-md-6">
  578.                             <div class="widget-about font-md">
  579.                                 <div class="logo mb-20">
  580.                                     <a href="{{ path('home') }}">
  581.                                         <img src="{{ asset(companyFooterLogo) }}" alt="{{ companyName }} logo">
  582.                                     </a>
  583.                                 </div>
  584.                                 <h5 class="text-grey-4 fw-600 mb-10">
  585.                                     {{ companyName }} est une marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne.
  586.                                 </h5>
  587.                                 <p><strong>Adresse :</strong> {{ companyAddress }}</p>
  588.                                 <p><strong>Horaires :</strong> Toujours ouvert</p>
  589.                             </div>
  590.                         </div>
  592.                         {# Bloc : Liens service client #}
  593.                         <div class="col-lg-2 col-md-3">
  594.                             <h5 class="widget-title">Service client</h5>
  595.                             <ul class="footer-list">
  596.                                 <li><a href="{{ path('who_are_we') }}">Qui sommes-nous ?</a></li>
  597.                                 <li><a href="{{ path('delivery_information') }}">Informations de livraison</a></li>
  598.                                 <li><a href="{{ path('return_and_exchange') }}">Retour & échange</a></li>
  599.                                 <li><a href="{{ path('size_guide') }}">Guide des tailles</a></li>
  600.                                 <li><a href="{{ path('terms_of_sales') }}">Conditions générales de vente</a></li>
  601.                                 <li><a href="{{ path('terms') }}">Conditions d’utilisation</a></li>
  602.                                 <li><a href="{{ path('privacy_policy') }}">Politique de confidentialité</a></li>
  603.                                 <li><a href="{{ path('data_deletion') }}">Suppression des données</a></li>
  604.                                 <li><a href="{{ path('contact') }}">Contact</a></li>
  605.                             </ul>
  606.                         </div>
  608.                         {# Bloc : Liens Mon compte #}
  609.                         <div class="col-lg-2 col-md-3">
  610.                             <h5 class="widget-title">Mon compte</h5>
  611.                             <ul class="footer-list">
  612.                                 <li><a href="{{ path('cart_show') }}">Mon panier</a></li>
  613.                                 {% if not app.user %}
  614.                                     <li><a href="{{ path('user_login') }}">Connexion</a></li>
  615.                                 {% else %}
  616.                                     <li><a href="{{ path('user_account') }}">Mon profil</a></li>
  617.                                     <li><a href="{{ path('app_logout') }}">Déconnexion</a></li>
  618.                                 {% endif %}
  619.                             </ul>
  620.                         </div>
  622.                         {# Bloc : Réseaux sociaux #}
  623.                         <div class="col-lg-3 text-center text-lg-start">
  624.                             <h5 class="widget-title mb-3">Suivez-nous sur les réseaux sociaux</h5>
  625.                             <div class="mobile-social-icon d-flex gap-2 justify-content-lg-start justify-content-center">
  626.                                 {% if companySocialLinks %}
  627.                                     {% for key, socialLink in companySocialLinks %}
  628.                                         {% if socialLink is iterable %}
  629.                                             {% set link = socialLink.link|default('') %}
  630.                                             {% set linkLower = link|lower %}
  631.                                             {% set iconKey = '' %}
  632.                                             {% if 'facebook' in linkLower or 'fb.' in linkLower %}
  633.                                                 {% set iconKey = 'facebook' %}
  634.                                             {% elseif 'instagram' in linkLower or 'insta' in linkLower %}
  635.                                                 {% set iconKey = 'instagram' %}
  636.                                             {% elseif 'youtube' in linkLower or 'youtu' in linkLower %}
  637.                                                 {% set iconKey = 'youtube' %}
  638.                                             {% elseif 'tiktok' in linkLower %}
  639.                                                 {% set iconKey = 'tiktok' %}
  640.                                             {% elseif 'whatsapp' in linkLower or 'wa.me' in linkLower %}
  641.                                                 {% set iconKey = 'whatsapp' %}
  642.                                             {% elseif 'telegram' in linkLower or 't.me' in linkLower %}
  643.                                                 {% set iconKey = 'telegram' %}
  644.                                             {% elseif 'linkedin' in linkLower %}
  645.                                                 {% set iconKey = 'linkedin' %}
  646.                                             {% elseif 'twitter' in linkLower or 'x.com' in linkLower %}
  647.                                                 {% set iconKey = 'twitter' %}
  648.                                             {% elseif 'pinterest' in linkLower %}
  649.                                                 {% set iconKey = 'pinterest' %}
  650.                                             {% elseif 'snapchat' in linkLower %}
  651.                                                 {% set iconKey = 'snapchat' %}
  652.                                             {% elseif 'viber' in linkLower %}
  653.                                                 {% set iconKey = 'viber' %}
  654.                                             {% elseif 'threads' in linkLower %}
  655.                                                 {% set iconKey = 'threads' %}
  656.                                             {% endif %}
  657.                                             {% if iconKey and link %}
  658.                                                 <a href="{{ link }}" target="_blank">
  659.                                                     <img src="{{ asset('front/assets/imgs/theme/icons/icon-' ~ iconKey ~ '.svg') }}" alt="{{ iconKey|capitalize }}">
  660.                                                 </a>
  661.                                             {% endif %}
  662.                                         {% else %}
  663.                                             {% set link = socialLink %}
  664.                                             {% set iconKey = key %}
  665.                                             {% if link %}
  666.                                                 <a href="{{ link }}" target="_blank">
  667.                                                     <img src="{{ asset('front/assets/imgs/theme/icons/icon-' ~ iconKey ~ '.svg') }}" alt="{{ iconKey|capitalize }}">
  668.                                                 </a>
  669.                                             {% endif %}
  670.                                         {% endif %}
  671.                                     {% endfor %}
  672.                                 {% endif %}
  673.                             </div>
  674.                         </div>
  675.                     </div>
  676.                 </div>
  677.             </section>
  683.             <div class="container pb-20 wow fadeIn animated">
  684.                 <div class="row">
  685.                     <div class="col-12 mb-20">
  686.                         <div class="footer-bottom"></div>
  687.                     </div>
  688.                     <div class="col-lg-6">
  689.                         <p class="float-md-left font-sm text-muted mb-0">&copy; {{ 'now' | date('Y') }}, <strong class="text-brand">{{ companyName }}</strong> </p>
  690.                     </div>
  691.                     <div class="col-lg-6">
  692.                         <p class="text-lg-end text-start font-sm text-muted mb-0">
  693.                             Designed by <a href="{{ path('home') }}" target="_blank">{{ companyName }}</a>. All rights reserved
  694.                         </p>
  695.                     </div>
  696.                 </div>
  697.             </div>
  698.         </footer>
  699.     {% endblock %}
  701.     {% if app.request.attributes.get('_route') != 'cart_show' %}
  702.         {% verbatim %}
  703.         <div id="app2-mobile" class="mobile-cart-float-wrap" v-cloak>
  704.             <a v-if="cart.length" class="mobile-cart-float" :href="route_cart" aria-label="Ouvrir le panier">
  705.                 <span class="mobile-cart-float__icon">
  706.                     <img :src="base_url + '/front/assets/imgs/theme/icons/icon-cart.svg'" alt="">
  707.                     <span class="mobile-cart-float__count">${ cart.length }</span>
  708.                 </span>
  709.                 <span class="mobile-cart-float__content">
  710.                     <strong class="mobile-cart-float__title">Mon panier</strong>
  711.                     <span class="mobile-cart-float__meta">${ Number(total || 0).toFixed(3) } TND</span>
  712.                     <span class="mobile-cart-float__hint" v-if="freeDeliveryRemaining > 0">
  713.                         Plus que ${ freeDeliveryRemaining.toFixed(3) } TND pour la livraison gratuite
  714.                     </span>
  715.                     <span class="mobile-cart-float__hint is-success" v-else-if="hasFreeDeliveryThreshold">
  716.                         Livraison gratuite débloquée
  717.                     </span>
  718.                 </span>
  719.                 <span class="mobile-cart-float__cta">Voir</span>
  720.             </a>
  721.         </div>
  722.         {% endverbatim %}
  723.     {% endif %}
  725.     {# Modal zoom #}
  726.     {% verbatim %}
  727.         <div id="zoom-app">
  728.             <div class="modal fade zoom-modal" id="imageZoomModal" tabindex="-1">
  729.                 <div class="modal-dialog modal-xl modal-dialog-centered modal-fullscreen-lg-down">
  730.                     <div class="modal-content zoom-modal-content">
  732.                         <div class="modal-header zoom-modal-header">
  733.                             <h6 class="modal-title text-truncate" v-text="zoomImageAlt || 'Aperçu image'"></h6>
  736.                             <div class="zoom-controls">
  737.                                 <button class="zoom-btn" @click="zoomOut">−</button>
  738.                                 <button class="zoom-btn" @click="zoomIn">+</button>
  739.                                 <button class="zoom-btn" @click="zoomReset">⤢</button>
  740.                                 <button class="zoom-btn close-btn" data-bs-dismiss="modal">×</button>
  741.                             </div>
  742.                         </div>
  744.                         <div class="modal-body zoom-modal-body">
  745.                             <div class="zoom-stage"
  746.                                 @mousedown="startPan"
  747.                                 @mousemove="movePan"
  748.                                 @mouseup="endPan"
  749.                                 @mouseleave="endPan">
  751.                              <img
  752.                                 class="zoom-image"
  753.                                 :src="zoomImageSrc"
  754.                                 :alt="zoomImageAlt"
  755.                                 draggable="false"
  756.                                 :style="{
  757.                                     transform: `translate(${zoomPanX}px, ${zoomPanY}px) scale(${zoomLevel})`
  758.                                 }">
  760.                             </div>
  761.                         </div>
  763.                     </div>
  764.                 </div>
  765.             </div>
  766.         </div>
  767.     {% endverbatim %}
  769.     {# Modal infos #}
  770.     {#
  771.     <div class="modal fade custom-modal" id="cotinueModal" tabindex="-1" aria-labelledby="onloadModalLabel"
  772.          aria-hidden="true">
  773.         <div class="modal-dialog">
  774.             <div class="modal-content">
  775.                 <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  776.                 <div class="modal-body">
  777.                     <div style="padding: 35px;">
  778.                         <div class="deal-top">
  779.                             <h2 class="text-brand">Deal of the Day</h2>
  780.                             <h5>Limited quantities.</h5>
  781.                         </div>
  782.                         <div class="deal-content">
  783.                             <h6 class="product-title"><a href="shop-product-right.html">Summer Collection New Morden
  784.                                     Design</a></h6>
  785.                             <div class="product-price"><span class="new-price">$139.00</span><span class="old-price">$160.99</span>
  786.                             </div>
  787.                         </div>
  788.                         <div class="deal-bottom">
  789.                             <p>Hurry Up! Offer End In:</p>
  790.                             <div class="deals-countdown" data-countdown="2025/03/25 00:00:00"><span
  791.                                         class="countdown-section"><span class="countdown-amount hover-up">03</span><span
  792.                                             class="countdown-period"> days </span></span><span
  793.                                         class="countdown-section"><span class="countdown-amount hover-up">02</span><span
  794.                                             class="countdown-period"> hours </span></span><span
  795.                                         class="countdown-section"><span class="countdown-amount hover-up">43</span><span
  796.                                             class="countdown-period"> mins </span></span><span
  797.                                         class="countdown-section"><span class="countdown-amount hover-up">29</span><span
  798.                                             class="countdown-period"> sec </span></span></div>
  799.                             <a href="#" class="btn hover-up">Shop Now <i
  800.                                         class="fi-rs-arrow-right"></i></a>
  801.                         </div>
  802.                     </div>
  803.                 </div>
  804.             </div>
  805.         </div>
  806.     </div>#}
  807.     {# Preloader Start #}
  808.     <div id="preloader-active">
  809.         <div class="preloader d-flex align-items-center justify-content-center">
  810.             <div class="preloader-inner position-relative">
  811.                 <div class="text-center">
  812.                     <h5 class="mb-5">CHARGEMENT</h5>
  813.                     <div class="loader">
  814.                         <div class="bar bar1"></div>
  815.                         <div class="bar bar2"></div>
  816.                         <div class="bar bar3"></div>
  817.                     </div>
  818.                 </div>
  819.             </div>
  820.         </div>
  821.     </div>
  822.     {# Preloader loading #}
  823.     <div id="preloader-active-loading" style="opacity: 0.5;display: none;">
  824.         <div class="preloader d-flex align-items-center justify-content-center">
  825.             <div class="preloader-inner position-relative">
  826.                 <div class="text-center">
  827.                     <h5 class="mb-5">CHARGEMENT</h5>
  828.                     <div class="loader">
  829.                         <div class="bar bar1"></div>
  830.                         <div class="bar bar2"></div>
  831.                         <div class="bar bar3"></div>
  832.                     </div>
  833.                 </div>
  834.             </div>
  835.         </div>
  836.     </div>
  838.     {# MODALE PANIER — Confirmation ajout produit (panneau droit) #}
  839.     <div class="modal fade modal-cart-panel"  id="cartConfirmModal"  tabindex="-1"aria-hidden="true">
  841.         <div class="modal-dialog modal-dialog-end modal-fullscreen-sm-down">
  842.             <div class="modal-content">
  844.                 <div class="modal-header">
  845.                     <h5 class="modal-title">Ajouté au panier</h5>
  846.                     <button type="button"
  847.                             class="btn-close"
  848.                             data-bs-dismiss="modal"
  849.                             aria-label="Fermer"></button>
  850.                 </div>
  852.                 <div class="modal-body">
  854.                     <div class="cart-confirm-item">
  855.                         <img id="cartConfirmImage"
  856.                             src=""
  857.                             alt=""
  858.                             class="cart-confirm-image">
  860.                         <div class="cart-confirm-info">
  861.                             <div class="cart-confirm-title"
  862.                                 id="cartConfirmName"></div>
  864.                             <div class="cart-confirm-line">
  865.                                 <span class="label">Couleur :</span>
  866.                                 <span id="cartConfirmColor"></span>
  867.                             </div>
  869.                             <div class="cart-confirm-line">
  870.                                 <span class="label">Taille :</span>
  871.                                 <span id="cartConfirmSize"></span>
  872.                             </div>
  874.                             <div class="cart-confirm-line">
  875.                                 <span class="label">Référence :</span>
  876.                                 <span id="cartConfirmRef"></span>
  877.                             </div>
  879.                             <div class="cart-confirm-line">
  880.                                 <span class="label">Quantité :</span>
  881.                                 <strong id="cartConfirmQty"></strong>
  882.                             </div>
  883.                         </div>
  884.                     </div>
  886.                 </div>
  888.                 <div class="modal-footer flex-column gap-2">
  889.                     <button type="button"
  890.                             class="btn btn-outline-dark w-100"
  891.                             data-bs-dismiss="modal">
  892.                         Continuer mes achats
  893.                     </button>
  895.                     <a href="{{ path('cart_show') }}"
  896.                     class="btn btn-dark w-100">
  897.                         Voir mon panier
  898.                     </a>
  899.                 </div>
  901.             </div>
  902.         </div>
  903.     </div>
  905.     {% if app.environment == 'production'  %}
  907.         <div id="fb-root"></div>
  908.         {# Your Plugin de discussion code #}
  909.         <div id="fb-customer-chat" class="fb-customerchat"></div>
  910.         <script>
  911.             var chatbox = document.getElementById('fb-customer-chat');
  912.             chatbox.setAttribute("page_id", "1888322994731663");
  913.             chatbox.setAttribute("attribution", "biz_inbox");
  914.         </script>
  915.         {# Your SDK code #}
  916.         <script>
  917.             window.fbAsyncInit = function() {
  918.                 FB.init({
  919.                     xfbml            : true,
  920.                     version          : 'v17.0'
  921.                 });
  922.             };
  923.             (function(d, s, id) {
  924.                 var js, fjs = d.getElementsByTagName(s)[0];
  925.                 if (d.getElementById(id)) return;
  926.                 js = d.createElement(s); js.id = id;
  927.                 js.src = 'https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js';
  928.                 fjs.parentNode.insertBefore(js, fjs);
  929.             }(document, 'script', 'facebook-jssdk'));
  930.         </script>
  931.     {% endif %}
  933.     {# Vendor JS#}
  934.     {% block javascripts %}
  935.         <script src="{{ asset('front/assets/js/vendor/modernizr-3.6.0.min.js') }}"></script>
  936.         {#<script src="{{ asset('front/assets/js/vendor/jquery-3.6.0.min.js') }}"></script>#}
  937.         {#<script src="{{ asset('front/assets/js/vendor/jquery-migrate-3.3.0.min.js') }}"></script>#}
  938.         {#<script src="{{ asset('front/assets/js/vendor/bootstrap.bundle.min.js') }}"></script>#}
  939.        <script src="{{ asset('assets/jquery/jquery.min.js') }}"></script>
  940.         {# #SECTION: Bootstrap 5 – Bundle (Popper inclus) #}
  941.         <script src="{{ asset('assets/bootstrap5/js/bootstrap.bundle.min.js') }}"></script>
  944.         <script src="{{ asset('front/assets/js/plugins/slick.js') }}"></script>
  945.         <script src="{{ asset('front/assets/js/plugins/jquery.syotimer.min.js') }}"></script>
  946.         <script src="{{ asset('front/assets/js/plugins/wow.js') }}"></script>
  947.         <script src="{{ asset('front/assets/js/plugins/jquery-ui.js') }}"></script>
  948.         <script src="{{ asset('front/assets/js/plugins/perfect-scrollbar.js') }}"></script>
  949.         <script src="{{ asset('front/assets/js/plugins/magnific-popup.js') }}"></script>
  950.         <script src="{{ asset('front/assets/js/plugins/select2.min.js') }}"></script>
  951.         <script src="{{ asset('front/assets/js/plugins/waypoints.js') }}"></script>
  952.         <script src="{{ asset('front/assets/js/plugins/counterup.js') }}"></script>
  953.         <script src="{{ asset('front/assets/js/plugins/jquery.countdown.min.js') }}"></script>
  954.         <script src="{{ asset('front/assets/js/plugins/images-loaded.js') }}"></script>
  955.         <script src="{{ asset('front/assets/js/plugins/isotope.js') }}"></script>
  956.         <script src="{{ asset('front/assets/js/plugins/scrollup.js') }}"></script>
  957.         <script src="{{ asset('front/assets/js/plugins/jquery.vticker-min.js') }}"></script>
  958.         <script src="{{ asset('front/assets/js/plugins/jquery.theia.sticky.js') }}"></script>
  959.         <script src="{{ asset('front/assets/js/plugins/jquery.elevatezoom.js') }}"></script>
  960.         {# Template  JS #}
  961.         <script src="{{ asset('./front/assets/js/main.js') }}"></script>
  962.         {# <script src="{{ asset('./front/assets/js/shop.js') }}"></script>#}
  964.         {# Include Plugin JS file #}
  965.         <script src="{{ asset('front/assets/toast/js/nice-toast-js.min.js') }}" type="text/javascript"></script>
  966.         <script src="{{ asset('front/assets/toast/toast.js') }}" type="text/javascript"></script>
  968.         <script src="{{ asset('bundles/fosjsrouting/js/router.min.js')  }}"></script>
  969.         <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  971.         <script>
  972.             {% if app.user and app.user.firstName %}
  973.                 window.APP_USER_FIRST_NAME = {{ app.user.firstName|json_encode|raw }};
  974.             {% else %}
  975.                 window.APP_USER_FIRST_NAME = null;
  976.             {% endif %}
  977.             window.APP_USER_ACCOUNT_ROUTE = {{ path('user_account')|json_encode|raw }};
  978.             window.APP_LOGOUT_ROUTE = {{ path('app_logout')|json_encode|raw }};
  980.         </script>
  982.         {# Vue  JS #}
  983.         <script src="{{ asset('front/assets/vue/vue.min.js') }}"></script>
  984.         <script src="{{ asset('front/assets/vue/axios.min.js') }}"></script>
  985.         <script src="{{ asset('front/assets/vue/vue-the-mask.min.js') }}"></script>
  986.         <script src="{{ asset('front/assets/scripts/base.js') }}"></script>
  987.         <script src="{{ asset('front/assets/scripts/product/filter-modal.shared.js') }}"></script>
  989.         <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  991.     {% endblock %}
  994. </body>
  995. </html>