templates/shop/shop_index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block metas %}
  4. <meta name="title" content="Nos huiles essentielles naturelles - Tany mena">
  5. <meta name="description" content="Retrouvez nos huiles essentielles 100% naturelles et produits dérivés de la forêt de Madagascar">
  6. {% endblock %}
  8. {% block title %}{% trans from 'messages.shop' %}Nos produits - Tany Mena{% endtrans %}{% endblock %}
  10. {% block stylesheets %}
  11. {{ parent() }}
  12. {% endblock %}
  14. {% block body %}
  17. {% set banner_title = 'Nos produits'|trans %}
  18. {% set banner_subtitle_2 = 'Boutique'|trans %}
  20. {% include "/partials/_banner.html.twig" %}
  22. <!--shop area start-->
  23. <section class="shop_area shop_reverse my-4">
  24. <div class="container">
  25. <div class="row">
  26. <div class="col-lg-3 col-md-12 mt-4">
  27. <!--sidebar widget start-->
  28. <aside class="sidebar_widget">
  29. <div class="widget_inner">
  30. <div>
  31. <div class="widget_list widget_color">
  32. <h3 class="text-black fw-bolder">{% trans from 'messages.shop' %}Options de recherche{% endtrans %}</h3>
  33. {{ form_start(form, {'attr': {'class': 'filter-form filter-form--vertical', 'id': 'product-filter-form'}}) }}
  34. <div class="my-form-widget" style="display:none;">
  35. {{form_label(form.favorite)}}
  36. {{form_widget(form.favorite,{ 'attr': {'class': 'form-control'} })}}
  37. {{form_errors(form.favorite)}}
  38. </div>
  39. <div class="my-form-widget">
  40. {{form_label(form.name)}}
  41. {{form_widget(form.name,{ 'attr': {'class': 'form-control'} })}}
  42. {{form_errors(form.name)}}
  43. </div>
  44. <div class="my-form-widget" style="display:none;">
  45. {{form_label(form.description)}}
  46. {{form_widget(form.description,{ 'attr': {'class': 'form-control'} })}}
  47. {{form_errors(form.description)}}
  48. </div>
  49. <div class="my-form-widget" style="display:none;">
  50. {{form_label(form.productCategory)}}
  51. {{form_widget(form.productCategory,{ 'attr': {'class': 'form-control'} })}}
  52. {{form_errors(form.productCategory)}}
  53. </div>
  54. <div class="my-form-widget" style="display:none;">
  55. {{form_label(form.prixMin)}}
  56. {{form_widget(form.prixMin,{ 'attr': {'class': 'form-control'} })}}
  57. {{form_errors(form.prixMin)}}
  58. </div>
  59. <div class="my-form-widget" style="display:none;">
  60. {{form_label(form.prixMax)}}
  61. {{form_widget(form.prixMax,{ 'attr': {'class': 'form-control'} })}}
  62. {{form_errors(form.prixMax)}}
  63. </div>
  64. <div class="my-form-widget" style="display:none;">
  65. {{form_label(form.orderBy)}}
  66. {{form_widget(form.orderBy,{ 'attr': {'class': 'form-control'} })}}
  67. {{form_errors(form.orderBy)}}
  68. </div>
  69. <div class="my-form-widget" style="display:none;">
  70. {{form_label(form.order)}}
  71. {{form_widget(form.order,{ 'attr': {'class': 'form-control'} })}}
  72. {{form_errors(form.order)}}
  73. </div>
  74. <button class="btn btn-dark mt-2" type="submit">{% trans from 'messages.shop' %}Rechercher{% endtrans %}</button>
  75. {{ form_end(form) }}
  76. </div>
  77. <div class="widget_list tags_widget">
  78. <h3 class="text-black fw-bolder">{% trans from 'messages.shop' %}Catégorie de produit{% endtrans %}</h3>
  79. <div class="tag_cloud">
  80. <a href="#" onclick="filterByProductCategory('')" class="{{ product_filter.productCategory == null ? 'active' : ''}}">{% trans %}Tous{% endtrans %}</a>
  81. {% for productCategory in productCategories %}
  82. <a href="#" onclick="filterByProductCategory({{productCategory.id}})" class="{{ product_filter.productCategory != null and product_filter.productCategory.id == productCategory.id ? 'active' : ''}}">{{productCategory.getNameByDefaultLocale}}</a>
  83. {% endfor %}
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </aside>
  89. <!--sidebar widget end-->
  90. </div>
  91. <div class="col-lg-9 col-md-12">
  92. <div class="w-100 error-message">
  93. {% for label, messages in app.flashes %}
  94. {% for message in messages %}
  95. <div class="alert alert-{{label}} p-3 text-center" role="alert" style="background-color: #E9E6DF; border-color: #E9E6DF; color: #333;">
  96. <div class="alert-body">
  97. {{message | raw }}
  98. </div>
  99. </div>
  100. {% endfor %}
  101. {% endfor %}
  102. </div>
  104. <!--shop wrapper start-->
  105. <div class="row shop_wrapper">
  106. {% if products|length == 0 %}
  107. <div class="alert alert-danger p-3 text-center" role="alert">
  108. <div class="alert-body">
  109. {% trans from 'messages.shop' %}Aucun produit trouvé{% endtrans %}.
  110. </div>
  111. </div>
  112. {% endif %}
  113. {% for product in products %}
  114. <!-- One Product Starts -->
  115. {% include '/partials/product/_product_1.html.twig' with {'product' : product} %}
  116. {% include '/partials/product/product_details_modal.html.twig' with {'product' : product, 'isAdmin':false} %}
  117. <!-- One Product Ends -->
  118. {% endfor %}
  120. </div>
  121. <div class="d-flex justify-content-center scale-up-center">
  122. {{ knp_pagination_render(products) }}
  123. </div>
  124. <!--shop toolbar end-->
  125. <!--shop wrapper end-->
  126. </div>
  127. </div>
  128. </div>
  129. </section>
  130. <!--shop area end-->
  133. {% endblock %}
  134. {% block javascripts %}
  135. {{ parent() }}
  136. <script type="text/javascript">
  137. window.onload = () => {
  138. /*---slider-range here---*/
  139. let slider = {
  140. min: 0,
  141. max : 100
  142. }
  143. let productAmoutFilter = {
  144. min : $( "#product-slider-range" ).data('minValue'),
  145. max : $( "#product-slider-range" ).data('maxValue')
  146. };
  148. productAmoutFilter.min = productAmoutFilter.min == '' ? slider.min : productAmoutFilter.min;
  149. productAmoutFilter.max = productAmoutFilter.max == '' ? slider.max : productAmoutFilter.max;
  150. console.log(productAmoutFilter);
  151. $( "#product-slider-range" ).slider({
  152. range: true,
  153. min: slider.min,
  154. max: slider.max,
  155. values: [ productAmoutFilter.min, productAmoutFilter.max ],
  156. slide: function( event, ui ) {
  157. let min = ui.values[ 0 ];
  158. let max = ui.values[ 1 ];
  160. $( "#product-amount" ).val( min + "€ - " + max +"€" );
  161. $("#product_filter_prixMin").val(min);
  162. $("#product_filter_prixMax").val(max);
  163. }
  164. });
  165. $( "#product-amount" ).val( $( "#product-slider-range" ).slider( "values", 0 ) +
  166. "€ - " + $( "#product-slider-range" ).slider( "values", 1 ) + "€");
  167. // Hide loader
  168. document.getElementById("loading_aroma").classList.add('hide');
  169. };
  170. function filterByFavorites(value){
  171. $( "#product_filter_favorite" ).val(value);
  172. submitForm();
  173. }
  174. function filterByProductCategory(productCategoryId){
  175. $( "#product_filter_productCategory" ).val(productCategoryId);
  176. submitForm();
  177. }
  178. function submitForm(){
  179. $( "#product-filter-form" ).submit();
  180. }
  184. </script>
  185. {% endblock %}