templates/front/produit/index.html.twig line 1

Open in your IDE?
  1. {% extends 'baseFront.html.twig' %}
  3. {% block title %}Produits{% endblock %}
  5. {% block stylesheets %}
  6.     {{ encore_entry_link_tags('appFront_produit') }}
  7. {% endblock %}
  9. {% block body %}
  10. <main class="page catalog-page">
  11.     <section class="clean-block clean-catalog dark">
  12.         <div class="container contain">
  13.             <div class="content">
  14.                 <div class="row">
  15.                     <!-- Debut du flitre -->
  16.                     <div class="col-md-3">
  17.                         <!-- si  le format de l'ecran est de taille moyen alors il aplique cette filtre -->
  18.                         <div class="d-none d-md-block">
  19.                             <h3 style="color: #333333;">Filtre</h3>
  20.                             <hr>
  21.                             <div class="filters" style="padding-left: 0px;padding-top: 10px;">
  22.                                 <div class="filter-item">
  23.                                     <h3>Prix</h3>
  25.                                     <div class="range">
  26.                                         <div class="d-flex justify-content-between range-price">
  28.                                             <div><span id="minSpan">0</span> Ar</div>
  29.                                             <div><span id="maxSpan">6000000</span> Ar</div>
  31.                                         </div>
  32.                                         <div class="range-slider">
  33.                                             <span class="range-selected"></span>
  34.                                         </div>
  35.                                         <div class="range-input">
  36.                                             <input type="range" class="min" min="0" max="6000000" value="0"
  37.                                                 step="100">
  38.                                             <input type="range" class="max" min="0" max="6000000" value="6000000"
  39.                                                 step="100">
  40.                                         </div>
  41.                                     </div>
  42.                                 </div>
  43.                                 <div class="filter-item">
  44.                                     <div class="filter-item">
  45.                                         <h3>Categories</h3>
  46.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  47.                                                 id="formCheck-10"><label class="form-check-label"
  48.                                                 for="formCheck-1">Phones</label></div>
  49.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  50.                                                 id="formCheck-11"><label class="form-check-label"
  51.                                                 for="formCheck-2">Laptops</label></div>
  52.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  53.                                                 id="formCheck-12"><label class="form-check-label"
  54.                                                 for="formCheck-3">PC</label></div>
  55.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  56.                                                 id="formCheck-13"><label class="form-check-label"
  57.                                                 for="formCheck-4">Tablets</label></div>
  58.                                     </div>
  59.                                 </div>
  60.                                 <div class="filter-item">
  61.                                     <h3>Brands</h3>
  62.                                     <div class="form-check"><input class="form-check-input" type="checkbox"
  63.                                             id="formCheck-5"><label class="form-check-label"
  64.                                             for="formCheck-5">Samsung</label></div>
  65.                                     <div class="form-check"><input class="form-check-input" type="checkbox"
  66.                                             id="formCheck-6"><label class="form-check-label"
  67.                                             for="formCheck-6">Apple</label></div>
  68.                                     <div class="form-check"><input class="form-check-input" type="checkbox"
  69.                                             id="formCheck-7"><label class="form-check-label"
  70.                                             for="formCheck-7">HTC</label></div>
  71.                                 </div>
  72.                                 <div class="filter-item">
  73.                                     <h3>OS</h3>
  74.                                     <div class="form-check"><input class="form-check-input" type="checkbox"
  75.                                             id="formCheck-8"><label class="form-check-label"
  76.                                             for="formCheck-8">Android</label></div>
  77.                                     <div class="form-check"><input class="form-check-input" type="checkbox"
  78.                                             id="formCheck-9"><label class="form-check-label"
  79.                                             for="formCheck-9">iOS</label></div>
  80.                                 </div>
  81.                             </div>
  82.                         </div>
  83.                         <!-- fin du filtre pour les ecrans de taille moyen -->
  86.                         <!-- mais si le format est de taille petit-->
  87.                         <div class="d-md-none">
  89.                             <!-- debut du boutton de filtre si taille ecran petit -->
  90.                             <a class="btn btn-link text-center d-md-none filter-collapse"
  91.                                 data-bs-toggle="collapse" aria-expanded="false" aria-controls="filters"
  92.                                 href="#filters" role="button">Filtre<i class="icon-arrow-down filter-caret"></i></a>
  93.                             <div class="collapse" id="filters">
  94.                                 <div class="filters">
  95.                                     <div class="filter-item">
  96.                                         <h3>Prix</h3>
  98.                                         <!-- debut du range pour le fourchette du prix -->
  99.                                         <div class="range">
  100.                                             <div class="d-flex justify-content-between range-price">
  102.                                                 <div><span id="minSpan2">0</span> Ar</div>
  103.                                                 <div><span id="maxSpan2">6000000</span> Ar</div>
  105.                                             </div>
  106.                                             <div class="range-slider2">
  107.                                                 <span class="range-selected2"></span>
  108.                                             </div>
  109.                                             <div class="range-input2">
  110.                                                 <input type="range" class="min2" min="0" max="6000000"
  111.                                                     value="0" step="100">
  112.                                                 <input type="range" class="max2" min="0" max="6000000"
  113.                                                     value="6000000" step="100">
  114.                                             </div>
  115.                                         </div>
  116.                                         <!-- fin du range pour le fourchette du prix -->
  119.                                     </div>
  121.                                     <!-- voici les filtres ou il y a les checkbox -->
  122.                                     <div class="filter-item">
  123.                                         <h3>Categories</h3>
  124.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  125.                                                 id="formCheck-1"><label class="form-check-label"
  126.                                                 for="formCheck-1">Phones</label></div>
  127.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  128.                                                 id="formCheck-2"><label class="form-check-label"
  129.                                                 for="formCheck-2">Laptops</label></div>
  130.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  131.                                                 id="formCheck-3"><label class="form-check-label"
  132.                                                 for="formCheck-3">PC</label></div>
  133.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  134.                                                 id="formCheck-4"><label class="form-check-label"
  135.                                                 for="formCheck-4">Tablets</label></div>
  136.                                     </div>
  137.                                     <div class="filter-item">
  138.                                         <h3>Brands</h3>
  139.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  140.                                                 id="formCheck-5"><label class="form-check-label"
  141.                                                 for="formCheck-5">Samsung</label></div>
  142.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  143.                                                 id="formCheck-6"><label class="form-check-label"
  144.                                                 for="formCheck-6">Apple</label></div>
  145.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  146.                                                 id="formCheck-7"><label class="form-check-label"
  147.                                                 for="formCheck-7">HTC</label></div>
  148.                                     </div>
  149.                                     <div class="filter-item">
  150.                                         <h3>OS</h3>
  151.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  152.                                                 id="formCheck-8"><label class="form-check-label"
  153.                                                 for="formCheck-8">Android</label></div>
  154.                                         <div class="form-check"><input class="form-check-input" type="checkbox"
  155.                                                 id="formCheck-9"><label class="form-check-label"
  156.                                                 for="formCheck-9">iOS</label></div>
  157.                                     </div>
  158.                                     <!-- fin du filtre avec checkbox -->
  161.                                 </div>
  162.                             </div>
  163.                         </div>
  164.                         <!-- fin du filtre pour les ecrans de taille petit -->
  165.                     </div>
  166.                     <div class="col-md-9 col-xl-9 contenu">
  167.                         <div class="products">
  168.                             <!-- debut du header avec le background bleu avec la photo du telephone  -->
  169.                             <div class="col col-header">
  170.                                 <div
  171.                                     class="d-flex d-lg-flex justify-content-center align-items-center justify-content-lg-end align-items-lg-end header-contenu">
  172.                                     <div class="d-grid justify-content-lg-end">
  173.                                         <div class="title-head">
  174.                                             <h2 class="d-lg-flex justify-content-lg-end text-white">PREMIUM</h2>
  175.                                         </div>
  176.                                         <div>
  177.                                             <h5 class="d-lg-flex justify-content-lg-end text-white">A PETIT PRIX</h5>
  178.                                         </div>
  179.                                     </div><img class="img-phone" src="/catalogue/img/img.png"
  180.                                         style="transform: translateY(-20px) scaleX(1.15) scaleY(1.15);">
  181.                                 </div>
  182.                             </div>
  183.                             <!-- fin du style -->
  184.                             <!-- debut liste telephone -->
  185.                             <div class="col">
  186.                                 <div class="card-phone">
  187.                                     <div class="row">
  189.                                         <!-- debut card telephone-->
  190.                                         <!-- debut du boucle -->
  191.                                         {% for produit in produits %}
  192.                                         <div class="col-lg-4">
  193.                                             <div class="premium"><span>PREMIUM</span></div>
  194.                                             <div class="clean-product-item">
  195.                                                 <div class="d-flex justify-content-between">
  196.                                                     <div>
  197.                                                         <div class="model"><span>{{ produit.nom }}</span></div>
  198.                                                         <div class="marque"><span>&nbsp;</span></div>
  199.                                                     </div>
  200.                                                     <div
  201.                                                         class="d-xl-flex justify-content-xl-center align-items-xl-center">
  202.                                                         <a class="coeur" href="#"><i class="fa fa-heart-o"></i></a>
  203.                                                     </div>
  204.                                                 </div>
  205.                                                 {% set imgProduit = asset('catalogue/img/samsung.png') %}
  206.                                                 {% if 'itel' in produit.nom|lower %}{% set imgProduit = asset('catalogue/img/itel.png') %}{% endif %}
  207.                                                 {% if 'infinix' in produit.nom|lower %}{% set imgProduit = asset('catalogue/img/detail.png') %}{% endif %}
  208.                                                 {% if produit.logo is not null and produit.logo is not empty %}{% set imgProduit = produit.logo %}{% endif %}
  209.                                                 <div class="image"><span class="float-start device">4G</span><img
  210.                                                         class="img-fluid mx-auto img-produit" src="{{ imgProduit }}"></div>
  211.                                                 <hr>
  212.                                                 <div class="prix">
  213.                                                     <div class="d-table" style="width: 50%;">
  214.                                                         <div class="d-xl-flex justify-content-xl-start"><span
  215.                                                                 style="text-align: right;font-weight: bold;">{{ produit.prixDeVente | number_format(0, ',', ' ') }}
  216.                                                                 Ar</span></div>
  217.                                                         {# <div class="d-xl-flex justify-content-xl-end rating"><span
  218.                                                                 style="font-size: 14px;text-decoration:  line-through;">350
  219.                                                                 000 Ar</span></div> #}
  220.                                                     </div>
  221.                                                     <div><button class="btn btn-primary btn-details btn-productDetail" type="button" data-id="{{ produit.id }}">Details</button>
  222.                                                     </div>
  223.                                                 </div>
  224.                                                 <div class="rating">
  225.                                                     <div class="rating"><img src="/catalogue/img/star.svg"><img
  226.                                                             src="/catalogue/img/star.svg"><img
  227.                                                             src="/catalogue/img/star.svg"><img
  228.                                                             src="/catalogue/img/star-half-empty.svg"><img
  229.                                                             src="/catalogue/img/star-empty.svg"></div>
  230.                                                     <div><button class="btn btn-primary btn-want btn-productBasket" type="button" data-id="{{ produit.id }}" >Je le veux</button>
  231.                                                     </div>
  232.                                                 </div>
  233.                                             </div>
  234.                                         </div>
  235.                                         {% endfor %}
  236.                                         <!-- fin du boucle -->
  237.                                         <!-- fin du card telephone -->
  238.                                     </div>
  239.                                 </div>
  240.                             </div>
  241.                             <!-- fin liste telephone -->
  242.                         </div>
  243.                     </div>
  244.                     <!-- fin du contenu des listes des produits -->
  245.                 </div>
  246.             </div>
  247.         </div>
  248.     </section>
  249. </main>
  250. <!-- Modal -->
  251. <div class="modal fade" id="catalogueModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="catalogueLabel" aria-hidden="true">
  252.     <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl">
  253.         <div class="modal-content border-radius-0">
  254.             <div class="modal-header px-4 border-none" style="background-color: #f3f3f3">
  255.                 <h3 class="modal-title text-dark" id="catalogueLabel"></h3>
  256.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  257.             </div>
  258.             <div class="modal-body pt-4 modal-detail"></div>
  259.         </div>
  260.     </div>
  261. </div>
  262. <!-- Modal -->
  263. <div class="modal fade" id="basketModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="basketLabel" aria-hidden="true" style="border: 16px none rgb(52, 48, 255) ;">
  264.     <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
  265.         <div class="modal-content border-radius-0">
  266.             <div class="modal-header text-center" style="background-color: #f3f3f3">
  267.                 <h5 class="modal-title text-dark w-100" id="basketLabel"></h5>
  268.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  269.             </div>
  270.             <div class="modal-body modal-body-panier"></div>
  271.             <div class="modal-footer modal-footer-panier"></div>
  272.         </div>
  273.     </div>
  274. </div>
  276. <div id="loader">
  277.     <div class="loading">
  278.         <span>Chargement...</span>
  279.     </div>
  280. </div>
  282. {# JS variable #}
  283. <div id="url-produit-catalogue-show" value="{{ path('app_front_produit_show', { id: -1 }) }}"></div>
  284. <div id="url-produit-catalogue-basket" value="{{ path('app_front_produit_basket', { type: 'mode' }) }}"></div>
  285. <div id="url-produit-catalogue-cart" value="{{ path("app_front_panier") }}"></div>
  286. <div id="url-login" value="{{ path("app_login", { from: 'front' })  }}"></div>
  287. {% endblock %}
  289. {% block javascripts %}
  290.     {{ encore_entry_script_tags('appFront_produit') }}
  291. {% endblock %}