src/UI/WebBundle/Resources/views/Product/public_product_list.html.twig line 1

Open in your IDE?
  1. {% extends 'Common/base.html.twig' %}
  2. {% import 'Common/parts/functions.html.twig' as function %}
  4. {% block title %}Tienda | {{ parent() }}{% endblock %}
  5. {% block classBody %}product_list {{ parent() }}{% endblock %}
  9. {% block stylesheets %}
  10. {{ parent() }}
  11. {{ encore_entry_link_tags('select2_styles') }}
  12. {% endblock stylesheets %}
  14. {% block javascripts %}
  15. {{ parent() }}
  16. {{ encore_entry_script_tags('select2_js') }}
  17. {{ encore_entry_script_tags('jquery_twbspagination_js') }}
  18. {{ encore_entry_script_tags('public_product_list') }}
  19. {% endblock javascripts %}
  21. {% block contents %}
  23. <div id="public_product_list_page" ng-controller="publicProductListCtrl"
  24. {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
  25. data-grantuser-username="{{ app.user.user.firstName }}"
  26. data-grantuser-id="{{ app.user.user.id }}"
  27. {% endif %}
  28. class="container pt-5 pb-9">
  30. <div class="container-small">
  32. <nav class="mb-2" aria-label="breadcrumb">
  33. <ol class="breadcrumb mb-0">
  34. <li class="breadcrumb-item"><a href="{{path('web_init')}}">Inicio</a></li>
  35. <li class="breadcrumb-item active" aria-current="page">Productos</li>
  36. </ol>
  37. </nav>
  38. <div class="row">
  40. <div class="col-lg-3 col-xxl-2 ps-2 ps-xxl-3" id="search-filters">
  41. <div class="product-filter-offcanvas bg-soft scrollbar phoenix-offcanvas phoenix-offcanvas-fixed"
  42. id="productFilterColumn">
  43. <div class="d-flex justify-content-between align-items-center mb-3">
  44. <h3 class="mb-0">Filtros</h3>
  45. <button class="btn d-lg-none p-0" data-phoenix-dismiss="offcanvas">
  46. <span class="uil uil-times fs-0"></span>
  47. </button>
  48. </div>
  49. <a class="btn px-0 d-block collapse-indicator" data-bs-toggle="collapse"
  50. href="#collapseSearch" role="button" aria-expanded="true" aria-controls="collapseSearch">
  51. <div class="d-flex align-items-center justify-content-between w-100">
  52. <div class="fs-0 text-1000">Buscar</div>
  53. <span class="fa-solid fa-angle-down toggle-icon text-500"></span>
  54. </div>
  55. </a>
  56. <div class="collapse show" id="collapseSearch">
  57. <div class="d-flex justify-content-between mb-3">
  58. <div class="input-group me-2">
  59. <input type="text" class="form-control" id="input-filter-name" placeholder="Nombre"/>
  60. </div>
  61. </div>
  62. </div>
  64. <a class="btn px-0 d-block collapse-indicator" data-bs-toggle="collapse"
  65. href="#collapseCategories" role="button" aria-expanded="true" aria-controls="collapseCategories">
  66. <div class="d-flex align-items-center justify-content-between w-100">
  67. <div class="fs-0 text-1000">Categorias</div>
  68. <span class="fa-solid fa-angle-down toggle-icon text-500"></span>
  69. </div>
  70. </a>
  71. <div class="collapse show" id="collapseCategories">
  72. <div class="d-flex justify-content-between mb-3">
  73. <div class="me-2">
  74. {% for productCategory in productCategories %}
  75. <div class="form-check mb-0">
  76. <input class="form-check-input mt-0 filter_category" id="category_{{productCategory.id}}" type="checkbox" value="{{productCategory.id}}">
  77. <label class="form-check-label d-block lh-sm fs--1 text-900 fw-normal mb-0" for="category_{{productCategory.id}}">{{productCategory.productCategoryName}}</label>
  78. </div>
  79. {% endfor %}
  80. </div>
  81. </div>
  82. </div>
  84. {#
  85. <a class="btn px-0 d-block collapse-indicator" data-bs-toggle="collapse"
  86. href="#collapseTags" role="button" aria-expanded="true" aria-controls="collapseTags">
  87. <div class="d-flex align-items-center justify-content-between w-100">
  88. <div class="fs-0 text-1000">Etiquetas</div>
  89. <span class="fa-solid fa-angle-down toggle-icon text-500"></span>
  90. </div>
  91. </a>
  92. <div class="collapse show" id="collapseTags">
  93. <div class="d-flex justify-content-between mb-3">
  94. <div class="input-group me-2">
  95. <input type="text" class="form-control" id="input-filter-tag" placeholder="Tags"/>
  96. </div>
  97. </div>
  98. </div>
  99. #}
  101. </div>
  102. <div class="phoenix-offcanvas-backdrop d-lg-none" data-phoenix-backdrop></div>
  103. </div>
  105. <div id="public_product_list_row" class="d-none">
  106. <div class="col-6 col-md-3 dp-product">
  107. <div class="product-card-container h-100">
  108. <div class="position-relative text-decoration-none product-card h-100">
  109. <div class="d-flex flex-column justify-content-between h-100">
  110. <div class="">
  111. <div class="border border-1 rounded-3 position-relative mb-2">
  112. <img class="img-fluid product-image" src="{{ asset('/assets/images/logo_v3.png') | imagine_filter('product_list_image') }}" />
  113. </div>
  114. <a class="stretched-link product-link" href="#">
  115. <h5 class="mb-1 lh-sm line-clamp-3 product-name"></h5>
  116. </a>
  117. <p class="fs--2 text-body-highlight fw-bold mb-2 product-organization-label"></p>
  118. <p class="fs--1 text-700 mb-2 product-description"></p>
  119. </div>
  120. <div>
  121. <div class="d-flex product-rater-block d-none mb-1">
  122. <div class="wp-star product-rater me-2 " ></div>
  123. <div class="product-rater-description fs--1 text-500 fw-semi-bold ms-1"></div>
  124. </div>
  126. <div class="d-flex align-items-center mb-1">
  127. {#
  128. <p class="me-2 text-900 text-decoration-line-through mb-0 price-label">199.99€</p>
  129. #}
  130. <h3 class="text-1100 mb-0 product-price-label"></h3>
  131. </div>
  133. <p class="lh-1 mb-0 text-end product-availability-badge">
  134. <span class="badge fs--2 product-availability-text"></span>
  135. </p>
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  143. <div class="col-lg-9 col-xxl-10" id="search-list" ng-init="initPublicProductList()">
  144. {{ function.showFlashes() }}
  146. <div class="row gx-3 gy-6 mb-8" id="product-items" ng-init="loadProductPage(1)">
  147. </div>
  149. <div class="d-flex justify-content-between align-items-center">
  150. <p class="mb-0 d-none d-sm-block me-3 fw-semi-bold text-900" data-list-info="data-list-info">
  151. <span id="pagination-page"></span> a <span id="pagination-size"></span>
  152. <span class="text-600"> elementos de </span>
  153. <span id="pagination-total"></span>
  154. </p>
  155. <nav aria-label="Page navigation" id="list-pagination">
  157. </nav>
  158. </div>
  159. </div>
  161. </div>
  163. </div>
  165. </div>
  167. {% endblock contents %}