templates/front/home.html.twig line 1

Open in your IDE?
  1. {% extends 'front/base.html.twig' %}
  3. {% block meta %}
  4.     {{ parent() }}
  5. {% endblock %}
  7. {% block stylesheets %}
  8.     {{ parent() }}
  9.     <style>
  10.         .see-more-link {
  11.             font-size: 0.875rem;
  12.             color: #222121;
  13.             border: 1px solid #222121;
  14.             border-radius: 20px;
  15.             padding: 6px 12px;
  16.             transition: all 0.3s ease-in-out;
  17.         }
  18.         .see-more-link:hover {
  19.             background-color: #222121;
  20.             color: #fff;
  21.         }
  22.     </style>
  23. {% endblock %}
  25. {% block body %}
  26. <main class="main pt-4 pb-5" style="background-color: #ffffff; color: #222121;">
  28.     {% if sliders %}
  29.         <div class="container">
  30.             <section class="custom-slider-section">
  31.                 
  32.                 <div class="custom-slider-wrapper">
  33.                     {% for slider in sliders %}
  34.                     <div class="custom-slide" style="background-image: url('{{ asset(slider.image) }}');">
  35.                        
  36.                             <div class="slide-content">
  37.                                 {% if slider.title %}
  38.                                     <h2 class="slide-title">{{ slider.title }}</h2>
  39.                                 {% endif %}
  40.                                 {% if slider.description %}
  41.                                     <div class="slide-description">{{ slider.description|raw }}</div>
  42.                                 {% endif %}    
  43.                             </div>
  44.                             {% if slider.description %}
  45.                                 <a href="{{ slider.url }}" ></a>
  46.                             {% endif %}
  47.                        
  48.                     </div>
  49.                     {% endfor %}
  50.                 </div>
  52.                 <button class="slider-arrow left">&#10094;</button>
  53.                 <button class="slider-arrow right">&#10095;</button>
  54.             </section>
  55.         </div>
  56.     {% endif %}
  58.     
  61.     
  62.         
  63.     <div id="app">
  64.         <section v-if="categories.length" v-for="(entry, index) in categories" class="pt-5 mb-5 border-top">
  65.             <div class="container">
  66.                 <div class="d-flex justify-content-between align-items-end mb-4 mt-3 flex-wrap gap-3">
  67.                     <h2 class="section-title d-flex align-items-center mb-0">
  68.                         <i v-if="entry.category.name.includes('Robe')" class="me-2 bi bi-person-lines-fill"></i>
  69.                         <i v-else-if="entry.category.name.includes('Jean')" class="me-2 bi bi-pants"></i>
  70.                         <i v-else-if="entry.category.name.includes('Veste')" class="me-2 bi bi-journal"></i>
  71.                         <i v-else class="me-2 bi bi-bag"></i>
  72.                         ${ entry.category.name }
  73.                     </h2>
  74.                     <a href="#&" class="see-more-link text-decoration-none d-flex align-items-center fw-medium px-3 py-1 rounded-pill" @click="openCategory(entry.category.id, entry.category.name)">
  75.                         Voir plus <i class="fi-rs-angle-double-small-right ms-1"></i>
  76.                     </a>
  77.                 </div>
  79.                 <div class="row g-4">
  80.                     <div class="col-6 col-md-6 col-lg-6" v-for="prod in entry.products.slice(0, 6)" :key="prod.id">
  81.                         
  82.                         <div class="card h-100 border-0">
  83.                             <div class="product-img-container" @click="openProduct(prod.id, prod.name)">
  84.                                 <div class="badges-wrapper">
  85.                                     <span v-if="!prod.stock" class="badge badge-stockout">Rupture</span>
  86.                                     <span v-if="prod.isNew" class="badge badge-new">Nouveau</span>
  87.                                     <span v-if="prod.promo && prod.promo.isValid" class="badge badge-promo">
  88.                                         ${ prod.promo.discountType === 'amount' 
  89.                                             ? '-' + prod.promo.discountValue.toFixed(3) + ' TND' 
  90.                                             : '-' + prod.promo.discountValue + '%' }
  91.                                     </span>
  92.                                 </div>
  93.                                 <img :src="'images/300-400/' + prod.image" :alt="prod.name" class="img-fluid product-img-fixed">
  94.                             </div>
  96.                             <div class="card-body p-2 d-flex flex-column">
  97.                                 <h6 class="card-title">
  98.                                     <a href="#&" class="text-decoration-none" @click="openProduct(prod.id, prod.name)">
  99.                                         ${ prod.name }
  100.                                     </a>
  101.                                 </h6>
  102.                                 <div class="product-price mb-2">
  103.                                     <span v-if="!prod.promo || (prod.promo && !prod.promo.isValid)">
  104.                                         ${ prod.priceTTC.toFixed(3) } TND
  105.                                     </span>
  106.                                     <span v-else>
  107.                                         <strong class="old-price">
  108.                                             ${ prod.promo.discountType === 'amount' 
  109.                                                 ? (prod.priceTTC - prod.promo.discountValue).toFixed(3) 
  110.                                                 : (prod.priceTTC - (prod.priceTTC * prod.promo.discountValue / 100)).toFixed(3) } TND
  111.                                         </strong>
  112.                                         <del class="ms-1">${ prod.priceTTC.toFixed(3) } TND</del>
  113.                                     </span>
  114.                                 </div>
  115.                                 <button class="btn btn-sm mt-auto" @click="getProduit(prod.id)" :disabled="!prod.stock">
  116.                                     <i class="fi-rs-shopping-bag-add me-1"></i> Ajouter
  117.                                 </button>
  118.                             </div>
  119.                         </div>
  120.                     </div>
  121.                 </div>
  122.             </div>
  123.         </section>
  124.     </div>
  125.         
  126.     
  127.         
  128.           
  129. </main>
  130. {% endblock %}
  132. {% block javascripts %}
  134.     {{ parent() }}
  135.     
  137.       
  138.     <script src="{{ asset('front/assets/scripts/home/home.js') }}"></script>
  139.     <script>
  140.         
  141.         $(document).ready(function () {
  142.             $("#preloader-active-loading").hide();
  143.         });
  145.        
  146.         document.addEventListener('DOMContentLoaded', function () {
  147.             const wrapper = document.querySelector('.custom-slider-wrapper');
  148.             const slides = document.querySelectorAll('.custom-slide');
  149.             const totalSlides = slides.length;
  150.             let currentIndex = 0;
  151.         
  152.             // Définir la largeur dynamique
  153.             wrapper.style.width = `${100 * totalSlides}%`;
  154.             slides.forEach(slide => {
  155.               slide.style.flex = `0 0 ${100 / totalSlides}%`;
  156.             });
  157.         
  158.             function showSlide(index) {
  159.               wrapper.style.transform = `translateX(-${index * (100 / totalSlides)}%)`;
  160.             }
  161.         
  162.             document.querySelector('.slider-arrow.left').addEventListener('click', () => {
  163.               currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
  164.               showSlide(currentIndex);
  165.             });
  166.         
  167.             document.querySelector('.slider-arrow.right').addEventListener('click', () => {
  168.               currentIndex = (currentIndex + 1) % totalSlides;
  169.               showSlide(currentIndex);
  170.             });
  171.         
  172.             showSlide(currentIndex);
  174.             
  175.           });
  176.                 
  177.                 
  178.          
  179.                 
  180.     </script>
  181.       
  182.       
  183. {% endblock %}