templates/home/listing.html.twig line 1
{% extends 'base2.html.twig' %}
{% block body %}
<div class="font-inter dark:bg-background sticky-header-first-content">
<div class="container mx-auto lg:px-0 px-5 dark:bg-background">
{% for flashMessage in app.flashes('success') %}
<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">
<div class="flex">
<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>
<div>
<p class="font-bold">{{ flashMessage }}</p>
<p class="text-sm">Vous pouvez dès à présent vous connecter à votre compte.</p>
</div>
</div>
</div>
{% endfor %}
<!-- GOOGLE MAPS START -->
<div class="pt-0">
<div class="mapouter mx-auto w-full h-96">
<div class="gmap_canvas w-full h-96 realtive">
<div id="map" class="map h-96 w-full"></div>
</div>
</div>
</div>
<!-- GOOGLE MAPS END -->
<div
class="relative lg:hidden flex shadow-input p-4 dark:bg-foreground rounded-md mb-4"
>
<div class="flex items-center">
<p class="text-gray-700 text-lg dark:text-gray-100 font-semibold">
Filtrer
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 -rotate-90 text-blue-500 listing-filter-btn"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
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"
/>
</svg>
</div>
</div>
<div class="relative flex items-start pt-10">
<div
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"
>
<div
class="border-b lg:border-gray-200 border-transparent dark:border-foreground p-5"
>
<p
class="text-gray-700 text-lg dark:text-gray-300 font-semibold lg:block hidden"
>
Affiner la recherche
</p>
<div class="lg:hidden flex justify-between container mx-auto">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11 17l-5-5m0 0l5-5m-5 5h12"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 close-left-sidebar"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
</div>
<div class="p-5 h-5/6">
{{ form_start(form) }}
<!-- Search bar Start-->
<div class="">
{{ 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'} })}}
</div>
<!-- Search bar END-->
<p
class="mb-1 text-gray-700 text-[17px] dark:text-gray-300 font-semibold lg:block hidden"
>
Les catégories
</p>
<!-- Category filter Start-->
{% block _category_widget %}
{% for child in form.Category %}
{{ form_widget(child) }}
{{ form_label(child) }}
<br>
{% endfor %}
{% endblock %}
<!-- Category filter END-->
<p
class="mb-1 mt-4 text-gray-700 text-[17px] dark:text-gray-300 font-semibold lg:block hidden"
>
Commerce véfifié
</p>
<!-- Vefified filter Start-->
<label class="flex items-center mb-1 cursor-pointer">
{{ form_widget(form.verified) }}
<span class="ml-2 text-gray-700 text-[12px] dark:text-gray-300">
Vérifié par Best of Sarlat
</span>
</label>
<!-- Vefified filter END-->
<!-- Submit Start-->
<button
type="submit"
class="bg-blue-500 text-white hover:bg-blue-600 rounded-lg w-full p-3.5 mt-9 mb-4"
>
Lancer la recherche
</button>
<!-- Submit END-->
{{ form_end(form) }}
</div>
</div>
<div
class="listing-sidebar-overlay fixed w-full h-full inset-0 z-10 cursor-pointer bg-black opacity-70 hidden"
></div>
<div class="flex-1">
<div class="shadow-inner-tabs dark:bg-foreground bg-white">
</div>
<!-- content-start -->
<div class="flex justify-between items-center flex-wrap mb-0 pl-5 pt-5">
{% set available_shops = shops|filter(shop => shop.available == true) %}
<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">
<select name="sortby"
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"
onchange="location = this.value;">
<option value="{{ path('app_home_list', {'id': app.request.get('id'), 'sortby': ''}) }}">Trier par</option>
<option value="{{ path('app_home_list', {'id': app.request.get('id'), 'sortby': 'newest'}) }}">Les plus récents</option>
<option value="{{ path('app_home_list', {'id': app.request.get('id'), 'sortby': 'oldest'}) }}">Les plus anciens</option>
</select>
<a
href="{{ path('app_home_list') }}"
type="button"
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"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</a>
<a
href="{{ path('app_home_list_grid') }}"
type="button"
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"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
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"
/>
</svg>
</a>
</div>
</div>
<div class="pl-5 pb-5 pt-5">
<div class="mb-12">
<!-- start shop -->
{% for shop in shops %}
{% if shop.available %}
<div class="item js-marker hidden" data-item data-lat="{{ shop.latitude }}" data-lng="{{ shop.longitude }}">
<a
href="{{ path('app_home_show', {'slug' : shop.slug })}}"
class="slug flex lg:flex-row flex-col bg-white shadow-front-2 dark:bg-foreground mb-7"
>
<div class="relative w-80 lg:mr-9 mr-0 lg:mb-0 mb-4">
<img
class="pictureName w-full h-56 object-cover rounded-lg"
src="{{ vich_uploader_asset(shop, 'picture1') }}"
alt=""
/>
</div>
<div class="flex flex-1 lg:px-0 px-5">
<div class="flex flex-col flex-1 justify-center">
<div class="flex items-center mb-2">
<h3
class="ShopName text-xl text-gray-700 dark:text-gray-100 font-semibold mr-2"
>
{{ shop.name }}
</h3>
{% if shop.verified == true %}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-600"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
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"
clip-rule="evenodd"
/>
</svg>
{% endif %}
</div>
<div class="shopSubtitle text-base dark:text-gray-400 mb-6">{{ shop.subtitle }}</div>
<div class="shopCategories flex flex-wrap mb-2 items-center mt-5 mr-1">
{% for category in shop.categories %}
<div
class="bg-gray-100 rounded-full mb-2 px-3 py-1 mr-2 flex items-center"
>
<span class="text-xs font-medium">
{{ category.name }}
</span>
</div>
{% endfor %}
</div>
</div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
<!-- end shop -->
<button
id="voirPlusButton"
class="bg-blue-500 text-white hover:bg-blue-600 rounded-lg w-full p-3.5 mt-9 mb-4"
>
Voir plus de commerces
</button>
</div>
</div>
</div>
</div>
</div>
<div class="scroll-top-btn opacity-0 transition-all">
<button
type="button"
class="bg-blue-500 p-2 fixed z-50 bottom-0 hover:-translate-y-2 transition-all right-0 m-10 rounded-full"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var itemsPerPage = 10;
var startIndex = 0;
var endIndex = itemsPerPage;
// Afficher les 10 premiers éléments au chargement de la page
$("[data-item]").slice(startIndex, endIndex).removeClass("hidden");
$("#voirPlusButton").on("click", function() {
// Afficher les 10 éléments suivants
$("[data-item]").slice(startIndex, endIndex + itemsPerPage).removeClass("hidden");
// Mettre à jour les index de début et de fin
startIndex += itemsPerPage;
endIndex += itemsPerPage;
// Cacher le bouton s'il n'y a plus d'éléments à afficher
if (endIndex >= $("[data-item]").length) {
$("#voirPlusButton").hide();
}
});
});
// Sélectionnez l'élément avec la classe "flash-message"
var flashMessageElement = document.querySelector('.flash-message');
// Masquez l'élément après 5 secondes
setTimeout(function() {
flashMessageElement.style.display = 'none';
}, 10000); // 5000 millisecondes = 5 secondes
</script>
{% endblock %}