templates/app/shop.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set side_nav = 'carte' %}
  4. {% block body %}
  6.     <!--Page Title-->
  7.     <section class="page-title" style="background-image: url('{{ asset('build/theme/images/main-slider/9.png') }}');">
  8.         <div class="auto-container">
  9.             <h1>Lena chocolat</h1>
  10.             <ul class="page-breadcrumb">
  11.                 <li><a href="index.html">Carte</a></li>
  12.                 <li>Bonheur culinaire</li>
  13.             </ul>
  14.         </div>
  15.     </section>
  16.     <!--End Page Title-->
  18.     <!-- Filter Buttons -->
  19.     
  21.     <!-- Blog Showcase -->
  22.     <section class="blog-section blog-three-column">
  23.     <div class="mixitup-gallery">
  24.         <div class="filters clearfix">
  25.             <ul class="filter-tabs filter-btns clearfix">
  26.                 <li type="button" class="filter active filter-btn" data-role="button" data-filter="all">Tout 
  27.                     {# <div class="filter_shape"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 850.4 217"><path d="M820.3,96.5c-33.3-20.8-83.5-4.6-118,7.6c-79.5,28.2-150.5,57.8-236.9,44.3C317.8,125.3,122.3-11.8,0,132 c26.4,33.4,64.5-8.1,92.5-18.4c37.9-14,78-14.8,117-5c85.2,21.6,154.1,81.5,242,99.4c43,8.8,93.1,13.5,135.9,1.4 c40.6-11.5,70-41.1,102.9-65.9c22.9-17.3,44-36.9,71.6-23.7c14.9,7.1,20.7,28.6,34.6,37.8c14.7,9.7,34.7,10.1,51,16 C852.6,138,854.8,118.1,820.3,96.5z M494.7,81.7c34.5,4.3,141.9,1.9,134.9-60.3C626.8-3.2,594.7-4.5,577.9,7 c-20.8,14.4-14.3,27.9-44.8,29c-71.9,2.6-145.4-21.3-218.1-21.3C310.4,53.5,463.4,77.9,494.7,81.7z"></path></svg></div> #}
  28.                 </li>
  29.                 {% for category in categories %}
  30.                  <li type="button" class="filter" data-role="button" data-filter=".category-{{ category.id }}">{{ category.label }}
  31.                     {# <div class="filter_shape"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 850.4 217"><path d="M820.3,96.5c-33.3-20.8-83.5-4.6-118,7.6c-79.5,28.2-150.5,57.8-236.9,44.3C317.8,125.3,122.3-11.8,0,132 c26.4,33.4,64.5-8.1,92.5-18.4c37.9-14,78-14.8,117-5c85.2,21.6,154.1,81.5,242,99.4c43,8.8,93.1,13.5,135.9,1.4 c40.6-11.5,70-41.1,102.9-65.9c22.9-17.3,44-36.9,71.6-23.7c14.9,7.1,20.7,28.6,34.6,37.8c14.7,9.7,34.7,10.1,51,16 C852.6,138,854.8,118.1,820.3,96.5z M494.7,81.7c34.5,4.3,141.9,1.9,134.9-60.3C626.8-3.2,594.7-4.5,577.9,7 c-20.8,14.4-14.3,27.9-44.8,29c-71.9,2.6-145.4-21.3-218.1-21.3C310.4,53.5,463.4,77.9,494.7,81.7z"></path></svg></div> #}
  32.                 </li>
  33.                 {% endfor %}
  34.             </ul>
  35.         </div>
  36.     </div>
  37.         <div class="container-fluid mixitup-container">
  38.         {% for category in categories %}
  39.             <div class="sec-title text-center margin-top-50">
  40.                 <div class="divider"><img src="{{asset('build/theme/images/icons/divider_1.png')}}" alt=""></div>
  41.                 <h1>{{ category.label }}</h1>
  42.             </div>
  43.             <div class="row">
  44.                 {% for item in groupedItems[category.id]|default([]) %}
  45.                     <div class="mix category-{{ category.id }} news-block col-lg-3 col-md-6 col-sm-12">
  46.                         <div class="item" data-category="{{ category.id }}">
  47.                             <div class="inner-box">
  48.                                 <div class="image-column">
  49.                                     <div class="inner-column">
  50.                                         <figure class="image"><img src="{{ item.imagemini }}" alt=""></figure>
  51.                                     </div>
  52.                                 </div>
  53.                                 <div class="content-column">
  54.                                     <div class="inner-column">
  55.                                         <h3>{{ item.label }}</h3>
  56.                                         <ul class="post-info">
  57.                                             {% set labelString = '' %}
  58.                                             {% for criterion in item.criterion %}
  59.                                                 {% set labelString = labelString ~ criterion.label %}
  60.                                                 {% if not loop.last %}
  61.                                                     {% set labelString = labelString ~ '-' %}
  62.                                                 {% endif %}
  63.                                             {% endfor %}
  64.                                             {% if labelString is empty %}
  65.                                                 {% set labelString = 'Pas d\'ingrédients' %}
  66.                                             {% endif %}
  67.                                             
  68.                                             {% set remainingLength = totalLength - labelString|length %}
  69.                                             {% set nbspString = '' %}
  70.                                             {% for i in 1..remainingLength %}
  71.                                                 {% set nbspString = nbspString ~ '&nbsp;' %}
  72.                                             {% endfor %}
  73.                                             
  74.                                             <li>
  75.                                                 <span class="icon">{{ labelString }} {{ nbspString|raw }}</span>
  76.                                             </li>
  77.                                         </ul>
  78.                                         <div class="text">{{ item.price|number_format(2, ',', ' ')  }} DZD</div>
  79.                                         <div class="devider"><img src="{{asset('build/theme/images/icons/icon-devider-gray.png')}}" alt=""></div>
  80.                                     </div>
  81.                                 </div>
  82.                             </div>
  83.                         </div>
  84.                     </div>
  85.                 {% endfor %}
  86.             </div>
  87.         {% endfor %}
  88.     </div>
  89. </section>
  90.     <div class="sec-title text-center margin-top-50">
  91.         <div class="divider"><img src="{{asset('build/theme/images/icons/divider_1.png')}}" alt=""></div>
  92.     </div>
  93.     <input type="hidden" id="route" value="{{ route }}">
  94.     <input type="hidden" id="target" value="{{ target }}">
  95.     <!-- End Blog Showcase -->
  96. <script>
  97. document.addEventListener('DOMContentLoaded', function() {
  98.     var filterButtons = document.querySelectorAll('.filter-tabs .filter');
  99.     var containerEl = document.querySelector('.mixitup-container');
  100.     var mixer = mixitup(containerEl, {
  101.         /*
  102.         animation: {
  103.             duration: 900, // Duration in milliseconds
  104.             effects: 'fade scale(0.9) rotateY(180deg) translateY(-100%) stagger(80ms)', // Combined effects
  105.             easing: 'ease-in-out' // Easing function
  106.         }
  107.         */
  108.         animation: {
  109.             duration: 850, // Duration in milliseconds
  110.             effects: 'fade translateX(-100%) rotateX(90deg) stagger(70ms)', // Combined effects
  111.             easing: 'ease-in-out', // Easing function
  112.             animateResizeTargets: true // Resize targets animated to their new size
  113.         }
  114.         /*
  115.        animation: {
  116.             duration: 750, // Duration in milliseconds
  117.             effects: 'fade rotateY(-180deg) translateX(100%) scale(0.5) stagger(100ms)', // Combined effects
  118.             easing: 'ease-in-out', // Easing function
  119.             perspectiveDistance: '3000px', // Perspective distance for 3D transforms
  120.             perspectiveOrigin: '50% 50%' // Perspective origin for 3D transforms
  121.         }
  122.         */
  123.         /*
  124.         animation: {
  125.             duration: 800, // Duration in milliseconds
  126.             effects: 'fade scale(0.8) rotateZ(-180deg) stagger(60ms)', // Combined effects
  127.             easing: 'ease-in-out', // Easing function
  128.         }
  129.         */
  130.     }); // Assuming MixItUp is already initialized
  132.     filterButtons.forEach(function(btn) {
  133.         btn.addEventListener('click', function() {
  134.             // Remove 'active' class from all buttons
  135.             filterButtons.forEach(function(button) {
  136.                 button.classList.remove('active');
  137.             });
  139.             // Add 'active' class to the clicked button
  140.             this.classList.add('active');
  142.             // Proceed with MixItUp filtering
  143.             mixer.filter(this.getAttribute('data-filter'));
  144.         });
  145.     });
  146. });
  147. </script>
  148. {% endblock %}