templates/home/shop.html.twig line 1

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block title %}
  4.     {{ shop.name }}
  5.     | MaketOu
  6. {% endblock %}
  8. {% block stylesheets %}
  9.     <style>
  10.         /* Design eBay-like intégré avec Karma - Pleine largeur */
  11.         .shop-header {
  12.             background: #f7f7f7;
  13.             border-bottom: 1px solid #e1e1e1;
  14.             padding: 0;
  15.             margin-bottom: 0;
  16.             width: 100%;
  17.             position: relative;
  18.         }
  20.         .shop-banner {
  21.             width: 100%;
  22.             height: 350px;
  23.             background-size: cover;
  24.             background-position: center;
  25.             background-repeat: no-repeat;
  26.             position: relative;
  27.             display: flex;
  28.             align-items: center;
  29.             justify-content: center;
  30.         }
  32.         /* Carrousel eBay-style - même largeur que shop-header-content */
  33.         .shop-carousel-ebay {
  34.             width: 100%;
  35.             height: 400px;
  36.             position: relative;
  37.             overflow: hidden;
  38.             background: #f8f9fa;
  39.             margin: 0 20px 0 20px;
  40.             border-radius: 8px;
  41.             box-sizing: border-box;
  42.         }
  44.         .carousel-container {
  45.             position: relative;
  46.             width: 100%;
  47.             height: 100%;
  48.         }
  50.         .carousel-slide {
  51.             position: absolute;
  52.             top: 0;
  53.             left: 0;
  54.             width: 100%;
  55.             height: 100%;
  56.             background-size: cover;
  57.             background-position: center;
  58.             background-repeat: no-repeat;
  59.             opacity: 0;
  60.             transition: opacity 0.5s ease-in-out;
  61.         }
  63.         .carousel-slide.active {
  64.             opacity: 1;
  65.         }
  67.         .carousel-controls {
  68.             position: absolute;
  69.             bottom: 20px;
  70.             left: 50%;
  71.             transform: translateX(-50%);
  72.             display: flex;
  73.             gap: 10px;
  74.             z-index: 10;
  75.         }
  77.         .carousel-btn {
  78.             width: 40px;
  79.             height: 40px;
  80.             border: none;
  81.             border-radius: 50%;
  82.             background: rgba(255, 255, 255, 0.9);
  83.             color: #333;
  84.             font-size: 16px;
  85.             cursor: pointer;
  86.             display: flex;
  87.             align-items: center;
  88.             justify-content: center;
  89.             transition: all 0.3s ease;
  90.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  91.         }
  93.         .carousel-btn:hover {
  94.             background: white;
  95.             transform: scale(1.1);
  96.         }
  98.         .carousel-btn:disabled {
  99.             opacity: 0.5;
  100.             cursor: not-allowed;
  101.             transform: none;
  102.         }
  104.         .carousel-pause {
  105.             background: #dc3545;
  106.             color: white;
  107.         }
  109.         .carousel-pause:hover {
  110.             background: #c82333;
  111.         }
  113.         .carousel-indicators {
  114.             position: absolute;
  115.             bottom: 70px;
  116.             left: 50%;
  117.             transform: translateX(-50%);
  118.             display: flex;
  119.             gap: 8px;
  120.             z-index: 10;
  121.         }
  123.         .carousel-indicator {
  124.             width: 12px;
  125.             height: 12px;
  126.             border-radius: 50%;
  127.             background: rgba(255, 255, 255, 0.5);
  128.             border: none;
  129.             cursor: pointer;
  130.             transition: all 0.3s ease;
  131.         }
  133.         .carousel-indicator.active {
  134.             background: white;
  135.             transform: scale(1.2);
  136.         }
  138.         /* Contrôles eBay-style intégrés */
  139.         .carousel-controls-ebay {
  140.             position: absolute;
  141.             top: 50%;
  142.             left: 0;
  143.             right: 0;
  144.             transform: translateY(-50%);
  145.             display: flex;
  146.             justify-content: space-between;
  147.             padding: 0 20px;
  148.             z-index: 10;
  149.         }
  151.         .carousel-btn-ebay {
  152.             width: 50px;
  153.             height: 50px;
  154.             border: none;
  155.             border-radius: 50%;
  156.             background: rgba(0, 0, 0, 0.7);
  157.             color: white;
  158.             font-size: 18px;
  159.             cursor: pointer;
  160.             display: flex;
  161.             align-items: center;
  162.             justify-content: center;
  163.             transition: all 0.3s ease;
  164.             opacity: 0;
  165.         }
  167.         .shop-carousel-ebay:hover .carousel-btn-ebay {
  168.             opacity: 1;
  169.         }
  171.         .carousel-btn-ebay:hover {
  172.             background: rgba(0, 0, 0, 0.9);
  173.             transform: scale(1.1);
  174.         }
  176.         .carousel-btn-ebay:disabled {
  177.             opacity: 0.3;
  178.             cursor: not-allowed;
  179.             transform: none;
  180.         }
  182.         .carousel-btn-ebay.pause-btn {
  183.             background: rgba(220, 53, 69, 0.8);
  184.         }
  186.         .carousel-btn-ebay.pause-btn:hover {
  187.             background: rgba(220, 53, 69, 1);
  188.         }
  190.         /* Indicateurs eBay-style */
  191.         .carousel-indicators-ebay {
  192.             position: absolute;
  193.             bottom: 20px;
  194.             left: 50%;
  195.             transform: translateX(-50%);
  196.             display: flex;
  197.             gap: 8px;
  198.             z-index: 10;
  199.         }
  201.         .carousel-indicator-ebay {
  202.             width: 12px;
  203.             height: 12px;
  204.             border-radius: 50%;
  205.             background: rgba(255, 255, 255, 0.5);
  206.             border: 2px solid rgba(255, 255, 255, 0.8);
  207.             cursor: pointer;
  208.             transition: all 0.3s ease;
  209.         }
  211.         .carousel-indicator-ebay.active {
  212.             background: white;
  213.             border-color: white;
  214.             transform: scale(1.2);
  215.         }
  217.         .carousel-indicator-ebay:hover {
  218.             background: rgba(255, 255, 255, 0.8);
  219.             transform: scale(1.1);
  220.         }
  222.         /* Styles eBay-style pour les détails de boutique */
  223.         .shop-avatar-container-ebay {
  224.             position: relative;
  225.             margin-right: 20px;
  226.         }
  228.         .shop-avatar-ebay {
  229.             width: 80px;
  230.             height: 80px;
  231.             border-radius: 8px;
  232.             object-fit: cover;
  233.             border: 3px solid white;
  234.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  235.         }
  237.         .verified-badge-ebay {
  238.             position: absolute;
  239.             bottom: -5px;
  240.             right: -5px;
  241.             background: #28a745;
  242.             color: white;
  243.             width: 24px;
  244.             height: 24px;
  245.             border-radius: 50%;
  246.             display: flex;
  247.             align-items: center;
  248.             justify-content: center;
  249.             font-size: 12px;
  250.             border: 2px solid white;
  251.         }
  253.         .shop-info-ebay {
  254.             padding: 10px 0;
  255.         }
  257.         .shop-name-section {
  258.             margin-bottom: 8px;
  259.         }
  261.         .shop-name-ebay {
  262.             font-size: 1.8rem;
  263.             font-weight: 600;
  264.             color: #333;
  265.             margin: 0 15px 0 0;
  266.             display: inline-block;
  267.         }
  269.         .verified-text {
  270.             color: #28a745;
  271.             font-size: 0.9rem;
  272.             font-weight: 500;
  273.         }
  275.         .shop-category-section {
  276.             margin-bottom: 12px;
  277.         }
  279.         .shop-category-ebay {
  280.             background: #f8f9fa;
  281.             color: #666;
  282.             padding: 4px 12px;
  283.             border-radius: 16px;
  284.             font-size: 0.85rem;
  285.             font-weight: 500;
  286.         }
  288.         .shop-stats-ebay {
  289.             margin-top: 15px;
  290.         }
  292.         .stat-row {
  293.             display: flex;
  294.             gap: 30px;
  295.             margin-bottom: 10px;
  296.         }
  298.         .stat-item-ebay {
  299.             display: flex;
  300.             flex-direction: column;
  301.             align-items: flex-start;
  302.         }
  304.         .stat-percentage {
  305.             font-size: 1.2rem;
  306.             font-weight: 700;
  307.             color: #28a745;
  308.             line-height: 1;
  309.         }
  311.         .stat-number-ebay {
  312.             font-size: 1.2rem;
  313.             font-weight: 700;
  314.             color: #333;
  315.             line-height: 1;
  316.         }
  318.         .stat-label-ebay {
  319.             font-size: 0.8rem;
  320.             color: #666;
  321.             text-transform: uppercase;
  322.             letter-spacing: 0.5px;
  323.             margin-top: 2px;
  324.         }
  326.         .shop-additional-info {
  327.             display: flex;
  328.             gap: 20px;
  329.             font-size: 0.85rem;
  330.             color: #666;
  331.         }
  333.         .member-since {
  334.             font-weight: 400;
  335.         }
  337.         .location {
  338.             display: flex;
  339.             align-items: center;
  340.         }
  342.         .shop-actions-ebay {
  343.             display: flex;
  344.             flex-direction: column;
  345.             gap: 10px;
  346.             min-width: 140px;
  347.         }
  349.         .btn-ebay {
  350.             padding: 8px 16px;
  351.             font-size: 0.9rem;
  352.             font-weight: 500;
  353.             border-radius: 4px;
  354.             text-align: center;
  355.             transition: all 0.3s ease;
  356.             border-width: 1px;
  357.         }
  359.         .btn-ebay:hover {
  360.             transform: translateY(-1px);
  361.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  362.         }
  364.         .btn-ebay.following {
  365.             background: #28a745;
  366.             border-color: #28a745;
  367.             color: white;
  368.         }
  370.         /* Styles pour les avis */
  371.         .review-stats {
  372.             background: white;
  373.             border-radius: 12px;
  374.             padding: 20px;
  375.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  376.             margin-bottom: 20px;
  377.         }
  379.         .stat-card {
  380.             padding: 15px;
  381.         }
  383.         .stat-number {
  384.             font-size: 2.5rem;
  385.             font-weight: 700;
  386.             color: #333;
  387.             margin: 0;
  388.         }
  390.         .stat-label {
  391.             color: #666;
  392.             font-size: 0.9rem;
  393.             margin: 5px 0 0;
  394.         }
  396.         .rating-stars {
  397.             color: #ffc107;
  398.             font-size: 1.2rem;
  399.             margin: 10px 0;
  400.         }
  402.         .reviews-preview {
  403.             background: white;
  404.             border-radius: 12px;
  405.             padding: 20px;
  406.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  407.         }
  409.         .review-item {
  410.             border-bottom: 1px solid #f0f0f0;
  411.             padding: 15px 0;
  412.         }
  414.         .review-item:last-child {
  415.             border-bottom: none;
  416.         }
  418.         .review-header {
  419.             display: flex;
  420.             justify-content: space-between;
  421.             align-items: flex-start;
  422.             margin-bottom: 10px;
  423.         }
  425.         .reviewer-info {
  426.             display: flex;
  427.             align-items: center;
  428.             gap: 10px;
  429.         }
  431.         .reviewer-avatar {
  432.             width: 40px;
  433.             height: 40px;
  434.             border-radius: 50%;
  435.             background: #f8f9fa;
  436.             display: flex;
  437.             align-items: center;
  438.             justify-content: center;
  439.             color: #666;
  440.         }
  442.         .reviewer-name {
  443.             margin: 0;
  444.             font-size: 1rem;
  445.             font-weight: 600;
  446.         }
  448.         .review-rating {
  449.             color: #ffc107;
  450.             font-size: 0.9rem;
  451.         }
  453.         .review-meta {
  454.             text-align: right;
  455.         }
  457.         .review-date {
  458.             color: #666;
  459.             font-size: 0.8rem;
  460.         }
  462.         .verified-badge {
  463.             display: inline-block;
  464.             background: #28a745;
  465.             color: white;
  466.             padding: 2px 8px;
  467.             border-radius: 12px;
  468.             font-size: 0.7rem;
  469.             margin-left: 10px;
  470.         }
  472.         .review-comment {
  473.             margin: 10px 0 0;
  474.             line-height: 1.5;
  475.             color: #333;
  476.         }
  478.         .review-actions-card {
  479.             background: white;
  480.             border-radius: 12px;
  481.             padding: 20px;
  482.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  483.             text-align: center;
  484.         }
  486.         .shop-banner-overlay {
  487.             position: absolute;
  488.             top: 0;
  489.             left: 0;
  490.             right: 0;
  491.             bottom: 0;
  492.             background: rgba(0, 0, 0, 0.3);
  493.             z-index: 1;
  494.         }
  496.         .shop-header-content {
  497.             background: white;
  498.             border: 1px solid #e1e1e1;
  499.             border-radius: 4px;
  500.             padding: 20px;
  501.             margin: 0 20px 20px;
  502.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  503.             position: relative;
  504.             z-index: 2;
  505.         }
  507.         .shop-avatar {
  508.             width: 80px;
  509.             height: 80px;
  510.             border-radius: 4px;
  511.             border: 1px solid #e1e1e1;
  512.             object-fit: cover;
  513.             position: relative;
  514.             z-index: 3;
  515.         }
  517.         .shop-title {
  518.             font-size: 1.5rem;
  519.             font-weight: 600;
  520.             color: #333;
  521.             margin-bottom: 8px;
  522.         }
  524.         .shop-subtitle {
  525.             color: #666;
  526.             font-size: 0.9rem;
  527.             margin-bottom: 15px;
  528.         }
  530.         .shop-stats-row {
  531.             display: flex;
  532.             align-items: center;
  533.             gap: 20px;
  534.             flex-wrap: wrap;
  535.             margin-bottom: 15px;
  536.         }
  538.         .shop-stat-item {
  539.             display: flex;
  540.             align-items: center;
  541.             gap: 5px;
  542.             font-size: 0.9rem;
  543.         }
  545.         .positive-feedback {
  546.             color: #007bff;
  547.             font-weight: 600;
  548.         }
  550.         .items-sold {
  551.             color: #666;
  552.         }
  554.         .followers-count {
  555.             color: #666;
  556.         }
  558.         .shop-badges {
  559.             display: flex;
  560.             gap: 10px;
  561.             margin-bottom: 15px;
  562.         }
  564.         .shop-badge {
  565.             background: #f0f0f0;
  566.             color: #333;
  567.             padding: 4px 8px;
  568.             border-radius: 3px;
  569.             font-size: 0.8rem;
  570.             font-weight: 500;
  571.         }
  573.         .shop-badge.verified {
  574.             background: #d4edda;
  575.             color: #155724;
  576.         }
  578.         .shop-badge.premium {
  579.             background: #fff3cd;
  580.             color: #856404;
  581.         }
  583.         .shop-actions-row {
  584.             display: flex;
  585.             align-items: center;
  586.             gap: 15px;
  587.             flex-wrap: wrap;
  588.         }
  590.         .shop-action-btn {
  591.             background: #007bff;
  592.             color: white;
  593.             border: none;
  594.             padding: 8px 16px;
  595.             border-radius: 3px;
  596.             font-size: 0.9rem;
  597.             font-weight: 500;
  598.             cursor: pointer;
  599.             transition: background-color 0.2s;
  600.             text-decoration: none;
  601.             display: inline-flex;
  602.             align-items: center;
  603.             gap: 5px;
  604.         }
  606.         .shop-action-btn:hover {
  607.             background: #0056b3;
  608.             color: white;
  609.         }
  611.         .shop-action-btn.following {
  612.             background: #28a745;
  613.         }
  615.         .shop-action-btn.following:hover {
  616.             background: #1e7e34;
  617.         }
  619.         .shop-action-btn.secondary {
  620.             background: #6c757d;
  621.         }
  623.         .shop-action-btn.secondary:hover {
  624.             background: #545b62;
  625.         }
  627.         /* Onglets eBay-style avec classes Karma */
  628.         .shop-tabs {
  629.             background: white;
  630.             border: 1px solid #e1e1e1;
  631.             border-top: none;
  632.             border-radius: 0 0 4px 4px;
  633.             margin-top: 0;
  634.         }
  636.         .shop-tabs-nav {
  637.             display: flex;
  638.             border-bottom: 1px solid #e1e1e1;
  639.             margin: 0;
  640.             padding: 0;
  641.             list-style: none;
  642.             background: #f8f9fa;
  643.         }
  645.         .shop-tab {
  646.             margin: 0;
  647.         }
  649.         .shop-tab-link {
  650.             display: block;
  651.             padding: 12px 20px;
  652.             color: #000000;
  653.             text-decoration: none;
  654.             border-bottom: 2px solid transparent;
  655.             transition: all 0.2s;
  656.             font-weight: 500;
  657.             font-size: 1rem;
  658.         }
  660.         .shop-tab-link:hover,
  661.         .shop-tab-link.active {
  662.             color: #095ad3;
  663.             border-bottom-color: #095ad3;
  664.             background: #ffa200;
  665.         }
  667.         .shop-tab-content {
  668.             padding: 30px;
  669.             min-height: 400px;
  670.         }
  672.         .shop-tab-content:not(.active) {
  673.             display: none;
  674.         }
  676.         .shop-tab-content.active {
  677.             display: block;
  678.         }
  680.         /* Cards d'information avec style Karma */
  681.         .shop-info-card {
  682.             background: #f8f9fa;
  683.             border: 1px solid #e1e1e1;
  684.             border-radius: 4px;
  685.             padding: 20px;
  686.             margin-bottom: 20px;
  687.         }
  689.         .shop-info-card h6 {
  690.             color: #333;
  691.             font-weight: 600;
  692.             margin-bottom: 15px;
  693.             font-size: 1.1rem;
  694.         }
  696.         .shop-info-card p {
  697.             color: #666;
  698.             font-size: 0.9rem;
  699.             margin: 0;
  700.             line-height: 1.5;
  701.         }
  703.         .shop-contact-info {
  704.             display: flex;
  705.             flex-direction: column;
  706.             gap: 10px;
  707.         }
  709.         .shop-contact-item {
  710.             display: flex;
  711.             align-items: center;
  712.             gap: 10px;
  713.             font-size: 0.9rem;
  714.             color: #666;
  715.             padding: 5px 0;
  716.         }
  718.         .shop-contact-item i {
  719.             width: 16px;
  720.             color: #007bff;
  721.             text-align: center;
  722.         }
  724.         .shop-social-links {
  725.             display: flex;
  726.             gap: 10px;
  727.             margin-top: 15px;
  728.             flex-wrap: wrap;
  729.         }
  731.         .shop-social-link {
  732.             display: inline-flex;
  733.             align-items: center;
  734.             justify-content: center;
  735.             width: 36px;
  736.             height: 36px;
  737.             background: #f0f0f0;
  738.             color: #666;
  739.             border-radius: 4px;
  740.             text-decoration: none;
  741.             transition: all 0.2s;
  742.             font-size: 1.1rem;
  743.         }
  745.         .shop-social-link:hover {
  746.             background: #007bff;
  747.             color: white;
  748.             transform: translateY(-2px);
  749.         }
  751.         /* Produits avec style Karma */
  752.         .product-card {
  753.             background: white;
  754.             border: 1px solid #e1e1e1;
  755.             border-radius: 4px;
  756.             overflow: hidden;
  757.             transition: all 0.3s ease;
  758.             margin-bottom: 20px;
  759.         }
  761.         .product-card:hover {
  762.             transform: translateY(-2px);
  763.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  764.         }
  766.         /* Animation de tri des produits */
  767.         .product-item {
  768.             transition: all 0.3s ease;
  769.         }
  771.         .product-item.sorting {
  772.             opacity: 0;
  773.             transform: translateY(20px);
  774.         }
  776.         .product-item.sorted {
  777.             opacity: 1;
  778.             transform: translateY(0);
  779.         }
  781.         .product-image {
  782.             height: 200px;
  783.             background-size: cover;
  784.             background-position: center;
  785.             position: relative;
  786.             overflow: hidden;
  787.         }
  789.         .product-info {
  790.             padding: 15px;
  791.         }
  793.         .product-title {
  794.             font-size: 1rem;
  795.             font-weight: 600;
  796.             margin-bottom: 8px;
  797.             color: #333;
  798.             line-height: 1.3;
  799.         }
  801.         .product-title a {
  802.             color: #333;
  803.             text-decoration: none;
  804.         }
  806.         .product-title a:hover {
  807.             color: #007bff;
  808.         }
  810.         .product-price {
  811.             font-size: 1.2rem;
  812.             font-weight: bold;
  813.             color: #ff6b35;
  814.             margin-bottom: 10px;
  815.         }
  817.         .product-meta {
  818.             display: flex;
  819.             justify-content: space-between;
  820.             align-items: center;
  821.             font-size: 0.85rem;
  822.             color: #666;
  823.         }
  825.         .rating {
  826.             color: #ffc107;
  827.         }
  829.         /* Responsive avec classes Karma */
  830.         /* Responsive amélioré pour la page shop */
  831.         @media(max-width: 991.98px) {
  832.             .shop-carousel-ebay {
  833.                 margin: 0 10px;
  834.                 height: 300px;
  835.             }
  836.             
  837.             .shop-header-content {
  838.                 padding: 15px;
  839.                 margin: 0 10px 20px;
  840.             }
  841.             
  842.             .shop-header-content .row {
  843.                 flex-wrap: wrap;
  844.             }
  845.             
  846.             .shop-info-ebay {
  847.                 margin-top: 15px;
  848.             }
  849.         }
  850.         
  851.         @media(max-width: 768px) {
  852.             .shop-banner,
  853.             .shop-carousel-ebay {
  854.                 height: 250px;
  855.                 margin: 0;
  856.                 border-radius: 0;
  857.             }
  858.             
  859.             .shop-carousel-ebay .carousel-container {
  860.                 border-radius: 0;
  861.             }
  863.             .carousel-controls-ebay {
  864.                 padding: 0 10px;
  865.                 bottom: 15px;
  866.             }
  868.             .carousel-btn-ebay {
  869.                 width: 35px;
  870.                 height: 35px;
  871.                 font-size: 14px;
  872.             }
  874.             .carousel-indicators-ebay {
  875.                 bottom: 10px;
  876.                 gap: 6px;
  877.             }
  878.             
  879.             .carousel-indicator-ebay {
  880.                 width: 10px;
  881.                 height: 10px;
  882.             }
  884.             .shop-header-content {
  885.                 padding: 15px;
  886.                 margin: 0;
  887.             }
  888.             
  889.             .shop-header-content .container {
  890.                 padding-left: 15px;
  891.                 padding-right: 15px;
  892.             }
  894.             .shop-avatar {
  895.                 width: 60px;
  896.                 height: 60px;
  897.             }
  899.             .shop-title {
  900.                 font-size: 1.2rem;
  901.             }
  903.             .shop-actions-row {
  904.                 flex-direction: column;
  905.                 gap: 10px;
  906.             }
  908.             /* Styles eBay-style responsive */
  909.             .shop-header-content .row {
  910.                 flex-direction: column;
  911.                 text-align: center;
  912.             }
  914.             .shop-avatar-container-ebay {
  915.                 margin-right: 0;
  916.                 margin-bottom: 15px;
  917.                 align-self: center;
  918.             }
  920.             .shop-avatar-ebay {
  921.                 width: 80px;
  922.                 height: 80px;
  923.             }
  925.             .shop-name-ebay {
  926.                 font-size: 1.5rem;
  927.                 margin-right: 0;
  928.                 margin-bottom: 10px;
  929.             }
  931.             .stat-row {
  932.                 justify-content: center;
  933.                 gap: 15px;
  934.                 flex-wrap: wrap;
  935.             }
  936.             
  937.             .stat-item-ebay {
  938.                 font-size: 0.9rem;
  939.                 min-width: 100px;
  940.             }
  942.             .shop-additional-info {
  943.                 justify-content: center;
  944.                 flex-wrap: wrap;
  945.             }
  947.             .shop-actions-ebay {
  948.                 flex-direction: column;
  949.                 justify-content: center;
  950.                 min-width: auto;
  951.                 margin-top: 15px;
  952.                 width: 100%;
  953.             }
  955.             .btn-ebay {
  956.                 width: 100%;
  957.                 min-width: auto;
  958.                 margin-bottom: 10px;
  959.             }
  961.             .btn-shop,
  962.             .shop-action-btn {
  963.                 width: 100%;
  964.                 min-width: auto;
  965.                 height: 45px;
  966.                 font-size: 0.9rem;
  967.                 padding: 12px 20px;
  968.             }
  970.             .shop-tabs-nav {
  971.                 flex-wrap: wrap;
  972.                 justify-content: center;
  973.             }
  974.             
  975.             .shop-tab-link {
  976.                 font-size: 0.85rem;
  977.                 padding: 0.5rem 0.75rem;
  978.                 flex: 1;
  979.                 min-width: auto;
  980.             }
  981.             
  982.             /* Produits responsive */
  983.             #products-container .product-item {
  984.                 margin-bottom: 20px;
  985.             }
  986.             
  987.             .product-card {
  988.                 padding: 15px;
  989.             }
  990.             
  991.             .product-title {
  992.                 font-size: 0.95rem;
  993.             }
  994.             
  995.             .product-price {
  996.                 font-size: 1.1rem;
  997.             }
  998.             
  999.             /* Détails de la boutique responsive */
  1000.             .shop-info-ebay {
  1001.                 text-align: center;
  1002.             }
  1003.         }
  1004.         
  1005.         @media(max-width: 575.98px) {
  1006.             .shop-banner,
  1007.             .shop-carousel-ebay {
  1008.                 height: 200px;
  1009.                 margin: 0;
  1010.             }
  1011.             
  1012.             .shop-header-content {
  1013.                 margin: 0;
  1014.                 padding: 15px;
  1015.             }
  1016.             
  1017.             .shop-name-ebay {
  1018.                 font-size: 1.3rem;
  1019.             }
  1020.             
  1021.             .stat-row {
  1022.                 gap: 10px;
  1023.                 flex-direction: column;
  1024.             }
  1025.             
  1026.             .stat-item-ebay {
  1027.                 font-size: 0.85rem;
  1028.                 width: 100%;
  1029.             }
  1030.             
  1031.             .carousel-btn-ebay {
  1032.                 width: 25px;
  1033.                 height: 25px;
  1034.                 font-size: 10px;
  1035.             }
  1036.             
  1037.             .carousel-indicators-ebay {
  1038.                 bottom: 8px;
  1039.             }
  1040.             
  1041.             .carousel-indicator-ebay {
  1042.                 width: 6px;
  1043.                 height: 6px;
  1044.             }
  1045.             
  1046.             .shop-tab-content {
  1047.                 padding: 15px 10px;
  1048.             }
  1050.             .shop-stats-row {
  1051.                 flex-direction: column;
  1052.                 gap: 10px;
  1053.                 align-items: flex-start;
  1054.             }
  1055.         }
  1057.         .follow-button {
  1058.             background: #ffa200;
  1059.             border: none;
  1060.             color: white;
  1061.             padding: 12px 30px;
  1062.             border-radius: 25px;
  1063.             font-weight: 600;
  1064.             transition: all 0.3s ease;
  1065.             cursor: pointer;
  1066.             display: inline-flex;
  1067.             align-items: center;
  1068.             gap: 8px;
  1069.         }
  1071.         .follow-button:hover {
  1072.             background: #e8910a;
  1073.             transform: translateY(-2px);
  1074.             box-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  1075.         }
  1077.         .follow-button.following {
  1078.             background: #28a745;
  1079.         }
  1081.         .follow-button.following:hover {
  1082.             background: #218838;
  1083.         }
  1085.         .follow-button:disabled {
  1086.             opacity: 0.6;
  1087.             cursor: not-allowed;
  1088.             transform: none;
  1089.         }
  1091.         .follow-stats {
  1092.             display: flex;
  1093.             gap: 30px;
  1094.             margin-top: 20px;
  1095.             flex-wrap: wrap;
  1096.         }
  1098.         .follow-stat {
  1099.             text-align: center;
  1100.             padding: 15px;
  1101.             background: #f8f9fa;
  1102.             border-radius: 10px;
  1103.             min-width: 120px;
  1104.         }
  1106.         .follow-stat-number {
  1107.             font-size: 1.8rem;
  1108.             font-weight: bold;
  1109.             color: #ffa200;
  1110.             display: block;
  1111.         }
  1113.         .follow-stat-label {
  1114.             color: #666;
  1115.             font-size: 0.9rem;
  1116.             text-transform: uppercase;
  1117.             letter-spacing: 0.5px;
  1118.         }
  1120.         .shop-actions {
  1121.             display: flex;
  1122.             gap: 15px;
  1123.             align-items: center;
  1124.             flex-wrap: wrap;
  1125.             margin-top: 20px;
  1126.         }
  1128.         .action-button {
  1129.             background: white;
  1130.             border: 2px solid #ffa200;
  1131.             color: #ffa200;
  1132.             padding: 10px 20px;
  1133.             border-radius: 20px;
  1134.             text-decoration: none;
  1135.             font-weight: 500;
  1136.             transition: all 0.3s ease;
  1137.             display: inline-flex;
  1138.             align-items: center;
  1139.             gap: 8px;
  1140.         }
  1142.         .action-button:hover {
  1143.             background: #ffa200;
  1144.             color: white;
  1145.             transform: translateY(-2px);
  1146.             box-shadow: 0 5px 15px rgba(255, 162, 0, 0.3);
  1147.         }
  1149.         .positive-feedback {
  1150.             color: #28a745;
  1151.             font-weight: bold;
  1152.         }
  1154.         .items-sold {
  1155.             color: #666;
  1156.             font-size: 0.9rem;
  1157.         }
  1159.         .followers-count {
  1160.             color: #666;
  1161.             font-size: 0.9rem;
  1162.         }
  1164.         .shop-avatar {
  1165.             width: 120px;
  1166.             height: 120px;
  1167.             border-radius: 50%;
  1168.             border: 4px solid white;
  1169.             object-fit: cover;
  1170.             margin-bottom: 20px;
  1171.         }
  1173.         .shop-stats {
  1174.             background: white;
  1175.             border-radius: 10px;
  1176.             padding: 30px;
  1177.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  1178.             margin-top: -50px;
  1179.             position: relative;
  1180.             z-index: 10;
  1181.         }
  1183.         .stat-item {
  1184.             text-align: center;
  1185.             padding: 20px;
  1186.         }
  1188.         .stat-number {
  1189.             font-size: 2.5rem;
  1190.             font-weight: bold;
  1191.             color: #ffa200;
  1192.             display: block;
  1193.         }
  1195.         .stat-label {
  1196.             color: #666;
  1197.             font-size: 0.9rem;
  1198.             text-transform: uppercase;
  1199.             letter-spacing: 1px;
  1200.         }
  1202.         .shop-description {
  1203.             background: #f8f9fa;
  1204.             padding: 30px;
  1205.             border-radius: 10px;
  1206.             margin-bottom: 40px;
  1207.         }
  1209.         .shop-contact {
  1210.             background: white;
  1211.             border: 1px solid #e9ecef;
  1212.             border-radius: 10px;
  1213.             padding: 25px;
  1214.             margin-bottom: 40px;
  1215.         }
  1217.         .contact-item {
  1218.             display: flex;
  1219.             align-items: center;
  1220.             margin-bottom: 15px;
  1221.         }
  1223.         .contact-item i {
  1224.             color: #ffa200;
  1225.             margin-right: 15px;
  1226.             width: 20px;
  1227.         }
  1229.         .product-card {
  1230.             background: white;
  1231.             border-radius: 10px;
  1232.             overflow: hidden;
  1233.             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  1234.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  1235.             margin-bottom: 30px;
  1236.         }
  1238.         .product-card:hover {
  1239.             transform: translateY(-5px);
  1240.             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  1241.         }
  1243.         .product-image {
  1244.             height: 200px;
  1245.             background-size: cover;
  1246.             background-position: center;
  1247.             position: relative;
  1248.         }
  1250.         .product-info {
  1251.             padding: 20px;
  1252.         }
  1254.         .product-title {
  1255.             font-size: 1.1rem;
  1256.             font-weight: 600;
  1257.             margin-bottom: 10px;
  1258.             color: #333;
  1259.         }
  1261.         .product-price {
  1262.             font-size: 1.3rem;
  1263.             font-weight: bold;
  1264.             color: #ffa200;
  1265.             margin-bottom: 15px;
  1266.         }
  1268.         .product-meta {
  1269.             display: flex;
  1270.             justify-content: space-between;
  1271.             align-items: center;
  1272.             font-size: 0.9rem;
  1273.             color: #666;
  1274.         }
  1276.         .rating {
  1277.             color: #ffa200;
  1278.         }
  1280.         /* Boutons d'action uniformes */
  1281.         .btn-shop,
  1282.         .shop-action-btn {
  1283.             background: #ffa200;
  1284.             border: 1px solid #ffa200;
  1285.             color: white;
  1286.             padding: 12px 24px;
  1287.             border-radius: 6px;
  1288.             font-weight: 500;
  1289.             font-size: 0.9rem;
  1290.             transition: all 0.3s ease;
  1291.             text-decoration: none;
  1292.             display: inline-flex;
  1293.             align-items: center;
  1294.             justify-content: center;
  1295.             gap: 8px;
  1296.             min-width: 120px;
  1297.             height: 44px;
  1298.             white-space: nowrap;
  1299.         }
  1301.         .btn-shop:hover,
  1302.         .shop-action-btn:hover {
  1303.             background: #e8910a;
  1304.             border-color: #e8910a;
  1305.             color: white;
  1306.             transform: translateY(-1px);
  1307.             box-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  1308.         }
  1310.         /* Boutons secondaires */
  1311.         .shop-action-btn.secondary {
  1312.             background: transparent;
  1313.             border: 1px solid #6c757d;
  1314.             color: #6c757d;
  1315.         }
  1317.         .shop-action-btn.secondary:hover {
  1318.             background: #6c757d;
  1319.             border-color: #6c757d;
  1320.             color: white;
  1321.             transform: translateY(-1px);
  1322.             box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
  1323.         }
  1325.         /* Responsive */
  1326.         @media(max-width: 768px) {
  1327.             .shop-header {
  1328.                 padding: 100px 0 40px;
  1329.             }
  1331.             .shop-avatar {
  1332.                 width: 80px;
  1333.                 height: 80px;
  1334.             }
  1336.             .shop-stats {
  1337.                 margin-top: -30px;
  1338.                 padding: 20px;
  1339.             }
  1341.             .stat-number {
  1342.                 font-size: 2rem;
  1343.             }
  1344.         }
  1346.         /* Très petits écrans */
  1347.         @media(max-width: 480px) {
  1348.             .btn-shop,
  1349.             .shop-action-btn {
  1350.                 min-width: 90px;
  1351.                 height: 38px;
  1352.                 font-size: 0.8rem;
  1353.                 padding: 8px 16px;
  1354.             }
  1356.             .shop-actions-row {
  1357.                 gap: 8px;
  1358.             }
  1359.         }
  1361.         /* Styles pour la section des avis */
  1362.         .review-stats-card {
  1363.             background: white;
  1364.             border-radius: 10px;
  1365.             padding: 20px;
  1366.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  1367.             margin-bottom: 20px;
  1368.         }
  1370.         .stats-header {
  1371.             display: flex;
  1372.             align-items: center;
  1373.             margin-bottom: 20px;
  1374.         }
  1376.         .overall-rating {
  1377.             text-align: center;
  1378.             margin-right: 20px;
  1379.         }
  1381.         .rating-number {
  1382.             font-size: 36px;
  1383.             font-weight: bold;
  1384.             color: #333;
  1385.             display: block;
  1386.         }
  1388.         .stars {
  1389.             color: #ffc107;
  1390.             font-size: 18px;
  1391.             margin-top: 5px;
  1392.         }
  1394.         .rating-summary p {
  1395.             margin: 0;
  1396.             color: #666;
  1397.         }
  1399.         .rating-breakdown {
  1400.             margin-top: 15px;
  1401.         }
  1403.         .rating-bar {
  1404.             display: flex;
  1405.             align-items: center;
  1406.             margin-bottom: 8px;
  1407.         }
  1409.         .rating-label {
  1410.             width: 40px;
  1411.             font-size: 14px;
  1412.             color: #666;
  1413.         }
  1415.         .rating-progress {
  1416.             flex: 1;
  1417.             height: 6px;
  1418.             background: #e9ecef;
  1419.             border-radius: 3px;
  1420.             margin: 0 10px;
  1421.             overflow: hidden;
  1422.         }
  1424.         .rating-fill {
  1425.             height: 100%;
  1426.             background: linear-gradient(45deg, #ffc107, #ff8c00);
  1427.             transition: width 0.3s ease;
  1428.         }
  1430.         .rating-count {
  1431.             width: 30px;
  1432.             text-align: right;
  1433.             font-size: 14px;
  1434.             color: #666;
  1435.         }
  1437.         .reviews-preview {
  1438.             background: white;
  1439.             border-radius: 10px;
  1440.             padding: 20px;
  1441.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  1442.         }
  1444.         .review-card-preview {
  1445.             border-bottom: 1px solid #f0f0f0;
  1446.             padding-bottom: 15px;
  1447.             margin-bottom: 15px;
  1448.         }
  1450.         .review-card-preview:last-child {
  1451.             border-bottom: none;
  1452.             margin-bottom: 0;
  1453.         }
  1455.         .review-header {
  1456.             display: flex;
  1457.             justify-content: space-between;
  1458.             align-items: center;
  1459.             margin-bottom: 10px;
  1460.         }
  1462.         .review-user {
  1463.             display: flex;
  1464.             align-items: center;
  1465.         }
  1467.         .user-avatar {
  1468.             width: 35px;
  1469.             height: 35px;
  1470.             border-radius: 50%;
  1471.             background: linear-gradient(45deg, #667eea, #764ba2);
  1472.             display: flex;
  1473.             align-items: center;
  1474.             justify-content: center;
  1475.             color: white;
  1476.             font-weight: bold;
  1477.             margin-right: 10px;
  1478.         }
  1480.         .user-info h6 {
  1481.             margin: 0;
  1482.             font-size: 14px;
  1483.             font-weight: 600;
  1484.             color: #333;
  1485.         }
  1487.         .user-info small {
  1488.             color: #666;
  1489.             font-size: 12px;
  1490.         }
  1492.         .review-rating {
  1493.             display: flex;
  1494.             align-items: center;
  1495.             gap: 5px;
  1496.         }
  1498.         .verified-badge {
  1499.             background: #28a745;
  1500.             color: white;
  1501.             padding: 2px 4px;
  1502.             border-radius: 3px;
  1503.             font-size: 10px;
  1504.             font-weight: bold;
  1505.         }
  1507.         .review-content {
  1508.             color: #666;
  1509.             font-size: 14px;
  1510.             line-height: 1.5;
  1511.         }
  1513.         .empty-reviews {
  1514.             text-align: center;
  1515.             padding: 40px 20px;
  1516.             color: #666;
  1517.         }
  1519.         .empty-reviews i {
  1520.             font-size: 48px;
  1521.             color: #ddd;
  1522.             margin-bottom: 15px;
  1523.         }
  1525.         .empty-reviews h4 {
  1526.             color: #333;
  1527.             margin-bottom: 10px;
  1528.         }
  1530.         .section-title h2 {
  1531.             color: #333;
  1532.             margin-bottom: 10px;
  1533.         }
  1535.         .section-title p {
  1536.             color: #666;
  1537.             margin-bottom: 30px;
  1538.         }
  1540.         @media(max-width: 768px) {
  1541.             .stats-header {
  1542.                 flex-direction: column;
  1543.                 text-align: center;
  1544.             }
  1546.             .overall-rating {
  1547.                 margin-right: 0;
  1548.                 margin-bottom: 15px;
  1549.             }
  1551.             .review-header {
  1552.                 flex-direction: column;
  1553.                 align-items: flex-start;
  1554.             }
  1556.             .review-rating {
  1557.                 margin-top: 5px;
  1558.             }
  1559.         }
  1560.     </style>
  1561. {% endblock %}
  1563. {% block body %}
  1565.     <!-- Shop Header eBay-style avec Karma - Pleine largeur -->
  1566.     <section
  1567.         class="shop-header">
  1568.         <!-- Carrousel eBay-style -->
  1569.         <div class="shop-carousel-ebay">
  1570.             <div class="carousel-container">
  1571.                 {% set allBannerImages = shop.getAllBannerImages() %}
  1572.                 {% if allBannerImages|length > 0 %}
  1573.                     {% for image in allBannerImages %}
  1574.                         <div class="carousel-slide {% if loop.first %}active{% endif %}" style="background-image: url('{{ asset(image) }}')">
  1575.                             <div class="shop-banner-overlay"></div>
  1576.                         </div>
  1577.                     {% endfor %}
  1578.                 {% else %}
  1579.                     <!-- Slide par défaut avec dégradé si aucune image de bannière -->
  1580.                     <div class="carousel-slide active" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);">
  1581.                         <div class="shop-banner-overlay"></div>
  1582.                     </div>
  1583.                 {% endif %}
  1584.             </div>
  1586.             <!-- Contrôles eBay-style intégrés - uniquement si plusieurs images de bannière -->
  1587.             {% set totalBannerImages = allBannerImages|length %}
  1588.             {% if totalBannerImages > 1 %}
  1589.                 <div class="carousel-controls-ebay">
  1590.                     <button class="carousel-btn-ebay prev-btn" onclick="previousSlide()" id="prevBtn">
  1591.                         <i class="lnr lnr-chevron-left"></i>
  1592.                     </button>
  1593.                     <button class="carousel-btn-ebay pause-btn" onclick="toggleCarousel()" id="pauseBtn">
  1594.                         <i class="lnr lnr-pause" id="pauseIcon"></i>
  1595.                     </button>
  1596.                     <button class="carousel-btn-ebay next-btn" onclick="nextSlide()" id="nextBtn">
  1597.                         <i class="lnr lnr-chevron-right"></i>
  1598.                     </button>
  1599.                 </div>
  1601.                 <!-- Indicateurs eBay-style - uniquement pour les images de bannière -->
  1602.                 <div class="carousel-indicators-ebay">
  1603.                     {% for image in allBannerImages %}
  1604.                         <button class="carousel-indicator-ebay {% if loop.first %}active{% endif %}" onclick="goToSlide({{ loop.index0 }})"></button>
  1605.                     {% endfor %}
  1606.                 </div>
  1607.             {% endif %}
  1608.         </div>
  1610.         <!-- Contenu de la boutique eBay-style -->
  1611.         <div class="shop-header-content">
  1612.             <div
  1613.                 class="row align-items-center">
  1614.                 <!-- Logo de la boutique -->
  1615.                 <div class="col-auto">
  1616.                     <div class="shop-avatar-container-ebay">
  1617.                         {% if shop.logo %}
  1618.                             <img src="{{ asset(shop.logo) }}" alt="{{ shop.name }}" class="shop-avatar-ebay">
  1619.                         {% else %}
  1620.                             <div class="shop-avatar-ebay" style="background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #666;">
  1621.                                 <i class="lnr lnr-store"></i>
  1622.                             </div>
  1623.                         {% endif %}
  1624.                         {% if shop.isVerified %}
  1625.                             <div class="verified-badge-ebay">
  1626.                                 <i class="lnr lnr-checkmark-circle"></i>
  1627.                             </div>
  1628.                         {% endif %}
  1629.                     </div>
  1630.                 </div>
  1632.                 <!-- Informations principales -->
  1633.                 <div class="col">
  1634.                     <div
  1635.                         class="shop-info-ebay">
  1636.                         <!-- Nom de la boutique -->
  1637.                         <div class="shop-name-section">
  1638.                             <h1 class="shop-name-ebay">{{ shop.name }}</h1>
  1639.                             {% if shop.isVerified %}
  1640.                                 <span class="verified-text">
  1641.                                     <i class="lnr lnr-checkmark-circle me-1"></i>Vendeur vérifié
  1642.                                 </span>
  1643.                             {% endif %}
  1644.                         </div>
  1646.                         <!-- Catégorie -->
  1647.                         {% if shop.shopCategory %}
  1648.                             <div class="shop-category-section">
  1649.                                 <span class="shop-category-ebay">{{ shop.shopCategory.name }}</span>
  1650.                             </div>
  1651.                         {% endif %}
  1653.                         <!-- Statistiques eBay-style -->
  1654.                         <div class="shop-stats-ebay">
  1655.                             <div class="stat-row">
  1656.                                 {% if shop.averageRating > 0 %}
  1657.                                     <div class="stat-item-ebay">
  1658.                                         <span class="stat-percentage">{{ shop.averageRating|number_format(1) }}%</span>
  1659.                                         <span class="stat-label-ebay">Évaluations positives</span>
  1660.                                     </div>
  1661.                                 {% endif %}
  1663.                                 {% if stats.totalProductSales > 0 %}
  1664.                                     <div class="stat-item-ebay">
  1665.                                         <span class="stat-number-ebay">{{ stats.totalProductSales|number_format }}</span>
  1666.                                         <span class="stat-label-ebay">Articles vendus</span>
  1667.                                     </div>
  1668.                                 {% endif %}
  1670.                                 {% if followStats.active_follows > 0 %}
  1671.                                     <div class="stat-item-ebay">
  1672.                                         <span class="stat-number-ebay">{{ followStats.active_follows|number_format }}</span>
  1673.                                         <span class="stat-label-ebay">Suiveurs</span>
  1674.                                     </div>
  1675.                                 {% endif %}
  1676.                             </div>
  1678.                             <!-- Informations supplémentaires -->
  1679.                             <div class="shop-additional-info">
  1680.                                 <div class="row">
  1681.                                     <div class="col-12">
  1682.                                         <span class="member-since col-md-3 col-sm-6 w-100">
  1683.                                             <i class="lnr lnr-thumbs-up"></i>
  1684.                                             7% positive feedback</span>
  1685.                                         <span class="member-since col-md-3 col-sm-6 w-100">
  1686.                                             <i class="lnr lnr-cart"></i>
  1687.                                             29 produits vendus</span>
  1688.                                         <span class="member-since col-md-3 col-sm-6 w-100">
  1689.                                             <i class="lnr lnr-star"></i>
  1690.                                             150 followers</span>
  1691.                                         <span class="member-since col-md-3 w-100">
  1692.                                             <i class="lnr lnr-history"></i>
  1693.                                             Créé depuis
  1694.                                             {{ shop.createdAt|date('M Y') }}</span>
  1695.                                     </div>
  1696.                                 </div>
  1697.                             </div>
  1698.                         </div>
  1699.                     </div>
  1700.                 </div>
  1702.                 <!-- Actions eBay-style -->
  1703.                 <div class="col-auto">
  1704.                     <div class="shop-actions-ebay">
  1705.                         {% if app.user %}
  1706.                             <button id="follow-button" class="btn btn-primary btn-ebay {% if isFollowing %}following{% endif %}" data-shop-id="{{ shop.id }}" data-following="{{ isFollowing ? 'true' : 'false' }}">
  1707.                                 <span id="follow-text">
  1708.                                     {% if isFollowing %}
  1709.                                         <i class="lnr lnr-checkmark-circle me-1"></i> Suivi
  1710.                                     {% else %}
  1711.                                         <i class="lnr lnr-plus me-1"></i> Suivre
  1712.                                     {% endif %}
  1713.                                 </span>
  1714.                             </button>
  1715.                         {% else %}
  1716.                             <a href="{{ path('ui_app_login') }}" class="btn btn-primary btn-ebay">
  1717.                                 <i class="lnr lnr-user me-1"></i> Se connecter pour suivre
  1718.                             </a>
  1719.                         {% endif %}
  1721.                         <button class="btn btn-outline-secondary btn-ebay" onclick="shareShop()">
  1722.                             <i class="lnr lnr-bubble me-1"></i> Partager
  1723.                         </button>
  1725.                         <button class="btn btn-outline-danger btn-ebay" onclick="reportShop()">
  1726.                             <i class="lnr lnr-flag me-1"></i> Signaler
  1727.                         </button>
  1729.                         {% if canEdit %}
  1730.                             <a href="{{ path('seller_shop_edit', {slug: shop.slug}) }}" class="btn btn-outline-primary btn-ebay">
  1731.                                 <i class="lnr lnr-pencil me-1"></i> Modifier la boutique
  1732.                             </a>
  1733.                         {% endif %}
  1734.                     </div>
  1735.                 </div>
  1736.             </div>
  1737.         </div>
  1738.     </section>
  1740.     <!-- Shop Tabs eBay-style avec Karma -->
  1741.     <section class="container">
  1742.         <div class="shop-tabs">
  1743.             <ul class="nav nav-tabs shop-tabs-nav" role="tablist">
  1744.                 <li class="nav-item shop-tab">
  1745.                     <a href="#shop-items" class="nav-link shop-tab-link active" data-tab="items" role="tab">
  1746.                         Boutique
  1747.                     </a>
  1748.                 </li>
  1749.                 <li class="nav-item shop-tab">
  1750.                     <a href="#shop-sale" class="nav-link shop-tab-link" data-tab="sale" role="tab">
  1751.                         Promotions
  1752.                     </a>
  1753.                 </li>
  1754.                 <li class="nav-item shop-tab">
  1755.                     <a href="#shop-about" class="nav-link shop-tab-link" data-tab="about" role="tab">
  1756.                         À propos
  1757.                     </a>
  1758.                 </li>
  1759.                 <li class="nav-item shop-tab">
  1760.                     <a href="#shop-feedback" class="nav-link shop-tab-link" data-tab="feedback" role="tab">
  1761.                         Avis ({{ shop.getVisibleReviewsCount() }})
  1762.                     </a>
  1763.                 </li>
  1764.             </ul>
  1766.             <!-- Tab Content: Shop Items avec Karma -->
  1767.             <div id="shop-items" class="tab-content shop-tab-content active">
  1768.                 <div class="row">
  1769.                     <div class="col-lg-12">
  1770.                         <div class="d-flex justify-content-between align-items-center mb-4">
  1771.                             <h4 class="mb-0">Produits de
  1772.                                 {{ shop.name }}</h4>
  1773.                             <div class="d-flex align-items-center gap-3">
  1774.                                 <span style="font-size: 2rem; font-weight: 600; min-width: 100px; display: inline-block; text-align: center;">
  1775.                                     <span class="product-count">{{ products|length|number_format }}</span>
  1777.                                     <span style="font-size: 1rem; font-weight: 400;">produits</span>
  1778.                                 </span>
  1779.                                 <select class="form-select" id="product-sort" style="width: auto;" onchange="if(window.sortProducts) window.sortProducts(this.value);">
  1780.                                     <option value="">Trier par</option>
  1781.                                     <option value="price_asc">Prix : Croissant</option>
  1782.                                     <option value="price_desc">Prix : Décroissant</option>
  1783.                                     <option value="newest">Plus récents</option>
  1784.                                     <option value="popular">Plus populaires</option>
  1785.                                     <option value="name_asc">Nom : A-Z</option>
  1786.                                     <option value="name_desc">Nom : Z-A</option>
  1787.                                 </select>
  1788.                             </div>
  1789.                         </div>
  1791.                         {% if products|length > 0 %}
  1792.                             <div class="row" id="products-container">
  1793.                                 {% for product in products %}
  1794.                                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 mb-4 d-flex align-items-stretch product-item" data-price="{{ product.price }}" data-name="{{ product.name|lower }}" data-views="{{ product.viewCount ?? 0 }}" data-created="{{ product.publishedAt|date('Y-m-d') }}">
  1795.                                         {% include 'home/_single_product_card.html.twig' with {'product': product} %}
  1796.                                     </div>
  1797.                                 {% endfor %}
  1798.                             </div>
  1799.                         {% else %}
  1800.                             <div class="text-center py-5">
  1801.                                 <i class="lnr lnr-package" style="font-size: 4rem; color: #ccc;"></i>
  1802.                                 <h4 class="mt-3">Aucun produit disponible</h4>
  1803.                                 <p class="text-muted">Cette boutique n'a pas encore de produits en vente.</p>
  1804.                             </div>
  1805.                         {% endif %}
  1806.                     </div>
  1808.                 </div>
  1809.             </div>
  1811.             <!-- Tab Content: Sale avec Karma -->
  1812.             <div id="shop-sale" class="tab-content shop-tab-content">
  1813.                 <div class="text-center py-5">
  1814.                     <i class="lnr lnr-tag" style="font-size: 4rem; color: #ccc;"></i>
  1815.                     <h4 class="mt-3">Aucune promotion actuellement</h4>
  1816.                     <p class="text-muted">Cette boutique n'a pas de promotions actives pour le moment.</p>
  1817.                 </div>
  1818.             </div>
  1820.             <!-- Tab Content: About avec Karma -->
  1821.             <div id="shop-about" class="tab-content shop-tab-content">
  1822.                 <div class="row">
  1823.                     <div class="col-lg-8">
  1824.                         <div class="card">
  1825.                             <div class="card-header">
  1826.                                 <h5 class="mb-0">
  1827.                                     <i class="lnr lnr-user me-2"></i>À propos de
  1828.                                     {{ shop.name }}
  1829.                                 </h5>
  1830.                             </div>
  1831.                             <div class="card-body">
  1832.                                 {% if shop.description %}
  1833.                                     <p class="card-text">{{ shop.description }}</p>
  1834.                                 {% else %}
  1835.                                     <p class="text-muted">Aucune description disponible.</p>
  1836.                                 {% endif %}
  1838.                                 {% if shop.businessHours %}
  1839.                                     <h6 class="mt-4">
  1840.                                         <i class="lnr lnr-clock me-2"></i>Heures d'ouverture
  1841.                                     </h6>
  1842.                                     <p>{{ shop.businessHours }}</p>
  1843.                                 {% endif %}
  1845.                                 {% if shop.returnPolicy %}
  1846.                                     <h6 class="mt-4">
  1847.                                         <i class="lnr lnr-undo me-2"></i>Politique de retour
  1848.                                     </h6>
  1849.                                     <p>{{ shop.returnPolicy }}</p>
  1850.                                 {% endif %}
  1851.                             </div>
  1852.                         </div>
  1853.                     </div>
  1854.                     <div class="col-lg-4">
  1855.                         <div class="card shop-info-card">
  1856.                             <div class="card-header">
  1857.                                 <h6 class="mb-0">
  1858.                                     <i class="lnr lnr-chart me-2"></i>Statistiques de la boutique
  1859.                                 </h6>
  1860.                             </div>
  1861.                             <div class="card-body">
  1862.                                 <div class="row text-center">
  1863.                                     <div class="col-6">
  1864.                                         <div class="shop-stat-item">
  1865.                                             <span class="stat-number h4 text-primary">{{ stats.activeProducts }}</span>
  1866.                                             <span class="stat-label d-block">Produits actifs</span>
  1867.                                         </div>
  1868.                                     </div>
  1869.                                     <div class="col-6">
  1870.                                         <div class="shop-stat-item">
  1871.                                             <span class="stat-number h4 text-info">{{ stats.shopViews }}</span>
  1872.                                             <span class="stat-label d-block">Vues boutique</span>
  1873.                                         </div>
  1874.                                     </div>
  1875.                                 </div>
  1876.                             </div>
  1877.                         </div>
  1878.                     </div>
  1879.                 </div>
  1880.             </div>
  1882.             <!-- Tab Content: Feedback avec Karma -->
  1883.             <div id="shop-feedback" class="tab-content shop-tab-content">
  1884.                 <div class="row">
  1885.                     <div
  1886.                         class="col-lg-8">
  1887.                         <!-- Statistiques des avis -->
  1888.                         <div class="review-stats mb-4">
  1889.                             <div class="row">
  1890.                                 <div class="col-md-4">
  1891.                                     <div class="stat-card text-center">
  1892.                                         <h3 class="stat-number">{{ shop.getAverageRating() }}</h3>
  1893.                                         <div class="rating-stars">
  1894.                                             {% for i in 1..5 %}
  1895.                                                 <i class="lnr lnr-star{% if i <= shop.getAverageRating() %}{% else %}-empty{% endif %}"></i>
  1896.                                             {% endfor %}
  1897.                                         </div>
  1898.                                         <p class="stat-label">Note moyenne</p>
  1899.                                     </div>
  1900.                                 </div>
  1901.                                 <div class="col-md-4">
  1902.                                     <div class="stat-card text-center">
  1903.                                         <h3 class="stat-number">{{ shop.getVisibleReviewsCount() }}</h3>
  1904.                                         <p class="stat-label">Avis clients</p>
  1905.                                     </div>
  1906.                                 </div>
  1907.                                 <div class="col-md-4">
  1908.                                     <div class="stat-card text-center">
  1909.                                         <h3 class="stat-number">{{ ((shop.getVisibleReviewsCount() / 100) * 100)|round }}%</h3>
  1910.                                         <p class="stat-label">Satisfaction</p>
  1911.                                     </div>
  1912.                                 </div>
  1913.                             </div>
  1914.                         </div>
  1916.                         <!-- Liste des avis récents -->
  1917.                         <div class="reviews-preview">
  1918.                             <h5 class="mb-3">Avis récents</h5>
  1919.                             {% if shop.reviews|length > 0 %}
  1920.                                 <div class="reviews-list">
  1921.                                     {% for review in shop.reviews|slice(0, 5) %}
  1922.                                         {% if review.isVisible %}
  1923.                                             <div class="review-item">
  1924.                                                 <div class="review-header">
  1925.                                                     <div class="reviewer-info">
  1926.                                                         <div class="reviewer-avatar">
  1927.                                                             <i class="lnr lnr-user"></i>
  1928.                                                         </div>
  1929.                                                         <div class="reviewer-details">
  1930.                                                             <h6 class="reviewer-name">{{ review.user.userIdentifier }}</h6>
  1931.                                                             <div class="review-rating">
  1932.                                                                 {% for i in 1..5 %}
  1933.                                                                     <i class="lnr lnr-star{% if i <= review.rating %}{% else %}-empty{% endif %}"></i>
  1934.                                                                 {% endfor %}
  1935.                                                             </div>
  1936.                                                         </div>
  1937.                                                     </div>
  1938.                                                     <div class="review-meta">
  1939.                                                         <span class="review-date">{{ review.createdAt|date('d/m/Y') }}</span>
  1940.                                                         {% if review.isVerified %}
  1941.                                                             <span class="verified-badge">
  1942.                                                                 <i class="lnr lnr-checkmark-circle"></i>
  1943.                                                                 Vérifié
  1944.                                                             </span>
  1945.                                                         {% endif %}
  1946.                                                     </div>
  1947.                                                 </div>
  1949.                                                 {% if review.comment %}
  1950.                                                     <div class="review-comment">
  1951.                                                         <p>{{ review.comment|length > 150 ? review.comment|slice(0, 150) ~ '...' : review.comment }}</p>
  1952.                                                     </div>
  1953.                                                 {% endif %}
  1954.                                             </div>
  1955.                                         {% endif %}
  1956.                                     {% endfor %}
  1957.                                 </div>
  1959.                                 <div class="text-center mt-4">
  1960.                                     <a href="{{ path('shop_reviews_index', {'slug': shop.slug}) }}" class="btn btn-primary">
  1961.                                         <i class="lnr lnr-star me-1"></i>Voir tous les avis
  1962.                                     </a>
  1963.                                 </div>
  1964.                             {% else %}
  1965.                                 <div class="text-center py-4">
  1966.                                     <i class="lnr lnr-star" style="font-size: 3rem; color: #ccc;"></i>
  1967.                                     <h5 class="mt-3">Aucun avis pour le moment</h5>
  1968.                                     <p class="text-muted">Cette boutique n'a pas encore reçu d'avis clients.</p>
  1969.                                 </div>
  1970.                             {% endif %}
  1971.                         </div>
  1972.                     </div>
  1974.                     <div
  1975.                         class="col-lg-4">
  1976.                         <!-- Lien vers la page complète des avis -->
  1977.                         <div class="review-actions-card">
  1978.                             <h5>Évaluer cette boutique</h5>
  1979.                             <p class="text-muted">Partagez votre expérience avec cette boutique.</p>
  1980.                             <a href="{{ path('shop_reviews_new', {'slug': shop.slug}) }}" class="btn btn-primary w-100">
  1981.                                 <i class="lnr lnr-star me-1"></i>Laisser un avis
  1982.                             </a>
  1983.                         </div>
  1984.                     </div>
  1985.                 </div>
  1986.             </div>
  1987.         </div>
  1988.     </section>
  1990.     <!-- Modal de signalement -->
  1991.     <div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
  1992.         <div class="modal-dialog">
  1993.             <div class="modal-content">
  1994.                 <div class="modal-header">
  1995.                     <h5 class="modal-title" id="reportModalLabel">
  1996.                         <i class="lnr lnr-flag me-2"></i>&nbsp;Signaler cette boutique
  1997.                     </h5>
  1998.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1999.                 </div>
  2000.                 <div class="modal-body">
  2001.                     <form id="reportForm">
  2002.                         <div class="mb-3">
  2003.                             <label for="reportReason" class="form-label">Motif du signalement *</label>
  2004.                             <select class="form-select" id="reportReason" required>
  2005.                                 <option value="">Sélectionnez un motif</option>
  2006.                                 <option value="fake_products">Produits contrefaits</option>
  2007.                                 <option value="inappropriate_content">Contenu inapproprié</option>
  2008.                                 <option value="spam">Spam ou publicité abusive</option>
  2009.                                 <option value="fraud">Fraude ou escroquerie</option>
  2010.                                 <option value="harassment">Harcèlement</option>
  2011.                                 <option value="other">Autre</option>
  2012.                             </select>
  2013.                         </div>
  2014.                         <div class="mb-3">
  2015.                             <label for="reportDescription" class="form-label">Description détaillée *</label>
  2016.                             <textarea class="form-control" id="reportDescription" rows="4" placeholder="Décrivez le problème rencontré..." required></textarea>
  2017.                         </div>
  2018.                         <div class="mb-3">
  2019.                             <label for="reportEmail" class="form-label">Votre email (optionnel)</label>
  2020.                             <input type="email" class="form-control" id="reportEmail" placeholder="votre@email.com">
  2021.                             <div class="form-text">Nous pourrons vous contacter pour plus d'informations</div>
  2022.                         </div>
  2023.                     </form>
  2024.                 </div>
  2025.                 <div class="modal-footer">
  2026.                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
  2027.                     <button type="button" class="btn btn-danger" onclick="submitReport()">
  2028.                         <i class="lnr lnr-flag  me-2"></i>Envoyer le signalement
  2029.                     </button>
  2030.                 </div>
  2031.             </div>
  2032.         </div>
  2033.     </div>
  2035.     <!-- Section des avis -->
  2036.     <div class="container my-5">
  2037.         <div class="row">
  2038.             <div class="col-12">
  2039.                 <div class="section-title text-center">
  2040.                     <h2>Avis clients</h2>
  2041.                     <p>Découvrez ce que pensent nos clients de cette boutique</p>
  2042.                 </div>
  2043.             </div>
  2044.         </div>
  2046.         <div
  2047.             class="row">
  2048.             <!-- Statistiques des avis -->
  2049.             <div class="col-md-4">
  2050.                 <div class="review-stats-card">
  2051.                     <div class="stats-header">
  2052.                         <div class="overall-rating">
  2053.                             <span class="rating-number">{{ shop.reviews|length > 0 ? (shop.reviews|map(r => r.rating)|reduce((a, b) => a + b) / shop.reviews|length)|number_format(1) : '0.0' }}</span>
  2054.                             <div class="stars">
  2055.                                 {% set avgRating = shop.reviews|length > 0 ? (shop.reviews|map(r => r.rating)|reduce((a, b) => a + b) / shop.reviews|length) : 0 %}
  2056.                                 {% for i in 1..5 %}
  2057.                                     {% if i <= avgRating %}
  2058.                                         ★
  2059.                                     {% elseif i - avgRating < 1 %}
  2060.                                         ☆
  2061.                                     {% else %}
  2062.                                         ☆
  2063.                                     {% endif %}
  2064.                                 {% endfor %}
  2065.                             </div>
  2066.                         </div>
  2067.                         <div class="rating-summary">
  2068.                             <p class="mb-1">{{ shop.reviews|length }}
  2069.                                 avis</p>
  2070.                             <p class="text-muted small">Basé sur
  2071.                                 {{ shop.reviews|filter(r => r.isVerified)|length }}
  2072.                                 avis vérifiés</p>
  2073.                         </div>
  2074.                     </div>
  2076.                     <div class="rating-breakdown">
  2077.                         {% for rating in 5..1 %}
  2078.                             {% set count = shop.reviews|filter(r => r.rating == rating)|length %}
  2079.                             {% set percentage = shop.reviews|length > 0 ? (count / shop.reviews|length * 100) : 0 %}
  2080.                             <div class="rating-bar">
  2081.                                 <span class="rating-label">{{ rating }}★</span>
  2082.                                 <div class="rating-progress">
  2083.                                     <div class="rating-fill" style="width: {{ percentage }}%"></div>
  2084.                                 </div>
  2085.                                 <span class="rating-count">{{ count }}</span>
  2086.                             </div>
  2087.                         {% endfor %}
  2088.                     </div>
  2089.                 </div>
  2090.             </div>
  2092.             <!-- Aperçu des avis -->
  2093.             <div class="col-md-8">
  2094.                 <div class="reviews-preview">
  2095.                     {% if shop.reviews|length > 0 %}
  2096.                         {% for review in shop.reviews|slice(0, 3) %}
  2097.                             <div class="review-card-preview">
  2098.                                 <div class="review-header">
  2099.                                     <div class="review-user">
  2100.                                         <div class="user-avatar">
  2101.                                             {{ review.user.firstName|first|upper|default(review.user.email|first|upper) }}
  2102.                                         </div>
  2103.                                         <div class="user-info">
  2104.                                             <h6>{{ review.user.firstName|default('Utilisateur') }}</h6>
  2105.                                             <small>{{ review.getTimeAgo() }}</small>
  2106.                                         </div>
  2107.                                     </div>
  2108.                                     <div class="review-rating">
  2109.                                         <div class="stars">{{ review.getRatingStars() }}</div>
  2110.                                         {% if review.isVerified %}
  2111.                                             <span class="verified-badge">✓</span>
  2112.                                         {% endif %}
  2113.                                     </div>
  2114.                                 </div>
  2115.                                 <div class="review-content">
  2116.                                     {{ review.comment|slice(0, 150) }}
  2117.                                     {% if review.comment|length > 150 %}...
  2118.                                     {% endif %}
  2119.                                 </div>
  2120.                             </div>
  2121.                         {% endfor %}
  2123.                         <div class="text-center mt-3">
  2124.                             <a href="{{ path('shop_reviews_index', {'slug': shop.slug}) }}" class="btn btn-outline-primary">
  2125.                                 Voir tous les avis ({{ shop.reviews|length }})
  2126.                             </a>
  2127.                         </div>
  2128.                     {% else %}
  2129.                         <div class="empty-reviews">
  2130.                             <i class="lnr lnr-star"></i>
  2131.                             <h4>Aucun avis pour le moment</h4>
  2132.                             <p>Soyez le premier à laisser un avis sur cette boutique !</p>
  2133.                             {% if app.user %}
  2134.                                 <a href="{{ path('shop_reviews_new', {'slug': shop.slug}) }}" class="btn btn-primary">
  2135.                                     <i class="lnr lnraccount_recently_viewed-star"></i>
  2136.                                     Laisser un avis
  2137.                                 </a>
  2138.                             {% endif %}
  2139.                         </div>
  2140.                     {% endif %}
  2141.                 </div>
  2142.             </div>
  2143.         </div>
  2144.     </div>
  2146. {% endblock %}
  2148. {% block javascripts %}
  2149.     <script>
  2150.         document.addEventListener('DOMContentLoaded', function () { // Initialisation du carrousel
  2151. initCarousel();
  2153. // Gestion des onglets eBay-style avec Bootstrap
  2154. const tabLinks = document.querySelectorAll('.shop-tab-link');
  2155. const tabContents = document.querySelectorAll('.shop-tab-content');
  2157. tabLinks.forEach(link => {
  2158. link.addEventListener('click', function (e) {
  2159. e.preventDefault();
  2161. // Retirer la classe active de tous les liens et contenus
  2162. tabLinks.forEach(l => {
  2163. l.classList.remove('active');
  2164. l.setAttribute('aria-selected', 'false');
  2165. });
  2166. tabContents.forEach(c => c.classList.remove('active'));
  2168. // Ajouter la classe active au lien cliqué
  2169. this.classList.add('active');
  2170. this.setAttribute('aria-selected', 'true');
  2172. // Afficher le contenu correspondant
  2173. const targetTab = this.dataset.tab;
  2174. const targetContent = document.getElementById (`shop-${targetTab}`);
  2175. if (targetContent) {
  2176. targetContent.classList.add('active');
  2177. }
  2178. });
  2179. });
  2181. // Gestion du système de follow
  2182. const followButton = document.getElementById('follow-button');
  2184. if (followButton) {
  2185. followButton.addEventListener('click', function () {
  2186. const shopId = this.dataset.shopId;
  2187. const isFollowing = this.dataset.following === 'true';
  2189. // Désactiver le bouton pendant la requête
  2190. this.disabled = true;
  2191. const originalText = this.innerHTML;
  2192. this.innerHTML = '<i class="lnr lnr-spinner"></i> Loading...';
  2194. // Envoyer la requête
  2195. fetch("{{ path('ui_api_shop_toggle_follow', {id: '__SHOP_ID__'}) }}".replace('__SHOP_ID__', shopId), {
  2196. method: 'POST',
  2197. headers: {
  2198. 'Content-Type': 'application/json',
  2199. 'X-Requested-With': 'XMLHttpRequest'
  2200. }
  2201. }).then(response => response.json()).then(data => {
  2202. if (data.success) { // Mettre à jour l'interface
  2203. this.dataset.following = data.isFollowing;
  2205. if (data.isFollowing) {
  2206. this.classList.add('following');
  2207. this.innerHTML = '<i class="lnr lnr-checkmark"></i> Suivi';
  2208. } else {
  2209. this.classList.remove('following');
  2210. this.innerHTML = '<i class="lnr lnr-plus"></i> Suivre';
  2211. }
  2213. // Mettre à jour le compteur de followers
  2214. if (followersCount && data.followersCount !== undefined) {
  2215. followersCount.textContent = data.followersCount.toLocaleString();
  2216. }
  2218. // Afficher un message de confirmation
  2219. showNotification(data.message, 'success');
  2220. } else {
  2221. showNotification(data.message, 'error');
  2222. }
  2223. }).catch(error => {
  2224. console.error('Erreur:', error);
  2225. showNotification('Une erreur est survenue', 'error');
  2226. }). finally(() => {
  2227. this.disabled = false;
  2228. });
  2229. });
  2230. }
  2232. // Fonction pour afficher les notifications
  2233. function showNotification(message, type = 'info') { // Créer l'élément de notification
  2234. const notification = document.createElement('div');
  2235. notification.className = `alert alert-${
  2236. type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'
  2237. } alert-dismissible fade show position-fixed`;
  2238. notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
  2239. notification.innerHTML = `
  2240.             ${message}
  2241.             <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  2242.         `;
  2244. document.body.appendChild(notification);
  2246. // Supprimer automatiquement après 5 secondes
  2247. setTimeout(() => {
  2248. if (notification.parentNode) {
  2249. notification.remove();
  2250. }
  2251. }, 5000);
  2252. }
  2254. // Fonctions pour les actions de boutique
  2255. window.shareShop = function () { // Vérifier si l'API Web Share est disponible et si on est sur mobile
  2256. if (navigator.share && /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  2257. navigator.share({title: '{{ shop.name }}- Boutique sur MaketOu', text: 'Découvrez cette boutique et ses produits sur MaketOu', url: window.location.href}).then(() => {
  2258. console.log('Partage réussi');
  2259. showNotification('Lien partagé avec succès !', 'success');
  2260. }).catch((error) => {
  2261. console.log('Erreur lors du partage:', error);
  2262. // Fallback vers la copie
  2263. copyToClipboard();
  2264. });
  2265. } else { // Sur desktop ou si Web Share n'est pas disponible, copier directement
  2266. copyToClipboard();
  2267. }
  2268. };
  2270. // Fonction pour copier le lien dans le presse-papiers
  2271. function copyToClipboard() {
  2272. const shopUrl = window.location.href;
  2273. const shopName = '{{ shop.name }}';
  2274. const shareText = `Découvrez la boutique "${shopName}" sur MaketOu : ${shopUrl}`;
  2276. // Utiliser directement le fallback pour éviter les conflits
  2277. fallbackCopyToClipboard(shareText);
  2278. }
  2280. // Fallback pour copier le texte
  2281. function fallbackCopyToClipboard(text) {
  2282. const textArea = document.createElement('textarea');
  2283. textArea.value = text;
  2284. textArea.style.position = 'fixed';
  2285. textArea.style.left = '-999999px';
  2286. textArea.style.top = '-999999px';
  2287. document.body.appendChild(textArea);
  2288. textArea.focus();
  2289. textArea.select();
  2291. try {
  2292. document.execCommand('copy');
  2293. showNotification('Lien copié dans le presse-papiers !', 'success');
  2294. } catch (err) {
  2295. console.error('Impossible de copier:', err);
  2296. showNotification('Impossible de copier le lien', 'error');
  2297. }
  2299. document.body.removeChild(textArea);
  2300. }
  2302. window.contactShop = function () { // Ouvrir un modal de signalement
  2303. openReportModal();
  2304. };
  2306. window.saveShop = function () { // Sauvegarder la boutique dans les favoris
  2307. showNotification('Boutique sauvegardée dans vos favoris', 'success');
  2308. };
  2310. // Fonction pour ouvrir le modal de signalement
  2311. window.openReportModal = function () {
  2312. const modal = new bootstrap.Modal(document.getElementById('reportModal'));
  2313. modal.show();
  2314. };
  2316. // Fonction pour soumettre le signalement
  2317. window.submitReport = function () {
  2318. const reason = document.getElementById('reportReason').value;
  2319. const description = document.getElementById('reportDescription').value;
  2320. const email = document.getElementById('reportEmail').value;
  2322. if (! reason || ! description) {
  2323. showNotification('Veuillez remplir tous les champs obligatoires', 'error');
  2324. return;
  2325. }
  2327. // Simuler l'envoi du signalement
  2328. const reportData = {
  2329. shopId: {{ shop.id }},
  2330. reason: reason,
  2331. description: description,
  2332. email: email,
  2333. reportedAt: new Date().toISOString()
  2334. };
  2336. console.log('Signalement envoyé:', reportData);
  2338. // Fermer le modal
  2339. const modal = bootstrap.Modal.getInstance(document.getElementById('reportModal'));
  2340. modal.hide();
  2342. // Réinitialiser le formulaire
  2343. document.getElementById('reportForm').reset();
  2345. // Afficher la confirmation
  2346. showNotification('Signalement envoyé avec succès. Nous examinerons votre demande.', 'success');
  2347. };
  2349. // Gestion du carrousel eBay-style
  2350. let currentSlide = 0;
  2351. let carouselInterval;
  2352. let isPaused = false;
  2353. let slides = [];
  2354. let indicators = [];
  2356. function initCarousel() {
  2357.     // Réinitialiser les variables
  2358.     currentSlide = 0;
  2359.     isPaused = false;
  2360.     
  2361.     // Récupérer les slides et indicateurs à nouveau
  2362.     const carouselContainer = document.querySelector('.shop-carousel-ebay');
  2363.     if (!carouselContainer) {
  2364.         console.log('Carousel container not found');
  2365.         return;
  2366.     }
  2367.     
  2368.     const allSlides = carouselContainer.querySelectorAll('.carousel-slide');
  2369.     const allIndicators = carouselContainer.querySelectorAll('.carousel-indicator-ebay');
  2370.     
  2371.     if (allSlides.length === 0) {
  2372.         // Masquer les contrôles si aucune image
  2373.         const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  2374.         const indicators = carouselContainer.querySelector('.carousel-indicators-ebay');
  2375.         if (controls) controls.style.display = 'none';
  2376.         if (indicators) indicators.style.display = 'none';
  2377.         return;
  2378.     }
  2379.     
  2380.     // Si une seule image, masquer les contrôles
  2381.     if (allSlides.length <= 1) {
  2382.         const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  2383.         const indicators = carouselContainer.querySelector('.carousel-indicators-ebay');
  2384.         if (controls) controls.style.display = 'none';
  2385.         if (indicators) indicators.style.display = 'none';
  2386.         // S'assurer que la slide unique est active
  2387.         allSlides[0].classList.add('active');
  2388.         return;
  2389.     }
  2390.     
  2391.     // Afficher les contrôles si plusieurs images
  2392.     const controls = carouselContainer.querySelector('.carousel-controls-ebay');
  2393.     const indicators = carouselContainer.querySelector('.carousel-indicators-ebay');
  2394.     if (controls) controls.style.display = 'flex';
  2395.     if (indicators) indicators.style.display = 'flex';
  2396.     
  2397.     // Mettre à jour les références globales
  2398.     slides = allSlides;
  2399.     indicators = allIndicators;
  2400.     
  2401.     // S'assurer que la première slide est active
  2402.     updateCarousel();
  2403.     
  2404.     // Démarrer le carrousel automatique
  2405.     startCarousel();
  2406.     
  2407.     // Gérer les événements de survol
  2408.     carouselContainer.addEventListener('mouseenter', pauseCarousel);
  2409.     carouselContainer.addEventListener('mouseleave', () => {
  2410.             if (!isPaused) startCarousel();
  2411.         });
  2412. }
  2414. function startCarousel() {
  2415.     // Nettoyer l'intervalle existant
  2416.     clearInterval(carouselInterval);
  2417.     
  2418.     if (slides.length <= 1) return;
  2419.     
  2420.     carouselInterval = setInterval(() => {
  2421.         if (!isPaused && slides.length > 0) {
  2422.             nextSlide();
  2423.         }
  2424.     }, 4000); // Change toutes les 4 secondes
  2430. }
  2432. function pauseCarousel() {
  2433. isPaused = true;
  2434. clearInterval(carouselInterval);
  2435. const pauseIcon = document.getElementById('pauseIcon');
  2436. if (pauseIcon) {
  2437.     pauseIcon.className = 'lnr lnr-play';
  2438. }
  2439. }
  2441. function resumeCarousel() {
  2442. isPaused = false;
  2443. const pauseIcon = document.getElementById('pauseIcon');
  2444. if (pauseIcon) {
  2445.     pauseIcon.className = 'lnr lnr-pause';
  2446. }
  2447. startCarousel();
  2448. }
  2450. function toggleCarousel() {
  2451. if (isPaused) {
  2452. resumeCarousel();
  2453. } else {
  2454. pauseCarousel();
  2455. }
  2456. }
  2458. function nextSlide() {
  2459. if (slides.length === 0) return;
  2460. currentSlide = (currentSlide + 1) % slides.length;
  2461. updateCarousel();
  2462. }
  2464. function previousSlide() {
  2465. if (slides.length === 0) return;
  2466. currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  2467. updateCarousel();
  2468. }
  2470. function goToSlide(index) {
  2471. if (slides.length === 0) return;
  2472. if (index < 0 || index >= slides.length) return;
  2473. currentSlide = index;
  2474. updateCarousel();
  2475. }
  2477. function updateCarousel() {
  2478.     if (slides.length === 0 || indicators.length === 0) return;
  2479.     
  2480.     // Masquer toutes les slides
  2481.     slides.forEach(slide => slide.classList.remove('active'));
  2482.     indicators.forEach(indicator => indicator.classList.remove('active'));
  2483.     
  2484.     // Afficher la slide active
  2485.     if (slides[currentSlide]) {
  2486.         slides[currentSlide].classList.add('active');
  2487.     }
  2488.     if (indicators[currentSlide]) {
  2489.         indicators[currentSlide].classList.add('active');
  2490.     }
  2491. }
  2493. // Fonctions globales pour les boutons
  2494. window.nextSlide = nextSlide;
  2495. window.previousSlide = previousSlide;
  2496. window.goToSlide = goToSlide;
  2497. window.toggleCarousel = toggleCarousel;
  2499. // Gestion du tri des produits via API Symfony
  2500. console.log('=== INITIALIZING PRODUCT SORTING ===');
  2501. console.log('Shop ID:', {{ shop.id }});
  2503. // Fonction de tri via AJAX - RENDUE GLOBALE
  2504. window.sortProducts = function (sortValue) {
  2505. console.log('=== SORT PRODUCTS CALLED ===');
  2506. console.log('Sort value:', sortValue);
  2508. const productsContainer = document.getElementById('products-container');
  2509. console.log('Products container:', productsContainer);
  2511. if (! productsContainer) {
  2512. console.error('Products container not found!');
  2513. return;
  2514. }
  2516. if (! sortValue) {
  2517. console.log('Resetting to original order');
  2518. // Recharger la page pour revenir à l'ordre original
  2519. window.location.reload();
  2520. return;
  2521. }
  2523. console.log('Showing loading spinner...');
  2524. // Afficher un indicateur de chargement
  2525. productsContainer.innerHTML = '<div class="col-12 text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Chargement...</span></div><p class="mt-3">Tri des produits en cours...</p></div>';
  2527. // Récupérer l'ID de la boutique
  2528. const shopId = {{ shop.id }};
  2529. console.log('Shop ID for request:', shopId);
  2531. const url = "{{ path('ui_api_shop_products_sort', {id: '__SHOP_ID__'}) }}".replace('__SHOP_ID__', shopId);
  2532. console.log('Request URL:', url);
  2534. const requestData = {
  2535. sortBy: sortValue
  2536. };
  2537. console.log('Request data:', requestData);
  2539. // Envoyer la requête AJAX
  2540. console.log('Sending AJAX request...');
  2541. fetch(url, {
  2542. method: 'POST',
  2543. headers: {
  2544. 'Content-Type': 'application/json',
  2545. 'X-Requested-With': 'XMLHttpRequest'
  2546. },
  2547. body: JSON.stringify(requestData)
  2548. }).then(response => {
  2549. console.log('Response received:', response);
  2550. console.log('Response status:', response.status);
  2551. return response.json();
  2552. }).then(data => {
  2553. console.log('Sort response data:', data);
  2555. if (data.success) {
  2556. console.log('Sort successful, updating content...');
  2557. // Mettre à jour le contenu avec le HTML retourné
  2558. productsContainer.innerHTML = data.html;
  2560. // Mettre à jour le compteur de produits
  2561. const productCount = document.querySelector('.product-count');
  2562. if (productCount) {
  2563. productCount.textContent = data.count;
  2564. }
  2566. console.log('Products sorted successfully!');
  2567. } else {
  2568. console.error('Sort failed:', data.message);
  2569. showNotification('Erreur lors du tri: ' + data.message, 'error');
  2571. // Recharger la page en cas d'erreur
  2572. window.location.reload();
  2573. }
  2574. }).catch(error => {
  2575. console.error('Sort request failed:', error);
  2576. showNotification('Erreur de connexion lors du tri', 'error');
  2578. // Recharger la page en cas d'erreur
  2579. window.location.reload();
  2580. });
  2581. };
  2583. // Attendre que le DOM soit chargé
  2584. console.log('Setting up event listeners...');
  2585. setTimeout(() => {
  2586. const sortSelect = document.getElementById('product-sort');
  2587. console.log('Sort select element:', sortSelect);
  2589. if (sortSelect) {
  2590. console.log('Adding change event listener...');
  2592. // Ecouter l'événement change avec jQuery (nécessaire à cause de nice-select)
  2593. if (typeof $ !== 'undefined') {
  2594.     $('#product-sort').on('change', function() {
  2595.         console.log('=== SELECT CHANGE EVENT TRIGGERED (jQuery) ===');
  2596.         if(window.sortProducts) window.sortProducts(this.value);
  2597.     });
  2598. }
  2600. sortSelect.addEventListener('change', function () {
  2601. console.log('=== SELECT CHANGE EVENT TRIGGERED ===');
  2602. console.log('Selected value:', this.value);
  2603. console.log('Calling sortProducts...');
  2604. window.sortProducts(this.value);
  2605. });
  2607. console.log('Event listener added successfully');
  2608. } else {
  2609. console.error('Sort select element not found!');
  2610. console.log('Available elements with ID containing "sort":', document.querySelectorAll('[id*="sort"]'));
  2611. console.log('Available elements with class containing "form-select":', document.querySelectorAll('.form-select'));
  2612. }
  2613. }, 100);
  2615. // Gestion du bouton "Suivre"
  2616. const followBtn = document.querySelector('.btn-shop');
  2617. if (followBtn) {
  2618. followBtn.addEventListener('click', function () {
  2619. if (this.innerHTML.includes('Suivre')) {
  2620. this.innerHTML = '<i class="lnr lnr-heart me-1"></i> Suivi';
  2621. this.classList.remove('btn-shop');
  2622. this.classList.add('btn-success');
  2623. } else {
  2624. this.innerHTML = '<i class="lnr lnr-heart me-1"></i> Suivre';
  2625. this.classList.remove('btn-success');
  2626. this.classList.add('btn-shop');
  2627. }
  2628. });
  2629. }
  2630. });
  2631.     </script>
  2632. {% endblock %}