templates/default/product_details.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3.     {% block title %}MOPO{% endblock %}
  5. {% block body %}
  6.     <div id="page-container" class="fade show">
  7.     <div id="product" class="section-container pt-20px">
  8.         <!-- BEGIN container -->
  9.         <div class="container">
  10.             <!-- BEGIN breadcrumb -->
  11.             <ul class="breadcrumb">
  12.                 <li class="breadcrumb-item"><a href="{{ path('home') }}">Accueil</a></li>
  13.                 <li class="breadcrumb-item"><a href="#">{{ selected_product.brand }}</a></li>
  14.                 <li class="breadcrumb-item active">{{ selected_product.productName }}</li>
  15.             </ul>
  16.             <!-- END breadcrumb -->
  17.             <!-- BEGIN product -->
  18.             <div class="product">
  19.                 <!-- BEGIN product-detail -->
  20.                 <div class="product-detail">
  21.                     <!-- BEGIN product-image -->
  22.                     <div class="product-image">
  23.                         <!-- BEGIN product-thumbnail -->
  24.                         <div class="product-thumbnail">
  25.                             <ul class="product-thumbnail-list" id="hide_scrollbar">
  26.                                 {% for image in images %}
  27.                                 <li class="active"><a href="#" data-click="show-main-image"
  28.                                                       data-url="{{ asset('assets/img/product/' ~ image.imageName) }}"><img
  29.                                                 src="{{ asset('assets/img/product/' ~ image.imageName) }}" alt="{{ image.imageName }}"/></a>
  30.                                 </li>
  31.                                 {% endfor %}
  32.                             </ul>
  33.                         </div>
  34.                         <!-- END product-thumbnail -->
  35.                         <!-- BEGIN product-main-image -->
  36.                         {% if images is empty %}
  37.                         <div class="product-main-image" data-id="main-image">
  38.                             <img src="{{ asset('assets/img/product/default.png') }}" alt="no image"/>
  39.                         </div>
  40.                         {% else %}
  41.                             <div class="product-main-image" data-id="main-image">
  42.                                 <img src="{{ asset('assets/img/product/' ~ images[0].imageName) }}" alt="{{ images[0].imageName }}"/>
  43.                             </div>
  44.                         {% endif %}
  45.                         <!-- END product-main-image -->
  46.                     </div>
  47.                     <!-- END product-image -->
  48.                     <!-- BEGIN product-info -->
  49.                     <div class="product-info">
  50.                         <!-- BEGIN product-info-header -->
  51.                         <div class="product-info-header">
  52.                             <h1 class="product-title text-uppercase text-red-600">{{ selected_product.productName }} -
  53.                                 Réf
  54.                                 #{{ selected_product.productReference }} </h1>
  55.                         </div>
  56.                         <!-- END product-info-header -->
  57.                         <!-- BEGIN product-description -->
  58.                         <div class="product-warranty">
  59.                             <h4 class="text-red-600">Description</h4>
  60.                             <p class="product-desc-text">
  61.                                 {{ selected_product.productDescription }}
  62.                             </p>
  63.                         </div>
  64.                         <!-- END product-description -->
  65.                         <!-- BEGIN product-warranty -->
  66.                         <div class="product-warranty">
  67.                             {% if selected_product.productQuantity > 0 %}
  68.                                 <div class="pull-right"><span
  69.                                             class="fw-bold text-red-600">Disponibilité:</span> {{ selected_product.productQuantity }}
  70.                                     en
  71.                                     stock
  72.                                 </div>
  73.                                 <div class="pull-right"><span
  74.                                             class="fw-bold text-red-600">Etat:</span> {{ selected_product.condition }}
  75.                                 </div>
  76.                             {% else %}
  77.                                 <div class="pull-right"><span
  78.                                             class="fw-bold text-red-600">Disponibilité:</span> NON DISPONIBLE
  79.                                 </div>
  80.                                 <div class="pull-right"><span
  81.                                             class="fw-bold text-red-600">Etat:</span> -
  82.                                 </div>
  83.                                 <div class="pull-right"><span class="fw-bold text-red-600">Garantie:</span> -</div>
  84.                             {% endif %}
  85.                         </div>
  86.                         <!-- END product-warranty -->
  87.                         <!-- BEGIN product-purchase-container -->
  88.                         <div class="container-fluid">
  89.                             <div class="row">
  90.                                 <div class="col-lg-6 col-md-6 col-sm-12">
  91.                                     <div class="product-discount">
  92.                                         <span>{{ (selected_product.productPrice / tva)|number_format(2) }}€ HT</span>
  93.                                     </div>
  94.                                     <div class="product-price">
  95.                                         <div class="price">{{ selected_product.productPrice }}€ TTC</div>
  96.                                     </div>
  97.                                 </div>
  98.                                 {% if selected_product.productQuantity > 0 %}
  99.                                     <div class="col-lg-6 col-md-6 col-sm-12">
  100.                                         {{ form_start(form, {'attr': {'id': 'add-to-cart-form'}}) }}
  101.                                             <div class="row">
  102.                                                 {{ form_label(form.product_quantity, 'Quantité:', {'label_attr': {'class': 'fw-bold'}}) }}
  103.                                                 <div class="col-6 d-flex align-items-end">
  104.                                                     {{ form_widget(form.product_quantity, {'attr': {'class': 'form-control text-center shadow-none'}}) }}
  105.                                                 </div>
  106.                                                 <div class="col-6 d-flex align-items-end ps-0">
  107.                                                     <button type="submit" name="ajouter"
  108.                                                             class="btn btn-outline-dark" id="form-add-cart" onclick="addToCart(this.form)">
  109.                                                         <i class="fa fa-cart-plus"></i>
  110.                                                     </button>
  111.                                                 </div>
  112.                                             </div>
  113.                                         {{ form_end(form) }}
  114.                                     </div>
  115.                                 {% endif %}
  116.                             </div>
  117.                         </div>
  118.                         <!-- END product-purchase-container -->
  119.                     </div>
  120.                     <!-- END product-info -->
  121.                 </div>
  122.                 <!-- END product-detail -->
  123.                 <!-- BEGIN product-tab -->
  124.                 <h4 class="text-red-600 text-center m-3">Caractéristiques</h4>
  125.                 <div class="table-responsive">
  126.                     <!-- BEGIN table-product -->
  127.                     <table class="table table-product table-striped">
  128.                         <thead>
  129.                         <tr>
  130.                             <th></th>
  131.                             <th></th>
  132.                         </tr>
  133.                         </thead>
  134.                         <tbody>
  135.                         <tr>
  136.                             <td class="field">Marque</td>
  137.                             <td>
  138.                                 {{ selected_product.brand }}
  139.                             </td>
  140.                         </tr>
  141.                         <tr>
  142.                             <td class="field">Modèle</td>
  143.                             <td>
  144.                                 {{ selected_product.model }}
  145.                             </td>
  146.                         </tr>
  147.                         {% if selected_product.productYear != null  %}
  148.                         <tr>
  149.                             <td class="field">Année</td>
  150.                             <td>
  151.                                 {{ selected_product.productYear }}
  152.                             </td>
  153.                         </tr>
  154.                         {% endif %}
  155.                         {% if selected_product.productKm != null  %}
  156.                         <tr>
  157.                             <td class="field">Kilométrage</td>
  158.                             <td>
  159.                                 {{ selected_product.productKm }} km
  160.                             </td>
  161.                         </tr>
  162.                         {% endif %}
  163.                         </tbody>
  164.                     </table>
  165.                     <!-- END table-product -->
  166.                 </div>
  167.                 <!-- END table-responsive -->
  168.             </div>
  169.             <!-- END container -->
  170.         </div>
  171.         <!-- END #product -->
  172.     </div>
  173. {% endblock %}