templates/main/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Les trésors de Luna - Accueil{% endblock %}
  5. {% block body %}
  7. <div class="cookies-warning hide">
  8.   <p>
  9.     Utilisation des cookies<br>
  10.     Ce site utilise des cookies essentiels pour le bon fonctionnement de certaines fonctionnalités, comme la gestion de la session utilisateur. En poursuivant votre navigation, vous acceptez leur utilisation.
  11.     <br>
  12.     Pour plus d'informations, consultez notre 
  13.     <a href="{{ path('politique_confidentialite') }}" target="_blank">Politique de Confidentialité</a>.
  14.   </p>
  15.   <button class="cookies-accept" id="cookies-accept">J'accepte</button>
  16. </div>
  19. <section id="banner" style="background: #F9F3EC;">
  20.   <div class="swiper main-swiper">
  22.     <div class="swiper-wrapper">
  24.       {#
  25.       <div id="slide-start" class="swiper-slide col-md-5">
  27.         <div class="container">
  29.           <div class="img-wrapper col-md-5">
  30.             <img id="logo-tresors-luna" src="{{asset('images/logo_2.png')}}">
  31.           </div>
  32.   
  33.           <div class="content-wrapper p-5 mb-5">
  34.   
  35.             <h2 class="banner-title display-1 fw-normal">Les meilleurs affaires pour <span class="text-primary">
  36.                 vous</span>
  37.             </h2>
  38.             <a href="{{path('products_filter')}}" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">
  39.               La boutique
  40.               <svg width="24" height="24" viewBox="0 0 24 24" class="mb-1">
  41.                 <use xlink:href="#arrow-right"></use>
  42.               </svg></a>
  43.           </div>
  45.         </div>
  46.         
  47.       </div>
  48.       #}
  49.       <div id="slide-0" class="swiper-slide">
  50.         <img src="{{asset('images/index/carousel/banniere_ETE_1.jpg')}}" alt="">
  51.       </div>
  52.       <div id="slide-1" class="swiper-slide">
  53.         <img src="{{asset('images/index/carousel/banniere_ETE_2.jpg')}}" alt="">
  54.       </div>
  55.       <div id="slide-2" class="swiper-slide">
  56.         <img src="{{asset('images/index/carousel/banniere_ETE_3.jpg')}}" alt="">
  57.       </div>
  58.         
  59.     </div>
  61.      <div class="swiper-pagination"></div>
  63.   </div>
  64. </section>
  66. {#
  67. <section id="banner" >
  68.   <div class="slider">
  70.     <div class="slides">
  71.       
  72.       <img src="{{asset('images/logo_2.png')}}">
  73.       
  74.       <div class="">
  75.         <h2 class="banner-title">Les meilleurs affaires pour <span class="text-primary">
  76.             vous</span>
  77.         </h2>
  78.         <a href="{{path('products_filter')}}" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">
  79.           La boutique
  80.           <svg width="24" height="24" viewBox="0 0 24 24" class="mb-1">
  81.             <use xlink:href="#arrow-right"></use>
  82.           </svg></a>
  83.       </div>        
  86.     </div>
  87.     
  88.     <div class="slides">
  89.       <img src="{{asset('images/logo_2.png')}}">
  90.       
  91.       <div class="">
  92.         <h2 class="banner-title">Les meilleurs affaires pour <span class="text-primary">
  93.             vous</span>
  94.         </h2>
  95.         <a href="{{path('products_filter')}}" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">
  96.           La boutique
  97.           <svg width="24" height="24" viewBox="0 0 24 24" class="mb-1">
  98.             <use xlink:href="#arrow-right"></use>
  99.           </svg></a>
  100.       </div>    
  101.     </div>
  102.     
  105.   </div>
  107. </section>
  108. #}
  110. {#
  111. <section id="banner" style="background: #F9F3EC; position: relative;">
  112.     <div class="container">
  113.       <div class="swiper main-swiper">
  114.         <div class="swiper-wrapper">
  116.           <div class="swiper-slide py-5">
  117.             <div class="row banner-content align-items-center">
  118.               <div class="img-wrapper col-md-5">
  119.                 <img src="{{asset('images/logo_2.png')}}" class="img-fluid">
  120.               </div>
  121.               <div class="content-wrapper col-md-7 p-5 mb-5">
  122.                 <h2 class="banner-title display-1 fw-normal">Les meilleurs affaires pour <span class="text-primary">
  123.                     vous</span>
  124.                 </h2>
  125.                 <a href="{{path('products_filter')}}" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">
  126.                   La boutique
  127.                   <svg width="24" height="24" viewBox="0 0 24 24" class="mb-1">
  128.                     <use xlink:href="#arrow-right"></use>
  129.                   </svg></a>
  130.               </div>
  132.             </div>
  133.           </div>
  135.           <div class="swiper-slide py-5">
  136.             <div class="row banner-content align-items-center">
  138.               <img src="{{asset('images/index/carousel/banniere_ETE_1.jpg')}}" alt="">
  140.             </div>
  141.           </div>
  143.           <div class="swiper-slide py-5">
  144.             <div class="row banner-content align-items-center">
  146.               <img src="{{asset('images/index/carousel/banniere_ETE_2.jpg')}}" alt="">
  148.             </div>
  149.           </div>
  151.           <div class="swiper-slide py-5">
  152.             <div class="row banner-content align-items-center">
  154.               <img src="{{asset('images/index/carousel/banniere_ETE_3.jpg')}}" alt="">
  156.             </div>
  157.           </div>
  159.         </div>
  161.         <div class="swiper-pagination mb-5"></div>
  163.       </div>
  164.     </div>
  165. </section>
  166. #}
  169. <section id="categories">
  170.     <div class="container my-3 py-5">
  171.       <div class="row my-5">
  172.         <div class="col text-center">
  173.           <a href="#" class="categories-item">
  174.             <iconify-icon class="category-icon" icon="ph:sketch-logo"></iconify-icon>
  175.             <h5>Bijoux</h5>
  176.           </a>
  177.         </div>
  178.         <div class="col text-center">
  179.           <a href="#" class="categories-item">
  180.             <iconify-icon class="category-icon" icon="material-symbols:floor-lamp-outline"></iconify-icon>
  181.             <h5>Décorations</h5>
  182.           </a>
  183.         </div>
  184.         <div class="col text-center">
  185.           <a href="#" class="categories-item">
  186.             <iconify-icon class="category-icon" icon="material-symbols:apparel-outline"></iconify-icon>
  187.             <h5>Vêtements</h5>
  188.           </a>
  189.         </div>
  190.         <div class="col text-center">
  191.           <a href="{{path('products_filter', {'category': 2})}}" class="categories-item">
  192.             <iconify-icon class="category-icon" icon="material-symbols:coffee-outline"></iconify-icon>
  193.             <h5>Mugs</h5>
  194.           </a>
  195.         </div>
  196.         {#
  197.         <div class="col text-center">
  198.           <a href="#" class="categories-item">
  199.             <iconify-icon class="category-icon" icon="ph:cat"></iconify-icon>
  200.             <h5>Cat Shop</h5>
  201.           </a>
  202.         </div>
  203.         #}
  204.       </div>
  205.     </div>
  206. </section>
  208. {% if app.user and app.user.isVerified %}
  209.   
  211. {% endif %}
  213. {% if categories %}
  215.   {% for category in categories %}
  217.     {% if category.product is not empty and category.indexVisible is not same as(false) and category.indexVisible is not null %}
  218.     
  219.       <section id="{{category.name}}" class="my-5 overflow-hidden">
  220.         <div class="container pb-5">
  221.   
  222.           <div class="section-header d-md-flex justify-content-between align-items-center mb-3">
  223.             <h2 class="display-3 fw-normal">{{category.name}}</h2>
  224.             <div>
  225.               <a href="{{path('products_filter', {'category': category.id})}}" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">
  226.                 Voir plus
  227.                 <svg width="24" height="24" viewBox="0 0 24 24" class="mb-1">
  228.                   <use xlink:href="#arrow-right"></use>
  229.                 </svg></a>
  230.             </div>
  231.           </div>
  232.   
  233.           <div class="products-carousel swiper">
  234.             <div class="swiper-wrapper">
  235.   
  236.               {% for product in category.product|slice(0, 10) %}
  237.   
  238.                 <div class="swiper-slide">
  239.                   <div class="card position-relative">
  240.                     {% if is_granted("ROLE_ADMIN") %}
  241.                     <a class="product-image" href="{{path('admin_edit_product', {'id': product.id})}}">
  242.                       <img src="{{asset('uploads/product_images/' ~ product.mainImageLink)}}" class="img-fluid rounded-4" style="object-fit:cover;" alt="image">
  243.                     </a>
  244.                       {% else %}
  245.                       <a class="product-image" href="{{path('product', {'id': product.id})}}">
  246.                         <img src="{{asset('uploads/product_images/' ~ product.mainImageLink)}}" class="img-fluid rounded-4" style="object-fit:cover;" alt="image">
  247.                       </a>
  248.                     {% endif %}
  249.                     <div class="card-body p-0">
  250.                       <a href="{{path('product', {'id': product.id})}}">
  251.                         <h3 class="card-title pt-4 m-0">{{product.name}}</h3>
  252.                       </a>
  253.   
  254.                       <div class="card-text">
  255.     
  256.   
  257.                         <h3 class="secondary-font text-primary">{{product.price}}€</h3>
  258.                         
  259.                         {% if product.stock != 0 %}
  260.                           <div class="btn-cart-wrapper d-flex flex-wrap mt-3" >
  261.                             <a href="{{path('product', {'id': product.id})}}" class="btn-cart btn-outline-primary me-3 px-4 pt-3 pb-3">
  262.                               <h5 class="text-uppercase m-0">Ajouter au panier</h5>
  263.                             </a>
  265.                           </div>
  266.                         {% else %}
  267.                           <p class="alert-stock">Produit indisponible</p>
  268.                         {% endif %}
  269.   
  270.   
  271.                       </div>
  272.   
  273.                     </div>
  274.                   </div>
  275.                 </div>
  277.   
  278.               {% endfor %}
  279.             </div>
  280.             <div class="swiper-button-prev"></div>
  281.             <div class="swiper-button-next"></div>
  282.             <div class="swiper-pagination swiper-pagination-products mb-5"></div>
  283.           </div>
  284.           <!-- / products-carousel -->
  285.   
  286.   
  287.         </div>
  288.       </section>
  290.     {% endif %}
  292.     
  293.   {% endfor %}
  295.   {% else %}
  296.     
  297.     <div id="no_categories_message" class="container d-flex justify-content-center align-items-center">
  298.       <p class="m-3">Aucune catégories existante, veuillez en créer une ou plusieurs</p>
  299.     </div>
  300.   
  301. {% endif %}
  303. {% block javascripts %}
  305.   <script type="module" src="{{asset('js/classes/Cart.js')}}"></script>
  306.   <script type="module" src="{{asset('js/buying.js')}}"></script>
  307.   <script>
  308.     window.addEventListener('load', () => {
  309.       messageFlashHide()
  310.       cookiesAccept()
  312.       function cookiesAccept()
  313.       {
  314.         const container = document.querySelector('.cookies-warning')
  315.         const acceptButton = document.querySelector('.cookies-accept')
  317.         if (document.cookie.indexOf('cookies_accepted=true') !== -1)
  318.         {
  319.           container.classList.add('hide')
  320.         }
  321.         else
  322.         {
  323.           container.classList.remove('hide')
  324.         }
  326.         acceptButton.addEventListener('click', () => {
  327.           document.cookie = "cookies_accepted=true; path=/; max-age=" + 60 * 60 * 24 * 365;
  328.           container.classList.add('hide')
  329.         })
  331.       }
  333.       function messageFlashHide()
  334.       {
  335.         const messageFlash = document.querySelector('.alert')
  336.   
  337.         if (messageFlash)
  338.         {
  339.   
  340.           setTimeout(()=> {
  341.             messageFlash.style.transition = "opacity 1500ms ease-out"
  342.             messageFlash.style.opacity = "0"
  343.   
  344.             setTimeout(() =>  {
  345.                 messageFlash.remove()
  346.             }, 1500)
  347.           }, 1500)
  348.         }
  349.       }  
  350.     })
  351.   </script>
  353. {% endblock javascripts %}
  355. {% endblock %}