templates/produit/fiche_produit.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %} {{ parent() }} |  {{ produit.nom }} {% endblock %}
  4. {% block stylesheets %}
  5.     <link rel="stylesheet" href="{{ asset('css/fiche_produit.css') }}">
  6. {% endblock %}
  9. {% block content %}
  10.   {% set categories = app.session.get('categories') %}
  11.     <div itemscope itemtype="https://schema.org/Product" class="wrapper col-12 d-flex flex-lg-row flex-column ">
  12.         <meta itemprop="url" content="https://www.lebiodelo.com{{ app.request.getPathInfo }}">
  14.         <div class="col-lg-6 col-12">
  16.             <div id="carouselExampleIndicators" class="carousel carousel-dark slide" data-bs-ride="carousel">
  17.                 <div class="carousel-indicators">
  18.                     {% for photo in produit.photoProduits %}
  19.                     
  20.                         {% if photo.position == 1 %}
  21.                         <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ photo.position -1 }}" class="carousselIndiator active" aria-current="true" aria-label="Slide ~{{ photo.position}}"></button>
  22.                             
  23.                         {% else %}
  24.                         <button type="button" data-bs-target="#carouselExampleIndicators"  data-bs-slide-to="{{ photo.position -1 }}"   class="carousselIndicator" aria-label="Slide ~{{ photo.position}}"></button>
  25.                             
  26.                         {% endif %}
  27.                         
  28.                     {% endfor %}
  29.                 </div>
  30.                 <div class="carousel-inner">
  32.                     {% for photo in produit.photoProduits %}
  33.                         {% if photo.position == 1 %}
  35.                         <div class="carousel-item active">
  36.                             <img itemprop="image" class="d-block mx-auto my-auto" src="{{ asset("img/photoProduitUpload/" ~  photo.nom ) }}" alt="slide "~{{ photo.position }}>
  37.                         </div>
  39.                         {% else %}
  40.                         <div class="carousel-item">
  41.                         <img class="d-block" src="{{ asset("img/photoProduitUpload/" ~  photo.nom ) }}"  alt="slide "~{{ photo.position }}>
  42.                     </div>
  43.                         {% endif %}
  44.                         
  45.                     {% endfor %}
  46.     
  47.                 </div>
  48.                 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  49.                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  50.                     <span class="visually-hidden">Previous</span>
  51.                 </button>
  52.                 <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  53.                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  54.                     <span class="visually-hidden">Next</span>
  55.                 </button>
  56.             </div>
  57.         </div>
  58.         
  60.         <div class=" col-lg-5 col-10 mx-auto d-flex flex-column justify-centent-start">
  61.             <div  class="data_content">
  63.                 <div class="data d-flex flex-column justify-content-start align-items-start">
  65.                 
  66.                     <nav itemprop='breadcrumb' aria-label="Breadcrumb" class="breadcrumb d-md-block d-none">
  67.                         <ul>
  68.                             <li><a href="{{ path('accueil') }}">ACCUEIL</a></li>
  69.                             <li><a href="{{ path('catalogue') }}"> PRODUITS</a></li>
  70.                             <li><a href="{{ path("categorie" , {'id' : produit.categorie.id}) }}"> {{ produit.categorie.nom|upper }}</a></li>
  71.                             <li><span aria-current="page"> {{ produit.nom|upper}} </span></li>
  72.                         </ul>
  73.                     </nav>
  74.                     <h1 itemprop="name" class='nom-produit mt-5'>{{  produit.nom|upper }} -  {{ produit.prixPubTtc|number_format(2,',')  }} EUR</h1>
  75.                     <br>
  76.                     <br>
  77.         
  78.                     
  79.                     <p itemprop="offers" itemscope itemtype="https://schema.org/Offer" class="prix"></p>
  80.             
  81.             
  82.                 </div>
  83.                 <form action="{{ path('panier_ajouter') }}" method="post">
  85.                             
  86.                         <input type="hidden" name="id" value ="{{ produit.id }}">
  87.                         <p itemprop="slogan" class="description">{{ produit.description|raw}}</p>
  88.                         <br>
  89.                             
  90.                         <p id='matieres' class=" mx-auto detail">{{ produit.matiere}}</p>
  91.                         <br>
  93.                         <p id='matieres' class=" mx-auto detail">{{ produit.motif}}</p>
  94.                         <br>
  96.                         <p> <img src="{{ asset('img/icones/bio.jpg') }}" style="width: 100px;" alt=""> Produits issus de l’Agriculture Biologique, certifiés par Ecocert. </p>
  98.                             
  99.                         <p id='tailles' class=" mx-auto detail">{{ produit.taille}}</p>
  100.                     
  101.                             
  102.                             <div class="col-12 d-flex">
  103.                                     <div class=' col-4 d-flex  justify-content-start my-3'>
  104.                                         <div class="input-group">
  105.                                             <label id="label_qty" class ='my-auto' for="qty">Quantité</label>
  106.                                         
  107.                                             <input class=" mx-auto "  style="border-color:#DDD;" id= "qty" type="number" name="qty" id="qty" min="1" max="10" step="1" value="1">
  108.                                         </div>
  109.                                     </div>
  110.                             
  111.                     
  112.                             <button type="submit" class="col-8 btn my-3 ">AJOUTER AU PANIER</button>
  113.                             </div>
  114.                     
  116.                     
  117.                 
  119.                     
  121.                 </form>
  122.                 
  123.              
  124.             </div>
  125.         </div>
  128.     </div>
  129.     
  130.     <textarea hidden class='photo2js' name="" id="" cols="30" rows="10">{{ photos }}</textarea>
  131. {% endblock %}
  134. {% block javascripts %}
  136.     <script>// expension des div Taille, matière et entretien( code à réduire)
  137.         function expandTaille(element){
  138.             let expander = element.getAttribute('expand')
  139.             let elt = document.querySelector('#tailles')
  141.             if (expander == '+') {
  142.                 elt.setAttribute('class','d-block')
  143.                 element.setAttribute('expand','-')
  144.                 element.innerHTML = '<i class="far fa-caret-square-up"></i>'
  145.             }else {
  146.                 elt.setAttribute('class','d-none')
  147.                 element.setAttribute('expand','+')
  148.                 element.innerHTML = '<i class="far fa-caret-square-down">'
  149.             }
  150.         }
  152.         function expandMatiere(element){
  153.             let expander = element.getAttribute('expand')
  154.             let elt = document.querySelector('#matieres')
  156.             if (expander == '+') {
  157.                 elt.setAttribute('class','d-block')
  158.                 element.setAttribute('expand','-')
  159.                 element.innerHTML = '<i class="far fa-caret-square-up"></i>'
  160.             }else {
  161.                 elt.setAttribute('class','d-none')
  162.                 element.setAttribute('expand','+')
  163.                 element.innerHTML = '<i class="far fa-caret-square-down">'
  164.             }
  165.         }
  167.         function expandEntretien(element){    
  168.             let expander = element.getAttribute('expand')
  169.             let elt = document.querySelector('#entretien')
  171.             if (expander == '+') {
  172.                 elt.setAttribute('class','d-block')
  173.                 element.setAttribute('expand','-')
  174.                 element.innerHTML = '<i class="far fa-caret-square-up"></i>'
  175.             }else {
  176.                 elt.setAttribute('class','d-none')
  177.                 element.setAttribute('expand','+')
  178.                 element.innerHTML = '<i class="far fa-caret-square-down">'
  179.             }
  180.         }
  181.     </script>  
  182.     <script>// bootstap caroussel
  183.         $(document).ready(function () {
  184.         $('.carousel').carousel({
  185.         interval: false,
  186.         keyboad: true,
  187.         touch:true
  188.         })
  190.         //$('.carousel').bcSwipe({ threshold: 50 });
  192.         });
  193.     </script>
  195.     <script>// vignettes photos dans les indicateurs du caroussel
  196.         let indicator =document. querySelector('.carousel-indicators')
  197.         let indicators = indicator.childNodes
  198.         let photos = JSON.parse(document.querySelector('.photo2js').value)
  199.         let indicatorsArray= Array.from(indicators)
  200.         let cheminPhoto = "{{ asset('img/photoProduitUpload/') }}"
  201.         indicatorsArray.pop()
  203.         for(i=0; i < indicatorsArray.length; i++ ){
  204.             if(i%2 !== 0){
  205.                 var n=(i+1)/2
  206.                     if (2* n< (indicatorsArray.length+1)){    
  207.                             elt =indicatorsArray [i]
  208.                             elt.style.backgroundImage = 'url('+cheminPhoto+photos[n-1]+')'
  209.                     }
  210.             }        
  211.         }
  212.     </script>
  214.     
  215.     <script> // Bootstrap Carousel Swipe v1.1 not used
  216.         /**
  217.         * Bootstrap Carousel Swipe v1.1
  218.         *
  219.         * jQuery plugin to enable swipe gestures on Bootstrap 3 carousels.
  220.         * Examples and documentation: https://github.com/maaaaark/bcSwipe
  221.         *
  222.         * Licensed under the MIT license.
  223.         */
  224.         (function($) {
  225.         $.fn.bcSwipe = function(settings) {
  226.             var config = { threshold: 50 };
  227.             if (settings) {
  228.             $.extend(config, settings);
  229.             }
  231.             this.each(function() {
  232.             var stillMoving = false;
  233.             var start;
  235.             if ('ontouchstart' in document.documentElement) {
  236.                 this.addEventListener('touchstart', onTouchStart, false);
  237.             }
  239.             function onTouchStart(e) {
  240.                 if (e.touches.length == 1) {
  241.                 start = e.touches[0].pageX;
  242.                 stillMoving = true;
  243.                 this.addEventListener('touchmove', onTouchMove, false);
  244.                 }
  245.             }
  247.             function onTouchMove(e) {
  248.                 if (stillMoving) {
  249.                 var x = e.touches[0].pageX;
  250.                 var difference = start - x;
  251.                 if (Math.abs(difference) >= config.threshold) {
  252.                     cancelTouch();
  253.                     if(isCarouselEmpty($(this))) return;
  254.                     if (difference > 0) {
  255.                     $(this).carousel('next');
  256.                     }
  257.                     else {
  258.                     $(this).carousel('prev');
  259.                     }
  260.                 }
  261.                 }
  262.             }
  263.             
  264.             function isCarouselEmpty(carousel){
  265.             return carousel.find(".item.active").length < 1
  266.             }
  268.             function cancelTouch() {
  269.                 this.removeEventListener('touchmove', onTouchMove);
  270.                 start = null;
  271.                 stillMoving = false;
  272.             }
  273.             });
  275.             return this;
  276.         };
  277.         })(jQuery);
  278.     </script>
  282. {% endblock %}