templates/home/listingGrid.html.twig line 128

  1. {% extends 'base2.html.twig' %}
  3. {% block body %}
  4.     <div class="font-inter dark:bg-background sticky-header-first-content">
  5.       <div class="dark:bg-background">
  6.   <div class="relative flex items-start pt-10">
  7.     <div
  8.   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"
  9. >
  10.   <div
  11.     class="border-b lg:border-gray-200 border-transparent dark:border-foreground p-5"
  12.   >
  13.     <p
  14.       class="text-gray-700 text-lg dark:text-gray-300 font-semibold lg:block hidden"
  15.     >
  16.       Filter
  17.     </p>
  18.     <div class="lg:hidden flex justify-between container mx-auto">
  19.       <svg
  20.         xmlns="http://www.w3.org/2000/svg"
  21.         class="h-6 w-6"
  22.         fill="none"
  23.         viewBox="0 0 24 24"
  24.         stroke="currentColor"
  25.         stroke-width="2"
  26.       >
  27.         <path
  28.           stroke-linecap="round"
  29.           stroke-linejoin="round"
  30.           d="M11 17l-5-5m0 0l5-5m-5 5h12"
  31.         />
  32.       </svg>
  33.       <svg
  34.         xmlns="http://www.w3.org/2000/svg"
  35.         class="h-6 w-6 close-left-sidebar"
  36.         fill="none"
  37.         viewBox="0 0 24 24"
  38.         stroke="currentColor"
  39.         stroke-width="2"
  40.       >
  41.         <path
  42.           stroke-linecap="round"
  43.           stroke-linejoin="round"
  44.           d="M6 18L18 6M6 6l12 12"
  45.         />
  46.       </svg>
  47.     </div>
  48.   </div>
  50. {{ form_start(form) }}
  52.   <div class="p-5 h-5/6 overflow-y-auto">
  53.     <!-- Search bar Start-->
  54.       <div class="">
  55.         {{ 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'} })}}
  56.       </div>
  57.   <!-- Search bar END-->
  59.   <p
  60.       class="mb-1 text-gray-700 text-[17px] dark:text-gray-300 font-semibold lg:block hidden"
  61.     >
  62.       Les catégories
  63.     </p>
  65.   <!-- Category filter Start-->
  66.       {% block _category_widget %}
  67.           {% for child in form.Category %}
  68.               {{ form_widget(child) }}
  69.               {{ form_label(child) }}
  70.               <br>
  71.           {% endfor %}
  72.       {% endblock %}
  73.   <!-- Category filter END-->
  75.      <p
  76.       class="mb-1 mt-4 text-gray-700 text-[17px] dark:text-gray-300 font-semibold lg:block hidden"
  77.     >
  78.       Commerce véfifié
  79.     </p>
  80.     
  81.     <!-- Vefified filter Start-->
  82.       <label class="flex items-center mb-1 cursor-pointer">
  83.           {{ form_widget(form.verified) }}
  84.           <span class="ml-2 text-gray-700 text-[12px] dark:text-gray-300">
  85.               Vérifié par Best of Sarlat
  86.           </span>
  87.       </label>
  88.     <!-- Vefified filter END-->
  90.     <!-- Submit Start-->
  91.       <button
  92.       type="submit"
  93.       class="bg-blue-500 text-white hover:bg-blue-600 rounded-lg w-full p-3.5 mt-9 mb-4"
  94.     >
  95.       Lancer la recherche
  96.     </button>
  97.     <!-- Submit END-->
  99. {{ form_end(form) }}
  100.   </div>
  101. </div>
  103.     <div
  104.       class="listing-sidebar-overlay fixed w-full h-full inset-0 z-10 cursor-pointer bg-black opacity-70 hidden"
  105.     ></div>
  106.     <div class="flex-1">  
  108.       <!-- content-start  -->
  110.       <!-- main content started  -->
  111.       <div class="flex items-start">
  112.         <div class="lg:basis-96 basis-auto lg:flex-shrink-0 flex-shrink mr-7">
  113.           <div class="flex justify-between flex-wrap mb-3">
  114.             <p
  115.               class="text-lg font-semibold text-gray-500 dark:text-gray-200 p-5"
  116.             >
  117.     {% set available_shops = shops|filter(shop => shop.available == true) %}
  118.     <p>Commerces disponibles - <span class="text-gray-700">{{ available_shops|length }}</span> résultats</p>  
  119.           </div>
  120.           
  122.           <!-- start shop --> 
  123.           {% for shop in shops %}
  124.            {% if shop.available %}
  126.           <div class="pl-7 mb-5 item js-marker" data-lat="{{ shop.latitude }}" data-lng="{{ shop.longitude}}">
  127.             <a
  128.             href="{{ path('app_home_show', {'id' : shop.id })}}"
  129.             class="flex lg:flex-row flex-col bg-white shadow-front-2 dark:bg-foreground mb-7"
  130.           >
  131.           <div class="grid lg:grid-cols-1 sm:grid-cols-2 grid-cols-1 gap-7">
  132.               <div
  133.                 id="map-1"
  134.                 class="cursor-pointer overflow-hidden rounded-t-lg group"
  135.               >
  136.                 <div class="relative overflow-hidden">
  138.                   <img
  139.                     class="w-full h-80 object-cover rounded-t-lg group-hover:scale-105 transition-all"
  140.                     src="img/Image/landing-page-image/researching.jpg"
  141.                     alt=""
  142.                   />
  143.                   <div
  144.                     class="absolute bottom-0 top-1/2 flex items-start flex-col justify-end left-0 pb-5 pl-5 pt-2 card-linear-gradient w-full"
  145.                   >
  146.                   {% for category in shop.categories %}
  147.                     <span
  148.                       class="bg-pink-600 text-xs text-white rounded-full px-3 py-1 mb-3 inline-flex"
  149.                       >{{ category.name }}</span
  150.                     >
  151.                   {% endfor %}
  152.                     <div class="flex text-white items-center mb-2">
  153.                       <h2 class="text-xl capitalize font-semibold mr-2">
  154.                         {{ shop.name }}
  155.                       </h2>
  156.                       {% if shop.verified == true %}
  157.                       <svg
  158.                         width="20"
  159.                         height="20"
  160.                         viewBox="0 0 20 20"
  161.                         fill="none"
  162.                         xmlns="http://www.w3.org/2000/svg"
  163.                       >
  164.                         <path
  165.                           d="M15.6562 4.34313C16.4688 5.15625 16.6906 6.31875 16.4031 7.34688C17.3531 7.85 18 8.85 18 10C18 11.15 17.3531 12.15 16.4031 12.6531C16.7188 13.6812 16.4688 14.8156 15.6562 15.6562C14.8156 16.4688 13.6812 16.6906 12.6531 16.4031C12.15 17.3531 11.15 18 10 18C8.85 18 7.85 17.3531 7.34688 16.4031C6.31875 16.7188 5.15625 16.4688 4.34313 15.6562C3.53 14.8156 3.28125 13.6812 3.59687 12.6531C2.64687 12.15 2 11.15 2 10C2 8.85 2.64687 7.85 3.59687 7.34688C3.25312 6.31875 3.53 5.15625 4.34313 4.34313C5.15625 3.53 6.31875 3.28125 7.34688 3.59687C7.85 2.64687 8.85 2 10 2C11.15 2 12.15 2.64687 12.6531 3.59687C13.6812 3.25312 14.8156 3.53 15.6562 4.34313Z"
  166.                           fill="#00AB55"
  167.                         />
  168.                         <path
  169.                           d="M7 10L8.64645 11.6464C8.84171 11.8417 9.15829 11.8417 9.35355 11.6464L13 8"
  170.                           stroke="white"
  171.                           stroke-width="1.2"
  172.                           stroke-linecap="round"
  173.                         />
  174.                       </svg>
  175.                       {% endif %}
  176.                     </div>
  177.                     <p class="text-sm font-normal text-white mb-4">
  178.                       {{ shop.addressCity }}
  179.                     </p>
  180.                   </div>
  181.                 </div>
  182.                 <div
  183.                   class="flex justify-between p-6 bg-gray-100 dark:bg-foreground rounded-b-lg"
  184.                 >
  185.                   <div class="flex">
  186.                     <div class="flex">
  187.                       <svg
  188.                         class="w-5 mr-0 h-auto flex-shrink-0 text-yellow-400"
  189.                         xmlns="http://www.w3.org/2000/svg"
  190.                         class="h-5 w-5"
  191.                         viewBox="0 0 20 20"
  192.                         fill="currentColor"
  193.                       >
  194.                         <path
  195.                           d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
  196.                         />
  197.                       </svg>
  198.                       <svg
  199.                         class="w-5 mr-0 h-auto flex-shrink-0 text-yellow-400"
  200.                         xmlns="http://www.w3.org/2000/svg"
  201.                         class="h-5 w-5"
  202.                         viewBox="0 0 20 20"
  203.                         fill="currentColor"
  204.                       >
  205.                         <path
  206.                           d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
  207.                         />
  208.                       </svg>
  209.                       <svg
  210.                         class="w-5 mr-0 h-auto flex-shrink-0 text-yellow-400"
  211.                         xmlns="http://www.w3.org/2000/svg"
  212.                         class="h-5 w-5"
  213.                         viewBox="0 0 20 20"
  214.                         fill="currentColor"
  215.                       >
  216.                         <path
  217.                           d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
  218.                         />
  219.                       </svg>
  220.                       <svg
  221.                         class="w-5 mr-0 h-auto flex-shrink-0 text-yellow-400"
  222.                         xmlns="http://www.w3.org/2000/svg"
  223.                         class="h-5 w-5"
  224.                         viewBox="0 0 20 20"
  225.                         fill="currentColor"
  226.                       >
  227.                         <path
  228.                           d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
  229.                         />
  230.                       </svg>
  231.                       <svg
  232.                         class="w-5 mr-0 h-auto flex-shrink-0 text-yellow-400"
  233.                         xmlns="http://www.w3.org/2000/svg"
  234.                         class="h-5 w-5"
  235.                         viewBox="0 0 20 20"
  236.                         fill="currentColor"
  237.                       >
  238.                         <path
  239.                           d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
  240.                         />
  241.                       </svg>
  242.                     </div>
  243.                     <span class="text-base mx-2 dark:text-gray-100">{{ shop.rating }}</span>
  244.                     <span class="text-gray-500 dark:text-gray-400">(56)</span>
  245.                   </div>
  246.                 </div>
  247.               </div>
  249.             </div>
  250.             </a>
  251.           </div>
  252.             {% endif %}
  253.         {% endfor %}
  255.         </div>
  256. <div class="w-screen h-90 flex flex-row map-container-grid ">
  257.   <div id="map" class="float-right h-full flex-1">
  258.   </div>
  259. </div>
  261.         <button
  262.           type="button"
  263.           class="bg-white p-4 map-btn lg:hidden shadow-front-3 items-center flex fixed bottom-7 left-1/2 -translate-x-1/2"
  264.         >
  265.           <svg
  266.             class="mr-2 text-blue-500"
  267.             width="16"
  268.             height="16"
  269.             viewBox="0 0 16 16"
  270.             fill="none"
  271.             xmlns="http://www.w3.org/2000/svg"
  272.           >
  273.             <path
  274.               d="M10.6668 4.98896C10.6668 6.16693 9.04232 8.26612 8.32899 9.11184C8.15787 9.33837 7.84232 9.33837 7.67121 9.11184C6.95788 8.26612 5.33343 6.16693 5.33343 4.98896C5.33343 3.55922 6.52676 2.40002 8.0001 2.40002C9.47343 2.40002 10.6668 3.55922 10.6668 4.98896ZM8.0001 5.67934C8.49121 5.67934 8.88899 5.29316 8.88899 4.81636C8.88899 4.33978 8.49121 3.95339 8.0001 3.95339C7.50899 3.95339 7.11121 4.33978 7.11121 4.81636C7.11121 5.29316 7.50899 5.67934 8.0001 5.67934ZM11.0579 6.27911C11.069 6.25322 11.0801 6.22733 11.0912 6.19929L13.669 5.19823C14.0201 5.06231 14.4001 5.31258 14.4001 5.67934V11.5217C14.4001 11.7331 14.2668 11.923 14.0645 12.0028L10.8445 13.252V6.72355C10.9223 6.57468 10.9934 6.42798 11.0579 6.27911ZM4.94232 6.27911C5.00676 6.42798 5.07788 6.57468 5.15565 6.72355V12.1474L2.33143 13.2455C1.98121 13.362 1.6001 13.1312 1.6001 12.7644V6.92203C1.6001 6.7106 1.73288 6.50133 1.93543 6.44092L4.65788 5.38377C4.71121 5.69013 4.8201 5.99433 4.94232 6.27911ZM8.88454 9.54333C9.19343 9.18735 9.67787 8.57679 10.1334 7.90151V13.28L5.86676 12.0956V7.90151C6.32232 8.57679 6.80676 9.18735 7.11565 9.54333C7.57121 10.1151 8.42899 10.1151 8.88454 9.54333Z"
  275.               fill="currentColor"
  276.             />
  277.           </svg>
  278.           Map View
  279.         </button>
  280.       </div>
  281.     </div>
  282.   </div>
  283. </div>
  285.       <div class="scroll-top-btn opacity-0 transition-all">
  286.   <button
  287.     type="button"
  288.     class="bg-blue-500 p-2 fixed z-50 bottom-0 hover:-translate-y-2 transition-all right-0 m-10 rounded-full"
  289.   >
  290.     <svg
  291.       xmlns="http://www.w3.org/2000/svg"
  292.       class="h-6 w-6 text-white"
  293.       fill="none"
  294.       viewBox="0 0 24 24"
  295.       stroke="currentColor"
  296.       stroke-width="2"
  297.     >
  298.       <path
  299.         stroke-linecap="round"
  300.         stroke-linejoin="round"
  301.         d="M7 11l5-5m0 0l5 5m-5-5v12"
  302.       />
  303.     </svg>
  304.   </button>
  305. </div>
  306.  
  308. {% endblock %}