templates/blo/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'blo/base.html.twig' %}
  3. {% block title %}BLO — Achat en ligne{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7. <style>
  8.     .blo-hero-slider-wrap { padding: 1rem 1rem 0; }
  9.     .blo-hero-slider { 
  10.         width: 100%; 
  11.         aspect-ratio: 1920 / 520; 
  12.         border-radius: 20px; 
  13.         overflow: hidden; 
  14.         box-shadow: 0 12px 32px rgba(93,184,91,0.15); 
  15.     }
  16.     .blo-hero-slider .carousel-inner, .blo-hero-slider .carousel { height: 100%; }
  17.     .blo-hero-slide {
  18.         position: relative;
  19.         width: 100%;
  20.         height: 100%;
  21.         background-size: cover;
  22.         background-position: center;
  23.         background-repeat: no-repeat;
  24.         background-color: #1a1a2e;
  25.     }
  26.     .blo-hero-slide::before {
  27.         content: '';
  28.         position: absolute;
  29.         inset: 0;
  30.         background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  31.         border-radius: 0;
  32.         z-index: 1;
  33.     }
  34.     .blo-hero-slide .slide-content {
  35.         position: absolute;
  36.         inset: 0;
  37.         z-index: 2;
  38.         display: flex;
  39.         flex-direction: column;
  40.         justify-content: center;
  41.         padding: 2rem 2.5rem;
  42.         max-width: 540px;
  43.         color: #fff;
  44.     }
  45.     .blo-hero-slide .slide-content h2 { color: #fff; font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
  46.     .blo-hero-slide .slide-content .price { font-size: 1.6rem; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,0.3); white-space: nowrap; }
  47.     .blo-hero-slide .slide-content .price-old { font-size: 1rem; opacity: 0.7; text-decoration: line-through; margin-left: 0.5rem; }
  48.     .blo-hero-slider .carousel-control-prev, .blo-hero-slider .carousel-control-next { width: 4rem; opacity: 0.9; z-index: 10; }
  49.     .blo-hero-slider .carousel-indicators button { background-color: rgba(255,255,255,0.5); width: 10px; height: 10px; border-radius: 50%; border: none; margin: 0 6px; }
  50.     .blo-hero-slider .carousel-indicators button.active { background-color: #fff; transform: scale(1.2); }
  51.     .blo-scroll-row { display: flex; overflow-x: auto; gap: 1rem; padding-bottom: 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  52.     .blo-scroll-row .blo-product-box { flex: 0 0 200px; scroll-snap-align: start; }
  53.     @media (min-width: 768px) { .blo-scroll-row .blo-product-box { flex: 0 0 220px; } }
  54.     @media (max-width: 576px) { .blo-hero-slide .slide-content { padding: 1.2rem 1.2rem; } .blo-hero-slide .slide-content h2 { font-size: 1.2rem; } }
  55. </style>
  56. {% endblock %}
  58. {% block body %}
  59. <div class="container-fluid px-0 blo-hero-slider-wrap">
  60.     {# Slider hero (produits configurés en admin) #}
  61.     {% if sliderItems|default([])|length > 0 %}
  62.     <section class="blo-hero-slider container">
  63.         <div id="heroSlider" class="carousel slide h-100" data-bs-ride="carousel">
  64.             <div class="carousel-indicators">
  65.                 {% for item in sliderItems %}
  66.                 <button type="button" data-bs-target="#heroSlider" data-bs-slide-to="{{ loop.index0 }}" {{ loop.first ? 'class="active"' : '' }}></button>
  67.                 {% endfor %}
  68.             </div>
  69.             <div class="carousel-inner h-100">
  70.                 {% for item in sliderItems %}
  71.                 {% set firstImg = item.product is not null ? item.product.images|first : null %}
  72.                 {% set bgImg = item.backgroundImage ? asset('uploads/slider/' ~ item.backgroundImage) : asset('assets/images/background/weatherbg.jpg') %}
  73.                 <div class="carousel-item {{ loop.first ? 'active' : '' }} h-100">
  74.                     <div class="blo-hero-slide" style="background-image: url('{{ bgImg }}');">
  75.                         <div class="container h-100">
  76.                             <div class="row align-items-center h-100">
  77.                                 <div class="col-md-6 text-center text-md-start">
  78.                                     <h2>{{ item.getDisplayTitle() }}</h2>
  79.                                     {% if item.getDisplaySubtitle() %}<p class="mb-2" style="opacity:0.9;">{{ item.getDisplaySubtitle() }}</p>{% endif %}
  80.                                     {% if item.product is not null %}
  81.                                     <p class="mb-3">
  82.                                         <span class="price">
  83.                                             {% if item.product.promoPrice %}{{ item.product.promoPrice|blo_price(item.product.currency) }}{% else %}{{ item.product.price|blo_price(item.product.currency) }}{% endif %}
  84.                                         </span>
  85.                                         {% if item.product.promoPrice %}<span class="price-old">{{ item.product.price|blo_price(item.product.currency) }}</span>{% endif %}
  86.                                     </p>
  87.                                     <a href="{{ path('blo_product_show', {slug: item.product.slug}) }}" class="btn btn-light rounded-pill px-4 fw-bold shadow-sm" style="color:#2e7d32;">Je découvre</a>
  88.                                     {% endif %}
  89.                                 </div>
  90.                                 <div class="col-md-6 text-center d-none d-md-flex align-items-center justify-content-center h-100 py-3">
  91.                                     {% if firstImg %}
  92.                                     <img src="{{ asset('uploads/' ~ firstImg.path) }}" alt="{{ item.getDisplayTitle() }}" style="max-height: 100%; max-width: 90%; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));">
  93.                                     {% endif %}
  94.                                 </div>
  95.                             </div>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  99.                 {% endfor %}
  100.             </div>
  101.             <button class="carousel-control-prev" type="button" data-bs-target="#heroSlider" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
  102.             <button class="carousel-control-next" type="button" data-bs-target="#heroSlider" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
  103.         </div>
  104.     </section>
  105.     {% endif %}
  106. </div>
  108. <div class="container py-3">
  109.     {# Offres du moment #}
  110.     {% if promoProducts|length > 0 %}
  111.     <section class="blo-section-box">
  112.         <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
  113.             <h2 class="mb-0">Offres du moment</h2>
  114.             <a href="{{ path('blo_catalog') }}?promo=1" class="small">Voir tout</a>
  115.         </div>
  116.         <div class="row g-3">
  117.             {% for product in promoProducts %}
  118.             <div class="col-6 col-sm-4 col-md-3 col-lg-2">
  119.                     <div class="blo-product-box">
  120.                         <a href="{{ path('blo_product_show', {slug: product.slug}) }}" class="text-decoration-none text-dark d-block">
  121.                             <div class="img-wrap position-relative">
  122.                                 <span class="badge bg-danger position-absolute top-0 start-0 rounded-pill">Promo</span>
  123.                                 {% set firstImage = product.images|first %}
  124.                                 {% if firstImage %}
  125.                                 <img src="{{ asset('uploads/' ~ firstImage.path) }}" alt="{{ product.title }}">
  126.                                 {% else %}
  127.                                 <i class="bi bi-image text-secondary" style="font-size: 3rem;"></i>
  128.                                 {% endif %}
  129.                             </div>
  130.                             <div class="title">{{ product.title }}</div>
  131.                             <p class="price mb-0"><del>{{ product.price|blo_price(product.currency) }}</del> {{ product.promoPrice|blo_price(product.currency) }}</p>
  132.                         </a>
  133.                         <form action="{{ path('blo_cart_add', {productId: product.id}) }}" method="post" class="d-inline">
  134.                             <button type="submit" class="blo-product-add-btn" title="Ajouter au panier"><i class="bi bi-plus-lg fs-5"></i></button>
  135.                         </form>
  136.                     </div>
  137.             </div>
  138.             {% endfor %}
  139.         </div>
  140.     </section>
  141.     {% endif %}
  143.     {# Nouveautés (défilement horizontal sur mobile) #}
  144.     {% if newestProducts|length > 0 %}
  145.     <section class="blo-section-box">
  146.         <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
  147.             <h2 class="mb-0">Nouveautés</h2>
  148.             <a href="{{ path('blo_catalog') }}?newest=1" class="small">Voir tout</a>
  149.         </div>
  150.         <div class="blo-scroll-row d-md-none">
  151.             {% for product in newestProducts %}
  152.                     <div class="blo-product-box">
  153.                         <a href="{{ path('blo_product_show', {slug: product.slug}) }}" class="text-decoration-none text-dark d-block">
  154.                             <div class="img-wrap">
  155.                                 {% set firstImage = product.images|first %}
  156.                                 {% if firstImage %}<img src="{{ asset('uploads/' ~ firstImage.path) }}" alt="{{ product.title }}">{% else %}<i class="bi bi-image text-secondary"></i>{% endif %}
  157.                             </div>
  158.                             <div class="title">{{ product.title }}</div>
  159.                             <p class="price mb-0">{% if product.promoPrice %}<del>{{ product.price|blo_price(product.currency) }}</del> {{ product.promoPrice|blo_price(product.currency) }}{% else %}{{ product.price|blo_price(product.currency) }}{% endif %}</p>
  160.                         </a>
  161.                         <form action="{{ path('blo_cart_add', {productId: product.id}) }}" method="post" class="d-inline">
  162.                             <button type="submit" class="blo-product-add-btn" title="Ajouter au panier"><i class="bi bi-plus-lg fs-5"></i></button>
  163.                         </form>
  164.                     </div>
  165.             {% endfor %}
  166.         </div>
  167.         <div class="row g-3 d-none d-md-flex">
  168.             {% for product in newestProducts %}
  169.             <div class="col-6 col-lg-3">
  170.                     <div class="blo-product-box h-100">
  171.                         <a href="{{ path('blo_product_show', {slug: product.slug}) }}" class="text-decoration-none text-dark d-block">
  172.                             <div class="img-wrap">
  173.                                 {% set firstImage = product.images|first %}
  174.                                 {% if firstImage %}<img src="{{ asset('uploads/' ~ firstImage.path) }}" alt="{{ product.title }}">{% else %}<i class="bi bi-image text-secondary"></i>{% endif %}
  175.                             </div>
  176.                             <div class="title">{{ product.title }}</div>
  177.                             <p class="price mb-0">{% if product.promoPrice %}<del>{{ product.price|blo_price(product.currency) }}</del> {{ product.promoPrice|blo_price(product.currency) }}{% else %}{{ product.price|blo_price(product.currency) }}{% endif %}</p>
  178.                         </a>
  179.                         <form action="{{ path('blo_cart_add', {productId: product.id}) }}" method="post" class="d-inline">
  180.                             <button type="submit" class="blo-product-add-btn" title="Ajouter au panier"><i class="bi bi-plus-lg fs-5"></i></button>
  181.                         </form>
  182.                     </div>
  183.             </div>
  184.             {% endfor %}
  185.         </div>
  186.     </section>
  187.     {% endif %}
  189.     {# À la une #}
  190.     <section class="blo-section-box">
  191.         <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
  192.             <h2 class="mb-0">À la une</h2>
  193.             <a href="{{ path('blo_catalog') }}" class="small">Voir tout</a>
  194.         </div>
  195.         <div class="row g-3">
  196.             {% for product in featuredProducts %}
  197.             <div class="col-6 col-sm-4 col-md-3 col-lg-2">
  198.                     <div class="blo-product-box">
  199.                         <a href="{{ path('blo_product_show', {slug: product.slug}) }}" class="text-decoration-none text-dark d-block">
  200.                             <div class="img-wrap">
  201.                                 {% set firstImage = product.images|first %}
  202.                                 {% if firstImage %}<img src="{{ asset('uploads/' ~ firstImage.path) }}" alt="{{ product.title }}">{% else %}<i class="bi bi-image text-secondary"></i>{% endif %}
  203.                             </div>
  204.                             <div class="title">{{ product.title }}</div>
  205.                             <p class="price mb-0">{% if product.promoPrice %}<del>{{ product.price|blo_price(product.currency) }}</del> {{ product.promoPrice|blo_price(product.currency) }}{% else %}{{ product.price|blo_price(product.currency) }}{% endif %}</p>
  206.                         </a>
  207.                         <form action="{{ path('blo_cart_add', {productId: product.id}) }}" method="post" class="d-inline">
  208.                             <button type="submit" class="blo-product-add-btn" title="Ajouter au panier"><i class="bi bi-plus-lg fs-5"></i></button>
  209.                         </form>
  210.                     </div>
  211.             </div>
  212.             {% else %}
  213.             <div class="col-12 text-center py-4 text-muted">Aucun produit. <a href="{{ path('blo_catalog') }}">Parcourir le catalogue</a>.</div>
  214.             {% endfor %}
  215.         </div>
  216.     </section>
  220. </div>
  221. {% endblock %}