templates/article/detail.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %} 
  3. {% endblock %} 
  4. {% block stylesheets %} 
  5.     <link rel="stylesheet" href="{{ asset('/css/details-article.css') }}">     
  6. {% endblock %}  
  7. {% block body %}
  8.      <main class="section-services ">  </main> 
  9.   {% for message in app.flashes('success') %}
  10.     <div class="alert alert-success alert-dismissible fade show col-md-6" role="alert">{{ message }}</div>
  11.   {% endfor %} 
  12.   <br><br>
  13.   <div class="container mt-5">
  14.     <div class="row pb-5">
  15.       <div class="col-md-12 text-center">
  16.         <h5>{% trans  %} detail_article.Article{% endtrans %}</h5>
  17.         <h2>Lorem ipsum dolor</h2>
  18.       </div>
  19.     </div> 
  20.     <div class="d-flex justify-content-center">
  21.       <div class="col-md-9">
  22.         <div class="card mb-3 section-formation" >
  23.           <div class="row g-0">
  24.             <div class="col-md-6">
  25.               <div class="dream" onclick="showImg('{{ article.image }}')" style="background-image : url('{{ asset('imagees/galery/') }}{{ article.image }}')" id="dream-img"></div>
  27.               <div class="card-img-top dream" onclick="showImg('{{ article.image }}')" style="background-image : url('{{ asset('imagees/galery/') }}{{ article.image }}'); height: 300px;background-size: cover;background-repeat: no-repeat; background-position: center"></div>
  28.               {# <img src="{{asset('imagees/galery/')}}{{article.image}}" class="card-img-top" alt="..."> #}
  29.             </div>
  30.             <div class="col-md-6">
  31.               <div class="card-body text-left">
  32.                 <span class="bg-price {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">  {{ article.prix }} {% trans  %} detail_article.TND {% endtrans %}</span>
  33.                 <h6 class="card-title">{{ article.titre }}</h6>
  34.                 <p class="card-text {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}"  >{{ article.description | striptags }}</p>
  35.                 <a target="_blank" href="/upload/galerie/images/{{ article.extrait }}" id="down-pdf">{% trans  %} detail_article.Download {% endtrans %}  <i class="fa-solid fa-file-arrow-down"></i> </a>
  36.               </div>
  37.             </div>
  38.           </div>
  39.         </div>
  40.       </div>
  41.     </div>
  43.     <input type="hidden" id="path-img" value="{{ asset('/upload/galerie/images/') }}" />
  44.   </div>
  46.   <div id="myModal" class="modal">
  47.     <div class="modal-content" id="img01" style="height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center;"></div>
  48.     <span class="close">&times;</span>
  49.   </div>
  51.   <script>
  52.     // Get the modal
  53.     var modal = document.getElementById('myModal')
  54.     
  55.     // Get the image and insert it inside the modal - use its "alt" text as a caption
  56.     var img = document.getElementById('dream-img')
  57.     var modalImg = document.getElementById('img01')
  58.     
  59.     var pathImg = document.getElementById('path-img').value
  60.     
  61.     function showImg(img) {
  62.       var img = pathImg + img
  63.       modalImg.style.backgroundImage = 'url(' + img + ')'
  64.       modal.style.display = 'block'
  65.     }
  66.     // Get the <span> element that closes the modal
  67.     var span = document.getElementsByClassName('close')[0]
  68.     
  69.     // When the user clicks on <span> (x), close the modal
  70.     span.onclick = function () {
  71.       modal.style.display = 'none'
  72.     }
  73.     
  74.     function addCommand(a) {
  75.       let quantity = $('.article_' + a).val()
  76.       let item = { id: a, quantity: quantity }
  77.       console.log(item)
  78.       $.ajax({
  79.         type: 'POST',
  80.         url: "{{ path('make_command') }}",
  81.         data: JSON.stringify(item),
  82.         dataType: 'json',
  83.         success: function (response) {
  84.           console.log(response)
  85.         }
  86.       })
  87.     }
  88.   </script>
  89. {% endblock %}