templates/frontView/product/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2.  {% block javascripts %}
  3.     {{ encore_entry_script_tags('UtilityPhotoProductJs') }}
  4.  {% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <style>
  8.         .product-specs-table {
  9.             --specs-border: #e1e8f0;
  10.             --specs-label: #1c2f49;
  11.             --specs-value: #718096;
  12.             border: 1px solid var(--specs-border);
  13.             border-radius: 0.75rem;
  14.             overflow: hidden;
  15.             border-collapse: separate;
  16.             border-spacing: 0;
  17.             background: #fff;
  18.         }
  19.         .product-specs-table thead th {
  20.             padding: 1rem 1.25rem;
  21.             border: 0;
  22.             background: #063f80;
  23.             color: #fff;
  24.             font-size: 1.05rem;
  25.             text-align: center;
  26.         }
  27.         .product-specs-table tbody th,
  28.         .product-specs-table tbody td {
  29.             padding: 0.9rem 1.25rem;
  30.             border-top: 1px solid var(--specs-border);
  31.             vertical-align: middle;
  32.         }
  33.         .product-specs-table tbody th {
  34.             width: 34%;
  35.             color: var(--specs-label);
  36.             font-weight: 700;
  37.         }
  38.         .product-specs-table tbody td {
  39.             color: var(--specs-value);
  40.         }
  41.         .product-specs-table tbody tr:nth-child(odd) {
  42.             background: #f8fafc;
  43.         }
  44.         .product-specs-table .product-type-badges {
  45.             display: flex;
  46.             flex-wrap: wrap;
  47.             gap: 0.5rem;
  48.         }
  49.         .product-specs-table .product-type-badges .badge {
  50.             padding: 0.55rem 0.8rem;
  51.             border: 1px solid #d5e3f2;
  52.             border-radius: 999px;
  53.             background: #edf6ff !important;
  54.             color: #064589 !important;
  55.             font-weight: 600;
  56.         }
  57.         .product-detail-actions {
  58.             display: flex;
  59.             flex-wrap: wrap;
  60.             gap: 0.65rem;
  61.             margin-top: 1.25rem;
  62.         }
  63.         .product-detail-actions .button-contact {
  64.             margin-bottom: 0 !important;
  65.         }
  66.         @media (max-width: 576px) {
  67.             .product-specs-table tbody th,
  68.             .product-specs-table tbody td {
  69.                 padding: 0.75rem;
  70.             }
  71.             .product-detail-actions .button-contact {
  72.                 width: 100%;
  73.             }
  74.         }
  75.     </style>
  76. {% endblock %}
  77. {% block title %}Produits{% endblock %}
  78. {% block body %}
  79. <header>
  80. {{ include('@FrontView/menus.html.twig') }}
  81. </header>
  82. <main class="front-office-page front-office-detail">
  83.     <div class="container">
  84.         <div class="row py-2">
  85.             <!-- Modal image show -->
  86.             <div class="modal fade" id="listsmodalphoto" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  87.               <div class="modal-dialog modal-dialog-centered">
  88.                 <div class="modal-content">
  89.                     <img class="imgproduct" id="imgprincipalhide" src="{{ asset('uploads/products/'~product.picture) }}">
  90.                 </div>
  91.               </div>
  92.             </div>
  93.             <div class="col-md-2">
  94.                 {{ include('@FrontView/menusgeneral.html.twig') }}
  95.             </div>
  96.             <div class="col-md-10">
  97.                     <div class="album bg-custom-product py-4 border product-detail-shell">
  98.                     <div class="row mb-2 px-4">
  99.                         <div class="modal fade" id="listsmodalphoto" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  100.                           <div class="modal-dialog modal-dialog-centered">
  101.                             <div class="modal-content">
  102.                                 <img class="imgproduct" id="imgprincipalhide" src="#" alt="test-image">
  103.                             </div>
  104.                           </div>
  105.                         </div>
  106.                         
  107.                         <div class="col-md-5">
  108.                             <input type="hidden" id="product_id" value="{{ product.id }}" />
  109.                             <img  class="imgproduct" id="imgprincipal" src="{{ asset('uploads/products/'~product.picture) }}" >
  110.                             <div id="listimgproduct">
  111.                                 <div class="row" >
  112.                                     <div class="col-md-3 col-6 mt-1">
  113.                                             <img class="imgproduct" id="nano4" src="{{ asset('uploads/products/'~product.picture) }}">
  114.                                     </div>
  115.                                     
  116.                                     {% set idimgs = 0 %}
  117.                                     {% for file in product.linkspicturesArrays %}
  118.                                         <div class="col-md-3  col-6 mt-1">
  119.                                             <img class="imgproduct" id="img-{{ idimgs }}" src="{{ asset('uploads/products/'~file) }}">
  120.                                         </div>
  121.                                         {% set idimgs = idimgs+1 %}
  122.                                     {% endfor %} 
  123.                                 </div>
  124.                             </div>
  125.                             <div class="card mt-1">
  126.                               <div class="card-body">
  127.                                 
  128.                                 <h5 class="card-title text-center">Whatsapp</h5>
  129.                                 <div class="row">
  130.                                     <div class="col-md-12">
  131.                                         <div class="row">
  132.                                             <a href="https://wa.me/+261349313463?text=refchambrekiban" class="btn btn-success"><i class="bi bi-telephone-plus-fill"></i> +261 34 93 134 63</a>
  133.                                         </div>
  134.                                     </div>
  135.                                 </div>
  136.                               </div>
  137.                             </div>
  138.                         </div>
  139.                         <div class="col-md-7">
  140.                             <p> {{ product.title }}
  141.                             </p>
  142.                             <div class="product-modules-card">
  143.                                 <div class="product-modules-heading">
  144.                                     <div><i class="fas fa-layer-group me-2"></i>Modules inclus</div>
  145.                                     <span>{{ product.modulesForDisplay|length }} module{{ product.modulesForDisplay|length > 1 ? 's' : '' }}</span>
  146.                                 </div>
  147.                                 {% if product.modulesForDisplay|length > 0 %}
  148.                                     <div class="modules-table-scroll">
  149.                                         <table class="table product-modules-table mb-0">
  150.                                             <thead><tr><th>#</th><th>Module</th></tr></thead>
  151.                                             <tbody>
  152.                                             {% for module in product.modulesForDisplay %}
  153.                                                 <tr><td>{{ loop.index }}</td><td>{{ module }}</td></tr>
  154.                                             {% endfor %}
  155.                                             </tbody>
  156.                                         </table>
  157.                                     </div>
  158.                                 {% else %}
  159.                                     <div class="product-modules-empty"><i class="fas fa-inbox"></i><span>Aucun module renseigné pour ce produit.</span></div>
  160.                                 {% endif %}
  161.                             </div>
  162.                             <hr class="border-2">
  163.                             <table class="table product-specs-table mb-0">
  164.                                 <thead>
  165.                                     <tr>
  166.                                       <th class="text-center" scope="col" colspan=2>Fiche Produit</th>
  167.                                     </tr>
  168.                                 </thead>
  169.                                 <tbody>
  170.                                     <tr>
  171.                                       <th scope="row">Catégorie</th>
  172.                                       <td><div class="row">{{ product.fkcategorie.title }}</div></td>
  173.                                     </tr>
  174.                                     <tr class="d-none">
  175.                                       <th scope="row">À partir de</th>
  176.                                       {# <td>
  177.                                         {% if is_granted('ROLE_COM') %}
  178.                                                 <span class="marge-price">{{ product.priceProducts[0].priceDealer|number_format(2, '.', ' ') }}</span> {{ product.fkdevise.title }} </br>
  179.                                                 ({{ product.priceProducts[0].nbrDealerProd }}) produit(s) minimum
  180.                                         {% elseif is_granted('ROLE_CUSTOMER')%}
  181.                                                 <span class="marge-price">{{ product.priceProducts[0].priceBulkCustomer|number_format(2, '.', ' ') }} ({{ product.priceProducts[0].nbrBulkProd }}) </span> 
  182.                                         {% else %}
  183.                                                 <span class="marge-price">{{ product.priceProducts[0].priceCustomer|number_format(2, '.', ' ') }}</span> </span> {{ product.fkdevise.title }} </br>
  184.                                         {% endif %}
  185.                                       </td> #}
  186.                                           {% set price = product.priceProducts|first %}
  187.                                         <td>
  188.                                         {% if price %}
  189.                                             {% if is_granted('ROLE_COM') %}
  190.                                                 {% set normalPrice = price.priceCustomer %}
  191.                                                 {% set promoPrice  = price.promoPriceCustomer %}
  192.                                                 {% set minQty      = null %}
  193.                                             {% elseif is_granted('ROLE_CUSTOMER') %}
  194.                                                 {% set normalPrice = price.priceCustomer %}
  195.                                                 {% set promoPrice  = price.promoPriceCustomer %}
  196.                                                 {% set minQty      = null %}
  197.                                             {% else %}
  198.                                                 {% set normalPrice = price.priceCustomer %}
  199.                                                 {% set promoPrice  = price.promoPriceCustomer %}
  200.                                                 {% set minQty      = null %}
  201.                                             {% endif %}
  202.                                             {% if price.isPromotionValid and promoPrice %}
  203.                                                 <span class="marge-price text-muted" style="text-decoration: line-through;">
  204.                                                     {{ normalPrice|number_format(2, '.', ' ') }}
  205.                                                 </span>
  206.                                                 <br>
  207.                                                 <span class="marge-price text-danger fw-bold">
  208.                                                     {{ promoPrice|number_format(2, '.', ' ') }}
  209.                                                 </span>
  210.                                             {% else %}
  211.                                                 <span class="marge-price">
  212.                                                     {{ normalPrice|number_format(2, '.', ' ') }}
  213.                                                 </span>
  214.                                             {% endif %}
  215.                                             {{ product.fkdevise.title }}
  216.                                             {% if minQty %}
  217.                                                 <br>
  218.                                                 <small class="text-muted">
  219.                                                     ({{ minQty }}) produit(s) minimum
  220.                                                 </small>
  221.                                             {% endif %}
  222.                                         {% endif %}
  223.                                         </td>
  224.                                       <tr>
  225.                                       <th scope="row">Type</th>
  226.                                         {# <td>
  227.                                         {% if is_granted('ROLE_CUSTOMER') %}
  228.                                                 <span class="marge-price">{{ product.priceProducts[0].priceBulkCustomer|number_format(2, '.', ' ') }} </span></span> {{ product.fkdevise.title }} </br>
  229.                                                  ({{ product.priceProducts[0].nbrBulkProd }})  produit(s) minimum
  230.                                         {% elseif is_granted('ROLE_COM')%}
  231.                                         {% else %}
  232.                                                 <span class="marge-price">{{ product.priceProducts[0].priceBulkCustomer|number_format(2, '.', ' ') }} </span></span> {{ product.fkdevise.title }} </br>
  233.                                                  ({{ product.priceProducts[0].nbrBulkProd }})  produit(s) minimum
  234.                                         {% endif %}
  235.                                         </td> #}
  236.                                         <td><div class="product-type-badges">{% for label in product.statetypeLabels %}<span class="badge bg-light text-dark">{{ label }}</span>{% endfor %}</div></td>
  237.                                     </tr>
  238.                                      <tr>
  239.                                         <th scope="row">Disponibilité</th>
  240.                                         <td>
  241.                                             {% if product.stock > 0  %}
  242.                                                 Disponible
  243.                                             {% else %}
  244.                                                 Disponible sur commande
  245.                                             {% endif %}
  246.                                             
  247.                                         </td>
  248.                                     </tr>
  249.                                     </tr>
  250.                                 </tbody>
  251.                             </table>
  252.                             <div class="product-detail-actions">
  253.                             <a href="{{ path('app_contact', {'product_id': product.id}) }}" class="btn btn-success button-contact"><i class="fas fa-file-invoice-dollar me-2" aria-hidden="true"></i>Demander un devis</a>
  254.                             <a href="{{ path('app_demo', {'product_id': product.id}) }}" class="btn btn-primary button-contact"><i class="fas fa-desktop me-2" aria-hidden="true"></i>Demander une démo</a>
  255.                             <a class="d-none" href="{{ path('app_product_panier', {'product': product.id}) }}"><button type="button" class="btn btn-success button-contact mb-2"><i class="fas fa-cart-plus me-2" aria-hidden="true"></i>Ajouter au panier</button></a>
  256.                             <a class="d-none" href="{{ path('app_product_list_panier') }}"><button type="button" class="btn btn-success button-contact mb-2"><i class="fas fa-list-check me-2" aria-hidden="true"></i>Liste de mes commandes</button></a>
  257.                             </div>
  258.                         </div>
  259.                     </div>
  260.                 </div>
  261.             </div>
  262.         </div>
  263.     </div>
  264. </main>
  265. {{ include('@FrontView/footer.html.twig') }}
  266. <!-- <script src="{{ asset('build/UtilityProductPoint.js') }}"></script>  -->
  267. {% endblock %}