templates/frontend/category.html.twig line 1

Open in your IDE?
  1. {% extends 'frontend/base.html.twig' %}
  2. {% block JS %}
  3.     <script src="/assets/frontend/js/jquery-3.1.1.min.js"></script>
  4.     <script src="/assets/frontend/js/popper.min.js"
  5.             integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
  6.             crossorigin="anonymous"></script>
  7.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
  8.             integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
  9.             crossorigin="anonymous"></script>
  10.     <script type="text/javascript" src="/assets/frontend/js/owl.carousel.min.js"></script>
  11.     <script type="text/javascript" src="/assets/frontend/js/slick.min.js"></script>
  12.     <script type="text/javascript" src="/assets/frontend/js/jquery.mmenu.js"></script>
  15.     <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
  17.     <script type="text/javascript">
  18.         
  19.                 $(function() {
  20.             $('#menu').mmenu();
  21.               
  22.               let infScroll =  $('.endless_container').infiniteScroll({
  23.                 path: '.page-next',
  24.                 append: '.endless_page',
  25.                 history: false,
  26.                 });
  27.                 
  28. let t;
  29.                 $('.endless_container').on( 'request.infiniteScroll', function( event, path, fetchPromise ) {
  30.                 console.log(`Loading page: ${path}`);
  31.                 $('#product-loader').show();
  32.                  t = setTimeout(function () {
  33.                     $('#product-loader').hide();
  34.                     console.log('load');
  35.                     $('#paginatorDefaultPage').removeClass('d-none');
  36.                 }, 4000);
  37.                 t;
  38.                 });
  39.                  
  40.                 $('.endless_container').on( 'append.infiniteScroll', function( event, body, path, items, response ) {
  41.                 console.log(`Appended ${items.length} items on ${path}`);
  42.                 $('#product-loader').hide();
  43.                  clearTimeout(t);
  44.                 });
  45.                   
  46.         });
  47.         
  48.     </script>
  49.     <script>
  50.         $('input[class=filterItemsProduct]').on('change', function() {
  51.             var getValueinput = $(this).val();
  52.             var newUrlParam = '?filter='+getValueinput;
  53.             return window.location =  newUrlParam;
  54.         });
  55.     </script>
  56. {#
  57.     {% if global.displayStarterKits %}
  58.         <script src="/assets/shared/plugins/slick-modal-css3-powered-popups/src/demos/js/carousel_slider.js"></script>
  59.         <script src="/assets/shared/plugins/slick-modal-css3-powered-popups/src/plugin/js/jquery.slickmodal.min.js"></script>
  60.         <script type="text/javascript">
  61.             $(function() {
  62.                 $('.carouselSlider').SlickModals({
  63.                     restrict_cookieDays: '1',
  64.                     restrict_showAfterVisits: 1,
  65.                     restrict_showAfterVisitsResetWhenShown: false,
  66.                     popup_type: 'exit',
  67.                     popup_animation: 'zoomIn',
  68.                     popup_css: {
  69.                         'width': '480px',
  70.                         'height': {% if global.starterKits | length > 2 %}'480px'{% else %}'400px'{% endif %},
  71.                         'background': '#fff',
  72.                         'padding': '40px',
  73.                         'margin': '0'
  74.                     },
  75.                     overlay_css: {
  76.                         'background': 'rgba(0,0,0,0.3)'
  77.                     },
  78.                     mobile_breakpoint: '480px',
  79.                     mobile_position: 'center',
  80.                     mobile_css: {
  81.                         'width': '100%',
  82.                         'height': {% if global.starterKits | length > 2 %}'480px'{% else %}'400px'{% endif %},
  83.                         'background': '#fff',
  84.                         'padding': '30px',
  85.                         'margin': '0'
  86.                     },
  87.                     callback_afterVisible: function () {
  88.                         sm_carouselSlider('.carouselSlider');
  89.                     }
  90.                 });
  91.             });
  92.         </script>
  93.     {% endif %}
  94. #}
  95.     <script src="/assets/frontend/js/874ad7ad81.js"></script>
  96.     <script type="text/javascript" src="/assets/frontend/js/main.js?ver=1.1"></script>
  97.     <script type="text/javascript" src="/assets/frontend/js/registration.js"></script>
  98.     <script type="text/javascript" src="/assets/frontend/js/category-filter.js"></script>
  99.     <script type="text/javascript" src="/assets/frontend/js/scroll-down.js"></script>
  100.     <script type="text/javascript" src="/assets/frontend/js/show-more.js"></script>
  101.     <script type="text/javascript" src="/assets/frontend/js/region-currency-lang-select.js"></script>
  102.     <script type="text/javascript" src="/assets/frontend/js/custom-select.js"></script>
  104.     <script src="{{ asset('build/frontend/category.js') }}"></script>
  105. {% endblock %}
  106. {% block CSS %}
  107.     <link rel="stylesheet" href="/assets/frontend/css/owl.carousel.min.css">
  108.     <link href="/assets/frontend/css/responsive.css?ver={{global.cssVersion}}" rel="stylesheet" type="text/css" media="all">
  109.     <link href="/assets/frontend/css/jquery.mmenu.css" rel="stylesheet" type="text/css" media="all">
  110.     <link href="/assets/frontend/css/styles.css?ver={{global.cssVersion}}" rel="stylesheet" type="text/css" media="all">
  111.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
  112.                            integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  113.     <!-- Add the slick-theme.css if you want default styling -->
  114.     <link rel="stylesheet" type="text/css" href="/assets/frontend/css/slick.css"/>
  115.     <!-- Add the slick-theme.css if you want default styling -->
  116.     <link rel="stylesheet" type="text/css" href="/assets/frontend/css/slick-theme.css"/>
  118.     <script src="{{ asset('build/frontend/category.css') }}"></script>
  119. {% endblock %}
  120. {% block title %}{% if category.name is not empty %}{{category.name}},{% endif %} {{category.title}}{% endblock %}
  121.     {% block metaDescription %}{% if category.metaDescription %}{{category.metaDescription}}{%else%}{{category.description | slice(0, 160) | raw}}{%endif%}{% endblock %}
  122. {% block content %}
  123.     <!--Category section-->
  124.     <div class="category row mb-rem">
  125.         <!--Category section header-->
  126.         <section class="category-header">
  127.             {% if category.banner or forcedBanner is defined %}
  128.                 <div class="category-header-top">
  129.                     {% if forcedBanner is defined %}
  130.                         <img class="category-header-top-img full-width" src="{{forcedBanner}}">
  131.                     {% else %}
  132.                         <img class="category-header-top-img full-width" src="{{path('getImageAsCroppedThumb',{'id': category.banner.id, 'height': '250', 'width' : '1900'})}} ">
  133.                     {% endif %}
  134.                     <h5 class="category-header-top-caption "><span>{{category.title}}</span></h5>
  135.                 </div>
  136.             {% endif %}
  137.             {% if category.description %}
  138.                 <div class="category-header-description text-left d-none d-xl-block  d-lg-block d-md-block">
  139.                     <p class="category-header-description-text text-overflow">
  140.                     {{category.description | raw}}
  141.                     </p>
  142.                     {#
  143.                     {% if category.description |length > 200 %}
  144.                         <a class="category-header-description-more btn-overflow"> + Plus</a>
  145.                     {% endif %}
  146.                     #}
  147.                 </div>
  148.             {% endif %}
  150.         </section>
  151.         <!--Category section header-->
  153.         <section class="category-products m-t-10">
  155.             <div class="row justify-content-end category-search">
  156.                 <div class="col-xl-6 col-lg-12 col-md-12 col-12 align-self-end">
  157.                     <div class="row justify-content-between">
  158.                         {#
  159.                         <div class="col-xl-6 col-lg-6 col-md-6 m-b-10">
  160.                             <div class="row no-gutters">
  161.                                 <div class="col text-right">
  162.                                     <input class="border-right-0 rounded-0 search-input category-search-product"
  163.                                            type="search" placeholder="Chercher des produits...">
  164.                                 </div>
  165.                                 <div class="col-auto">
  166.                                     <button class="category-search-product-btn border-left-0 rounded-0 rounded-right search-btn"
  167.                                             type="button">
  168.                                         <i class="fa fa-search" aria-hidden="true"></i>
  169.                                     </button>
  170.                                 </div>
  171.                             </div>
  172.                         </div>
  173.                         <div class="select-label category-search__text col-xl-2 col-lg-1 col-md-1 d-none d-xl-block  d-lg-block">
  174.                             <span>Trier par:</span>
  175.                         </div>
  176.                         <div class="column-select col-xl-4 col-lg-5 col-md-6 col-5 d-none d-md-block">
  177.                             <div class="select-wrapper">
  178.                                 <select name="order" class="form-control form-control-lg"
  179.                                                      id="orderSelect">
  180.                                     <option value="plus">plus pertinents
  181.                                     </option>
  182.                                     <option value="nouveaux">nouveaux produits
  183.                                     </option>
  184.                                     <option value="bas">prix le plus bas
  185.                                     </option>
  186.                                     <option value="haut" selected>prix le plus haut</option>
  187.                                     <option value="mieux">mieux cotes
  188.                                     </option>
  189.                                     <option value="promotions">promotions
  190.                                     </option>
  191.                                 </select>
  192.                             </div>
  193.                         </div>
  194.                         #}
  195.                         <div class="column-select select-category col-4 d-block d-md-none">
  196.                             <button type="button" class="button category-products-filters-btn"
  197.                                                   id="mobileFilterModal">
  198.                                 <span>
  199.                                     <img src="/assets/frontend/images/icons/filter-icon.svg" alt="">
  200.                                 </span>
  201.                                 <span class="text-button-filters" style="margin-right: 0px;">
  202.                                     Filtres
  203.                                 </span>
  204.                             </button>
  205.                         </div>
  206.                         {#
  207.                         <div class="column-select select-trier col-4 d-block d-md-none">
  208.                             <!--<div class="select-wrapper">-->
  209.                             <div class="dropdown" aria-haspopup="true" aria-expanded="false">
  210.                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Trier<span class="caret"></span></a>
  211.                                 <ul class="dropdown-menu select-options pull-bottom">
  212.                                     <li><a data-value="Tout">Tout </a></li>
  213.                                     <li><a data-value="Category A">plus pertinents</a></li>
  214.                                     <li><a data-value="Category B">nouveaux produits</a></li>
  215.                                     <li><a data-value="Category B">prix le plus bas</a></li>
  216.                                     <li><a data-value="Category C">prix le plus haut</a></li>
  217.                                     <li><a data-value="Category D">mieux cotes</a></li>
  218.                                     <li><a data-value="Category E">promotions</a></li>
  219.                                 </ul>
  220.                             </div>
  221.                             <!--</div>-->
  222.                         </div>
  223.                         #}
  224.                     </div>
  225.                 </div>
  226.                 <!--<div class="d-none d-xl-block  d-lg-block d-md-block col-xl-3 col-lg-3 col-md-3 col-3"></div>-->
  227.                 <!--<div class="d-none d-xl-block  d-lg-block d-md-block col-xl-3 col-lg-3 col-md-3 col-3"></div>-->
  229.             </div>
  230. {% block section_category_stats %}
  231.             <!--Category section filters-->
  232.             <!--<div class="row d-none d-xl-block  d-lg-block d-md-block">-->
  233.             <div class="row">
  234.                 <div class="col-12 text-right" id="checked-filters">
  235.                   <div class="category-products-result d-none d-xl-block d-lg-block d-md-block">
  236.                     {% if sorting is defined %}
  238.                       {% set sort_popularity_order = "desc" %}
  239.                       {% set sort_date_order = "desc" %}
  240.                       {% set sort_price_order = "desc" %}
  242.                       {% if sorting == "popularity" %}
  243.                         {% if order == "asc" %}
  244.                           {% set sort_popularity_order = "desc" %}
  245.                         {% else %}
  246.                           {% set sort_popularity_order = "asc" %}
  247.                         {% endif %}
  248.                       {% elseif sorting == "date" %}
  249.                         {% if order == "asc" %}
  250.                           {% set sort_date_order = "desc" %}
  251.                         {% else %}
  252.                           {% set sort_date_order = "asc" %}
  253.                         {% endif %}
  254.                       {% elseif sorting == "price" %}
  255.                         {% if order == "asc" %}
  256.                           {% set sort_price_order = "desc" %}
  257.                         {% else %}
  258.                           {% set sort_price_order = "asc" %}
  259.                         {% endif %}
  260.                       {% endif %}
  261.                         {% if app.request.attributes.get('_route') == 'viewCategory' or app.request.attributes.get('_route') == 'viewOnSalesProduct' %}
  262.                             <a href="{{link}}"  style="{% if sorting == null %}text-decoration: underline !important;{% endif %}">Défaut</a> |
  263.                         {% endif %}
  264.                       <a href="?sorting=popularity&order={{sort_popularity_order}}" style="{% if sorting == "popularity" %}text-decoration: underline !important;{% endif %}">Popularité {% if sort_popularity_order == "asc" %}&#8673;{% else %}&#8675;{% endif %}</a> |
  265.                       <a href="?sorting=price&order={{sort_price_order}}" style="{% if sorting == "price" %}text-decoration: underline !important;{% endif %}">Prix {% if sort_price_order == "asc" %}&#8673;{% else %}&#8675;{% endif %}</a> |
  266.                       <a href="?sorting=date&order={{sort_date_order}}" style="{% if sorting == "date" %}text-decoration: underline !important;{% endif %}">Récent {% if sort_date_order == "asc" %}&#8673;{% else %}&#8675;{% endif %}</a>
  267.                     {% endif %}
  268.                     <br> RÉSULTATS: <span id="amountProducts">{{productsAmount}}</span> PRODUITS
  269.                   </div>
  270.                 </div>
  271.             </div>
  272.             <!--Category section filters-->
  273. {% endblock %}
  275.             <!--Category section products-->
  276.             <div class="row">
  277.                 <div class="d-none category-products-filters-wrap d-xl-block  d-lg-block d-md-block col-xl-2 col-lg-2 col-md-3 pull-left">
  278.                     <div class="category-products-filters not-mobile">
  279.                         {% block category_filter %}
  281.                         {% if selected.main is defined and selected.main is not empty %}
  282.                         <a class="hide-mobile category-products-filters-title" id="filter-show-all" href="/categorie">
  283.                           <span style="color:black;font-weight:bold;"><i
  284.                           class="fa fa-angle-left" aria-hidden="true"></i></span>
  285.                         TOUT</a>
  286.                         {% endif %}
  288.                         <div class="category-product-filter first hide-mobile">
  290.                             {% for category in global.menu if global.hasProducts(category) %}
  291.                               {% if ( selected.main is defined and selected.main == category.id ) or ( selected is defined and selected.main is empty ) or ( selected is not defined ) %}
  292.                               <div class="category-product-filter-hierarchy">
  293.                                   {# <span class="category-product-filter-hierarchy-back-btn"><i
  294.                                         class="fa fa-angle-left" aria-hidden="true"></i></span> #}
  296.                                   <a data-id="{{category.id}}" data-type="category" class="category-product-filter-hierarchy-title filterItemsProduct {% if selected.main is defined and selected.main == category.id %} active selected {% endif %}" id="cat_{{category.id}}" data-url="{{category.getFullUrlPath}}" href="/categorie{{category.getFullUrlPath}}">{{category.name | upper }}</a>
  298.                                   {% if selected.main is defined and selected.main == category.id %}
  299.                                     {% for subCategory in category.categories %}
  300.                                       <div class="category-product-filter-hierarchy-l2">
  302.                                         {% if selected.sub1 is defined and selected.sub1== subCategory.id %}
  303.                                         <span class="category-product-filter-hierarchy-back-btn"><i
  304.                                         class="fa fa-angle-left" aria-hidden="true"></i></span>
  305.                                         {% endif %}
  307.                                         <div class="underline-effect-wrapper categorie-left-menu">
  308.                                         {% if subCategory.placement > 0 %}
  309.                                           <a id="cat_{{subCategory.id}}" data-id="{{subCategory.id}}" data-type="category" class="category-product-filter-hierarchy-title underline-effect underline-effect-black underline-effect-h1 filterItemsProduct {% if selected.sub1 is defined and selected.sub1== subCategory.id %} active selected {% endif %}" data-url="{{subCategory.getFullUrlPath}}" href="/categorie{{subCategory.getFullUrlPath}}">
  310.                                                {{subCategory.name}} <i>({{ global.getCountProduct(subCategory) }})</i>
  311.                                               
  312.                                               {% endif %}
  313.                                           </a>
  314.                                           <ul class="">
  315.                                     {% for subCat in subCategory.categories if global.hasProducts(subCat) %}
  316.                                          {% if subCat.placement > 0 %}
  317.                                                 <li>
  318.                                                     <a id="cat_{{subCat.id}}" data-id="{{subCat.id}}" data-type="category" class="underlineSubcategory" data-url="{{subCat.getFullUrlPath}}" href="/categorie{{subCat.getFullUrlPath}}">
  319.                                                         {{subCat.name}} <i>({{ global.getCountProduct(subCat) }})</i>
  320.                                                     </a>
  321.                                                 </li>
  322.                                                 {% endif %}
  323.                                           {% endfor %}
  324.                                           </ul>
  325.                                         </div>
  326.                                       </div>
  327.                                     {% endfor %}
  328.                                   {% endif %}
  329.                               </div>
  330.                               {% endif %}
  331.                             {% endfor %}
  332.                         </div>
  333.                         <div class="category-divider hide-mobile"></div>
  334.                         <div class="category-product-filter">
  335.                           <div class="d-md-none d-sm-block text-center">
  336.                             {% if sorting is defined %}
  338.                       {% set sort_popularity_order = "desc" %}
  339.                       {% set sort_date_order = "desc" %}
  340.                       {% set sort_price_order = "desc" %}
  342.                       {% if sorting == "popularity" %}
  343.                         {% if order == "asc" %}
  344.                           {% set sort_popularity_order = "desc" %}
  345.                         {% else %}
  346.                           {% set sort_popularity_order = "asc" %}
  347.                         {% endif %}
  348.                       {% elseif sorting == "date" %}
  349.                         {% if order == "asc" %}
  350.                           {% set sort_date_order = "desc" %}
  351.                         {% else %}
  352.                           {% set sort_date_order = "asc" %}
  353.                         {% endif %}
  354.                       {% elseif sorting == "price" %}
  355.                         {% if order == "asc" %}
  356.                           {% set sort_price_order = "desc" %}
  357.                         {% else %}
  358.                           {% set sort_price_order = "asc" %}
  359.                         {% endif %}
  360.                       {% endif %}
  361.                         {% if app.request.attributes.get('_route') == 'viewCategory' %}
  362.                             <a href="{{link}}"  style="{% if sorting == null %}text-decoration: underline !important;{% endif %}">Défaut</a> |
  363.                         {% endif %}
  364.                       <a href="?sorting=popularity&order={{sort_popularity_order}}" style="{% if sorting == "popularity" %}text-decoration: underline !important;{% endif %}">Popularité {% if sort_popularity_order == "asc" %}&#8673;{% else %}&#8675;{% endif %}</a> |
  365.                       <a href="?sorting=price&order={{sort_price_order}}" style="{% if sorting == "price" %}text-decoration: underline !important;{% endif %}">Prix {% if sort_price_order == "asc" %}&#8673;{% else %}&#8675;{% endif %}</a> |
  366.                       <a href="?sorting=date&order={{sort_date_order}}" style="{% if sorting == "date" %}text-decoration: underline !important;{% endif %}">Récent {% if sort_date_order == "asc" %}&#8673;{% else %}&#8675;{% endif %}</a>
  367.                     {% endif %}
  368.                         </div>
  369.                             <div class="category-product-filter-title" onclick="panelUnClick()" ><i class="flecheUn ti-angle-right" style="margin-right: 10px;"></i><span style="display: inline;">LIVRAISON</span></div>
  370.                             <div class="category-product-filter-checkbox" id="panelUn" style="display:none;">
  371.                                 <div>
  372.                                     <label class="checkbox">
  373.                                         <input id="shipping_maturin" type="checkbox" value="LivraisonMaturin" class="filterItemsProduct" data-id="0" data-type="shipping" {% if filters.shipping is defined and '0' in filters.shipping %}checked{% endif %}>
  374.                                         <i></i>Maturin <img style="display: inline-block; margin-right: 15px;" src="/images/maturinshipping.png" alt="Livraison par Maturin" title="Livraison par Maturin">
  375.                                     </label>
  376.                                 </div>
  377.                                 <div>
  378.                                     <label class="checkbox">
  379.                                         <input id="shipping_producer" type="checkbox" value="LivraisonIndependante" class="filterItemsProduct" data-id="1" data-type="shipping" {% if filters.shipping is defined and  '1' in filters.shipping %}checked{% endif %}>
  380.                                         <i></i>Indépendante
  381.                                     </label>
  382.                                 </div>
  383.                             </div>
  384.                         </div>
  385.                         <div class="category-product-filter">
  386.                             <div class="category-product-filter-title"  onclick="panelDeuxClick()"><i class="flecheDeux ti-angle-right" style="margin-right: 10px;"></i><span style="display: inline;">PRIX</span></div>
  387.                             <div class="category-product-filter-checkbox" id="panelDeux" style="display:none;">
  388.                                 <div>
  389.                                     <label class="checkbox" style="color:#f0632f;">
  390.                                         <input id="price_sale" type="checkbox" name="checkbox" value="EnSolde" class="filterItemsProduct" data-id="0" data-type="price" {% if filters.price is defined and '0' in filters.price %}checked{% endif %}>
  391.                                         <i></i><strong>En Solde</strong>
  392.                                     </label>
  393.                                 </div>
  394.                                 <div>
  395.                                     <label class="checkbox">
  396.                                         <input id="price_10" type="checkbox" name="checkbox" value="Moins10" class="filterItemsProduct" data-id="10" data-type="price" {% if filters.price is defined and '10' in filters.price %}checked{% endif %}>
  397.                                         <i></i>Moins de 10$
  398.                                     </label>
  399.                                 </div>
  400.                                 <div>
  401.                                     <label class="checkbox">
  402.                                         <input id="price_1025" type="checkbox" name="checkbox" value="price10-25" class="filterItemsProduct" data-id="10-25" data-type="price" {% if filters.price is defined and '10-25' in filters.price %}checked{% endif %}>
  403.                                         <i></i>10$-25$
  404.                                     </label>
  405.                                 </div>
  406.                                 <div>
  407.                                     <label class="checkbox">
  408.                                         <input id="price_2050" type="checkbox" name="checkbox" value="price25-50" class="filterItemsProduct" data-id="25-50" data-type="price" {% if filters.price is defined and '25-50' in filters.price %}checked{% endif %}>
  409.                                         <i></i>25$-50$
  410.                                     </label>
  411.                                 </div>
  412.                                 <div>
  413.                                     <label class="checkbox">
  414.                                         <input id="price_50" type="checkbox" name="checkbox" value="Plus50" class="filterItemsProduct" data-id="50" data-type="price" {% if filters.price is defined and '50' in filters.price %}checked{% endif %}>
  415.                                         <i></i>Plus de 50$
  416.                                     </label>
  417.                                 </div>
  418.                             </div>
  419.                         </div>
  420.                         <div class="category-product-filter">
  421.                             <div class="category-product-filter-title" onclick="panelTroisClick()"><i class="flecheTrois ti-angle-right" style="margin-right: 10px;"></i><span style="display: inline;">CONSERVATION</span></div>
  422.                             <div class="category-product-filter-checkbox" id="panelTrois" style="display:none;">
  423.                                 {% for conservation in conservations %}
  424.                                     <div>
  425.                                         <label class="checkbox">
  426.                                             <input id="conservation_{{conservation.id}}" type="checkbox" name="checkbox" value="{{conservation.name}}" data-id="{{conservation.id}}" data-type="conservation" class="filterItemsProduct">
  427.                                             <i></i>{{conservation.name}}
  428.                                         </label>
  429.                                     </div>
  430.                                 {% endfor %}
  431.                             </div>
  432.                         </div>
  433.                         <div class="category-product-filter">
  434.                             <div class="category-product-filter-title" onclick="panelQuatreClick()"><i class="flecheQuatre ti-angle-right" style="margin-right: 10px;"></i><span style="display: inline;">CERTIFICATION</span></div>
  435.                             <div class="category-product-filter-checkbox" id="panelQuatre" style="display:none;">
  436.                                     <div>
  437.                                         <label class="checkbox">
  438.                                             <input id="aliment_du_quebec" type="checkbox" name="checkbox" value="AlimentsQuebec" data-id="true" data-type="aliment_quebec" class="filterItemsProduct">
  439.                                             <i></i>Aliments du Québec
  440.                                         </label>
  441.                                     </div>
  442.                                     <div>
  443.                                         <label class="checkbox">
  444.                                             <input id="is_prix_laureat" type="checkbox" name="checkbox" value="PrixLaureat" data-id="true" data-type="prix_laureat" class="filterItemsProduct">
  445.                                             <i></i>Prix Laureat
  446.                                         </label>
  447.                                     </div>
  448.                                     <div>
  449.                                         <label class="checkbox">
  450.                                             <input id="is_produit_biologique" type="checkbox" name="checkbox" value="Biologique" data-id="true" data-type="produit_biologique" class="filterItemsProduct">
  451.                                             <i></i>Porduit Bio
  452.                                         </label>
  453.                                     </div>
  454.                                      <div>
  455.                                         <label class="checkbox">
  456.                                             <input id="SansGluten" type="checkbox" name="checkbox" value="Sans_Gluten" data-type="certification" class="filterItemsProduct">
  457.                                             <i></i>Sans Gluten
  458.                                         </label>
  459.                                     </div>
  460.                                      <div>
  461.                                         <label class="checkbox">
  462.                                             <input id="Vegane" type="checkbox" name="checkbox" value="Vegane" data-type="certification" class="filterItemsProduct">
  463.                                             <i></i>Végane
  464.                                         </label>
  465.                                     </div>
  466.                                      <div>
  467.                                         <label class="checkbox">
  468.                                             <input id="Paleo" type="checkbox" name="checkbox" value="Paleo" data-type="certification" class="filterItemsProduct">
  469.                                             <i></i>Paléo
  470.                                         </label>
  471.                                     </div>
  472.                                     <div>
  473.                                         <label class="checkbox">
  474.                                             <input id="SansLactose" type="checkbox" name="checkbox" value="Sans_Lactose" data-type="certification" class="filterItemsProduct">
  475.                                             <i></i>Sans Lactose
  476.                                         </label>
  477.                                     </div>
  478.                                     <div>
  479.                                         <label class="checkbox">
  480.                                             <input id="SansNoix" type="checkbox" name="checkbox" value="Sans_Noix" data-type="certification" class="filterItemsProduct">
  481.                                             <i></i>Sans noix
  482.                                         </label>
  483.                                     </div>
  484.                                     </div>
  486.                         </div>
  487.                         <div class="category-product-filter">
  488.                             <div class="category-product-filter-title" onclick="panelCinqClick()"><i class="flecheCinq ti-angle-right" style="margin-right: 10px;"></i><span style="display: inline;">RÉGION</span></div>
  489.                             <div class="category-product-filter-checkbox" id="panelCinq" style="display:none;">
  490.                                 {% for region in regions %}
  491.                                     {% if region.name != "defaut" %}
  492.                                         <div>
  493.                                             <label class="checkbox">
  494.                                                 <input id="region_{{region.id}}" type="checkbox" name="checkbox" value="region_{{region.name}}" data-id="{{region.id}}" class="filterItemsProduct" data-type="region">
  495.                                                     <i></i>{{region.name}}
  496.                                             </label>
  497.                                         </div>
  498.                                     {% endif %}
  499.                                 {% endfor %}
  500.                             </div>
  501.                         </div>
  502.                         {% endblock %}
  503.                     </div>
  504.                 </div>
  505.                 <div class="col-xl-10 col-lg-10 col-md-9 col-sm-12 col-12 products-wrap" id="listingProducts">
  506.                     {% block section_masonry_products %}
  508.                         <div class="endless_container" id="endless_container">
  509.                             <article  class="endless_page" style="">
  510.                                 {{ include ('frontend/productMasonry.html.twig', {'masonryProducts': products} ) }}
  511.                             </article>
  512.                         </div>
  513.                         <div class="" id="product-loader" style="display: none; width: 100%; height: 100px; position: relative !important; background: url(/images/loading.gif)    center no-repeat #fff;"></div>
  515.                         <script>
  516.                             var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
  517.                             if(supportsTouch){
  518.                                 var elems = document.querySelectorAll(".button-touch");
  520.                                 [].forEach.call(elems, function(el) {
  521.                                     el.classList.remove("d-none");
  522.                                 });
  523.                             }
  524.                         </script>
  525.                         {# {{ dump(app.request.attributes.get('_route'))}} #}
  526.                         {% if app.request.attributes.get('_route') == 'viewCategory' %}
  527.                         {% if products.getPaginationData.current == products.getPaginationData.last %}
  528.                                 <div id="paginatorDefaultLast" class="infinite-scroll-last">{{ knp_pagination_render(products) }}</div>
  529.                         {% endif %}
  530.                         {% endif %}
  531.                     {% endblock %}
  533.                     {% if suggestionProducts is defined %}
  534.                       {% if suggestionProducts %}
  535.                         <div class="section-title section-title-line m-t-10">Des produits à découvrir!</div>
  536.                         {{ include ('frontend/productMasonry.html.twig', {'masonryProducts': suggestionProducts} ) }}
  537.                       {% endif %}
  538.                     {% endif %}
  539.                     </div>
  540.                 </div>
  541.             <!--Category section products-->
  542.         </section>
  544.             </div>
  545.             <script>
  546.                 function panelUnClick() {
  547.                  var x = document.getElementById("panelUn");
  548.                     if (x.style.display === "none") {
  549.                         x.style.display = "block";
  550.                         $( ".flecheUn" ).removeClass( "ti-angle-right" ).addClass( "ti-angle-down" );
  551.                     } else {
  552.                         x.style.display = "none";
  553.                         $( ".flecheUn" ).removeClass( "ti-angle-down" ).addClass( "ti-angle-right" );
  554.                     }
  555.                 }
  556.             </script>
  557.              <script>
  558.                 function panelDeuxClick() {
  559.                  var x = document.getElementById("panelDeux");
  560.                      if (x.style.display === "none") {
  561.                         x.style.display = "block";
  562.                         $( ".flecheDeux" ).removeClass( "ti-angle-right" ).addClass( "ti-angle-down" );
  563.                     } else {
  564.                         x.style.display = "none";
  565.                         $( ".flecheDeux" ).removeClass( "ti-angle-down" ).addClass( "ti-angle-right" );
  566.                     }
  567.                 }
  568.             </script>
  569.              <script>
  570.                 function panelTroisClick() {
  571.                  var x = document.getElementById("panelTrois");
  572.                      if (x.style.display === "none") {
  573.                         x.style.display = "block";
  574.                         $( ".flecheTrois" ).removeClass( "ti-angle-right" ).addClass( "ti-angle-down" );
  575.                     } else {
  576.                         x.style.display = "none";
  577.                         $( ".flecheTrois" ).removeClass( "ti-angle-down" ).addClass( "ti-angle-right" );
  578.                     }
  579.                 }
  580.             </script>
  581.              <script>
  582.                  function panelQuatreClick() {
  583.                  var x = document.getElementById("panelQuatre");
  584.                       if (x.style.display === "none") {
  585.                         x.style.display = "block";
  586.                         $( ".flecheQuatre" ).removeClass( "ti-angle-right" ).addClass( "ti-angle-down" );
  587.                     } else {
  588.                         x.style.display = "none";
  589.                         $( ".flecheQuatre" ).removeClass( "ti-angle-down" ).addClass( "ti-angle-right" );
  590.                     }
  591.                 }
  592.             </script>
  593.              <script>
  594.                   function panelCinqClick() {
  595.                  var x = document.getElementById("panelCinq");
  596.                      if (x.style.display === "none") {
  597.                         x.style.display = "block";
  598.                         $( ".flecheCinq" ).removeClass( "ti-angle-right" ).addClass( "ti-angle-down" );
  599.                     } else {
  600.                         x.style.display = "none";
  601.                         $( ".flecheCinq" ).removeClass( "ti-angle-down" ).addClass( "ti-angle-right" );
  602.                     }
  604.                 }
  605.             </script>
  606.             <script>
  608.             </script>
  609. {% endblock %}