templates/app/cakeshop.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set side_nav = 'cake' %}
  4. {% block body %}
  6.     <!--Page Title-->
  7.     <section class="page-title" style="background-image: url('{{ asset('build/theme/images/main-slider/5.jpg') }}');">
  8.         <div class="auto-container">
  9.             <h1>Pièces montée</h1>
  10.             <ul class="page-breadcrumb">
  11.                 <li><a href="index.html">Pièces montée</a></li>
  12.                 <li>Fêtes, Anniversaires, Mariages ...</li>
  13.             </ul>
  14.         </div>
  15.     </section>
  16.     <!--End Page Title-->
  17.     
  18.     <!-- Blog Showcase -->
  19.     <section class="blog-section blog-showcase">
  20.         <div class="auto-container">
  21.             <div class="row clearfix">
  22.                 <div class="content-side col-lg-9 col-md-12 col-sm-12">
  23.                     <div class="our-shop">
  24.                         <div class="shop-upper-box clearfix">
  25.                             <div class="product-view-mode mr-70 mr-sm-20">
  26.                                 <!-- View mode toggle icons -->
  27.                                 <a class="active" href="#" data-bs-target="grid"><i class="fa fa-th"></i></a>
  28.                                 <a href="#" data-bs-target="list"><i class="fa fa-list"></i></a>
  29.                             </div>
  30.                             <div class="product-amount">
  31.                                 <p><span id="results">{{ cakes|length }}</span> résultats</p>
  32.                             </div>
  33.                         </div>
  34.                     </div>
  35.                 </div>
  36.             </div>
  37.             <!-- Grid Layout (initially displayed) -->
  38.             <div class="row grid-layout">
  39.                 {% for cake in cakes %}
  40.                 <div class="portfolio-block-four col-lg-3 col-md-6 col-sm-12">
  41.                     <div class="inner-box">
  42.                         <div class="image-box">
  43.                             <figure class="image"><img src="{{cake.imagemini}}" alt="Cake Image"></figure>
  44.                             <div class="hover-effect">
  45.                                 <svg x="0px" y="0px" viewBox="79 -202.7 1000 1000">
  46.                                     <path d="M5459-1110.4L579.1-202.7c10.7,0,21.6,1.5,32.5,4.4c22.3,6,41.3,17,58,26.6c11.9,6.9,23,13.3,31.1,15.5 c6.8,1.8,19.4,1.8,26.2,1.8h12.9c27.5,0,59.4,1.4,89.3,18.7c32.8,19,50.2,49.3,64.1,73.7c6.2,10.9,12.6,22.1,17.8,27.3 c5.9,5.9,17.1,12.3,28.9,19.1c24,13.8,53.8,31,72.2,63c18.6,32.3,18.5,67,18.4,94.8c0,13.5-0.1,26.1,2,33.7 c2.1,7.7,8.4,18.7,15.2,30.3c14,24.1,31.4,54.1,31.4,91.3c0,36.8-17.2,66.6-31,90.6c-6.9,11.9-13.3,23-15.5,31.1 c-1.6,6.1-1.9,16.3-1.9,26.9c5.5,35.9-0.9,71-18.5,101.6c-18.9,32.7-49.1,50-73.4,63.9c-11.4,6.5-22.5,12.9-27.8,18.2 c-5.9,5.9-12.3,17-19,28.7c-14,24.2-31.1,54.1-63.1,72.5c-29.5,17-60.5,18.5-89.7,18.5h-10.3c-10.6,0-21.6,0.2-28.4,2 c-7.6,2-18.5,6.5-30.1,13.2c-24.1,14-54,29.6-91.3,29.6H579c-36.8,0-66.6-15.3-90.6-29.2c-11.8-6.8-22.9-12.3-31-14.4 c-6-1.6-16.1-1.4-26.1-1.4l-12.8,0.3c-17.5,0-37.9-0.3-58.4-5.8c-11.2-3-21.4-7.1-31-12.7c-33-19.1-50.3-49.4-64.3-73.8 c-6.2-10.8-12.6-22-17.8-27.2c-5.9-5.9-17-12.3-28.8-19.1c-24-13.8-53.8-31-72.3-63c-18.6-32.3-18.5-67-18.4-94.9 c0-13.4,0.1-26.1-2-33.7c-2-7.7-8.4-18.6-15.2-30.2c-14-24.1-31.4-54-31.4-91.3c0-36.8,17.2-66.7,31.1-90.7 c6.8-11.8,13.3-22.9,15.4-31c1.9-7.2,1.9-20.1,1.8-32.6c-0.1-28.1-0.2-63.1,18.8-95.9c19-32.9,49.3-50.2,73.6-64.2 c10.9-6.2,22.1-12.7,27.3-17.9c5.9-5.9,12.3-17.1,19.2-28.9c13.8-24,31-53.8,62.9-72.2c29.5-17,60.3-18.5,89.3-18.5h11 c10,0,21.3-0.2,28.2-2c7.6-2.1,18.6-8.4,30.1-15.1c24.3-14.1,54.3-31.5,91.4-31.6l4856-83.7l64-2888l-12016,96l-16,7000l7344,32 l4760,96L5459-1110.4z M909.2,106.8c-10.2-17.7-28.5-28.3-46.3-38.5c-12.2-7.1-23.8-13.7-32.4-22.3c-8.1-8.1-14.5-19.3-21.3-31.2 C798.8-3.3,788.1-22,769.7-32.7s-40-10.6-60.8-10.5c-13.7,0.1-26.6,0.1-37.7-2.9c-11.8-3.2-23.3-9.8-35.6-16.9 C623-70.3,610-77.8,596.2-81.5c-5.6-1.5-11.3-2.4-17.1-2.4c-20.7,0-39.2,10.8-57,21.1c-12.1,7-23.5,13.7-35,16.8s-24.7,3-38.6,3 c-20.6-0.1-42-0.1-59.9,10.3c-17.7,10.2-28.3,28.6-38.5,46.3c-7.1,12.3-13.7,23.8-22.3,32.5c-8.1,8.1-19.4,14.6-31.2,21.4 c-18.1,10.4-36.8,21.1-47.4,39.5c-10.7,18.5-10.6,40-10.5,60.9c0,13.7,0.1,26.6-2.9,37.8c-3.2,11.8-9.8,23.3-16.9,35.5 C208.6,259,198,277.4,198,297.8c0,20.8,10.7,39.2,21.1,57.1c7,12.1,13.6,23.5,16.7,35c3.1,11.5,3,24.6,3,38.6 c-0.1,20.7-0.1,42,10.2,60.1c10.2,17.7,28.5,28.3,46.3,38.5c12.2,7.1,23.8,13.7,32.4,22.3c8.1,8.1,14.5,19.3,21.3,31.2 c10.4,18.2,21.1,36.9,39.5,47.5c5.1,2.9,10.6,5.2,16.7,6.8c14.1,3.8,29.3,3.7,44,3.7c13.8-0.1,26.7-0.1,37.8,2.9 c11.8,3.2,23.3,9.8,35.5,16.9c17.8,10.3,36.1,20.9,56.6,20.9c20.8,0,39.2-10.8,57-21.2c12.1-7,23.5-13.7,35-16.7 c11.5-3.1,24.6-3,38.6-3c20.7,0,42.1,0.1,60.1-10.3c17.7-10.2,28.4-28.6,38.6-46.3c7.1-12.3,13.9-23.8,22.5-32.4 c8.1-8.1,19.6-14.5,31.5-21.3c18.2-10.4,37.7-21.1,48.4-39.6c10.6-18.5,8.9-87.6,11.9-98.7c3.2-11.8,9.8-23.3,16.9-35.6 c10.3-17.8,20.9-36.1,20.9-56.6c0-20.8-10.7-39.2-21.1-57.1c-7-12.1-13.6-23.5-16.7-35c-3.1-11.5-3-24.7-3-38.7 C919.5,146.2,919.5,124.8,909.2,106.8z"></path>
  47.                                 </svg>
  48.                                 <a href="{{cake.image}}" class="lightbox-image link" data-fancybox="portfolio"></a>
  49.                             </div>
  50.                         </div>
  51.                     </div>
  52.                 </div>
  53.                 {% endfor %}
  54.             </div>
  56.             <!-- List Layout (initially hidden) -->
  57.             <div class="list-layout" style="display: none;">
  58.                 {% for cake in cakes %}
  59.                 {% set className = loop.index is even ? 'news-block style-two' : 'news-block' %}
  60.                 <div class="{{className}}">
  61.                     <div class="inner-box row">
  62.                         <div class="image-column col-lg-6 col-md-12 col-sm-12">
  63.                             <div class="inner-column">
  64.                                 <figure class="image"><img src="{{ cake.image }}" alt="Cake Image"></figure>
  65.                             </div>
  66.                         </div>
  67.                         <div class="content-column col-lg-6 col-md-12 col-sm-12">
  68.                             <div class="inner-column">
  69.                                 <h3>{{cake.label}}</h3>
  70.                                 {# <ul class="post-info">
  71.                                     <li><span class="icon fa fa-user"></span> by admin</li>
  72.                                     <li><a href="#"><span class="icon fa fa-heart"></span> 5 likes</a></li>
  73.                                 </ul> #}
  74.                                 <div class="text">{{cake.description}}</div>
  75.                                 <div class="icon"><img src="{{asset('build/theme/images/icons/icon-devider-gray.png')}}" alt=""></div>
  76.                             </div>
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.                 {% endfor %}
  81.             </div>
  82.         </div>
  83.     </section>
  86.     <!-- Form Column -->
  87.     <div class="cws_divider"><img src="{{asset('build/theme/images/icons/divider_13.png')}}" alt=""></div>
  88.     <section class="contact-section">
  89.         <div class="auto-container">
  90.             <div class="row clearfix">
  91.                 <div class="column col-xl-3 col-lg-6 col-md-6 col-sm-12">
  92.                     <div class="inner-column">
  93.                         <div class="title">
  94.                             <div class="icon"><img src="{{asset('build/theme/images/icons/icon-devider-gray.png')}}" alt=""></div>
  95.                             <h4>Horaires d'ouverture</h4>
  96.                         </div>
  97.                         <ul class="contact-info">
  98.                             <li>Dimanche – Jeudi <br>08:00 – 17:30</li>
  99.                             <li>Vendredi <br>09:00 – 16:00</li>
  100.                             <li>Samedi <br>FERME</li>
  101.                         </ul>
  102.                     </div>
  103.                 </div>
  106.                 <!-- Form Column -->
  107.                 <div class="column col-xl-3 col-lg-6 col-md-6 col-sm-12 order-3">
  108.                     <div class="inner-column">
  109.                         <div class="title">
  110.                             <div class="icon"><img src="{{asset('build/theme/images/icons/icon-devider-gray.png')}}" alt=""></div>
  111.                             <h4>Nos Contacts</h4>
  112.                         </div>
  113.                         <ul class="contact-info">
  114.                             <li>785 Carriage Drive, Jacksonville Beach, FL</li>
  115.                             <li><a href="tel:12032842818">+1 203-284-2818</a><br><a href="tel:12032842919">+1 203-284-2919</a></li>
  116.                             <li><a href="mailto:info@your-site.com">info@your-site.com</a><br> <a href="mailto:sales@your-site.com">sales@your-site.com</a></li>
  117.                         </ul>
  118.                     </div>
  119.                 </div>
  120.                 <!-- Form Column -->
  121.                 <div class="column col-xl-6 col-lg-12 col-md-12 col-sm-12">
  122.                     <div class="inner-column">
  123.                         <div class="title">
  124.                             <div class="icon"><img src="{{asset('build/theme/images/icons/icon-devider-gray.png')}}" alt=""></div>
  125.                             <h4>Envoyez un message</h4>
  126.                         </div>
  127.                         <div class="contact-form">
  128.                             <form action="{{path('cakeshop')}}" method="post">
  129.                                 <div class="form-group">
  130.                                     <div class="response"></div>
  131.                                 </div>
  132.                                 <div class="form-group">
  133.                                     <input type="text" name="username" class="username" placeholder="Nom et prénom">
  134.                                 </div>
  135.                                 <div class="form-group">
  136.                                     <input type="email" name="email" class="email" placeholder="Adresse mail">
  137.                                 </div>
  139.                                 <div class="form-group">
  140.                                     <textarea name="contact_message" placeholder="Message"></textarea>
  141.                                 </div>
  143.                                 <div class="form-group">
  144.                                     <button class="theme-btn" type="submit" id="submit" name="submit-form">Envoyez</button>
  145.                                 </div>
  146.                             </form>
  147.                         </div>
  148.                     </div>
  149.                 </div>
  150.             </div>
  151.         </div>
  152.     </section>
  153.     <input type="hidden" id="route" value="{{ route }}">
  154.     <input type="hidden" id="target" value="{{ target }}">
  155.     <!-- End Blog Showcase -->
  156. <script>
  157.     document.addEventListener('DOMContentLoaded', function() {
  158.         // Selecting the grid and list icons
  159.         var gridViewIcon = document.querySelector('[data-bs-target="grid"]');
  160.         var listViewIcon = document.querySelector('[data-bs-target="list"]');
  162.         // Selecting the grid and list layout elements
  163.         var gridLayout = document.querySelector('.grid-layout');
  164.         var listLayout = document.querySelector('.list-layout');
  166.         // Function to toggle views
  167.         function toggleView() {
  168.             gridLayout.style.display = gridLayout.style.display === 'none' ? '' : 'none';
  169.             listLayout.style.display = listLayout.style.display === 'none' ? '' : 'none';
  170.             gridViewIcon.classList.toggle('active');
  171.             listViewIcon.classList.toggle('active');
  172.         }
  174.         // Adding event listeners to icons
  175.         gridViewIcon.addEventListener('click', function(e) {
  176.             e.preventDefault();
  177.             if (!gridViewIcon.classList.contains('active')) {
  178.                 toggleView();
  179.             }
  180.         });
  182.         listViewIcon.addEventListener('click', function(e) {
  183.             e.preventDefault();
  184.             if (!listViewIcon.classList.contains('active')) {
  185.                 toggleView();
  186.             }
  187.         });
  188.     });
  189. </script>
  190. {% endblock %}