templates/category/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Category{% endblock %}
  5. {% block body %}
  6. {% include('partials/_breadcrumbs.html.twig') with {
  7. hero_title: "Category",
  8. hero_title_breadcrumb: "Category"
  9. } %}
  10. <section class="mt-5 mb-5">
  11. <div class="container" style="height: auto;">
  12. <div class="container-fluid" style="min-height: 10em;">
  13. <div data-controller="carousel" class="swiper swiper-container"
  14. data-carousel-options-value='{ "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" } }'>
  15. <div class="swiper-wrapper">
  16. {% set slug = app.request.attributes.get('slug') %}
  17. {% for categories in slides %}
  18. {% for category in categories %}
  19. <div class="swiper-slide" >
  20. <a href="{{ path('category', {
  21. slug: category.slug
  22. }) }}" style="overflow: visible;">
  23. <div class="{% if category.slug == slug %}bg-btn5 {% endif %}s-block p-3"
  24. data-tilt data-tilt-max="5" data-tilt-speed="1000">
  25. {% for block in category.content.blocks %}
  26. {% if block.type == "image" %}
  27. <div class="s-card-icon mx-auto my-2">
  28. <img src="{{ asset(block.data.file.url) }}"
  29. alt="{{ category.slug }}" class="img-fluid"/>
  30. </div>
  31. {% endif %}
  32. {% endfor %}
  33. <h4 class="h5{% if category.slug == slug %} text-white{% endif %}">
  34. {{ category.name|length > 30 ? category.name|slice(0, 30) ~ '...' : category.name }}</h4>
  35. </div>
  36. </a>
  37. </div>
  38. {% endfor %}
  39. {% endfor %}
  40. </div>
  41. <div class="swiper-pagination"></div>
  42. <div class="swiper-button-next"></div>
  43. <div class="swiper-button-prev"></div>
  44. </div>
  45. </div>
  46. <div class="container bg-light mt-4 rounded shadow-sm">
  47. {% if products is empty %}
  48. <div class="row align-content-center rounded" style="height: 20em;">
  49. <div class="col justify-content-center text-center">
  50. <h4 class="h5">No items found in this category.</h4>
  51. <p>please select a different category or try later.</p>
  52. </div>
  53. </div>
  54. {% else %}
  55. <div class="row upset link-hover shape-num justify-content-center">
  56. {% for product in products %}
  57. <div class="col-lg-4 col-md-6 border-light">
  58. <div class="pricing-table best-plan mt60 mb60 bg-gradient">
  59. <div class="inner-table mb40">
  60. <span class="title">{{ product.name }}</span>
  61. <p class="title-sub">{{ product.metadata }}</p>
  62. <h2>${{ product.price }}</h2>
  63. <p class="duration">Monthly Package</p>
  64. </div>
  65. <div class="row">
  66. <a href="{{ path('product' , {
  67. slug: product.slug
  68. }) }}" class="btn-main bg-btn3 lnk col-12 text-white">
  69. View Product
  70. <i class="fas fa-chevron-right fa-icon"></i>
  71. <span class="circle"></span>
  72. </a>
  73. </div>
  74. </div>
  75. </div>
  76. {% endfor %}
  77. </div>
  78. {% endif %}
  79. </div>
  81. {# <div class="card border-light shadow-sm"> #}
  83. {# <div class="row justify-content-center mt-3 ml-3 mr-3"> #}
  84. {# <ul class="nav nav-pills"> #}
  85. {# <li class="nav-item"> #}
  86. {# <a class="nav-link active">Category 1</a> #}
  87. {# </li> #}
  88. {# <li class="nav-item"> #}
  89. {# <a class="nav-link">Category 2</a> #}
  90. {# </li> #}
  91. {# <li class="nav-item"> #}
  92. {# <a class="nav-link">Category 3</a> #}
  93. {# </li> #}
  94. {# <li class="nav-item"> #}
  95. {# <a class="nav-link">Category 4</a> #}
  96. {# </li> #}
  97. {# </ul> #}
  98. {# </div> #}
  99. {# <div class="card-body ml-2 mr-2 mb-2 border rounded"> #}
  100. {# Item Cards go here. #}
  101. {# </div> #}
  102. {# </div> #}
  103. </div>
  104. </section>
  105. {% endblock %}