templates/category/show.html.twig line 1

Open in your IDE?
  1. {% import "macros/product.html.twig" as productMacros %}
  3. {% extends 'base.html.twig' %}
  5. {% block title %}
  6. {{"general.category"|trans ~ " triwu_u" }}
  7. {% endblock %}
  9. {% block mainClass %}pt-32{% endblock %}
  11. {% block login %}{% endblock login %}
  13. {% block content %}
  14.     {% include 'components/header/categories.html.twig' %}
  15.     <aside id="sidebar-mobile" class="z-20 fixed text-sm block w-full tablet:hidden bg-white p-4 overflow-x-auto whitespace-nowrap border-b border-gray-700">
  16.             <ul class="flex">
  17.                 {% for categoryItem in categories %}
  18.                    {%if (category is defined and category is not null and categoryItem.id == category.id )%}
  19.                     <li class="">
  20.                         {# Verificar si la categoría actual es la misma que la del ítem en el loop #}
  21.                         
  22.                         {# Verificar si la categoría tiene subcategorías #}
  23.                         {% set hasSubcategories = categoryItem.subcategories is not empty %}
  24.                         
  25.                         {# Solo mostrar el detalle si la categoría tiene subcategorías #}
  26.                         {% if hasSubcategories %}
  27. {#
  28.                                 <li 
  29.                                     class="cursor-pointer p-2 rounded no-arrow text-xs
  30.                                     {% if isCurrentCategory %}
  31.                                         text-black font-bold hover:text-white
  32.                                     {% else %}
  33.                                         text-black hover:text-white no-arrow 
  34.                                     {% endif %}
  35.                                     ">
  36.                                     <a href="{{ path('product_category_show', {'slug': categoryItem.slug}) }}" 
  37.                                     class="uppercase">
  38.                                         {{ categoryItem.name | upper }}
  39.                                     </a>
  40.                                 </li>
  41. #}
  42.                                     {% for subcategoryB in categoryItem.subcategories %}
  43.                                         {% set isCurrentSubCategory = false%}
  44.                                         {% if (subcategory is defined and subcategory is not null  and subcategoryB.id == subcategory.id) %}
  45.                                             {% set isCurrentSubCategory = true%}
  46.                                         {%endif%}
  47.                                         <li class="text-sm hover:bg-primary/10 {% if isCurrentSubCategory %}!bg-primary/10{%endif%}" >
  48.                                             <a href="{{ path('product_category_show', {'slug': categoryItem.slug,'subcategorySlug': subcategoryB.slug}) }}" 
  49.                                             class="block p-2 rounded text-xs
  50.                                             {% if (subcategory is defined and subcategory is not null  and subcategoryB.id == subcategory.id) %}
  51.                                                 text-primary hover:text-primary
  52.                                             {% else %}
  53.                                                 text-black hover:text-primary
  54.                                             {% endif %}
  55.                                             ">
  56.                                                 {{ subcategoryB.name | capitalize }}
  57.                                             </a>
  58.                                         </li>
  59.                                     {% endfor %}
  60.                         {% else %}
  61. {#
  62.                             <a href="{{ path('product_category_show', {'slug': categoryItem.slug}) }}" 
  63.                             class="block p-2 rounded text-xs
  64.                             {% if isCurrentCategory %}
  65.                                 text-primary font-bold hover:text-primary 
  66.                             {% else %}
  67.                                 text-black hover:text-primary no-arrow 
  68.                             {% endif %}
  69.                             uppercase">
  70.                                 {{ categoryItem.name | upper }}
  71.                             </a>
  72. #}
  73.                         {% endif %}
  74.                     </li>
  75.                     {%endif%}
  76.                 {% endfor %}
  77.             </ul>
  78.         </aside>
  79.     <div class="flex ">
  80.         <!-- Menú vertical de categorías -->
  81.         
  82.         <aside id="sidebar-desktop" class="w-auto hidden desktop:block desktop:w-auto tablet:block  tablet:w-auto bg-white p-4 overflow-y-auto h-screen sticky top-0 border-r border-gray-700">
  83.             <ul class="list-none">
  84.                 {% for categoryItem in categories %}
  85.                     {% set isCurrentCategory = null %}
  86.                     {%if (category is defined and category is not null )%}
  87.                         {% set isCurrentCategory = (categoryItem.id == category.id)%}
  88.                     {%endif%}
  89.                     {% if hasSubcategories is defined%}{%else%}<a href="{{ path('product_category_show', {'slug': categoryItem.slug}) }}">{%endif%}
  90.                     <li class="pb-2 pt-2 border-b border-gray-300 hover:bg-primary/10 {% if isCurrentCategory %}!bg-primary/10{%endif%}">
  91.                         {# Verificar si la categoría actual es la misma que la del ítem en el loop #}
  92.                         
  93.                         {# Verificar si la categoría tiene subcategorías #}
  94.                         {% set hasSubcategories = categoryItem.subcategories is not empty %}
  95.                         
  96.                         {# Solo mostrar el detalle si la categoría tiene subcategorías #}
  97.                         {% if hasSubcategories %}
  98.                           
  99.                             <div class="group">
  100.                                 <a href="{{ path('product_category_show', {'slug': categoryItem.slug}) }}" >
  101.                                 <div class="cursor-pointer p-2 rounded  text-xs {% if isCurrentCategory %} text-primary font-bold hover:text-primary 
  102.                                     {% else %}text-black hover:text-primary {% endif %}
  103.                                     ">
  104.                                     
  105.                                         <span class="uppercase">
  106.                                            {{ categoryItem.name | upper }}
  107.                                         </span>
  108.                                     
  109.                                 </div>
  110.                                 </a>
  111.                                 <ul class="ml-4 {% if isCurrentCategory %}block{%else%}hidden{%endif%}">
  112.                                     {% for subcategoryB in categoryItem.subcategories %}
  113.                                         <li class="text-sm">
  114.                                             <a href="{{ path('product_category_show', {'slug': categoryItem.slug,'subcategorySlug': subcategoryB.slug}) }}" 
  115.                                             class="block p-2 rounded text-xs
  116.                                             {% if (subcategory is defined and subcategory is not null  and subcategoryB.id == subcategory.id) %}
  117.                                                 text-primary hover:text-primary
  118.                                             {% else %}
  119.                                                 text-black hover:text-primary
  120.                                             {% endif %}
  121.                                             ">
  122.                                                 {{ subcategoryB.name | capitalize }}
  123.                                             </a>
  124.                                         </li>
  125.                                     {% endfor %}
  126.                                 </ul>
  127.                             </div>
  128.                             
  129.                         {% else %}
  130.                             <a href="{{ path('product_category_show', {'slug': categoryItem.slug}) }}" 
  131.                             class="block p-2 rounded text-xs
  132.                             {% if isCurrentCategory %}
  133.                                 text-primary font-bold hover:text-primary
  134.                             {% else %}
  135.                                 text-black hover:text-primary no-arrow 
  136.                             {% endif %}
  137.                             uppercase">
  138.                                 {{ categoryItem.name | upper }}
  139.                             </a>
  140.                         {% endif %}
  141.                     </li>{% if hasSubcategories is defined%}{%else%}</a>{%endif%}
  142.                 {% endfor %}
  143.             </ul>
  144.         </aside>
  146.         <section class="mobile:mt-20 relative tablet:max-w-screen-xl mx-auto mb-12 px-edge ">
  147.             <section class="space-y-3 pt-2">
  148.                 {% if subcategory is defined and subcategory is not null %}
  149.                     <h5><a href="{{ path('app_index') }}" class="hover:text-primary">{{'general.categorias' | trans}}</a> > <a href="{{ path('product_category_show', {'slug': category.slug}) }}" class="hover:text-primary">{{category.name | capitalize}}</a> > <a href="{{ path('product_category_show', {'slug': category.slug,'subcategorySlug': subcategory.slug}) }}" class="text-primary">{{subcategory.name | capitalize}}</a></h5>
  150.                 {%else%}
  151.                     <h5><a href="{{ path('app_index') }}" class="hover:text-primary">{{'general.categorias' | trans}}</a> > <a href="{{ path('product_category_show', {'slug': category.slug}) }}" class="text-primary">{{category.name | capitalize}}</a></h5>
  152.                 {%endif%}
  153.                 <h3 class="text-2xl tablet:text-3xl">
  154.                     <span class="font-bold">{{ subcategory is defined and subcategory is not null ? subcategory.name : category.name }}</span>
  155.                 </h3>
  156.     {#
  157.                 {{ form_start(searchForm) }}
  158.                     {{ form_row(searchForm.province) }}
  159.                     <button type="submit">Filtrar</button>
  160.                 {{ form_end(searchForm) }}
  161.     #}
  162.                 <div class="pb-edge grid gap-3 grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 tablet:gap-6 relative z-10">
  163.                     {% for product in products %}
  164.                         {{ productMacros.productCard(product,groupsProducts) }}
  165.                     {% endfor %}
  166.                 </div>
  167.             </section>
  168.         </section>
  169.     </div>
  171.     <div id="ConfirmProduct" data-modal="confirmProduct" tabindex="-1" aria-hidden="true" class="modal-app">
  172.         <div class="modal-app__backdrop"></div>
  173.         <div class="modal-app__container">
  174.             <div class="modal-app__content">
  175.                 <header>
  176.                     <h3 class="text-xl font-bold desktop:text-2xl">
  177.                         {{ "product.confirm.title" | trans }} 
  178.                     </h3>
  179.                 </header>
  181.                 <main class="leading-5 mt-3 mb-4">
  182.                     <p>{{ "product.confirm.desc" | trans }} </p>
  183.                 </main>
  185.                 <a href="{{ path('app_product_add_to_shopping_cart', {'id': '#', 'isIndividual': false, 'newCart': true}) }}" class="ConfirmButton btn btn--primary btn--md btn-buy product-card__price-block__btn">
  186.                     {{ "product.confirm.btn" | trans }} 
  187.                 </a>
  188.                 <button id="CloseConfirmProduct" type="button" class="btn btn--md w-full mt-1">
  189.                     {{ "product.confirm.cancel" | trans }} 
  190.                 </button>
  191.             </div>
  192.         </div>
  193.     </div>
  194. {% endblock %}