templates/front/pack/single.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  2. {% block meta %}
  3.     <title>Produits du pack {{ pack.name }}</title>
  4.     <meta name="description" content="le {{ pack.name }} contient {{ pack.products|length }} produits à un prix attractif.">
  5. {% endblock %}
  6. {% block body %}
  7.     <div class="page-header" style="background: url({{ asset('images/background-page-header.jpg') }}) no-repeat center;background-size: cover">
  8.         <div class="container">
  9.             <div class="row">
  10.                 <!-- page caption -->
  11.                 <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
  12.                     <div class="page-caption">
  13.                         <h1 class="page-title">Pack {{ pack.name }}</h1>
  14.                     </div>
  15.                 </div>
  16.                 <!-- /.page caption -->
  17.             </div>
  18.         </div>
  19.         <!-- page caption -->
  20.         <div class="page-breadcrumb">
  21.             <div class="container">
  22.                 <div class="row">
  23.                     <nav aria-label="breadcrumb">
  24.                         <ol class="breadcrumb">
  25.                             <li class="breadcrumb-item"><a href="{{ path('front_home') }}" class="breadcrumb-link">Accueil</a></li>
  26.                             <li class="breadcrumb-item active text-white" aria-current="page">Contenu du pack {{ pack.name }}</li>
  27.                         </ol>
  28.                     </nav>
  29.                 </div>
  30.             </div>
  31.         </div>
  32.         <!-- page breadcrumb -->
  33.     </div>
  34.     <!-- /.page-header -->
  35.     <!-- vendor-section -->
  36.     <div class="content">
  37.         <div class="container">
  38.             <div class="row">
  39.                 <div class="col-xl-8 col-lg-8 col-md-7 col-sm-12 col-12">
  40.                     <h3>Ce pack contient les produits suivants :</h3>
  41.                     {% for productPercent in pack.productPercents %}
  42.                         <div class="vendor-thumbnail list-view">
  43.                             <!-- Vendor thumbnail -->
  44.                             <div class="row">
  45.                                 <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 border-right pr-0">
  46.                                     <div class="vendor-img">
  47.                                         <!-- Vendor img -->
  48.                                         <a href="{{ path('front_product_single', {'slug': productPercent.product.subCategories[0].categories[0].slug, 'subCategorySlug': productPercent.product.subCategories[0].subCategorySlug, 'product_id': productPercent.product.id, 'productSlug': productPercent.product.productSlug}) }}"><div class="zoomimg"><img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ productPercent.product.photos.first.url) }}" alt="" class="img-fluid"></div></a>
  49.                                         <div class="wishlist-sign">
  50.                                             {% if app.user and app.user.roles == ['ROLE_USER'] %}
  51.                                                 {% set isWish = filter_service.getIfIsWish(app.user, productPercent.product) %}
  52.                                                 {% if isWish %}
  53.                                                     <a href="#" class="btn-wishlist" style="background-color:#ff4d4d;"><i class="fa fa-heart" style="color:#fff"></i></a>
  54.                                                 {% else %}
  55.                                                     <a href="#" class="btn-wishlist"><i class="fa fa-heart"></i></a>
  56.                                                 {% endif %}
  57.                                             {% endif %}
  58.                                         </div>
  59.                                     </div>
  60.                                 </div>
  61.                                 <!-- /.Vendor img -->
  62.                                 <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12 pl-0">
  63.                                     <div class="vendor-content">
  64.                                         <!-- Vendor Content -->
  65.                                         <h2 class="vendor-title"><a href="{{ path('front_product_single', {'slug': productPercent.product.subCategories[0].categories[0].slug, 'subCategorySlug': productPercent.product.subCategories[0].subCategorySlug, 'product_id': productPercent.product.id, 'productSlug': productPercent.product.productSlug}) }}" class="title">{{ productPercent.product.name }}</a></h2>
  66.                                         <p class="vendor-address">
  67.                                             {% for department in productPercent.product.departments %}
  68.                                                 {{ department.name }}{% if not loop.last %},{% endif %}
  69.                                             {% else %}
  70.                                                 Toute la France
  71.                                             {% endfor %}
  72.                                         </p>
  73.                                         <!-- /.Vendor meta -->
  74.                                     </div>
  75.                                     <div class="vendor-meta m-0">
  76.                                         <div class="vendor-meta-item vendor-meta-item-bordered">
  77.                                         <span class="vendor-price">
  78.                                         {{ productPercent.product.price|number_format(2, '.') }}€
  79.                                         </span>
  80.                                             <span class="vendor-text">Prix</span></div>
  81.                                         <div class="vendor-meta-item vendor-meta-item-bordered">
  82.                                         <span class="vendor-guest">
  83.                                               {{ productPercent.product.quantity }}
  84.                                          </span>
  85.                                             <span class="vendor-text">Quantité restante</span>
  86.                                         </div>
  87.                                         {% set notes = 0 %}
  88.                                         {% for avi in productPercent.product.avis %}
  89.                                             {% set notes = notes + avi.globalNote %}
  90.                                         {% endfor %}
  91.                                         {% set noteTotal = (notes > 0) ? notes / productPercent.product.avis|length : 0 %}
  92.                                         <div class="vendor-meta-item vendor-meta-item-bordered">
  93.                                         <span class="rating-star">
  94.                                             {% for i in 1..5 %}
  95.                                                 {% if i < noteTotal %}
  96.                                                     <i class="fa fa-star rated"></i>
  97.                                                 {% else %}
  98.                                                     <i class="fa fa-star rate-mute"></i>
  99.                                                 {% endif %}
  100.                                             {% endfor %}
  101.                                     </span>
  102.                                             <span class="rating-count vendor-text">({{ productPercent.product.avis|length }})</span></div>
  103.                                     </div>
  104.                                     <!-- /.Vendor Content -->
  105.                                 </div>
  106.                             </div>
  107.                         </div>
  108.                     {% else %}
  109.                         <div class="vendor-thumbnail list-view p-4">Aucun service correspondant</div>
  110.                     {% endfor %}
  111.                     <!-- /.paginations -->
  112.                 </div>
  113.                 <!-- sidebar-section -->
  114.                 <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
  115.                     <div class="sidebar-venue" >
  116.                         <div class="card">
  117.                             <div class="card-body">
  118.                                 <form method="post" action="{{ path('front_product_add_pack_basket', {'id': pack.id}) }}" id="form_add_bascket">
  119.                                     <div class="form-group">
  120.                                         <label for="quantity_product">Prix du pack : </label><br>
  121.                                         <div class="quantity buttons_added">
  122.                                             <span style="color:#A066F2;font-size:1.4em">{{ pack.price|number_format(2, '.') }}€</span>
  123.                                         </div>
  124.                                     </div>
  125.                                     <div class="form-group mt-5">
  126.                                         {% if app.session.get('packs') == pack.id %}
  127.                                             <button type="submit" class="btn btn-rounded btn-danger mt-3" id="btn_add">Supprimer du panier</button>
  128.                                         {% else %}
  129.                                             <button type="submit" class="btn btn-rounded btn-primary mt-3" id="btn_add">Ajouter au panier</button>
  130.                                         {% endif %}
  131.                                     </div>
  132.                                     <div id="message_form"></div>
  133.                                 </form>
  134.                             </div>
  135.                         </div>
  136.                     </div>
  137.                 </div>
  138.                 <!-- /.sidebar-section -->
  139.             </div>
  140.         </div>
  141.     </div>
  142. {% endblock %}
  143. {% block javascript %}
  144. {{ parent() }}
  145. <script>
  146. document.addEventListener('DOMContentLoaded', function() {
  147.     const form = document.getElementById('form_add_bascket');
  148.     form.addEventListener('submit', (e) => {
  149.         e.preventDefault();
  150.         let form = e.target;
  151.         const formData = new FormData(form);
  152.         fetch(form.action, { method: form.method, body: formData })
  153.             .then(response => response.json())
  154.             .then(data => {
  155.                 if (data.message === 'ok') {
  156.                     if (data.response === 'added') {
  157.                         const btnAdd = document.getElementById('btn_add');
  158.                         btnAdd.classList.replace('btn-primary', 'btn-danger');
  159.                         btnAdd.textContent = 'Supprimer du panier';
  160.                         const msgElt = document.getElementById('message_form');
  161.                         msgElt.classList.add('text-success');
  162.                         msgElt.classList.add('text-center');
  163.                         msgElt.textContent = 'Produit ajouté au panier !';
  164.                     } else {
  165.                         const btnAdd = document.getElementById('btn_add');
  166.                         btnAdd.classList.replace('btn-danger', 'btn-primary');
  167.                         btnAdd.textContent = 'Ajouter au panier';
  168.                         const msgElt = document.getElementById('message_form');
  169.                         msgElt.classList.add('text-success');
  170.                         msgElt.classList.add('text-center');
  171.                         msgElt.textContent = 'Produit supprimé du panier !';
  172.                     }
  173.                 }
  174.             });
  175.         return false;
  176.     })
  177. })
  178. </script>
  179. {% endblock %}