templates/defaut/products.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3.  {% block head_css %}
  4.      {{ parent() }}
  6.      <link rel="stylesheet" type="text/css"
  7.            href="{{ asset('assets/vendor/choices/css/choices.min.css') }}">
  9.          <style>
  11.              @media only screen and (max-width: 754px) and (min-width: 320px) {
  12.                  .col-md-3 {
  13.                      width: 33%;
  14.                      width: calc(100%/2) !important;
  15.                      flex: none;
  16.                  }
  17.              }
  19.              .card-hover:hover {
  20.                  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  21.                  transform: translateY(-5px);
  22.                  transition: all 0.3s ease-out;
  23.              }
  25.              .card-hover:hover h2 {
  26.                  text-shadow: unset;
  27.                  -webkit-transform: translateY(0);
  28.                  -ms-transform: translateY(0);
  29.                  transform: translateY(0);
  30.                  background: #151515;
  31.                  color: #dadada;
  32.                  top: 0%;
  33.                  margin: 0;
  34.                  border: 1px solid #2d2d2d;
  35.                  border-bottom-color: rgb(45, 45, 45);
  36.                  border-bottom-style: solid;
  37.                  border-bottom-width: 1px;
  38.                  border-bottom: unset;
  39.              }
  41.              .type-item {
  42.                  position: absolute;
  43.                  top: 20%;
  44.                  left: 50%;
  45.                  transform: translate(-50%, -50%);
  46.                  z-index: 2;
  47.                  background-color: #0000008c;
  48.                  font-size: 13px;
  49.                  color: #fff;
  50.                  width: 95%;
  51.                  text-align: center;
  52.                  -webkit-transition: all .2s ease-in;
  53.                  transition: all .2s ease-in;
  54.              }
  57.              .card-hover:hover .type-item {
  58.                  transform: translate(-50%, -60%);
  59.              }
  61.              .service-card:hover h2 {
  62.                  position: absolute;
  63.                  top: 0px;
  64.                  left: 50%;
  65.                  transform: translate(-50%, 0%);
  66.                  transition: all 0.3s ease-out;
  67.              }
  69.          </style>
  71.  {% endblock %}
  73. {% block title %} {% endblock %}
  75. {% block body %}
  77.     <!-- =======================
  78.     Page Banner START -->
  79.     <section class="py-0">
  80.         <div class="container">
  81.             <div class="row">
  82.                 <div class="col-12">
  84.                         <div class="bg-light p-4 text-center rounded-3">
  85.                             <h1 class="m-0"> {{ service }} {{ category }} </h1>
  86.                             <!-- Breadcrumb -->
  87.                             <div class="d-flex justify-content-center">
  88.                                 <nav aria-label="breadcrumb">
  89.                                     <ol class="breadcrumb breadcrumb-dots mb-0">
  90.                                         <li class="breadcrumb-item"><a href="{{ path('app_defaut') }}">Accueil</a></li>
  91.                                        {# <li class="breadcrumb-item"><a
  92.                                                     href="{{ path('app_get_category', {slug: categorie.slug}) }}">{{ categorie.name }}</a>
  93.                                         </li>#}
  94.                                         <li class="breadcrumb-item active" aria-current="page"></li>
  95.                                     </ol>
  96.                                 </nav>
  97.                             </div>
  98.                         </div>
  99.                 </div>
  100.             </div>
  101.         </div>
  102.     </section>
  103.     <!-- =======================
  104.     Page Banner END -->
  105.     <!-- =======================
  106. Page content START -->
  108.     <section class="pt-5">
  109.         <div class="container">
  110.             <!-- Content and button -->
  111.             <div class="d-sm-flex justify-content-sm-between align-items-center mb-4">
  112.                 <h5 class="mb-2 mb-sm-0"></h5>
  113.             </div>
  114.             <div class="row">
  116.                 {% for product in categories %}
  117.                     <!-- Card item START -->
  118.                     <div class="col-md-3 mb-3 service-card">
  119.                         <div class="card bg-transparent card-hover">
  120.                             <a href="{{ path('app_get_product', {service: product.slug,category:product.slugcategory, slug: product.slugquality}) }}">
  122.                                 <div class="position-relative">
  123.                                     <!-- Image -->
  124.                                     <img src="/document/{{ product.socialnetwork|lower }}/category/{{ category|lower }}.svg" class="card-img" alt="{{ product.quality }}">
  125.                                     <!-- Overlay -->
  126.                                     <span class="badge type-item p-2 badge-pill">
  127.                                            <h2> </h2> {{ product.quality }}
  128.                                         </span>
  129.                                     <div class="card-img-overlay d-flex flex-column p-3">
  130.                                         <div class="w-100 mt-auto text-end">
  131.                                         </div>
  132.                                     </div>
  133.                                 </div>
  134.                             </a>
  135.                             {#<div class="card-body text-center">
  136.                                     <h5 class="card-title"><a href="{{ path('app_get_service', {slug: socialNetwork}) }}">{{ socialNetwork }}</a></h5>
  137.                                     <p class="mb-2"></p>
  138.                                     <h5 class="card-title"><a href="{{ path('app_get_service', {slug: socialNetwork}) }}" class="btn btn-primary">SECTIONNER</a></h5>
  139.                                 </div>#}
  140.                         </div>
  141.                         {# <div class="service-card-text">
  142.                                 <p>Texte à ajouter</p>
  143.                             </div>#}
  144.                     </div>
  146.                     {#{% for category in servicecategory.categories %}
  147.                         <div class="col-sm-6 col-lg-4 col-xl-3">
  148.                             <div class="card shadow">
  149.                                 <!-- Image -->
  150.                                 <a href="{{ path('app_get_category', {slug: category.slug}) }}">
  151.                                 <img src="{{ vich_uploader_asset(category,'imageFile')  }}" class="card-img-top" alt="{{ servicecategory.name }}">
  152.                                 </a>
  153.                                 <div class="card-body pb-0">
  154.                                     <!-- Badge and favorite -->
  155.                                     <div class="d-flex justify-content-between mb-2">
  156.                                         <a href="#" class="badge bg-success bg-opacity-10 text-success">{{ servicecategory.name }}</a>
  157.                                         <a href="#" class="text-danger"><i class="fas fa-heart"></i></a>
  158.                                     </div>
  159.                                     <!-- Title -->
  160.                                     <h5 class="card-title fw-normal"><a href="{{ path('app_get_category', {slug: category.slug}) }}">{{ category.name }}</a></h5>
  161.                                     <p class="mb-2 text-truncate-2"></p>
  163.                                 </div>
  164.                                 <!-- Card footer -->
  165.                                 <div class="card-footer pt-0 pb-3">
  166.                                     <hr>
  167.                                     <div class="d-flex justify-content-between ">
  168.                                         <!-- Rating star -->
  169.                                         <ul class="list-inline mb-0">
  170.                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  171.                                             </li>
  172.                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  173.                                             </li>
  174.                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  175.                                             </li>
  176.                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  177.                                             </li>
  178.                                             <li class="list-inline-item me-0 small"><i
  179.                                                         class="fas fa-star-half-alt text-warning"></i></li>
  180.                                             <li class="list-inline-item ms-2 h6 fw-light mb-0"></li>
  181.                                         </ul>
  182.                                     </div>
  183.                                 </div>
  184.                             </div>
  185.                         </div>#}
  186.                 {% else %}
  188.                     {# {% for servicecategory in service_category %}
  190.                             <div class="col-12 text-center">
  191.                             <!-- Subtitle -->
  192.                             <h2>La catégorie <span class="text-danger"> {{ servicecategory.name|lower }}</span>  est actuellement vide</h2>
  193.                             <!-- info -->
  194.                             <p class="mb-0">Consultez tous les catégories disponibles et achetez ceux qui répondent à vos besoins.</p>
  195.                             <!-- Button -->
  196.                             <a href="{{ path('app_defaut') }}" class="btn btn-primary mt-4 mb-0">Retour à l'accueil</a>
  197.                         </div>
  198.                         {% endfor %}#}
  199.                     <!-- Card item END -->
  200.                 {% endfor %}
  201.             </div>
  202.         </div>
  203.     </section>
  205.     <section class="py-5">
  206.         <div class="container">
  207.             <div class="row">
  208.                 <!-- Main content START -->
  209.                 <div class="col-12">
  211.                     <div class="row g-4">
  213.                         {#{% for categorie in categories %}#}
  214.                         <!-- Book Grid START -->
  216.                         {#{% for product in categorie.products %}
  217.                         <!-- Card item START -->
  218.                         <div class="col-sm-6 col-lg-4 col-xl-3">
  219.                             <div class="card shadow h-100">
  220.                                 <div class="position-relative">
  221.                                     <!-- Image -->
  222.                                     <img src="{{ vich_uploader_asset(product,'imageFile')  }}" class="card-img-top" width="300px" height="300px" alt="book image">
  223.                                     <!-- Overlay -->
  224.                                     <div class="card-img-overlay d-flex z-index-0 p-3">
  225.                                         <!-- Card overlay Top -->
  226.                                         <div class="w-100 mb-auto d-flex justify-content-end">
  227.                                             <!-- Card format icon -->
  228.                                             <div class="icon-md bg-dark rounded-circle fs-5">
  229.                                                 <a href="#" class="text-white"><i class="bi bi-hdd-network"></i></a>
  230.                                             </div>
  231.                                         </div>
  232.                                     </div>
  233.                                 </div>
  236.                                 <!-- Card body -->
  237.                                 <div class="card-body px-3">
  238.                                     <!-- Title -->
  239.                                     <h5 class="card-title mb-0">
  240.                                         <a href="{{ path('app_get_product', {slug: product.slug}) }}" class="stretched-link">{{ product.name }}</a>
  241.                                     </h5>
  242.                                 </div>
  244.                                 <!-- Card footer -->
  245.                                 <div class="card-footer pt-0 px-3">
  246.                                     <div class="d-flex justify-content-between align-items-center">
  247.                                         <span class="h6 fw-light mb-0"></span>
  248.                                         <!-- Price -->
  249.                                         <h5 class="text-success mb-0">{{ product.princeMin }} €</h5>
  250.                                     </div>
  251.                                 </div>
  252.                             </div>
  253.                         </div>
  254.                         <!-- Card item END -->
  255.                         {% else %}
  257.                             {% for servicecategory in categories %}
  259.                                 <div class="col-12 text-center">
  260.                                     <!-- Subtitle -->
  261.                                     <h2>La catégorie <span class="text-danger"> {{ servicecategory.name|lower }}</span>  est actuellement vide</h2>
  262.                                     <!-- info -->
  263.                                     <p class="mb-0">Consultez tous les catégories disponibles et achetez ceux qui répondent à vos besoins.</p>
  264.                                     <!-- Button -->
  265.                                     <a href="{{ path('app_defaut') }}" class="btn btn-primary mt-4 mb-0">Retour à l'accueil</a>
  266.                                 </div>
  267.                             {% endfor %}
  268.                         {% endfor %}
  270.                         {% endfor %}#}
  271.                     </div>
  272.                     <!-- Book Grid END -->
  274.                 </div>
  275.                 <!-- Main content END -->
  276.             </div><!-- Row END -->
  277.         </div>
  278.     </section>
  279.     <!-- =======================
  280.     Page content END -->
  283. {% endblock %}
  285. {% block head_js %}
  286.     {{ parent() }}
  288.     <script src="{{ asset('assets/vendor/choices/js/choices.min.j') }}"></script>
  290. {% endblock %}