templates/clainFront/accueil/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil{% endblock %}
  5. {% block body %}
  6. {# offre du jour #}
  7. {# <div class="d-flex justify-content-center offre-title  mt-3">
  8.     <span>
  9.         Offre <span style="color: #BEB623;">du jour</span>
  10.     </span>
  11. </div> #}
  12. {# SECTION OFFRE DU JOUR #}
  13. {# <section class="first-section mb-3" id="slideshow-section" style="background-image: url({{ asset('uploads/slide/slide1.jpg')}}); background-size: cover; background-repeat: no-repeat; background-position: top; position: relative; min-height: 50vh; 
  14.          width: 100%;">
  15.     {# conteneur fluid }
  16.     <div class="container-fluid d-none">
  17.         {# two card }
  18.         <div class="row p-5" style="padding-top:200px !important;">
  19.             {% if productsDay|length == 6 %}
  20.             <div class="col-md-6">
  21.                 <div class="p-5 text-center deal-jour" style="background-color: white;">
  22.                     <span class="span">Produits <span style="color: #BEB623;">du jour</span></span>
  23.                     <div class="d-flex justify-content-center mt-3">
  24.                         <div class="col-md-6 px-2 p-1 time-end">
  25.                             Finit dans <span id="clock">{{ "now"|date("H:i:s") }}</span>
  26.                         </div>
  27.                     </div>
  28.                     <div class="row mt-4 product-list">
  29.                         {% for item in productsDayLeft %}
  30.                         <div class="col-md-4 mb-2">
  31.                             <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt=""
  32.                                 title="{{ item.description }}" class="img-fluid">
  33.                             <p class="mt-2">
  34.                                 {{ (item.description|slice(0, 10)|raw)|nl2br }}...
  35.                             </p>
  36.                             <p><span>{{ item.priceDealer }}<s class="ms-1">{{ item.priceCust }}</s></span></p>
  37.                         </div>
  38.                         {% endfor %}
  39.                     </div>
  40.                 </div>
  41.             </div>
  42.             <div class="col-md-6">
  43.                 <div class="p-5 text-center big-save" style="background-color: white;">
  44.                     <span>Produits <span style="color: #BEB623;">du jour</span></span>
  45.                     <div class="d-flex justify-content-center mt-3">
  46.                         <div class="col-md-6 px-2 p-1 plus-marque">
  47.                             + plus de 500 marques
  48.                         </div>
  49.                     </div>
  50.                     <div class="row mt-4 product-list">
  51.                         {% for item in productsDayRight %}
  52.                         <div class="col-md-4 mb-2">
  53.                             <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt=""
  54.                                 title="{{ item.description }}" class="img-fluid">
  55.                             <p class="mt-2">
  56.                                 {{ (item.description|slice(0, 10)|raw)|nl2br }}...
  57.                             </p>
  58.                             <p><span>{{ item.priceDealer }}<s class="ms-1">{{ item.priceCust }}</s></span></p>
  59.                         </div>
  60.                         {% endfor %}
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.             {% else %}
  65.             <div class="col-md-12">
  66.                 <div class="p-5 text-center offre-jour">
  67.                     <span class="span">Produits du jour</span>
  68.                     <div class="row mt-4 product-list">
  69.                         {% for item in productsDayAll %}
  70.                         <div class="col mb-2">
  71.                             <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt=""
  72.                                 title="{{ item.description }}" class="img-fluid">
  73.                             <p class="mt-2">
  74.                                 {{ (item.description|slice(0, 10)|raw)|nl2br }}...
  75.                             </p>
  76.                             <p><span>{{ item.priceDealer }}<s class="ms-1">{{ item.priceCust }}</s></span></p>
  77.                         </div>
  78.                         {% endfor %}
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.             {% endif %}
  83.         </div>
  84.     </div>
  85.     {# produit du jour responsive }
  86.     <div class="container-fluid p-5 productDay-responsive" style="padding-top:200px !important;">
  87.         <div class="card p-3" style="color: #3B4C4E !important;">
  88.             <div class="mb-3 achat-title">
  89.                 <span>
  90.                     Produit <span style="color: #BEB623;">du jour</span>
  91.                 </span>
  92.             </div>
  93.             {# les produits }
  94.             <div class="d-flex" style="overflow-x: auto;">
  95.                 {% for item in productsDayAll %}
  96.                 <div class="col">
  97.                     <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt="" title="{{ item.description }}"
  98.                         class="img-fluid">
  99.                     <p class="mt-2">
  100.                         {{ (item.description|slice(0, 10)|raw)|nl2br }}...
  101.                     </p>
  102.                     <p><span>{{ item.priceDealer }}<s class="ms-1">{{ item.priceCust }}</s></span></p>
  103.                 </div>
  104.                 {% endfor %}
  105.             </div>
  106.         </div>
  107.     </div>
  108.     <!-- Flèche gauche -->
  109.     <div id="prev" class="arrow left-arrow">&#10094;</div>
  110.     <!-- Flèche droite -->
  111.     <div id="next" class="arrow right-arrow">&#10095;</div>
  112. </section> #}
  114. {# SECTION SLIDE IMAGES #}
  115. <div class="image-slider" style="position: relative;">
  116.     <img src="{{ asset('uploads/slide/slide1.jpg')}}" class="img-fluid slider-image" alt="" id="sliderImage">
  117.     <div class="pt-5 container-fluid  align-items-center d-flex productDay-lg"
  118.         style="position: absolute; height:100% !important; top:0px;">
  119.         {# two card #}
  120.         <div class="row">
  121.             {% if productsDay|length == 6 %}
  122.             <div class="col-6 mt-5">
  123.                 <div class="p-3 text-center deal-jour" style="background-color: rgba(255,255,255,0.8);">
  124.                     <span class="span">Produits <span style="color: #BEB623;">du jour</span></span>
  125.                     <div class="d-flex justify-content-center mt-3">
  126.                         <div class="col-md-6 px-2 p-1 time-end">
  127.                             Finit dans <span id="clock">{{ "now"|date("H:i:s") }}</span>
  128.                         </div>
  129.                     </div>
  130.                     <div class="row mt-4 product-list">
  131.                         {% for item in productsDayLeft %}
  132.                         <div class="col-md-4 mb-2">
  133.                             <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt=""
  134.                                 title="{{ item.description }}" class="img-fluid">
  135.                             <p class="mt-2">
  136.                                 {{ (item.description|slice(0, 10)|raw)|nl2br }}...
  137.                             </p>
  138.                             <p><span>{{ item.priceDealer|number_format('2',',',' ') }} MGA</span></p>
  139.                         </div>
  140.                         {% endfor %}
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.             <div class="col-6 mt-5">
  145.                 <div class="p-3 text-center big-save" style="background-color: rgba(255,255,255,0.8);">
  146.                     <span>Produits <span style="color: #BEB623;">du jour</span></span>
  147.                     <div class="d-flex justify-content-center mt-3">
  148.                         <div class="col-md-6 px-2 p-1 plus-marque">
  149.                             + plus de 500 marques
  150.                         </div>
  151.                     </div>
  152.                     <div class="row mt-4 product-list">
  153.                         {% for item in productsDayRight %}
  154.                         <div class="col-md-4 mb-2">
  155.                             <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt=""
  156.                                 title="{{ item.description }}" class="img-fluid">
  157.                             <p class="mt-2">
  158.                                 {{ (item.description|slice(0, 10)|raw)|nl2br }}...
  159.                             </p>
  160.                             <p><span>{{ item.priceDealer|number_format('2',',',' ') }} MGA</s></span></p>
  161.                         </div>
  162.                         {% endfor %}
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.             {% else %}
  167.             <div class="col-md-12">
  168.                 <div class="p-5 text-center offre-jour">
  169.                     <span class="span">Produits du jour</span>
  170.                     <div class="row mt-4 product-list">
  171.                         {% for item in productsDayAll %}
  172.                         <div class="col mb-2">
  173.                             <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt=""
  174.                                 title="{{ item.description }}" class="img-fluid">
  175.                             <p class="mt-2">
  176.                                 {{ (item.description|slice(0, 10)|raw)|nl2br }}...
  177.                             </p>
  178.                             <p><span>{{ item.priceDealer|number_format('2',',',' ') }} MGA</span></p>
  179.                         </div>
  180.                         {% endfor %}
  181.                     </div>
  182.                 </div>
  183.             </div>
  184.             {% endif %}
  185.         </div>
  186.     </div>
  188.     {# PRODUIT DU JOUR RESPONSIVE #}
  189.     <div class=" pb-5 pt-5 container-fluid d-none" style="position: absolute; height:100% !important; top:0px;">
  190.         <div class="d-flex justify-content-center achat-title  mt-3">
  191.             <span>
  192.                 Produits <span style="color: #BEB623;">du jour</span>
  193.             </span>
  194.         </div>
  195.         <div class="swiper mySwiper mt-3">
  196.             <div class="swiper-wrapper">
  197.                 {% for item in productsDayAll %}
  198.                 <div class="swiper-slide">
  199.                     <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt="{{ item.description }}"
  200.                         class="img-fluid rounded w-100">
  201.                 </div>
  202.                 {% endfor %}
  203.             </div>
  205.             <!-- Flèches -->
  206.             <div class="swiper-button-next"></div>
  207.             <div class="swiper-button-prev"></div>
  208.         </div>
  209.         {# <div class="d-flex mt-3 gap-3" style="overflow-x: auto; white-space: nowrap;">
  210.             {% for item in productsDayAll %}
  211.             <div class="flex-shrink-0" style="min-width: 200px;">
  212.                 <div class="p-2" style="background-color: white;">
  213.                     <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt="" title="{{ item.description }}"
  214.                         class="img-fluid rounded" width="200" height="200">
  215.                 </div>
  216.             </div>
  217.             {% endfor %}
  218.         </div> #}
  219.         {# <div class="slider-container mt-3">
  220.             {% for item in productsDayAll %}
  221.             <div style="min-width: 200px; flex-shrink: 0; scroll-snap-align: start;">
  222.                 <div class="p-2" style="background-color: white;">
  223.                     <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt="" title="{{ item.description }}"
  224.                         class="img-fluid rounded w-100">
  225.                 </div>
  226.             </div>
  227.             {% endfor %}
  228.         </div> #}
  229.         {#<div class="d-flex mt-3" style="overflow-x: auto;">
  230.             {% for item in productsDayAll %}
  231.             <div class="col-md-3">
  232.                 <div class="p-3" style="background-color: white; border-radius:20px;">
  233.                     <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt="" title="{{ item.description }}"
  234.                         class="img-fluid" width="200" height="200">
  235.                     <p class="mt-2">
  236.                         {{ (item.description|slice(0, 10)|raw)|nl2br }}...
  237.                     </p>
  238.                     <p><span>{{ item.priceDealer }}</p>
  239.                 </div>
  240.             </div>
  241.             {% endfor %}
  242.         </div>#}
  243.     </div>
  244. </div>
  246. <div class="container-fluid">
  247.     {# SWIPER SLIDER #}
  248.     {# PRODUIT DU JOUR RESPONSIVE #}
  249.     <div class="productDay-md d-none">
  250.         <div class="d-flex justify-content-center achat-title  mt-3">
  251.             <span class="text-center">
  252.                 Produits <span style="color: #BEB623;">du jour</span>
  253.             </span>
  254.         </div>
  255.         <div class="">
  256.             <div class="swiper mySwiper mt-3">
  257.                 <div class="swiper-wrapper">
  258.                     {% for item in productsDayAll %}
  259.                     <div class="swiper-slide">
  260.                         <img src="{{ asset('uploads/products/' ~ item.imageName)}}" alt="{{ item.description }}"
  261.                             class="uniform-img">
  262.                     </div>
  263.                     {% endfor %}
  264.                 </div>
  266.                 <!-- Flèches -->
  267.                 {# <div class="swiper-button-next"></div>
  268.                 <div class="swiper-button-prev"></div> #}
  269.             </div>
  270.         </div>
  271.     </div>
  273.     {# SECTION ACHETER PAR CATEGORIE #}
  274.     <section class="second-section mb-3">
  275.         {# achat par categorie #}
  276.         <div class="d-flex justify-content-center achat-title">
  277.             <span class="text-center">
  278.                 Acheter <span style="color: #BEB623;">par catégorie</span>
  279.             </span>
  280.         </div>
  281.         {# two card #}
  282.         <div class="row mt-3 mb-3 card-achat">
  283.             <div class="col-md-6">
  284.                 <div class="p-4 card-achat-one" style="background-color: #badfc2;">
  285.                     {# viva et image femme #}
  286.                     {# <div class="d-flex ">
  287.                         <div class="col-md-8">
  288.                             <h1><i>Viva</i></h1>
  289.                             <span>Votre sélection de mode</span>
  290.                             <div class="btn-profitez mt-2">
  291.                                 <div class="p-2 col-md-10">
  292.                                     <b>Profitez-en maintenant</b>
  293.                                 </div>
  294.                             </div>
  295.                         </div>
  296.                         <div class="col-md-4">
  297.                             <div class="img-femme">
  298.                                 <img src="{{ asset('img/femme.png')}}" alt="" class="img-fluid">
  299.                             </div>
  300.                         </div>
  301.                     </div> #}
  302.                     <div class="row mb-4">
  303.                         <h1><i>Sélection de mode</i></h1>
  304.                         {# <span>Votre sélection de mode</span> #}
  305.                         <div class="btn-profitez mt-2">
  306.                             <div class="p-2 col-md-10">
  307.                                 <b>Profitez-en maintenant</b>
  308.                             </div>
  309.                         </div>
  310.                     </div>
  311.                     {# produits femme #}
  312.                     <div class="row viva-product align-items-center justify-content-center">
  313.                         {% for item in priceMode %}
  314.                         <div class="col mb-2">
  315.                             <div class="p-2">
  316.                                 <img src="{{ asset('uploads/products/' ~ item.productImage)}}" alt=""
  317.                                     class="img-fluid ">
  318.                                 <span>{{ item.prix|number_format(0, ',', ' ') }} MGA</span>
  319.                                 <p style="white-space:nowrap;">{{ item.productTitle|slice(0, 16) ~
  320.                                     (item.productTitle|length > 16 ? '...' : '') }}</p>
  321.                             </div>
  322.                         </div>
  323.                         {% endfor %}
  324.                         {# <div class="col-md-4 mx-3 p-2">
  325.                             <img src="{{ asset('img/viva-2.png')}}" alt="" class="img-fluid">
  326.                             <span>US $13.94</span><s>US $35.75</s>
  327.                         </div>
  328.                         <div class="col-md-4 p-2">
  329.                             <img src="{{ asset('img/viva-3.png')}}" alt="" class="img-fluid">
  330.                             <span>US $13.94</span><s>US $35.75</s>
  331.                         </div> #}
  332.                     </div>
  333.                 </div>
  334.             </div>
  335.             <div class="col-md-6">
  336.                 <div class="row cat-produit" style="position: relative;">
  337.                     {# liste des catégories #}
  338.                     {% for item in catTable %}
  339.                     <div class="col-md-6 mb-3 produit-item" style="display: none;">
  340.                         <a onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'"
  341.                             style="cursor:pointer;">
  342.                             <img src="{{ asset('uploads/categories/' ~ item.image )}}" alt="" class="img-fluid"
  343.                                 style="height: 100% !important;">
  345.                             <span
  346.                                 style="color: rgb(255, 255, 255); font-weight: 700; background-color: rgba(0, 0, 0, 0.6); display: inline-block; white-space: nowrap; padding: 5px 10px;">
  347.                                 {{ item.title }}
  348.                             </span>
  349.                         </a>
  350.                     </div>
  351.                     {% endfor %}
  352.                     {# boutton de navigation pour les catégories #}
  353.                     <div class="d-flex justify-content-between align-items-center btn-cat-nav">
  354.                         <button id="prevBtn" class="btn" disabled style="background-color: #4597A4;">
  355.                             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white"
  356.                                 class="bi bi-chevron-left" viewBox="0 0 16 16">
  357.                                 <path fill-rule="evenodd"
  358.                                     d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0" />
  359.                             </svg>
  360.                         </button>
  361.                         <button id="nextBtn" class="btn" style="background-color: #4597A4;">
  362.                             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white"
  363.                                 class="bi bi-chevron-right" viewBox="0 0 16 16">
  364.                                 <path fill-rule="evenodd"
  365.                                     d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708" />
  366.                             </svg>
  367.                         </button>
  368.                     </div>
  369.                 </div>
  370.             </div>
  371.         </div>
  372.         <div class="cat-md d-none">
  373.             <div class="swiper mySwiper mt-3">
  374.                 <div class="swiper-wrapper">
  375.                     {% for item in catTable %}
  376.                     <div class="swiper-slide">
  377.                         <a href="" style="cursor:pointer;">
  378.                             <img src="{{ asset('uploads/categories/' ~ item.image )}}" alt="" class="uniform-img">
  380.                             <span
  381.                                 style="color: rgb(255, 255, 255); font-weight: 700; background-color: rgba(0, 0, 0, 0.6); display: inline-block; white-space: nowrap; padding: 5px 10px;">
  382.                                 {{ item.title }}
  383.                             </span>
  384.                         </a>
  385.                     </div>
  386.                     {% endfor %}
  387.                 </div>
  388.                 <!-- Flèches -->
  389.                 {# <div class="swiper-button-next"></div>
  390.                 <div class="swiper-button-prev"></div> #}
  391.             </div>
  392.         </div>
  393.     </section>
  394.     <section class="produitDeMarque">
  395.         <div class="d-flex justify-content-center other-title mb-3">
  396.             <span class="text-center">
  397.                 Produits <span style="color: #BEB623;">de marque</span>
  398.             </span>
  400.         </div>
  401.         <hr>
  402.         <h5>Chaussures de marque.</h5>
  403.         <hr>
  404.         <div class="row">
  405.             {% for product in chaussures %}
  406.             <div class="col-md-2 p-2 other-product  mb-2"
  407.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  408.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  409.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  410.                         style="font-size: 13px;">MGA</span></span>
  411.                 <p>
  412.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  413.                 </p>
  414.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  415.                     <div class="col-md-12 mb-2">
  416.                         <div class="article-simi p-2 px-4">
  417.                             <span style="font-size: 15px;">Fiche produit</span>
  418.                         </div>
  419.                     </div>
  420.                 </div>
  421.                 <div class="overlay-panier">
  422.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  423.                         style="text-decoration: none; color:white;">
  424.                         <i class="bi bi-cart fs-2"></i>
  425.                     </a>
  426.                 </div>
  427.             </div>
  428.             {% endfor %}
  429.         </div>
  430.         <hr>
  431.         <h5>Montres de marque.</h5>
  432.         <hr>
  433.         <div class="row">
  434.             {% for product in montres %}
  435.             <div class="col-md-2 p-2 other-product  mb-2"
  436.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  437.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  438.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  439.                         style="font-size: 13px;">MGA</span></span>
  440.                 <p>
  441.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  442.                 </p>
  443.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  444.                     <div class="col-md-12 mb-2">
  445.                         <div class="article-simi p-2 px-4">
  446.                             <span style="font-size: 15px;">Fiche produit</span>
  447.                         </div>
  448.                     </div>
  449.                 </div>
  450.                 <div class="overlay-panier">
  451.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  452.                         style="text-decoration: none; color:white;">
  453.                         <i class="bi bi-cart fs-2"></i>
  454.                     </a>
  455.                 </div>
  456.             </div>
  457.             {% endfor %}
  458.         </div>
  459.         <hr>
  460.         <h5>Pour femme</h5>
  461.         <hr>
  462.         <div class="row">
  463.             {% for product in femmes %}
  464.             <div class="col-md-2 p-2 other-product  mb-2"
  465.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  466.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  467.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  468.                         style="font-size: 13px;">MGA</span></span>
  469.                 <p>
  470.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  471.                 </p>
  472.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  473.                     <div class="col-md-12 mb-2">
  474.                         <div class="article-simi p-2 px-4">
  475.                             <span style="font-size: 15px;">Fiche produit</span>
  476.                         </div>
  477.                     </div>
  478.                 </div>
  479.                 <div class="overlay-panier">
  480.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  481.                         style="text-decoration: none; color:white;">
  482.                         <i class="bi bi-cart fs-2"></i>
  483.                     </a>
  484.                 </div>
  485.             </div>
  486.             {% endfor %}
  487.         </div>
  488.         <hr>
  489.         <h5>Timberland</h5>
  490.         <hr>
  491.         <div class="row">
  492.             {% for product in timberlands %}
  493.             <div class="col-md-2 p-2 other-product  mb-2"
  494.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  495.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  496.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  497.                         style="font-size: 13px;">MGA</span></span>
  498.                 <p>
  499.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  500.                 </p>
  501.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  502.                     <div class="col-md-12 mb-2">
  503.                         <div class="article-simi p-2 px-4">
  504.                             <span style="font-size: 15px;">Fiche produit</span>
  505.                         </div>
  506.                     </div>
  507.                 </div>
  508.                 <div class="overlay-panier">
  509.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  510.                         style="text-decoration: none; color:white;">
  511.                         <i class="bi bi-cart fs-2"></i>
  512.                     </a>
  513.                 </div>
  514.             </div>
  515.             {% endfor %}
  516.         </div>
  517.         <hr>
  518.         <h5>Air Jord</h5>
  519.         <hr>
  520.         <div class="row">
  521.             {% for product in airs %}
  522.             <div class="col-md-2 p-2 other-product  mb-2"
  523.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  524.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  525.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  526.                         style="font-size: 13px;">MGA</span></span>
  527.                 <p>
  528.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  529.                 </p>
  530.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  531.                     <div class="col-md-12 mb-2">
  532.                         <div class="article-simi p-2 px-4">
  533.                             <span style="font-size: 15px;">Fiche produit</span>
  534.                         </div>
  535.                     </div>
  536.                 </div>
  537.                 <div class="overlay-panier">
  538.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  539.                         style="text-decoration: none; color:white;">
  540.                         <i class="bi bi-cart fs-2"></i>
  541.                     </a>
  542.                 </div>
  543.             </div>
  544.             {% endfor %}
  545.         </div>
  546.         <hr>
  547.         <h5>Gucci</h5>
  548.         <hr>
  549.         <div class="row">
  550.             {% for product in guccis %}
  551.             <div class="col-md-2 p-2 other-product  mb-2"
  552.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  553.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  554.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  555.                         style="font-size: 13px;">MGA</span></span>
  556.                 <p>
  557.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  558.                 </p>
  559.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  560.                     <div class="col-md-12 mb-2">
  561.                         <div class="article-simi p-2 px-4">
  562.                             <span style="font-size: 15px;">Fiche produit</span>
  563.                         </div>
  564.                     </div>
  565.                 </div>
  566.                 <div class="overlay-panier">
  567.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  568.                         style="text-decoration: none; color:white;">
  569.                         <i class="bi bi-cart fs-2"></i>
  570.                     </a>
  571.                 </div>
  572.             </div>
  573.             {% endfor %}
  574.         </div>
  575.         <hr>
  576.         <h5>Alo</h5>
  577.         <hr>
  578.         <div class="row">
  579.             {% for product in alos %}
  580.             <div class="col-md-2 p-2 other-product  mb-2"
  581.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  582.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  583.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  584.                         style="font-size: 13px;">MGA</span></span>
  585.                 <p>
  586.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  587.                 </p>
  588.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  589.                     <div class="col-md-12 mb-2">
  590.                         <div class="article-simi p-2 px-4">
  591.                             <span style="font-size: 15px;">Fiche produit</span>
  592.                         </div>
  593.                     </div>
  594.                 </div>
  595.                 <div class="overlay-panier">
  596.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  597.                         style="text-decoration: none; color:white;">
  598.                         <i class="bi bi-cart fs-2"></i>
  599.                     </a>
  600.                 </div>
  601.             </div>
  602.             {% endfor %}
  603.         </div>
  604.         <hr>
  605.         <h5>Louis Vuitton</h5>
  606.         <hr>
  607.         <div class="row">
  608.             {% for product in louis %}
  609.             <div class="col-md-2 p-2 other-product  mb-2"
  610.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  611.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  612.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  613.                         style="font-size: 13px;">MGA</span></span>
  614.                 <p>
  615.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  616.                 </p>
  617.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  618.                     <div class="col-md-12 mb-2">
  619.                         <div class="article-simi p-2 px-4">
  620.                             <span style="font-size: 15px;">Fiche produit</span>
  621.                         </div>
  622.                     </div>
  623.                 </div>
  624.                 <div class="overlay-panier">
  625.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  626.                         style="text-decoration: none; color:white;">
  627.                         <i class="bi bi-cart fs-2"></i>
  628.                     </a>
  629.                 </div>
  630.             </div>
  631.             {% endfor %}
  632.         </div>
  633.         <hr>
  634.         <h5>Christian Dior</h5>
  635.         <hr>
  636.         <div class="row">
  637.             {% for product in diors %}
  638.             <div class="col-md-2 p-2 other-product  mb-2"
  639.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  640.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  641.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  642.                         style="font-size: 13px;">MGA</span></span>
  643.                 <p>
  644.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  645.                 </p>
  646.                 <div class="d-flex flex-column justify-content-center align-items-center overlay">
  647.                     <div class="col-md-12 mb-2">
  648.                         <div class="article-simi p-2 px-4">
  649.                             <span style="font-size: 15px;">Fiche produit</span>
  650.                         </div>
  651.                     </div>
  652.                 </div>
  653.                 <div class="overlay-panier">
  654.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  655.                         style="text-decoration: none; color:white;">
  656.                         <i class="bi bi-cart fs-2"></i>
  657.                     </a>
  658.                 </div>
  659.             </div>
  660.             {% endfor %}
  661.         </div>
  662.         
  663.     </section>
  664.     {# SECTION VOUS AIMEREZ AUSSI #}
  665.     {# <section class="second-section">
  666.         {# vous aimerez aussi }
  667.         <div class="d-flex justify-content-center other-title mb-3">
  668.             <span class="text-center">
  669.                 Vous <span style="color: #BEB623;">aimerez aussi</span>
  670.             </span>
  671.         </div>
  672.         {# liste produits }
  673.         {% if taobaoProducts['error'] is defined %}
  674.         <div class="row">
  675.             <center>
  676.                 <div class="card col-6 p-3" style="color: #858796 !important;">
  677.                     <h4 class="mb-3"><strong>Erreur {{taobaoProducts.codeError}} </strong></h4>
  678.                     <h5>Des produits doivent s'afficher ici.</h5>
  679.                     <span>Si ce n'est pas le cas, veuillez actualiser la page ou nous contacter.</span>
  680.                     <a href="" class="btn mt-2"
  681.                         style="background-color: #4597A4 !important; color:white;">Actualiser</a>
  682.                 </div>
  683.             </center>
  684.         </div>
  685.         {% else %}
  686.         <div class="row">
  687.             {% set lastProduct = null %}
  688.             {% if taobaoProducts is not empty %}
  689.             {% for product in taobaoProducts %}
  690.             <div class="col-md-2 p-2 other-product  mb-2"
  691.                 onclick="window.location='{{ path('app_fiche_produit', {'id': product.num_iid})}}'">
  692.                 <img src="{{product.pic_url}}" alt="" title="{{ product.title }}" class="img-fluid mb-3">
  693.                 <span style="font-size: 18px; font-weight:700;">{{product.price|number_format('2', ',', ' ')}} <span
  694.                         style="font-size: 13px;">MGA</span></span>
  695.                 <p>
  696.                     {{ (product.title|slice(0,30)|raw)|nl2br }}...
  697.                 </p>
  698.                 {# <div class="d-flex flex-column justify-content-center align-items-center overlay">
  699.                     <div class="col-md-12 mb-2">
  700.                         <div class="article-simi p-2 px-4">
  701.                             <span style="font-size: 15px;">Articles similaires</span>
  702.                         </div>
  703.                     </div>
  704.                 </div> }
  705.                 <div class="overlay-panier">
  706.                     <a href="{{ path('app_fiche_produit', {'id': product.num_iid})}}"
  707.                         style="text-decoration: none; color:white;">
  708.                         <i class="bi bi-cart fs-2"></i>
  709.                     </a>
  710.                 </div>
  711.             </div>
  712.             {% endfor %}
  713.             {% else %}
  714.             <p>Aucun produit trouvé.</p>
  715.             {% endif %}
  716.         </div>
  717.         {# boutton voir plus }
  718.         <div class="mt-4 d-flex justify-content-center">
  719.             <div class="col-md-2 p-2 text-center btn-voir-plus">
  720.                 <i class="bi bi-arrow-repeat"></i> Charger plus...
  721.             </div>
  722.         </div>
  723.         {% endif %}
  724. </div> #}
  725. </div>
  726. {# script pour le date #}
  727. <script>
  728.     function updateClock() {
  729.         let now = new Date();
  730.         let timeString = now.toLocaleTimeString('fr-FR'); // Format HH:MM:SS
  731.         document.getElementById('clock').textContent = timeString;
  732.     }
  734.     setInterval(updateClock, 1000); // Mise à jour chaque seconde
  735.     updateClock(); // Appel initial
  736. </script>
  737. {# image slide produit du jour #}
  738. {# //
  739. <script>
  740.     //     // Liste des images pour le diaporama
  741.     //     const images = [
  742.     //         "{{ asset('uploads/slide/slide1.jpg') }}",
  743.     //         "{{ asset('uploads/slide/slide2.jpg') }}",
  744.     //         "{{ asset('uploads/slide/slide3.jpg') }}",
  745.     //         "{{ asset('uploads/slide/slide6.jpg') }}",
  746.     //         "{{ asset('uploads/slide/slide9.avif') }}"
  747.     //     ];
  749.     //     let currentIndex = 0;  // Index de l'image actuelle
  750.     //     const section = document.getElementById('slideshow-section');
  752.     //     // Fonction pour changer l'image de fond
  753.     //     function changeBackground() {
  754.     //         section.style.transition = 'background-image 1s ease-in-out';  // Animation de transition
  755.     //         section.style.backgroundImage = `url('${images[currentIndex]}')`;
  756.     //     }
  758.     //     // Slide automatique toutes les 5 secondes
  759.     //     setInterval(function() {
  760.     //         currentIndex = (currentIndex + 1) % images.length;
  761.     //         changeBackground();
  762.     //     }, 10000);
  764.     //     // Navigation manuelle avec les flèches
  765.     //     document.getElementById('prev').addEventListener('click', function() {
  766.     //         currentIndex = (currentIndex - 1 + images.length) % images.length;
  767.     //         changeBackground();
  768.     //     });
  770.     //     document.getElementById('next').addEventListener('click', function() {
  771.     //         currentIndex = (currentIndex + 1) % images.length;
  772.     //         changeBackground();
  773.     //     });
  775.     //     // Initial image
  776.     //     changeBackground();
  778.     // </script> #}
  780. <script>
  781.     const images = [
  782.         "{{ asset('uploads/slide/slide1.jpg') }}",
  783.         "{{ asset('uploads/slide/slide2.jpg') }}",
  784.         "{{ asset('uploads/slide/slide3.jpg') }}",
  785.         "{{ asset('uploads/slide/slide6.jpg') }}",
  786.     ];
  788.     let index = 0;
  789.     const imageElement = document.getElementById('sliderImage');
  791.     setInterval(() => {
  792.         index = (index + 1) % images.length;
  793.         // Ajoute la classe d'animation de transition
  794.         imageElement.classList.add('fade-out');
  796.         // Attends la fin de l'animation avant de changer l'image
  797.         setTimeout(() => {
  798.             imageElement.src = images[index];
  799.             imageElement.classList.remove('fade-out');
  800.         }, 500); // Durée de l'animation (500ms)
  801.     }, 5000); // Change d’image toutes les 5 secondes
  802. </script>
  804. {% endblock %}