templates/home/listing.html.twig line 9

  1. {% extends 'base2.html.twig' %}
  3. {% block body %}
  6.       <div class="font-inter dark:bg-background sticky-header-first-content">
  7.       <div class="container mx-auto lg:px-0 px-5 dark:bg-background">
  9.     {% for flashMessage in app.flashes('success') %}
  11.       <div class="alert alert-success flash-message bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
  12.         <div class="flex">
  13.           <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
  14.           <div>
  15.             <p class="font-bold">{{ flashMessage }}</p>
  16.             <p class="text-sm">Vous pouvez dès à présent vous connecter à votre compte.</p>
  17.           </div>
  18.         </div>
  19.       </div>
  21.     {% endfor %}
  22.   
  23.  <!-- GOOGLE MAPS START --> 
  24.       <div class="pt-0">
  25.         <div class="mapouter mx-auto w-full h-96">
  26.           <div class="gmap_canvas w-full h-96 realtive">
  27.             <div id="map" class="map h-96 w-full"></div>
  28.           </div>
  29.         </div>
  30.     </div>
  31.  <!-- GOOGLE MAPS END --> 
  33.   <div
  34.     class="relative lg:hidden flex shadow-input p-4 dark:bg-foreground rounded-md mb-4"
  35.   >
  36.     <div class="flex items-center">
  37.       <p class="text-gray-700 text-lg dark:text-gray-100 font-semibold">
  38.         Filtrer
  39.       </p>
  40.       <svg
  41.         xmlns="http://www.w3.org/2000/svg"
  42.         class="h-6 w-6 -rotate-90 text-blue-500 listing-filter-btn"
  43.         fill="none"
  44.         viewBox="0 0 24 24"
  45.         stroke="currentColor"
  46.         stroke-width="2"
  47.       >
  48.         <path
  49.           stroke-linecap="round"
  50.           stroke-linejoin="round"
  51.           d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
  52.         />
  53.       </svg>
  54.     </div>
  55.   </div>
  56.   <div class="relative flex items-start pt-10">
  57.     <div
  58.   class="listing-sidebar bg-white dark:bg-foreground shadow-front-2 z-50 lg:w-80 w-full lg:sticky fixed transition-all ease-in-out translate-x-0 lg:left-0 -left-full top-20 lg:h-full h-screen"
  59. >
  60.   <div
  61.     class="border-b lg:border-gray-200 border-transparent dark:border-foreground p-5"
  62.   >
  63.     <p
  64.       class="text-gray-700 text-lg dark:text-gray-300 font-semibold lg:block hidden"
  65.     >
  66.       Affiner la recherche
  67.     </p>
  68.     <div class="lg:hidden flex justify-between container mx-auto">
  69.       <svg
  70.         xmlns="http://www.w3.org/2000/svg"
  71.         class="h-6 w-6"
  72.         fill="none"
  73.         viewBox="0 0 24 24"
  74.         stroke="currentColor"
  75.         stroke-width="2"
  76.       >
  77.         <path
  78.           stroke-linecap="round"
  79.           stroke-linejoin="round"
  80.           d="M11 17l-5-5m0 0l5-5m-5 5h12"
  81.         />
  82.       </svg>
  83.       <svg
  84.         xmlns="http://www.w3.org/2000/svg"
  85.         class="h-6 w-6 close-left-sidebar"
  86.         fill="none"
  87.         viewBox="0 0 24 24"
  88.         stroke="currentColor"
  89.         stroke-width="2"
  90.       >
  91.         <path
  92.           stroke-linecap="round"
  93.           stroke-linejoin="round"
  94.           d="M6 18L18 6M6 6l12 12"
  95.         />
  96.       </svg>
  97.     </div>
  98.   </div>
  100.   <div class="p-5 h-5/6">
  102. {{ form_start(form) }}
  104.   <!-- Search bar Start-->
  105.       <div class="">
  106.         {{ form_row(form.q, { 'attr': {'class': 'border border-gray-200 dark:border-gray-800 dark:text-gray-300 rounded-lg px-4 dark:bg-foreground py-[11px] shadow-input hover:border hover:border-blue-200 focus:border-blue-200 focus:outline-none w-5/6 mb-4'} })}}
  107.       </div>
  108.   <!-- Search bar END-->
  109.   
  110.     <p
  111.       class="mb-1 text-gray-700 text-[17px] dark:text-gray-300 font-semibold lg:block hidden"
  112.     >
  113.       Les catégories
  114.     </p>
  116.   <!-- Category filter Start-->
  117.       {% block _category_widget %}
  118.           {% for child in form.Category %}
  119.               {{ form_widget(child) }}
  120.               {{ form_label(child) }}
  121.               <br>
  122.           {% endfor %}
  123.       {% endblock %}
  124.   <!-- Category filter END-->
  126.     <p
  127.       class="mb-1 mt-4 text-gray-700 text-[17px] dark:text-gray-300 font-semibold lg:block hidden"
  128.     >
  129.       Commerce véfifié
  130.     </p>
  131.     
  132.     <!-- Vefified filter Start-->
  133.       <label class="flex items-center mb-1 cursor-pointer">
  134.           {{ form_widget(form.verified) }}
  135.           <span class="ml-2 text-gray-700 text-[12px] dark:text-gray-300">
  136.               Vérifié par Best of Sarlat
  137.           </span>
  138.       </label>
  139.     <!-- Vefified filter END-->
  141.     <!-- Submit Start-->
  142.       <button
  143.       type="submit"
  144.       class="bg-blue-500 text-white hover:bg-blue-600 rounded-lg w-full p-3.5 mt-9 mb-4"
  145.     >
  146.       Lancer la recherche
  147.     </button>
  148.     <!-- Submit END-->
  150. {{ form_end(form) }}
  153.   </div>
  154. </div>
  156.     <div
  157.       class="listing-sidebar-overlay fixed w-full h-full inset-0 z-10 cursor-pointer bg-black opacity-70 hidden"
  158.     ></div>
  159.     <div class="flex-1">
  160.       <div class="shadow-inner-tabs dark:bg-foreground bg-white">
  161. </div>
  163.       <!-- content-start  -->
  164.       <div class="flex justify-between items-center flex-wrap mb-0 pl-5 pt-5">
  165.     {% set available_shops = shops|filter(shop => shop.available == true) %}
  166.     <p class="text-2xl font-semibold dark:text-gray-200">Commerces disponibles - <span class="text-gray-700">{{ available_shops|length }}</span> résultats</p>        <div class="flex items-center flex-wrap">
  167.         <select name="sortby"
  168.                 class="border dark:bg-foreground dark:text-gray-200 shadow-input hover:border hover:border-blue-200 focus:border-blue-200 focus:outline-none px-3 py-2 rounded-md mr-7 mb-4"
  169.                 onchange="location = this.value;">
  170.             <option value="{{ path('app_home_list', {'id': app.request.get('id'), 'sortby': ''}) }}">Trier par</option>
  171.             <option value="{{ path('app_home_list', {'id': app.request.get('id'), 'sortby': 'newest'}) }}">Les plus récents</option>
  172.             <option value="{{ path('app_home_list', {'id': app.request.get('id'), 'sortby': 'oldest'}) }}">Les plus anciens</option>
  173.         </select>
  175.           <a
  176.             href="{{ path('app_home_list') }}"
  177.             type="button"
  178.             class="border border-gray-200 dark:text-gray-200 dark:hover:text-blue-500 dark:hover:border-blue-500 p-[11px] mr-3 mb-4 rounded-full text-gray-500 hover:text-blue-500 hover:border-blue-500"
  179.           >
  180.             <svg
  181.               xmlns="http://www.w3.org/2000/svg"
  182.               class="h-6 w-6"
  183.               fill="none"
  184.               viewBox="0 0 24 24"
  185.               stroke="currentColor"
  186.               stroke-width="2"
  187.             >
  188.               <path
  189.                 stroke-linecap="round"
  190.                 stroke-linejoin="round"
  191.                 d="M4 6h16M4 12h16M4 18h16"
  192.               />
  193.             </svg>
  194.           </a>
  195.           <a
  196.             href="{{ path('app_home_list_grid') }}"
  197.             type="button"
  198.             class="border border-gray-200 dark:text-gray-200 dark:hover:text-blue-500 dark:hover:border-blue-500 p-[11px] mr-3 mb-4 rounded-full text-gray-500 hover:text-blue-500 hover:border-blue-500"
  199.           >
  200.             <svg
  201.               xmlns="http://www.w3.org/2000/svg"
  202.               class="h-5 w-5"
  203.               viewBox="0 0 20 20"
  204.               fill="currentColor"
  205.             >
  206.               <path
  207.                 d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
  208.               />
  209.             </svg>
  210.           </a>
  211.         </div>
  212.       </div>
  213.       <div class="pl-5 pb-5 pt-5">
  214.         <div class="mb-12">
  215. <!-- start shop --> 
  216. {% for shop in shops %}
  217.   {% if shop.available %}
  218.     <div class="item js-marker hidden" data-item data-lat="{{ shop.latitude }}" data-lng="{{ shop.longitude }}">
  219.           <a
  220.             href="{{ path('app_home_show', {'slug' : shop.slug })}}"
  221.             class="slug flex lg:flex-row flex-col bg-white shadow-front-2 dark:bg-foreground mb-7"
  222.           >
  223.             <div class="relative w-80 lg:mr-9 mr-0 lg:mb-0 mb-4">
  224.               <img
  225.                 class="pictureName w-full h-56 object-cover rounded-lg"
  226.                 src="{{ vich_uploader_asset(shop, 'picture1') }}"
  227.                 alt=""
  228.               />
  229.               
  230.             </div>
  231.             <div class="flex flex-1 lg:px-0 px-5">
  232.               <div class="flex flex-col flex-1 justify-center">
  233.                 <div class="flex items-center mb-2">
  234.                   <h3
  235.                     class="ShopName text-xl text-gray-700 dark:text-gray-100 font-semibold mr-2"
  236.                   >
  237.                     {{ shop.name }}
  238.                   </h3>
  239.                   {% if shop.verified == true %}
  240.                   <svg
  241.                     xmlns="http://www.w3.org/2000/svg"
  242.                     class="h-5 w-5 text-green-600"
  243.                     viewBox="0 0 20 20"
  244.                     fill="currentColor"
  245.                   >
  246.                     <path
  247.                       fill-rule="evenodd"
  248.                       d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
  249.                       clip-rule="evenodd"
  250.                     />
  251.                   </svg>
  252.                   {% endif %}
  254.                 </div>
  255.                 <div class="shopSubtitle text-base dark:text-gray-400 mb-6">{{ shop.subtitle }}</div>
  256.                 <div class="shopCategories flex flex-wrap mb-2 items-center mt-5 mr-1">
  257.                   {% for category in shop.categories %}
  258.                   
  259.                   <div
  260.                     class="bg-gray-100 rounded-full mb-2 px-3 py-1 mr-2 flex items-center"
  261.                   >
  262.                         <span class="text-xs font-medium">
  263.                         {{ category.name }}
  264.                         </span>
  265.                     
  266.                   </div>
  267.                   {% endfor %}
  268.                   
  269.                 </div>
  270.               </div>
  271.             </div>
  272.           </a>
  273.         </div>
  274.   {% endif %}
  276.         {% endfor %}
  277.           <!-- end shop -->
  278.           <button 
  279.               id="voirPlusButton"
  280.               class="bg-blue-500 text-white hover:bg-blue-600 rounded-lg w-full p-3.5 mt-9 mb-4"
  281.               >
  282.               Voir plus de commerces
  283.               </button>
  285.         </div>       
  286.       </div>
  287.     </div>
  288.   </div>
  289. </div>
  291.       <div class="scroll-top-btn opacity-0 transition-all">
  292.   <button
  293.     type="button"
  294.     class="bg-blue-500 p-2 fixed z-50 bottom-0 hover:-translate-y-2 transition-all right-0 m-10 rounded-full"
  295.   >
  296.     <svg
  297.       xmlns="http://www.w3.org/2000/svg"
  298.       class="h-6 w-6 text-white"
  299.       fill="none"
  300.       viewBox="0 0 24 24"
  301.       stroke="currentColor"
  302.       stroke-width="2"
  303.     >
  304.       <path
  305.         stroke-linecap="round"
  306.         stroke-linejoin="round"
  307.         d="M7 11l5-5m0 0l5 5m-5-5v12"
  308.       />
  309.     </svg>
  310.   </button>
  311. </div>
  312.  
  314. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  315. <script>
  316.   $(document).ready(function() {
  317.     var itemsPerPage = 10;
  318.     var startIndex = 0;
  319.     var endIndex = itemsPerPage;
  321.     // Afficher les 10 premiers éléments au chargement de la page
  322.     $("[data-item]").slice(startIndex, endIndex).removeClass("hidden");
  324.     $("#voirPlusButton").on("click", function() {
  325.       // Afficher les 10 éléments suivants
  326.       $("[data-item]").slice(startIndex, endIndex + itemsPerPage).removeClass("hidden");
  328.       // Mettre à jour les index de début et de fin
  329.       startIndex += itemsPerPage;
  330.       endIndex += itemsPerPage;
  332.       // Cacher le bouton s'il n'y a plus d'éléments à afficher
  333.       if (endIndex >= $("[data-item]").length) {
  334.         $("#voirPlusButton").hide();
  335.       }
  336.     });
  337.   });
  339.   // Sélectionnez l'élément avec la classe "flash-message"
  340. var flashMessageElement = document.querySelector('.flash-message');
  342. // Masquez l'élément après 5 secondes
  343. setTimeout(function() {
  344.     flashMessageElement.style.display = 'none';
  345. }, 10000); // 5000 millisecondes = 5 secondes
  346. </script>
  350. {% endblock %}