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