templates/front/home.html.twig line 1

Open in your IDE?
  1. {% extends 'front/base.html.twig' %}
  2. {% block body %}
  3.     <main class="main" >
  4.         {% if sliders %}
  5.             <section class="home-slider position-relative mb-30">
  6.             <div class="container">
  7.                 <div class="home-slide-cover  {#bg-grey-10#} mt-30">
  8.                     <div class="hero-slider-1 style-4 dot-style-1 dot-style-1-position-1">
  9.                         {% for slider  in sliders %}
  10.                         <div class="single-hero-slider single-animation-wrap">
  11.                             <div class="container">
  12.                                 <div class="row align-items-center slider-animated-1">
  13.                                     {% if slider.title %}
  14.                                     <div class="col-lg-5 col-md-6">
  15.                                         <div class="hero-slider-content-2 m-4">
  16.                                             <h3 class="animated fw-900 text-brand">{{ slider.title}}</h3>
  17.                                             {{ slider.description|raw   }}
  18.                                             <a class="animated btn btn-brush btn-brush-3" href="{{ slider.url}}" tabindex="0"> Visiter </a>
  19.                                         </div>
  20.                                     </div>
  21.                                     {% endif %}
  22.                                     <div class="{{ slider.title?"col-lg-7 col-md-6":"col-md-12" }}">
  23.                                         <div class="single-slider-img single-slider-img-1">
  24.                                             <img class="animated"
  25.                                                  src="{{ asset( slider.image) }}" alt="Sunshine Elegance"
  26.                                                  style="width: 100%;">
  27.                                         </div>
  28.                                     </div>
  29.                                 </div>
  30.                             </div>
  31.                         </div>
  32.                         {% endfor %}
  33.                     </div>
  34.                     <div class="slider-arrow hero-slider-1-arrow"></div>
  35.                 </div>
  36.             </div>
  37.         </section>
  38.         {% endif %}
  39.         <div id="app" class="pb-30">
  40.         <section  class="section-padding" v-if="categories.length" v-for="(entry,index) in categories">
  41.             <div class="container pt-5 pb-5">
  42.                 <div class="heading-tab d-flex">
  43.                     <div class="heading-tab-left wow fadeIn animated">
  44.                         <h3 class="section-title mb-30 hidden"><span>${ entry.category.name }</span></h3>
  45.                     </div>
  46.                     <a  href="#&" class="view-more d-none d-md-flex mb-30 " @click="openCategory(entry.category.id,entry.category.name)">Voir plus<i class="fi-rs-angle-double-small-right"></i></a>
  47.                 </div>
  48.                 <div class="row">
  49.                     <div class="col-lg-12 col-md-12">
  50.                         <div class="tab-content wow fadeIn animated" id="myTabContent-1">
  51.                             <div class="tab-pane fade show active" id="tab-one-1" role="tabpanel"
  52.                                  aria-labelledby="tab-one-1">
  53.                                 <div class="carausel-4-columns-cover arrow-center position-relative">
  54.                                     <div class="slider-arrow slider-arrow-2 carausel-4-columns-arrow"
  55.                                          :id="'carausel-4-columns-'+entry.category.id+'-arrows'"></div>
  56.                                     <div class="carausel-4-columns carausel-arrow-center" :id="'carausel-4-columns-'+entry.category.id">
  57.                                             <div class="product-cart-wrap" v-for="prod in entry.products">
  58.                                                 <div class="product-img-action-wrap col-product" @click="openProduct(prod.id,prod.name)">
  59.                                                     <div class="product-img product-img-zoom">
  60.                                                         <a href="#&">
  61.                                                             <img class="default-img product-img"
  62.                                                                  :src="'images/300-400/'+prod.image" :alt="prod.name">
  63.                                                             {# <img class="hover-img" src="assets/imgs/shop/product-1-2.jpg" alt="Sunshine Elegance"> #}
  64.                                                         </a>
  65.                                                     </div>
  66.                                                     <div class="product-badges product-badges-position product-badges-mrg"
  67.                                                          v-if="(prod.promo && prod.promo.isValid) || !prod.stock || prod.isNew">
  68.                                                                 <span v-if="!prod.stock" class="hot mr-1"
  69.                                                                       style="margin-right: 2px;font-size: 10px;">Rupture de stock</span>
  70.                                                         <span v-if="prod.isNew" class="new mr-1"
  71.                                                               style="margin-right: 2px;font-size: 10px;">Nouveau</span>
  72.                                                         <span class="best"
  73.                                                               v-if="prod.promo && prod.promo.isValid && prod.promo.discountType=='amount'"
  74.                                                               style="font-size: 10px;">-${ prod.promo.discountValue.toFixed(3) } <sup
  75.                                                                     class="currency-style">TND</sup></span>
  76.                                                         <span class="best"
  77.                                                               v-if="prod.promo && prod.promo.isValid && prod.promo.discountType=='percent'"
  78.                                                               style="font-size: 10px;">-${ prod.promo.discountValue } %</span>
  79.                                                     </div>
  80.                                                 </div>
  81.                                                 <div class="product-content-wrap">
  82.                                                     <h2><a href="#&" @click="openProduct(prod.id,prod.name)">${ prod.name }</a></h2>
  83.                                                     <div class="product-price">
  84.                                                                     <span v-if="!prod.promo || (prod.promo && !prod.promo.isValid)">${ prod.priceTTC.toFixed(3) } <sup
  85.                                                                                 class="currency-style">TND</sup></span>
  86.                                                         <span v-if="prod.promo && prod.promo.isValid && prod.promo.isValid && prod.promo.discountType=='amount'">${ (prod.priceTTC-prod.promo.discountValue).toFixed(3) } <sup
  87.                                                                     class="currency-style">TND</sup></span>
  88.                                                         <span v-if="prod.promo && prod.promo.isValid && prod.promo.isValid && prod.promo.discountType=='percent'">${ (prod.priceTTC-(prod.priceTTC*prod.promo.discountValue/100)).toFixed(3) } <sup
  89.                                                                     class="currency-style">TND</sup></span>
  90.                                                         <span class="old-price"
  91.                                                               v-if="prod.promo && prod.promo.isValid && prod.promo.isValid">${ prod.priceTTC.toFixed(3) } <sup
  92.                                                                     class="currency-style">TND</sup></span>
  93.                                                     </div>
  94.                                                     <div class="product-action-1 show" @click="getProduit(prod.id)">
  95.                                                         <button aria-label="Acheter maintenant" class="action-btn hover-up"><i
  96.                                                                     class="fi-rs-shopping-bag-add"></i></button>
  97.                                                     </div>
  98.                                                 </div>
  99.                                             </div>
  100.                                     </div>
  101.                                 </div>
  102.                             </div>
  103.                             <!--End tab-pane-->
  104.                         </div>
  105.                         <!--End tab-content-->
  106.                     </div>
  107.                     <!--End Col-lg-9-->
  108.                 </div>
  109.             </div>
  110.         </section>
  111.         </div>
  112.     </main>
  113. {% endblock %}
  114. {% block javascripts %}
  115.     {{ parent() }}
  116.     <script src="{{ asset('front/assets/scripts/home/home.js') }}"></script>
  117.     <script>
  118.         $("#preloader-active-loading").css('display', 'none');
  119.     </script>
  120. {% endblock %}