templates/order/index.html.twig line 110

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Pedir - Restaurante{% endblock %}
  5. {% block body %}
  7. <style>
  9.     #confirmation-message{
  10.         transition: opacity 0.5s ease;
  11.     }
  13.     /* Estilo general del contenedor */
  14.     .filter-container {
  15.       position: sticky;
  16.       z-index: 1000;
  17.       background: rgba(255, 255, 255, 0.1); /* Fondo transparente */
  18.       padding: 15px;
  19.       border-radius: 10px;
  20.     }
  22.     /* Título del dropdown con separador negro y flecha */
  23.     .filter-title {
  24.       background: none;
  25.       border: none;
  26.       font-size: 16px;
  27.       font-weight: bold;
  28.       cursor: pointer;
  29.       width: 100%;
  30.       text-align: left;
  31.       padding: 10px;
  32.       display: flex;
  33.       justify-content: space-between;
  34.       align-items: center;
  35.       border-bottom: 2px solid black; /* Línea separadora negra */
  36.     }
  38.     .filter-title:hover {
  39.       background: rgba(255, 255, 255, 0.1);
  40.     }
  42.     /* Icono de la flecha */
  43.     .filter-title .arrow {
  44.       transition: transform 0.3s ease;
  45.     }
  47.     /* Rango de precio */
  48.     .slider-container {
  49.       padding: 10px;
  50.     }
  52.     input[type="range"] {
  53.       width: 100%;
  54.       accent-color: red;
  55.     }
  57.     input[type="range"]::-webkit-slider-thumb {
  58.       background: black;
  59.     }
  61.     /* Checkboxes */
  62.     .checkbox-container {
  63.       padding: 10px;
  64.     }
  66.     .form-check-label {
  67.         margin-bottom: 10px;
  68.     }
  70.     .filter-container .btn-search{
  71.         border-start-end-radius: 30px;
  72.         border-end-end-radius: 30px;
  73.         background: white;
  74.         border: 0px;
  75.     }
  76.     
  77.     /* Personalización del checkbox */
  78.     .category-checkbox {
  79.         appearance: none; /* Elimina el diseño predeterminado */
  80.         width: 18px;
  81.         height: 18px;
  82.         border: 2px solid #E63946; /* Borde rojo */
  83.         border-radius: 4px;
  84.         display: inline-block;
  85.         position: relative;
  86.         cursor: pointer;
  87.     }
  89.     /* Cuando está marcado, cambiar fondo y mostrar un check */
  90.     .category-checkbox:checked {
  91.         background-color: #E63946; /* Fondo rojo */
  92.         border: 2px solid #E63946;
  93.     }
  95.     /* Agregar un icono de check al marcar */
  96.     .category-checkbox:checked::after {
  97.         color: white;
  98.         font-size: 14px;
  99.         font-weight: bold;
  100.         position: absolute;
  101.         top: 50%;
  102.         left: 50%;
  103.         transform: translate(-50%, -50%);
  104.     }
  105.   </style>
  107. <body>
  109. <!-- Header -->
  110. {{ render(controller('App\\Controller\\HeaderController::index')) }}
  113. <div class="container container-custom order-container mt-4">
  114.     <div id="confirmation-message" class="container alert alert-success d-none fixed-top" role="alert" style="margin-top: 90px">
  115.         ¡Producto añadido al carrito correctamente!
  116.     </div>
  117.     <div class="row">
  118.         <div class="col-12 mb-3 title-block">
  119.             <nav aria-label="breadcrumb">
  120.                 <ol class="breadcrumb">
  121.                     <li class="breadcrumb-item"><a class="text-decoration-none section-title" href="/">Home</a></li>
  122.                     
  123.                     {% if app.request.get('category') %}
  124.                         {% set selectedCategoryId = app.request.get('category') %}
  125.                         {% set selectedCategory = categories|filter(c => c.id == selectedCategoryId)|first %}
  126.                         
  127.                         <li class="breadcrumb-item"><a class="text-decoration-none section-title" href="{{ path('app_order') }}">Productos</a></li>
  128.                         {% if selectedCategory %}
  129.                             <li class="breadcrumb-item active" aria-current="page">{{ selectedCategory.name }}</li>
  130.                         {% endif %}
  131.                     {% else %}
  132.                         <li class="breadcrumb-item active" aria-current="page">Productos</li>
  133.                     {% endif %}
  134.                 </ol>
  135.             </nav>
  136.             <h1 class="section-title category-section my-4 ">Nuestros Productos</h1>
  137.         </div>
  138.         <!-- Productos -->
  139.         <div class="col-12 col-lg-12" style="min-height: 50vh">
  140.             <div class="row align-items-start" >
  141.                     {% include "components/products.html.twig" with {'products': products} %}
  142.             </div>
  143.         </div>
  144.     </div>
  145. </div>
  146.     
  148.     
  149. {# Botón flotante para abrir el offcanvas de filtros #}
  150. <button class="btn btn-primary rounded-circle position-fixed " 
  151.         style="bottom: 20px; left: 20px; z-index: 1050; width: 50px; height: 50px;" 
  152.         type="button" 
  153.         data-bs-toggle="offcanvas" 
  154.         data-bs-target="#filterOffcanvas" 
  155.         aria-controls="filterOffcanvas">
  156.     <i class="bi bi-filter" style="font-size: 1.5rem;"></i>
  157. </button>
  159. {# Offcanvas que contendrá los filtros #}
  160. <div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel">
  161.   <div class="offcanvas-header">
  162.     <h5 class="offcanvas-title" id="filterOffcanvasLabel">Filtros</h5>
  163.     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  164.   </div>
  165.   <div class="offcanvas-body">
  166.       <div class="filter-container pt-0">
  167.           <form method="GET" action="{{ path('app_order') }}">
  168.               <button type="submit" class="btn btn-primary w-100 mb-3">Filtrar</button>
  170.               <!-- Filtro de Buscador -->
  171.               <button class="filter-title" data-bs-toggle="collapse" data-bs-target="#filter-search" aria-expanded="true" type="button">
  172.                   Filtrar por Nombre <span class="arrow">▼</span>
  173.               </button>
  174.               <div id="filter-search" class="collapse show">
  175.                   <div class="my-3 d-flex">
  176.                       <div class="input-group input-group-lg">
  177.                           <input type="search" name="search" class="form-control fs-6 bar-search" placeholder="Nombre..." 
  178.                               aria-label="Nombre" value="{{ app.request.get('search') }}">
  179.                       </div>
  180.                   </div>
  181.               </div>
  183.               <!-- Filtro de Precio -->
  184.               <button class="filter-title" data-bs-toggle="collapse" data-bs-target="#filter-price" aria-expanded="true" type="button">
  185.                   Filtrar por Precio <span class="arrow">▼</span>
  186.               </button>
  187.               <div id="filter-price" class="collapse show">
  188.                   <div class="slider-container">
  189.                       <input type="range" name="price" min="0" max="{{ max_price }}" step="1" id="priceRange"
  190.                           value="{{ app.request.get('price') ?: max_price }}">
  191.                       <p class="fs-6">Precio: <span id="priceValue">{{ app.request.get('price') ?: max_price }}</span>€</p>
  192.                   </div>
  193.               </div>
  195.               <!-- Filtro de Categorías -->
  196.               <button class="filter-title" data-bs-toggle="collapse" data-bs-target="#filter-category" aria-expanded="true" type="button">
  197.                   Filtrar por Categorías <span class="arrow">▼</span>
  198.               </button>
  199.               <div id="filter-category" class="collapse show">
  200.                   <div class="checkbox-container">
  201.                       {% for category in categories %}
  202.                           <div class="form-check">
  203.                               <input class="form-check-input category-checkbox" type="checkbox" name="category" id="cat{{ category.id }}" value="{{ category.id }}"
  204.                                   {% if app.request.get('category') == category.id|trans %}checked{% endif %}>
  205.                               <label class="form-check-label" for="cat{{ category.id }}">{{ category.name }}</label>
  206.                           </div>
  207.                       {% endfor %}
  208.                   </div>
  209.               </div>
  210.           </form>
  211.       </div>
  212.   </div>
  213. </div>
  214.     
  215.     
  216. </body>
  218. <script>
  219.     document.getElementById('priceRange').addEventListener('input', function() {
  220.         document.getElementById('priceValue').innerText = this.value;
  221.     });
  222. </script>
  224. <script>
  225.     document.addEventListener("DOMContentLoaded", function () {
  226.         const checkboxes = document.querySelectorAll(".category-checkbox");
  228.         checkboxes.forEach(checkbox => {
  229.             checkbox.addEventListener("click", function () {
  230.                 if (this.checked) {
  231.                     checkboxes.forEach(cb => {
  232.                         if (cb !== this) cb.checked = false; // Desmarca los otros
  233.                     });
  234.                 }
  235.             });
  236.         });
  237.     });
  238. </script>
  240. {% endblock %}