templates/main/product.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Les trésors de Luna{% endblock %}
  5. {% block javascripts %}
  6. <script type="module" src="{{asset('js/buying.js')}}"></script>
  7.   <script type="module" src="{{asset('js/classes/Cart.js')}}"></script>
  8. {% endblock javascripts %}
  10. {% block body %}
  12. <body>
  14.   <section id="banner" class="py-3" style="background: #F9F3EC;">
  15.     <div class="container">
  16.       <div class="hero-content py-5 my-3">
  17.         <h2 class="display-1 mt-3 mb-0">Détail du <span class="text-primary">Produit:</span></h2>
  18.         <nav class="breadcrumb">
  19.           <a class="breadcrumb-item nav-link" href="{{path('app_home')}}">Accueil</a>
  21.   
  22.           {% set search = path('search_products') %}
  24.           {% if search in comeFromPage %}
  25.             
  26.             <a class="breadcrumb-item nav-link" href="javascript:history.back()">Revenir aux résultats</a>
  27.             
  28.           {% endif %}
  29.           <span class="breadcrumb-item active" aria-current="page">{{product.name}}</span>
  30.         </nav>
  31.       </div>
  32.     </div>
  33.   </section>
  35.   <section id="selling-product">
  36.     <div class="container my-md-5 py-5">
  37.       <div class="row g-md-5">
  38.         <div class="col-lg-6">
  39.           <div class="row">
  40.             <div class="col-md-12">
  41.               <!-- product-large-slider -->
  42.               <div class="swiper product-large-slider">
  43.                 <div class="swiper-wrapper">
  44.                   <div class="swiper-slide">
  45.                     <img src="{{asset('uploads/product_images/' ~ product.mainImageLink)}}" class="img-fluid" />
  46.                   </div>
  47.                   <div class="swiper-slide">
  48.                     <img src="{{asset('uploads/product_images/' ~ product.Image0Link)}}" class="img-fluid" />
  49.                   </div>
  50.                   <div class="swiper-slide">
  51.                     <img src="{{asset('uploads/product_images/' ~ product.Image1Link)}}" class="img-fluid" />
  52.                   </div>
  53.                   <div class="swiper-slide">
  54.                     <img src="{{asset('uploads/product_images/' ~ product.Image2Link)}}" class="img-fluid" />
  55.                   </div>
  57.                 </div>
  58.               </div>
  59.             </div>
  60.             <div class="col-md-12 mt-2">
  61.               <!-- product-thumbnail-slider -->
  62.               <div thumbsSlider="" class="swiper product-thumbnail-slider">
  63.                 <div class="swiper-wrapper">
  64.                   <div class="swiper-slide" style="cursor: pointer;">
  65.                     <img src="{{asset('uploads/product_images/' ~ product.mainImageLink)}}" class="img-fluid" />
  66.                   </div>
  67.                   {% if product.image0Link %}  
  68.                     <div style="cursor: pointer;" class="swiper-slide">
  69.                       <img src="{{asset('uploads/product_images/' ~ product.image0Link)}}" class="img-fluid" />
  70.                     </div>
  71.                   {% endif %}
  72.                   {% if product.image1Link %}
  73.                     <div class="swiper-slide">
  74.                       <img src="{{asset('uploads/product_images/' ~ product.image1Link)}}" class="img-fluid" />
  75.                     </div>
  76.                   {% endif %}
  78.                 </div>
  79.               </div>
  80.             </div>
  82.           </div>
  84.         </div>
  85.         <div class="col-lg-6 mt-5 ">
  86.           <div class="product-info">
  87.             <div class="element-header">
  88.               <h2 id="product-name" itemprop="name" class="display-6">{{product.name}}</h2>
  89.             </div>
  90.             <div class="product-price pt-3 pb-3">
  91.               <strong id="product-price" data-price="{{product.price}}" class="text-primary display-6 fw-bold">{{product.price}}€</strong>
  92.             </div>
  93.             <p id="short-description">{{product.shortDescription|nl2br}}</p>
  95.             <div>
  96.               <span style="font-weight: bold; margin-right: 5px;">Categorie: </span>{{product.category.name}}
  97.             </div>
  99.             <div>
  100.               {% if product.stock >= 10 %}
  101.                 <span style="font-weight: bold; margin-right: 5px;">Stock disponible: </span> <span class="stock-indicator" style="font-weight: bold; font-size: 1.2rem; color: yellowgreen">{{product.stock}}</span><br>
  102.               {% endif %}
  104.               {% if product.stock < 10 and product.stock >= 5 %}
  105.                 <span style="font-weight: bold; margin-right: 5px">Stock disponible: </span> <span class="stock-indicator" style="font-weight: bold; font-size: 1.2rem; color: orange">{{product.stock}}</span><br>
  106.               {% endif %}
  108.               {% if product.stock < 5 %}
  109.                 <span style="font-weight: bold; margin-right: 5px">Stock disponible: </span> <span class="stock-indicator" style="font-weight: bold; font-size: 1.2rem; color: lightcoral">{{product.stock}}</span><br>
  110.               {% endif %}
  112.               <span style="font-weight: bold;">Poids: </span>{{product.weight}}g <br>
  113.               
  114.               {% if product.customizable %}
  115.               
  116.                 <label for="custom-message">Message personnalisé:</label>
  117.                 <input id="custom-message" name="custom-message" type="text" maxlength="200" placeholder="Votre message (200 caractères max.)" required> <br>
  118.                 <div id="error-message" style="color:red; font-size:0.9em; margin-bottom:0.5em;"></div>
  120.                 <label for="custom-police">Style du texte:</label>
  121.                 <input type="number" id="custom-police" name="custom-police" value="1" min="1" max="10" placeholder="Indiquez le numéro du style de texte" required> <br>
  122.                 <div id="error-police" style="color:red; font-size:0.9em; margin-bottom:0.5em;"></div>
  124.                 <label for="custom-image">Motifs : </label>
  125.                 <input type="number" id="custom-image" name="custom-image" value="1" min="1" max="5" placeholder="Indiquez le numéro du motif" required> <br>
  126.                 <input type="hidden" id="customizable-product" value="{{product.customizable}}">
  127.                 <div id="error-image" style="color:red; font-size:0.9em; margin-bottom:0.5em;"></div>
  128.                 
  130.               {% endif %}
  132.             </div>
  133.             
  134.             
  137.             <div class="cart-wrap">
  139.               <div class="product-quantity pt-2">
  141.                 <div class="stock-button-wrap">
  143.                   {% if product.stock != 0 %}
  144.                     <div style="display:flex; height: 30px;">
  145.                       <p style="width: 130px; margin:unset; padding: unset;">Quantité: </p>
  146.                       <div id="quantity-selector" class="input-group product-qty align-items-center w-25">
  147.                         <span class="input-group-btn">
  148.                           <button type="button" class="quantity-left-minus btn btn-light btn-number" data-type="minus">
  149.                             <svg width="16" height="16">
  150.                               <use xlink:href="#minus"></use>
  151.                             </svg>
  152.                           </button>
  153.                         </span>
  154.                         <input type="text" id="quantity" data-product-id="{{product.id}}" data-max-quantity="{{stock}}" name="quantity"
  155.                           class="form-control input-number text-center p-2 mx-1" value="1">
  156.                         <span class="input-group-btn">
  157.                           <button type="button" class="quantity-right-plus btn btn-light btn-number" data-type="plus"
  158.                             data-field="">
  159.                             <svg width="16" height="16">
  160.                               <use xlink:href="#plus"></use>
  161.                             </svg>
  162.                           </button>
  163.                         </span>
  164.                       </div>
  165.                     </div>
  167.                     <div class="d-flex flex-wrap pt-4" >
  168.                       <a href="{{path('add_to_cart', {'id': product.id})}}" data-max-quantity="{{stock}}" class="btn-cart btn-cart-buy me-3 px-4 pt-3 pb-3">
  169.                         <h5 class="text-uppercase m-0">Ajouter au panier</h5>
  170.                       </a>
  171.   
  172.                     </div>
  173.                   {% else %}  
  174.                     <p class="alert-stock">Produit indisponible</p>
  175.                   {% endif %}
  178.                 </div>
  179.               </div>
  180.             </div>
  181.             <div class="meta-product pt-4">
  183.             </div>
  184.           </div>
  185.         </div>
  186.       </div>
  187.     </div>
  188.   </section>
  189.   
  190.   {% if not product.additionalInformation and product.longDescription %}
  191.     
  192.     <section class="product-info-tabs py-md-5">
  193.       <div class="container">
  194.         <div class="row">
  195.           <div class="d-flex flex-column flex-md-row align-items-start gap-5">
  196.             <div class="nav flex-row flex-wrap flex-md-column nav-pills me-3 col-lg-3" id="v-pills-tab" role="tablist"
  197.               aria-orientation="vertical">
  198.                 {% if product.longDescription %}
  199.                   
  200.                 <button class="nav-link fs-5 mb-2 text-start active" id="v-pills-description-tab" data-bs-toggle="pill"
  201.                   data-bs-target="#v-pills-description" type="button" role="tab" aria-controls="v-pills-description"
  202.                   aria-selected="false" tabindex="-1">Description</button>
  204.                 {% endif %}
  205.                 {% if product.additionalInformation|nl2br %}
  207.                   <button class="nav-link fs-5 mb-2 text-start" id="v-pills-additional-tab" data-bs-toggle="pill"
  208.                     data-bs-target="#v-pills-additional" type="button" role="tab" aria-controls="v-pills-additional"
  209.                     aria-selected="false" tabindex="-1">Information additionnelle</button>
  210.                   
  211.                 {% endif %}
  212.                 {#
  213.               <button class="nav-link fs-5 mb-2 text-start" id="v-pills-reviews-tab" data-bs-toggle="pill"
  214.                 data-bs-target="#v-pills-reviews" type="button" role="tab" aria-controls="v-pills-reviews"
  215.                 aria-selected="true">Customer Reviews</button>
  216.                 #}
  217.             </div>
  219.             {% if product.longDescription %}
  220.               
  221.             <div class="tab-content" id="v-pills-tabContent">
  222.               <div class="tab-pane fade active show" id="v-pills-description" role="tabpanel"
  223.                 aria-labelledby="v-pills-description-tab" tabindex="0">
  224.                 <h2>Description du Produit</h2>
  225.                 <p>{{product.longDescription|nl2br}}</p>
  227.               </div>
  228.             {% endif %}
  229.               {% if product.additionalInformation %}
  230.               
  231.                 <div class="tab-pane fade" id="v-pills-additional" role="tabpanel" aria-labelledby="v-pills-additional-tab"
  232.                   tabindex="0">
  233.                   <h2>Information additionnelle</h2>
  234.                   <p>{{product.additionalInformation|nl2br}}</p>
  235.                 </div>
  236.                 
  237.               {% endif %}
  238.             </div>
  239.           </div>
  240.         </div>
  241.       </div>
  242.     </section>
  244.   {% endif %}
  246.   <div class="instagram-wrapper">
  248.     {{instagramLinks[0]["link0"]|raw}}
  249.     {{instagramLinks[1]["link1"]|raw}}
  250.     {{instagramLinks[2]["link2"]|raw}}
  251.     {{instagramLinks[3]["link3"]|raw}}
  252.     {{instagramLinks[4]["link4"]|raw}}
  254.   </div>
  256. <script>
  257.   document.addEventListener('DOMContentLoaded', function () {
  258.       const input = document.getElementById('custom-message');
  259.       const maxLength = parseInt(input.getAttribute('maxlength'), 10);
  261.       // Élément pour le compteur
  262.       const counter = document.createElement('div');
  263.       counter.style.fontSize = '0.9em';
  264.       counter.style.color = '#555';
  265.       counter.style.marginTop = '5px';
  267.       // Élément pour les erreurs
  268.       const feedback = document.createElement('div');
  269.       feedback.style.color = 'red';
  270.       feedback.style.marginTop = '2px';
  272.       input.insertAdjacentElement('afterend', counter);
  273.       counter.insertAdjacentElement('afterend', feedback);
  275.       updateDisplay();
  277.       input.addEventListener('input', updateDisplay);
  279.       function updateDisplay() {
  280.           const currentLength = input.value.length;
  281.           counter.textContent = `${currentLength} / ${maxLength} caractères`;
  283.           if (currentLength > maxLength) {
  284.               feedback.textContent = `⚠️ Le message dépasse la limite de ${maxLength} caractères.`;
  285.           } else {
  286.               feedback.textContent = '';
  287.           }
  288.       }
  289.   });
  290. </script>  
  292. </body>
  294. <script async src="//www.instagram.com/embed.js"></script>
  295. {% endblock body %}