templates/home/shops_list.html.twig line 1

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block title %}Boutiques | MaketOu{% endblock %}
  5. {% block body %}
  7.     <!-- Start Banner Area -->
  8.     {% if selectedCategory and selectedCategory.bannerImage %}
  9.         <section class="banner-area shop-category-banner  organic-breadcrumb" style="background-image: url('{{ asset(selectedCategory.bannerImage) }}'); background-size: cover; background-position: center; min-height: 300px; position: relative;object-fit: cover;height:400px;">
  10.             <div class="banner-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);"></div>
  11.             <div class="container" style="position: relative; z-index: 1;">
  12.                 <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
  13.                     <div class="col-first text-white">
  14.                         <h1 style="color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">{{ selectedCategory.name }}</h1>
  15.                         <nav class="d-flex align-items-center">
  16.                             <a href="{{ path('ui_home') }}" style="color: white;">Accueil<span class="lnr lnr-arrow-right"></span></a>
  17.                             <a href="{{ path('ui_shops_list') }}" style="color: white;">Boutiques<span class="lnr lnr-arrow-right"></span></a>
  18.                             <a href="javascript:void(0);" style="color: white;">{{ selectedCategory.name }}</a>
  19.                         </nav>
  20.                     </div>
  21.                 </div>
  22.             </div>
  23.         </section>
  24.     {% else %}
  25.         <section class="banner-area organic-breadcrumb">
  26.             <div class="container">
  27.                 <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
  28.                     <div class="col-first">
  29.                         <h1>{% if selectedCategory %}{{ selectedCategory.name }}{% else %}Boutiques{% endif %}</h1>
  30.                         <nav class="d-flex align-items-center">
  31.                             <a href="{{ path('ui_home') }}">Accueil<span class="lnr lnr-arrow-right"></span></a>
  32.                             <a href="javascript:void(0);">Boutiques</a>
  33.                         </nav>
  34.                     </div>
  35.                 </div>
  36.             </div>
  37.         </section>
  38.     {% endif %}
  39.     <!-- End Banner Area -->
  41.     <div class="container mt-4 mb-4">
  42.         <div class="row">
  43.             <div class="col-xl-3 col-lg-4 col-md-5">
  44.                 <!-- Filtres des boutiques -->
  45.                 <div class="sidebar-categories">
  46.                     <div class="head">Catégories de boutiques</div>
  47.                     <ul class="main-categories">
  48.                         {% for category in shopCategories %}
  49.                             <li class="main-nav-list">
  50.                                 <a href="{{ path('ui_shops_list', {'category': category.slug}) }}" 
  51.                                    class="category-link {% if app.request.query.get('category') == category.slug %}active{% endif %}">
  52.                                     <i class="lnr lnr-store"></i>
  53.                                     {{ category.name }}
  54.                                     <span class="number">({{ category.shops|length }})</span>
  55.                                 </a>
  56.                             </li>
  57.                         {% endfor %}
  58.                     </ul>
  59.                 </div>
  61.                 <!-- Statistiques modernes inline -->
  62.                 <div class="sidebar-filter mt-4">
  63.                     <div class="top-filter-head">Statistiques</div>
  64.                     <div class="modern-stats">
  65.                         <div class="stat-item-inline mt-3">
  66.                             <i class="lnr lnr-store"></i>
  67.                             <div>
  68.                                 <div class="stat-value">{{ total_shops|default(0) }}</div>
  69.                                 <div class="stat-label">Total</div>
  70.                             </div>
  71.                         </div>
  72.                         <div class="stat-item-inline">
  73.                             <i class="lnr lnr-star"></i>
  74.                             <div>
  75.                                 <div class="stat-value">{{ shops|filter(shop => shop.isActive)|length }}</div>
  76.                                 <div class="stat-label">Actives</div>
  77.                             </div>
  78.                         </div>
  79.                         <div class="stat-item-inline">
  80.                             <i class="lnr lnr-checkmark-circle"></i>
  81.                             <div>
  82.                                 <div class="stat-value">{{ shops|filter(shop => shop.isVerified)|length }}</div>
  83.                                 <div class="stat-label">Vérifiées</div>
  84.                             </div>
  85.                         </div>
  86.                     </div>
  87.                 </div>
  88.             </div>
  90.             <div class="col-xl-9 col-lg-8 col-md-7">
  92.                 <!-- Liste des boutiques -->
  93.                 <div class="row" id="shopsContainer">
  94.                     {% for shop in shops|slice(0, 9) %}
  95.                         <div class="mt-4 col-lg-4 col-md-6 shop-item" data-shop-id="{{ shop.id }}">
  96.                             <div class="single-shop h-100">
  97.                                 <div class="shop-image">
  98.                                     <a href="{{ path('ui_shop_show', {'slug': shop.slug}) }}">
  99.                                         {% if shop.logo %}
  100.                                             <img class="img-fluid" src="{{ asset(shop.logo) }}" alt="{{ shop.name }}">
  101.                                         {% else %}
  102.                                             <img class="img-fluid" src="{{ asset('ui/img/shop/default-shop.jpg') }}" alt="{{ shop.name }}">
  103.                                         {% endif %}
  104.                                     </a>
  105.                                     {% if shop.isVerified %}
  106.                                         <div class="verified-badge">
  107.                                             <i class="lnr lnr-checkmark-circle"></i>
  108.                                         </div>
  109.                                     {% endif %}
  110.                                 </div>
  111.                                 
  112.                                 <div class="shop-details">
  113.                                     <div class="shop-header">
  114.                                         <h6 class="shop-name">
  115.                                             <a href="{{ path('ui_shop_show', {'slug': shop.slug}) }}">{{ shop.name }}</a>
  116.                                         </h6>
  117.                                         {% if shop.shopCategory %}
  118.                                             <span class="shop-category">{{ shop.shopCategory.name }}</span>
  119.                                         {% endif %}
  120.                                     </div>
  121.                                     
  122.                                     <div class="shop-stats">
  123.                                         <div class="stat-item">
  124.                                             <span class="stat-value">{{ shop.getActiveProductsCount() }}</span>
  125.                                             <span class="stat-label">Produits</span>
  126.                                         </div>
  127.                         <div class="stat-item">
  128.                             <span class="stat-value followers-count" data-shop-id="{{ shop.id }}">{{ shop.getActiveFollowersCount() }}</span>
  129.                                             <span class="stat-label">Suiveurs</span>
  130.                                         </div>
  131.                                         <div class="stat-item">
  132.                                             <span class="stat-value">{{ shop.viewCount }}</span>
  133.                                             <span class="stat-label">Vues</span>
  134.                                         </div>
  135.                                     </div>
  136.                                     
  137.                                     <div class="shop-description">
  138.                                         <p>{{ shop.description|striptags|length > 100 ? shop.description|striptags|slice(0, 100) ~ '...' : shop.description|striptags }}</p>
  139.                                     </div>
  140.                                     
  141.                                     <div class="shop-actions">
  142.                                         <a href="{{ path('ui_shop_show', {'slug': shop.slug}) }}" class="btn btn-primary btn-sm">
  143.                                             <i class="lnr lnr-eye me-1"></i> Voir
  144.                                         </a>
  145.                                         {% if app.user %}
  146.                                             {% set followed_shop_ids = followed_shop_ids|default([]) %}
  147.                                             {% set is_following = shop.id in followed_shop_ids %}
  148.                                             <button class="btn btn-sm follow-btn {{ is_following ? 'btn-outline-danger' : 'btn-outline-secondary' }}" 
  149.                                                     data-shop-id="{{ shop.id }}"
  150.                                                     data-following="{{ is_following ? 'true' : 'false' }}"
  151.                                                     onclick="toggleFollow({{ shop.id }}, this)">
  152.                                                 <i class="lnr {{ is_following ? 'lnr-cross' : 'lnr-plus' }} me-1"></i>
  153.                                                 <span class="follow-text">
  154.                                                     {{ is_following ? 'Ne plus suivre' : 'Suivre' }}
  155.                                                 </span>
  156.                                             </button>
  157.                                         {% endif %}
  158.                                     </div>
  159.                                 </div>
  160.                             </div>
  161.                         </div>
  162.                     {% endfor %}
  163.                 </div>
  165.                 <!-- Bouton Voir plus -->
  166.                 {% if shops|length > 9 or current_page < total_pages %}
  167.                     <div class="text-center mt-4 mb-4" id="loadMoreContainer">
  168.                         <button class="btn btn-primary btn-lg" id="loadMoreBtn" onclick="loadMoreShops()">
  169.                             <i class="lnr lnr-plus-circle me-2"></i>Voir plus de boutiques
  170.                         </button>
  171.                     </div>
  172.                 {% endif %}
  174.                 <!-- Message si aucune boutique -->
  175.                 {% if shops|length == 0 %}
  176.                     <div class="text-center py-5">
  177.                         <i class="lnr lnr-store" style="font-size: 4rem; color: #ccc;"></i>
  178.                         <h4 class="mt-3">Aucune boutique trouvée</h4>
  179.                         <p class="text-muted">Aucune boutique ne correspond à vos critères de recherche.</p>
  180.                     </div>
  181.                 {% endif %}
  182.             </div>
  183.         </div>
  184.     </div>
  185. {% endblock %}
  187. {% block stylesheets %}
  188. <style>
  189. .single-shop {
  190.     background: white;
  191.     border-radius: 12px;
  192.     padding: 20px;
  193.     margin-bottom: 30px;
  194.     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  195.     transition: all 0.3s ease;
  196.     display: flex;
  197.     flex-direction: column;
  198.     height: 100%;
  199.     overflow: hidden; /* Empêcher le débordement */
  200. }
  202. .single-shop:hover {
  203.     transform: translateY(-5px);
  204.     box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  205. }
  207. .shop-image {
  208.     position: relative;
  209.     margin-bottom: 15px;
  210. }
  212. .shop-image img {
  213.     width: 100%;
  214.     height: 200px;
  215.     object-fit: cover;
  216.     border-radius: 8px;
  217. }
  219. .verified-badge {
  220.     position: absolute;
  221.     top: 10px;
  222.     right: 10px;
  223.     background: #28a745;
  224.     color: white;
  225.     padding: 5px 8px;
  226.     border-radius: 12px;
  227.     font-size: 0.8rem;
  228. }
  230. .shop-header {
  231.     margin-bottom: 15px;
  232. }
  234. .shop-name {
  235.     margin: 0 0 5px 0;
  236.     font-size: 1.1rem;
  237.     font-weight: 600;
  238. }
  240. .shop-name a {
  241.     color: #333;
  242.     text-decoration: none;
  243. }
  245. .shop-name a:hover {
  246.     color: #007bff;
  247. }
  249. .shop-category {
  250.     background: #f8f9fa;
  251.     color: #666;
  252.     padding: 2px 8px;
  253.     border-radius: 12px;
  254.     font-size: 0.8rem;
  255. }
  257. .shop-stats {
  258.     display: flex;
  259.     justify-content: space-around;
  260.     margin: 15px 0;
  261.     padding: 15px 0;
  262.     border-top: 1px solid #f0f0f0;
  263.     border-bottom: 1px solid #f0f0f0;
  264. }
  266. .stat-item {
  267.     text-align: center;
  268. }
  270. .stat-value {
  271.     display: block;
  272.     font-size: 1.2rem;
  273.     font-weight: 600;
  274.     color: #333;
  275. }
  277. .stat-label {
  278.     font-size: 0.8rem;
  279.     color: #666;
  280.     text-transform: uppercase;
  281.     letter-spacing: 0.5px;
  282. }
  284. .shop-description {
  285.     margin: 15px 0;
  286.     color: #666;
  287.     font-size: 0.9rem;
  288.     line-height: 1.4;
  289. }
  291. .shop-actions {
  292.     display: flex;
  293.     gap: 8px;
  294.     margin-top: auto;
  295.     padding-top: 15px;
  296.     flex-wrap: wrap;
  297. }
  299. .shop-actions .btn {
  300.     flex: 1 1 auto;
  301.     min-width: 0;
  302.     font-size: 0.85rem;
  303.     white-space: nowrap;
  304.     overflow: hidden;
  305.     text-overflow: ellipsis;
  306.     padding: 8px 12px;
  307. }
  309. .shop-actions .btn i {
  310.     margin-right: 4px;
  311.     flex-shrink: 0;
  312. }
  314. /* Assurer que shop-details utilise flexbox pour garder les boutons en bas */
  315. .shop-details {
  316.     display: flex;
  317.     flex-direction: column;
  318.     flex: 1;
  319.     min-height: 0; /* Important pour le flexbox */
  320. }
  322. /* Statistiques modernes inline */
  323. .modern-stats {
  324.     display: flex;
  325.     flex-direction: column;
  326.     gap: 15px;
  327. }
  329. .stat-item-inline {
  330.     display: flex;
  331.     align-items: center;
  332.     gap: 15px;
  333.     padding: 15px;
  334.     background: #f8f9fa;
  335.     border-radius: 10px;
  336.     transition: all 0.3s ease;
  337. }
  339. .stat-item-inline:hover {
  340.     background: #e9ecef;
  341.     transform: translateX(5px);
  342. }
  344. .stat-item-inline i {
  345.     font-size: 1.5rem;
  346.     color: #007bff;
  347.     width: 40px;
  348.     text-align: center;
  349. }
  351. .stat-item-inline .stat-value {
  352.     font-size: 1.5rem;
  353.     font-weight: 700;
  354.     color: #333;
  355.     line-height: 1;
  356. }
  358. .stat-item-inline .stat-label {
  359.     font-size: 0.85rem;
  360.     color: #666;
  361.     text-transform: uppercase;
  362.     letter-spacing: 0.5px;
  363.     margin-top: 5px;
  364. }
  366. .stat-number {
  367.     font-size: 1.5rem;
  368.     font-weight: 700;
  369.     color: #007bff;
  370.     margin-top: 5px;
  371. }
  373. @media (max-width: 768px) {
  374.     .single-shop {
  375.         padding: 15px;
  376.     }
  377.     
  378.     .shop-stats {
  379.         flex-direction: column;
  380.         gap: 10px;
  381.     }
  382.     
  383.     .shop-actions {
  384.         flex-direction: column;
  385.     }
  386. }
  387. </style>
  388. {% endblock %}
  390. {% block javascripts %}
  391. <script>
  392. let currentPage = {{ current_page }};
  393. let totalPages = {{ total_pages }};
  394. let isLoading = false;
  396. function sortShops(sortValue) {
  397.     console.log('Tri des boutiques:', sortValue);
  398.     // TODO: Implémenter le tri AJAX
  399. }
  401. function toggleFollow(shopId, button) {
  402.     if (!button) {
  403.         button = document.querySelector(`.follow-btn[data-shop-id="${shopId}"]`);
  404.         if (!button) return;
  405.     }
  407.     const isFollowing = button.getAttribute('data-following') === 'true';
  408.     const originalHtml = button.innerHTML;
  409.     button.disabled = true;
  410.     button.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
  412.     fetch(`{{ path('ui_api_shop_toggle_follow', {'id': 'SHOP_ID'}) }}`.replace('SHOP_ID', shopId), {
  413.         method: 'POST',
  414.         headers: {
  415.             'Content-Type': 'application/json',
  416.             'X-Requested-With': 'XMLHttpRequest'
  417.         },
  418.         body: JSON.stringify({ action: isFollowing ? 'unfollow' : 'follow' })
  419.     })
  420.     .then(response => response.json())
  421.     .then(data => {
  422.         if (data.success) {
  423.             // Mettre à jour l'état du bouton
  424.             const isFollowing = data.isFollowing === true;
  425.             button.setAttribute('data-following', isFollowing ? 'true' : 'false');
  426.             
  427.             // Mettre à jour les classes CSS
  428.             button.classList.remove('btn-outline-secondary', 'btn-outline-danger');
  429.             if (isFollowing) {
  430.                 button.classList.add('btn-outline-danger');
  431.             } else {
  432.                 button.classList.add('btn-outline-secondary');
  433.             }
  435.             // Reconstruire le HTML complet du bouton
  436.             const iconClass = isFollowing ? 'lnr-cross' : 'lnr-plus';
  437.             const textContent = isFollowing ? 'Ne plus suivre' : 'Suivre';
  438.             button.innerHTML = `<i class="lnr ${iconClass} me-1"></i><span class="follow-text">${textContent}</span>`;
  440.             // Mettre à jour le compteur
  441.             const followersCounter = document.querySelector(`.followers-count[data-shop-id="${shopId}"]`);
  442.             if (followersCounter && typeof data.followersCount !== 'undefined') {
  443.                 followersCounter.textContent = data.followersCount;
  444.             }
  446.             if (data.message) {
  447.                 console.log(data.message);
  448.             }
  449.             
  450.             button.disabled = false;
  451.         } else {
  452.             alert(data.message || 'Impossible de mettre à jour le suivi.');
  453.             button.innerHTML = originalHtml;
  454.             button.disabled = false;
  455.         }
  456.     })
  457.     .catch(error => {
  458.         console.error('Erreur suivi boutique:', error);
  459.         alert('Erreur lors de la mise à jour du suivi.');
  460.         button.innerHTML = originalHtml;
  461.         button.disabled = false;
  462.     });
  463. }
  465. function loadMoreShops() {
  466.     if (isLoading || currentPage >= totalPages) return;
  467.     
  468.     isLoading = true;
  469.     const btn = document.getElementById('loadMoreBtn');
  470.     const originalText = btn.innerHTML;
  471.     btn.disabled = true;
  472.     btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Chargement...';
  473.     
  474.     currentPage++;
  475.     const url = new URL(window.location.href);
  476.     url.searchParams.set('page', currentPage);
  477.     
  478.     fetch(url.toString(), {
  479.         headers: {
  480.             'X-Requested-With': 'XMLHttpRequest'
  481.         }
  482.     })
  483.     .then(response => response.json())
  484.     .then(data => {
  485.         if (data.success && data.shops.length > 0) {
  486.             const container = document.getElementById('shopsContainer');
  487.             data.shops.forEach(shop => {
  488.                 const shopHtml = createShopCard(shop);
  489.                 container.insertAdjacentHTML('beforeend', shopHtml);
  490.             });
  491.             
  492.             // Mettre à jour le bouton
  493.             if (!data.hasMore) {
  494.                 document.getElementById('loadMoreContainer').style.display = 'none';
  495.             } else {
  496.                 btn.disabled = false;
  497.                 btn.innerHTML = originalText;
  498.             }
  499.         } else {
  500.             document.getElementById('loadMoreContainer').style.display = 'none';
  501.         }
  502.         isLoading = false;
  503.     })
  504.     .catch(error => {
  505.         console.error('Erreur:', error);
  506.         btn.disabled = false;
  507.         btn.innerHTML = originalText;
  508.         isLoading = false;
  509.     });
  510. }
  512. function createShopCard(shop) {
  513.     const logoUrl = shop.logo ? '/' + shop.logo : '{{ asset("ui/img/shop/default-shop.jpg") }}';
  514.     const verifiedBadge = shop.isVerified ? 
  515.         '<div class="verified-badge"><i class="lnr lnr-checkmark-circle"></i></div>' : '';
  516.     const category = shop.category ? 
  517.         `<span class="shop-category">${shop.category}</span>` : '';
  518.     
  519.     return `
  520.         <div class="mt-4 col-lg-4 col-md-6 shop-item" data-shop-id="${shop.id}">
  521.             <div class="single-shop h-100">
  522.                 <div class="shop-image">
  523.                     <a href="/shop/${shop.slug}">
  524.                         <img class="img-fluid" src="${logoUrl}" alt="${shop.name}">
  525.                     </a>
  526.                     ${verifiedBadge}
  527.                 </div>
  528.                 <div class="shop-details">
  529.                     <div class="shop-header">
  530.                         <h6 class="shop-name">
  531.                             <a href="/shop/${shop.slug}">${shop.name}</a>
  532.                         </h6>
  533.                         ${category}
  534.                     </div>
  535.                     <div class="shop-stats">
  536.                         <div class="stat-item">
  537.                             <span class="stat-value">${shop.productsCount || 0}</span>
  538.                             <span class="stat-label">Produits</span>
  539.                         </div>
  540.                         <div class="stat-item">
  541.                             <span class="stat-value">${shop.followersCount || 0}</span>
  542.                             <span class="stat-label">Suiveurs</span>
  543.                         </div>
  544.                         <div class="stat-item">
  545.                             <span class="stat-value">${shop.viewCount || 0}</span>
  546.                             <span class="stat-label">Vues</span>
  547.                         </div>
  548.                     </div>
  549.                     <div class="shop-description">
  550.                         <p>${(shop.description || '').substring(0, 100)}${(shop.description || '').length > 100 ? '...' : ''}</p>
  551.                     </div>
  552.                     <div class="shop-actions">
  553.                         <a href="/shop/${shop.slug}" class="btn btn-primary btn-sm" style="flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
  554.                             <i class="lnr lnr-eye me-1"></i> Voir
  555.                         </a>
  556.                         {% if app.user %}
  557.                         <button class="btn btn-sm follow-btn ${shop.following ? 'btn-outline-danger' : 'btn-outline-secondary'}" 
  558.                                 data-shop-id="${shop.id}"
  559.                                 data-following="${shop.following ? 'true' : 'false'}"
  560.                                 onclick="toggleFollow(${shop.id}, this)"
  561.                                 style="flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
  562.                             <i class="lnr ${shop.following ? 'lnr-cross' : 'lnr-plus'} me-1"></i>
  563.                             <span class="follow-text">${shop.following ? 'Ne plus suivre' : 'Suivre'}</span>
  564.                         </button>
  565.                         {% endif %}
  566.                     </div>
  567.                 </div>
  568.             </div>
  569.         </div>
  570.     `;
  571. }
  572. </script>
  573. {% endblock %}