templates/shop/reviews/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block title %}Avis - {{ shop.name }} | MaketOu{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <style>
  8.         /* Styles spécifiques aux reviews - tous scoped pour éviter les conflits avec le template de base */
  9.         .shop-reviews-page .review-card {
  10.             border: 1px solid #e0e0e0;
  11.             border-radius: 10px;
  12.             padding: 20px;
  13.             margin-bottom: 20px;
  14.             background: white;
  15.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  16.         }
  17.         
  18.         .shop-reviews-page .review-header {
  19.             display: flex;
  20.             justify-content: space-between;
  21.             align-items: center;
  22.             margin-bottom: 15px;
  23.         }
  24.         
  25.         .shop-reviews-page .review-user {
  26.             display: flex;
  27.             align-items: center;
  28.         }
  29.         
  30.         .shop-reviews-page .review-user-avatar {
  31.             width: 40px;
  32.             height: 40px;
  33.             border-radius: 50%;
  34.             background: linear-gradient(45deg, #667eea, #764ba2);
  35.             display: flex;
  36.             align-items: center;
  37.             justify-content: center;
  38.             color: white;
  39.             font-weight: bold;
  40.             margin-right: 12px;
  41.         }
  42.         
  43.         .shop-reviews-page .review-user-info h6 {
  44.             margin: 0;
  45.             font-weight: 600;
  46.             color: #333;
  47.         }
  48.         
  49.         .shop-reviews-page .review-user-info small {
  50.             color: #666;
  51.         }
  52.         
  53.         .shop-reviews-page .review-rating {
  54.             display: flex;
  55.             align-items: center;
  56.             gap: 5px;
  57.         }
  58.         
  59.         .shop-reviews-page .stars {
  60.             color: #ffc107;
  61.             font-size: 18px;
  62.         }
  63.         
  64.         .shop-reviews-page .review-date {
  65.             color: #666;
  66.             font-size: 14px;
  67.         }
  68.         
  69.         .shop-reviews-page .review-content {
  70.             margin-bottom: 15px;
  71.             line-height: 1.6;
  72.             color: #333;
  73.         }
  74.         
  75.         .shop-reviews-page .review-type {
  76.             display: inline-block;
  77.             background: #f8f9fa;
  78.             color: #495057;
  79.             padding: 4px 8px;
  80.             border-radius: 4px;
  81.             font-size: 12px;
  82.             margin-bottom: 10px;
  83.         }
  84.         
  85.         .shop-reviews-page .review-actions {
  86.             display: flex;
  87.             gap: 10px;
  88.             align-items: center;
  89.         }
  90.         
  91.         .shop-reviews-page .helpful-btn {
  92.             background: none;
  93.             border: 1px solid #dee2e6;
  94.             padding: 5px 10px;
  95.             border-radius: 4px;
  96.             font-size: 12px;
  97.             color: #6c757d;
  98.             cursor: pointer;
  99.             transition: all 0.3s ease;
  100.         }
  101.         
  102.         .shop-reviews-page .helpful-btn:hover {
  103.             background: #f8f9fa;
  104.             border-color: #adb5bd;
  105.         }
  106.         
  107.         .shop-reviews-page .helpful-btn.active {
  108.             background: #28a745;
  109.             color: white;
  110.             border-color: #28a745;
  111.         }
  112.         
  113.         .shop-reviews-page .stats-card {
  114.             background: white;
  115.             border-radius: 10px;
  116.             padding: 20px;
  117.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  118.             margin-bottom: 20px;
  119.         }
  120.         
  121.         .shop-reviews-page .stats-header {
  122.             display: flex;
  123.             align-items: center;
  124.             margin-bottom: 20px;
  125.         }
  126.         
  127.         .shop-reviews-page .overall-rating {
  128.             font-size: 48px;
  129.             font-weight: bold;
  130.             color: #333;
  131.             margin-right: 20px;
  132.         }
  133.         
  134.         .shop-reviews-page .rating-breakdown {
  135.             flex: 1;
  136.         }
  137.         
  138.         .shop-reviews-page .rating-bar {
  139.             display: flex;
  140.             align-items: center;
  141.             margin-bottom: 8px;
  142.         }
  143.         
  144.         .shop-reviews-page .rating-label {
  145.             width: 60px;
  146.             font-size: 14px;
  147.             color: #666;
  148.         }
  149.         
  150.         .shop-reviews-page .rating-progress {
  151.             flex: 1;
  152.             height: 8px;
  153.             background: #e9ecef;
  154.             border-radius: 4px;
  155.             margin: 0 10px;
  156.             overflow: hidden;
  157.         }
  158.         
  159.         .shop-reviews-page .rating-fill {
  160.             height: 100%;
  161.             background: linear-gradient(45deg, #ffc107, #ff8c00);
  162.             transition: width 0.3s ease;
  163.         }
  164.         
  165.         .shop-reviews-page .rating-count {
  166.             width: 40px;
  167.             text-align: right;
  168.             font-size: 14px;
  169.             color: #666;
  170.         }
  171.         
  172.         .shop-reviews-page .filters-card {
  173.             background: white;
  174.             border-radius: 10px;
  175.             padding: 20px;
  176.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  177.             margin-bottom: 20px;
  178.         }
  179.         
  180.         .shop-reviews-page .filter-group {
  181.             margin-bottom: 15px;
  182.         }
  183.         
  184.         .shop-reviews-page .filter-group label {
  185.             font-weight: 600;
  186.             margin-bottom: 5px;
  187.             display: block;
  188.         }
  189.         
  190.         .shop-reviews-page .rating-filter {
  191.             display: flex;
  192.             gap: 10px;
  193.             flex-wrap: wrap;
  194.         }
  195.         
  196.         .shop-reviews-page .rating-btn {
  197.             padding: 8px 12px;
  198.             border: 1px solid #dee2e6;
  199.             background: white;
  200.             border-radius: 4px;
  201.             cursor: pointer;
  202.             transition: all 0.3s ease;
  203.             font-size: 14px;
  204.         }
  205.         
  206.         .shop-reviews-page .rating-btn:hover {
  207.             background: #f8f9fa;
  208.         }
  209.         
  210.         .shop-reviews-page .rating-btn.active {
  211.             background: #007bff;
  212.             color: white;
  213.             border-color: #007bff;
  214.         }
  215.         
  216.         .shop-reviews-page .verified-badge {
  217.             background: #28a745;
  218.             color: white;
  219.             padding: 2px 6px;
  220.             border-radius: 3px;
  221.             font-size: 10px;
  222.             font-weight: bold;
  223.             margin-left: 5px;
  224.         }
  225.         
  226.         .shop-reviews-page .pagination-wrapper {
  227.             display: flex;
  228.             justify-content: center;
  229.             margin-top: 30px;
  230.         }
  231.         
  232.         .shop-reviews-page .btn-review {
  233.             background: linear-gradient(45deg, #667eea, #764ba2);
  234.             border: none;
  235.             color: white;
  236.             padding: 12px 24px;
  237.             border-radius: 6px;
  238.             font-weight: 600;
  239.             text-decoration: none;
  240.             display: inline-block;
  241.             transition: all 0.3s ease;
  242.         }
  243.         
  244.         .shop-reviews-page .btn-review:hover {
  245.             transform: translateY(-2px);
  246.             box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  247.             color: white;
  248.         }
  249.         
  250.         .shop-reviews-page .empty-reviews {
  251.             text-align: center;
  252.             padding: 60px 20px;
  253.             color: #666;
  254.         }
  255.         
  256.         .shop-reviews-page .empty-reviews i {
  257.             font-size: 64px;
  258.             color: #ddd;
  259.             margin-bottom: 20px;
  260.         }
  261.         
  262.         @media (max-width: 768px) {
  263.             .shop-reviews-page .review-header {
  264.                 flex-direction: column;
  265.                 align-items: flex-start;
  266.             }
  267.             
  268.             .shop-reviews-page .stats-header {
  269.                 flex-direction: column;
  270.                 text-align: center;
  271.             }
  272.             
  273.             .shop-reviews-page .overall-rating {
  274.                 margin-right: 0;
  275.                 margin-bottom: 15px;
  276.             }
  277.             
  278.             .shop-reviews-page .rating-filter {
  279.                 justify-content: center;
  280.             }
  281.         }
  282.     </style>
  283. {% endblock %}
  285. {% block body %}
  286.     <div class="shop-reviews-page">
  287.     <!-- Breadcrumb -->
  288.     <section class="banner-area organic-breadcrumb">
  289.         <div class="container">
  290.             <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
  291.                 <div class="col-first">
  292.                     <h1>Avis - {{ shop.name }}</h1>
  293.                     <nav class="d-flex align-items-center">
  294.                         <a href="{{ path('ui_home') }}">Accueil<span class="lnr lnr-arrow-right"></span></a>
  295.                         <a href="{{ path('ui_shop_show', {'slug': shop.slug}) }}">{{ shop.name }}<span class="lnr lnr-arrow-right"></span></a>
  296.                         <a href="javascript:void(0)">Avis</a>
  297.                     </nav>
  298.                 </div>
  299.             </div>
  300.         </div>
  301.     </section>
  303.     <section class="blog_area">
  304.         <div class="container my-5">
  305.             <div class="row">
  306.                 <!-- Statistiques des avis -->
  307.                 <div class="col-12">
  308.                     <div class="stats-card">
  309.                         <div class="stats-header">
  310.                             <div class="overall-rating">
  311.                                 {{ stats.averageRating|number_format(1) }}
  312.                                 <div class="stars">{{ stats.averageRating|rating_stars }}</div>
  313.                             </div>
  314.                             <div class="rating-breakdown">
  315.                                 {% set ratingMap = {
  316.                                     5: 'fiveStars',
  317.                                     4: 'fourStars',
  318.                                     3: 'threeStars',
  319.                                     2: 'twoStars',
  320.                                     1: 'oneStar'
  321.                                 } %}
  322.                                 {% for rating in 5..1 %}
  323.                                     {% set ratingKey = ratingMap[rating] %}
  324.                                     {% set ratingCount = attribute(stats, ratingKey)|default(0) %}
  325.                                     {% set percentage = stats.totalReviews > 0 ? (ratingCount / stats.totalReviews * 100) : 0 %}
  326.                                     <div class="rating-bar">
  327.                                         <span class="rating-label">{{ rating }} étoiles</span>
  328.                                         <div class="rating-progress">
  329.                                             <div class="rating-fill" style="width: {{ percentage }}%"></div>
  330.                                         </div>
  331.                                         <span class="rating-count">{{ ratingCount }}</span>
  332.                                     </div>
  333.                                 {% endfor %}
  334.                             </div>
  335.                         </div>
  336.                         <div class="row text-center">
  337.                             <div class="col-md-3">
  338.                                 <h4>{{ stats.totalReviews }}</h4>
  339.                                 <p class="text-muted mb-0">Avis total</p>
  340.                             </div>
  341.                             <div class="col-md-3">
  342.                                 <h4>{{ stats.positivePercentage }}%</h4>
  343.                                 <p class="text-muted mb-0">Positifs</p>
  344.                             </div>
  345.                             <div class="col-md-3">
  346.                                 <h4>{{ stats.verifiedReviews }}</h4>
  347.                                 <p class="text-muted mb-0">Vérifiés</p>
  348.                             </div>
  349.                             <div class="col-md-3">
  350.                                 <h4>{{ shop.followersCount|default(0) }}</h4>
  351.                                 <p class="text-muted mb-0">Followers</p>
  352.                             </div>
  353.                         </div>
  354.                     </div>
  355.                 </div>
  357.                 <!-- Filtres -->
  358.                 <div class="col-md-3">
  359.                     <div class="filters-card">
  360.                         <h5 class="mb-3">Filtrer les avis</h5>
  361.                         
  362.                         <div class="filter-group">
  363.                             <label>Note</label>
  364.                             <div class="rating-filter">
  365.                                 <button class="rating-btn {{ filters.rating == '' ? 'active' : '' }}" data-rating="">
  366.                                     Toutes
  367.                                 </button>
  368.                                 {% for rating in 5..1 %}
  369.                                     <button class="rating-btn {{ filters.rating == rating ? 'active' : '' }}" data-rating="{{ rating }}">
  370.                                         {{ rating }}★
  371.                                     </button>
  372.                                 {% endfor %}
  373.                             </div>
  374.                         </div>
  376.                         <div class="filter-group">
  377.                             <label>
  378.                                 <input type="checkbox" {{ filters.verified ? 'checked' : '' }} id="verified-filter">
  379.                                 Avis vérifiés uniquement
  380.                             </label>
  381.                         </div>
  383.                         <div class="filter-group">
  384.                             <label>Rechercher</label>
  385.                             <input type="text" class="form-control" id="search-filter" placeholder="Rechercher dans les avis..." value="{{ filters.search }}">
  386.                         </div>
  388.                         <button class="btn btn-primary w-100" onclick="applyFilters()">
  389.                             Appliquer les filtres
  390.                         </button>
  391.                     </div>
  393.                     {% if canReview %}
  394.                         <div class="text-center mt-3">
  395.                             <a href="{{ path('shop_reviews_new', {'slug': shop.slug}) }}" class="btn-review">
  396.                                 <i class="lnr lnr-star"></i> Laisser un avis
  397.                             </a>
  398.                         </div>
  399.                     {% endif %}
  400.                 </div>
  402.                 <!-- Liste des avis -->
  403.                 <div class="col-md-9">
  404.                     {% if reviews|length > 0 %}
  405.                         <div id="reviews-container">
  406.                             {% for review in reviews %}
  407.                                 <div class="review-card">
  408.                                     <div class="review-header">
  409.                                         <div class="review-user">
  410.                                             <div class="review-user-avatar">
  411.                                                 {{ review.user.firstName|first|upper|default(review.user.email|first|upper) }}
  412.                                             </div>
  413.                                             <div class="review-user-info">
  414.                                                 <h6>{{ review.user.firstName|default('Utilisateur') }}</h6>
  415.                                                 <small>{{ review.getTimeAgo() }}</small>
  416.                                             </div>
  417.                                         </div>
  418.                                         <div class="review-rating">
  419.                                             <div class="stars">{{ review.getRatingStars() }}</div>
  420.                                             {% if review.isVerified %}
  421.                                                 <span class="verified-badge">✓ Vérifié</span>
  422.                                             {% endif %}
  423.                                         </div>
  424.                                     </div>
  426.                                     {% if review.reviewType %}
  427.                                         <div class="review-type">{{ review.getReviewTypeLabel() }}</div>
  428.                                     {% endif %}
  430.                                     <div class="review-content">
  431.                                         {{ review.comment|nl2br }}
  432.                                     </div>
  434.                                     <div class="review-actions">
  435.                                         <button class="helpful-btn" onclick="markAsHelpful({{ review.id }})">
  436.                                             <i class="lnr lnr-thumbs-up"></i> Utile ({{ review.helpfulCount }})
  437.                                         </button>
  438.                                         <button class="helpful-btn" onclick="markAsNotHelpful({{ review.id }})">
  439.                                             <i class="lnr lnr-thumbs-down"></i> Pas utile ({{ review.notHelpfulCount }})
  440.                                         </button>
  441.                                         
  442.                                         {% if review.user == app.user %}
  443.                                             <div class="ms-auto">
  444.                                                 <a href="{{ path('shop_reviews_edit', {'slug': shop.slug, 'id': review.id}) }}" class="btn btn-sm btn-outline-primary">
  445.                                                     <i class="lnr lnr-pencil"></i> Modifier
  446.                                                 </a>
  447.                                                 <form method="post" action="{{ path('shop_reviews_delete', {'slug': shop.slug, 'id': review.id}) }}" class="d-inline" onsubmit="return confirm('Supprimer cet avis ?')">
  448.                                                     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ review.id) }}">
  449.                                                     <button type="submit" class="btn btn-sm btn-outline-danger">
  450.                                                         <i class="lnr lnr-trash"></i> Supprimer
  451.                                                     </button>
  452.                                                 </form>
  453.                                             </div>
  454.                                         {% endif %}
  455.                                     </div>
  456.                                 </div>
  457.                             {% endfor %}
  458.                         </div>
  460.                         <!-- Pagination -->
  461.                         {% if pagination.pages > 1 %}
  462.                             <div class="pagination-wrapper">
  463.                                 <nav>
  464.                                     <ul class="pagination">
  465.                                         {% if pagination.page > 1 %}
  466.                                             <li class="page-item">
  467.                                                 <a class="page-link" href="{{ path('shop_reviews_index', {'slug': shop.slug, 'page': pagination.page - 1}) }}">Précédent</a>
  468.                                             </li>
  469.                                         {% endif %}
  470.                                         
  471.                                         {% for page in 1..pagination.pages %}
  472.                                             {% if page == pagination.page %}
  473.                                                 <li class="page-item active">
  474.                                                     <span class="page-link">{{ page }}</span>
  475.                                                 </li>
  476.                                             {% else %}
  477.                                                 <li class="page-item">
  478.                                                     <a class="page-link" href="{{ path('shop_reviews_index', {'slug': shop.slug, 'page': page}) }}">{{ page }}</a>
  479.                                                 </li>
  480.                                             {% endif %}
  481.                                         {% endfor %}
  482.                                         
  483.                                         {% if pagination.page < pagination.pages %}
  484.                                             <li class="page-item">
  485.                                                 <a class="page-link" href="{{ path('shop_reviews_index', {'slug': shop.slug, 'page': pagination.page + 1}) }}">Suivant</a>
  486.                                             </li>
  487.                                         {% endif %}
  488.                                     </ul>
  489.                                 </nav>
  490.                             </div>
  491.                         {% endif %}
  492.                     {% else %}
  493.                         <div class="empty-reviews">
  494.                             <i class="lnr lnr-star"></i>
  495.                             <h3>Aucun avis pour le moment</h3>
  496.                             <p>Soyez le premier à laisser un avis sur cette boutique !</p>
  497.                             {% if canReview %}
  498.                                 <a href="{{ path('shop_reviews_new', {'slug': shop.slug}) }}" class="btn-review">
  499.                                     <i class="lnr lnr-star"></i> Laisser un avis
  500.                                 </a>
  501.                             {% endif %}
  502.                         </div>
  503.                     {% endif %}
  504.                 </div>
  505.             </div>
  506.         </div>
  507.     </section>
  508.     </div>
  509. {% endblock %}
  511. {% block javascripts %}
  512.     {{ parent() }}
  513.     <script>
  514.         // Scoper toutes les fonctions dans le contexte de la page reviews pour éviter les conflits
  515.         (function() {
  516.             'use strict';
  517.             
  518.             function applyFilters() {
  519.                 const ratingBtn = document.querySelector('.shop-reviews-page .rating-btn.active');
  520.                 if (!ratingBtn) return;
  521.                 
  522.                 const rating = ratingBtn.dataset.rating;
  523.                 const verified = document.getElementById('verified-filter')?.checked || false;
  524.                 const search = document.getElementById('search-filter')?.value || '';
  525.                 
  526.                 const params = new URLSearchParams();
  527.                 if (rating) params.append('rating', rating);
  528.                 if (verified) params.append('verified', '1');
  529.                 if (search) params.append('search', search);
  530.                 
  531.                 window.location.href = '{{ path("shop_reviews_index", {"slug": shop.slug}) }}?' + params.toString();
  532.             }
  534.             function markAsHelpful(reviewId) {
  535.                 fetch('{{ path("shop_reviews_helpful", {"slug": shop.slug, "id": "REVIEW_ID"}) }}'.replace('REVIEW_ID', reviewId), {
  536.                     method: 'POST',
  537.                     headers: {
  538.                         'X-Requested-With': 'XMLHttpRequest'
  539.                     }
  540.                 })
  541.                 .then(response => response.json())
  542.                 .then(data => {
  543.                     if (data.success) {
  544.                         location.reload();
  545.                     } else {
  546.                         alert(data.message || 'Une erreur est survenue');
  547.                     }
  548.                 })
  549.                 .catch(error => {
  550.                     console.error('Erreur:', error);
  551.                     alert('Une erreur est survenue lors du vote');
  552.                 });
  553.             }
  555.             function markAsNotHelpful(reviewId) {
  556.                 fetch('{{ path("shop_reviews_not_helpful", {"slug": shop.slug, "id": "REVIEW_ID"}) }}'.replace('REVIEW_ID', reviewId), {
  557.                     method: 'POST',
  558.                     headers: {
  559.                         'X-Requested-With': 'XMLHttpRequest'
  560.                     }
  561.                 })
  562.                 .then(response => response.json())
  563.                 .then(data => {
  564.                     if (data.success) {
  565.                         location.reload();
  566.                     } else {
  567.                         alert(data.message || 'Une erreur est survenue');
  568.                     }
  569.                 })
  570.                 .catch(error => {
  571.                     console.error('Erreur:', error);
  572.                     alert('Une erreur est survenue lors du vote');
  573.                 });
  574.             }
  576.             // Exposer les fonctions globalement pour les boutons onclick
  577.             window.applyFilters = applyFilters;
  578.             window.markAsHelpful = markAsHelpful;
  579.             window.markAsNotHelpful = markAsNotHelpful;
  581.             // Gestion des boutons de filtre par note - scoped à la page reviews
  582.             document.addEventListener('DOMContentLoaded', function() {
  583.                 const reviewPage = document.querySelector('.shop-reviews-page');
  584.                 if (!reviewPage) return;
  585.                 
  586.                 reviewPage.querySelectorAll('.rating-btn').forEach(btn => {
  587.                     btn.addEventListener('click', function() {
  588.                         reviewPage.querySelectorAll('.rating-btn').forEach(b => b.classList.remove('active'));
  589.                         this.classList.add('active');
  590.                     });
  591.                 });
  592.             });
  593.         })();
  594.     </script>
  595. {% endblock %}