templates/frontoffice_bundle/base/index.html.twig line 1

  1. {% extends 'frontoffice_bundle/base.html.twig' %}
  3. {% block activeIndex %}class="active"{% endblock %}
  4. {% block body %}
  5. <style>
  6.     .voir_plus:hover{color:rgb(1 122 8 / 59%);}
  7. </style>
  8.     {# <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  9.         <div class="modal-dialog modal-fullscreen">
  10.             
  11.                 <div class="modal-content rounded-0">
  12.                     <div class="modal-header">
  13.                         <h5 class="modal-title" id="exampleModalLabel">Recherche par mot-clé</h5>
  14.                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  15.                     </div>
  16.                     <form action="/search/" method="GET">
  17.                     <div class="modal-body d-flex align-items-center">
  18.                         <div class="input-group w-75 mx-auto d-flex">
  19.                             <input type="search" class="form-control p-3" placeholder="mot-clé" aria-describedby="search-icon-1" name="name">
  20.                             <button type="submit" id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></button>
  21.                         </div>
  22.                     </div>
  23.                     </form>
  24.                 </div>
  25.             
  26.         </div>
  27.     </div> #}
  29.     <div class="container-fluid py-1 mb-5 hero-header">
  30.         <div class="container py-5">
  31.             <div class="row g-5 align-items-center">
  32.                 <div class="col-md-12 col-lg-7">
  33.                     <h4 class="mb-3 text-secondary">Aliments 100%</h4>
  34.                     <h1 class="mb-5 display-3 text-primary">Légumes et fruits</h1>
  35.                     <div class="position-relative mx-auto">
  36.                     <form action="/search/" method="GET">
  37.                         <input class="form-control border-2 border-secondary w-75 py-3 px-4 rounded-pill" type="text" placeholder="Recherche" name="name" >
  38.                         <button type="submit" class="btn btn-primary border-2 border-secondary py-3 px-4 position-absolute rounded-pill text-white h-100" style="top: 0; right: 25%;">Envoyer maintenant</button>
  39.                     </form>
  40.                     </div>
  41.                 </div>
  42.                 <div class="col-md-12 col-lg-5">
  43.                     <div id="carouselId" class="carousel slide position-relative" data-bs-ride="carousel">
  44.                         {% set counter = 0 %}
  45.                         <div class="carousel-inner" role="listbox">
  46.                             {% for slide in sliders %}
  47.                                 <div class="carousel-item rounded {% if counter == 0 %}active{% endif %}">
  48.                                     <img src="{{ asset(slide.img) }}" class="img-fluid w-100 h-100 bg-secondary rounded" alt="Diapositive">
  49.                                     <a href="{{ slide.url }}" class="btn px-4 py-2 text-white rounded">{{ slide.titre }}</a>
  50.                                 </div>
  51.                                 {% set counter = counter + 1 %}
  52.                             {% endfor %}
  53.                         </div>
  54.                         {#<div class="carousel-inner" role="listbox">#}
  55.                         {#    <div class="carousel-item active rounded">#}
  56.                         {#        <img src="{{ asset("bundles/Frontoffice/img/hero-img-1.png")}}" class="img-fluid w-100 h-100 bg-secondary rounded" alt="Première diapositive">#}
  57.                         {#        <a href="/products/Fruits/2/" class="btn px-4 py-2 text-white rounded">Fruits</a>#}
  58.                         {#    </div>#}
  59.                         {#    <div class="carousel-item rounded">#}
  60.                         {#        <img src="{{ asset("bundles/Frontoffice/img/hero-img-2.jpg")}}" class="img-fluid w-100 h-100 rounded" alt="Deuxième diapositive">#}
  61.                         {#        <a href="/products/Légumes/1/" class="btn px-4 py-2 text-white rounded">Légumes</a>#}
  62.                         {#    </div>#}
  63.                         {#    <div class="carousel-item rounded">#}
  64.                         {#        <img src="{{ asset("bundles/Frontoffice/img/hero-img-333.jpg")}}" class="img-fluid w-100 h-100 rounded" alt="Deuxième diapositive">#}
  65.                         {#        <a href="/products/Poissons/3/" class="btn px-4 py-2 text-white rounded">Poissons</a>#}
  66.                         {#    </div>#}
  67.                         {#</div>#}
  68.                         <button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev">
  69.                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  70.                             <span class="visually-hidden">Précédent</span>
  71.                         </button>
  72.                         <button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next">
  73.                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  74.                             <span class="visually-hidden">Suivant</span>
  75.                         </button>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.     </div>
  82.     <div class="container-fluid featurs py-1">
  83.         <div class="container py-5">
  84.             <div class="row g-4">
  85.                 <div class="col-md-6 col-lg-3">
  86.                     <div class="featurs-item text-center rounded bg-light p-4">
  87.                         <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
  88.                             <i class="fas fa-car-side fa-3x text-white"></i>
  89.                         </div>
  90.                         <div class="featurs-content text-center">
  91.                             <h5>Livraison gratuite</h5>
  92.                             <p class="mb-0">Gratuite pour toute commande de plus de 300 $</p>
  93.                         </div>
  94.                     </div>
  95.                 </div>
  96.                 <div class="col-md-6 col-lg-3 text-center rounded bg-light">
  97.                     <div class="featurs-item  p-4">
  98.                         <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
  99.                             <i class="fas fa-user-shield fa-3x text-white"></i>
  100.                         </div>
  101.                         <div class="featurs-content text-center">
  102.                             <h5>Paiement sécurisé</h5>
  103.                             <p class="mb-0">Paiement 100% sécurisé</p>
  104.                         </div>
  105.                     </div>
  106.                 </div>
  107.                 <div class="col-md-6 col-lg-3">
  108.                     <div class="featurs-item text-center rounded bg-light p-4">
  109.                         <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
  110.                             <i class="fas fa-exchange-alt fa-3x text-white"></i>
  111.                         </div>
  112.                         <div class="featurs-content text-center">
  113.                             <h5>Retour sous 30 jours</h5>
  114.                             <p class="mb-0">Garantie de remboursement sous 30 jours</p>
  115.                         </div>
  116.                     </div>
  117.                 </div>
  118.                 <div class="col-md-6 col-lg-3 text-center rounded bg-light">
  119.                     <div class="featurs-item p-4">
  120.                         <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
  121.                             <i class="fa fa-phone-alt fa-3x text-white"></i>
  122.                         </div>
  123.                         <div class="featurs-content text-center">
  124.                             <h5>Support 24/7</h5>
  125.                             <p class="mb-0">Support rapide à tout moment</p>
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.     </div>
  133.     <div class="container-fluid fruite py-1" id="produits">
  134.         <div class="container py-5">
  135.             <div class="tab-class text-center">
  136.                     <div class="row g-4">
  137.             <div class="col-lg-4 text-start">
  138.                 <h1>Nos Produits</h1>
  139.                     </div>
  140.                     <div class="col-lg-8 text-end">
  141.                         <ul class="nav nav-pills d-inline-flex text-center mb-5">
  142.                             <li class="nav-item">
  143.                                 <a class="d-flex m-2 py-2 bg-light rounded-pill active" data-bs-toggle="pill" href="#tab-0">
  144.                                     <span class="text-dark" style="width: 180px;">Tous les produits</span>
  145.                                 </a>
  146.                             </li>
  147.                                 {% for cat in categories %}
  148.                                 <li class="nav-item">
  149.                                     <a class="d-flex py-2 m-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-{{ loop.index }}">
  150.                                         <span class="text-dark" style="width: 130px;">{{cat.titre}} </span>
  151.                                     </a>
  152.                                 </li>
  153.                                 {% endfor %}
  154.                         </ul>
  155.                     </div>
  156.                 </div>
  157.                 <div class="tab-content">
  158.                     <div id="tab-0" class="tab-pane fade show p-0 active">
  159.                         <div class="row g-4">
  160.                             <div class="col-lg-12">
  161.                                 <div class="row g-4">
  162.                                     {% for a in articles %}
  163.                                         <div class="col-md-6 col-lg-4 col-xl-3" >
  164.                                             <div class="rounded position-relative fruite-item  border border-secondary rounded-bottom">
  165.                                                 <div class="fruite-img">
  166.                                                     <a href="/product/{{ a["titreCat"] }}/{{ a["titreCat"] }}/{{ a[0].id }}/">
  167.                                                     <img src="{{ asset(a[0].imgPrincipale) }}"  class="img-fluid w-100 rounded-top" alt="" 
  168.                                                         style="
  169.                                                         height: 210px !important;
  170.                                                         padding-left: 20px;
  171.                                                         padding-right: 20px;
  172.                                                         padding-top: 20px;"
  173.                                                     ></a>
  174.                                                 </div>
  175.                                                 <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;"> {{a["titreCat"]}} </div>
  176.                                                 <div class="p-4">
  177.                                                     
  178.                                                     <h4><a href="/product/{{ a["titreCat"] }}/{{ a["titreCat"] }}/{{ a[0].id }}/" style='color:#45595b'>{{a[0].titre}}</a></h4>
  179.                                                     <p>{{a[0].description | raw}}</p>
  180.                                                         <div class="input-group" style="width: 60%;margin-top:10px;margin-bottom: 10px;margin-left: auto;margin-right: auto;">
  181.                                                             <div class="input-group-btn">
  182.                                                                 <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant-{{ a[0].id }}">
  183.                                                                     <i class="fa fa-minus"></i>
  184.                                                                 </button>
  185.                                                             </div>
  186.                                                             <input type="text" name="quant-{{ a[0].id }}" class="form-control input-number" id="quant-{{ a[0].id }}" value="{{ a[0].minQte }}" min="{{ a[0].minQte }}" max="150" unite="{{ a[0].unite }}">
  187.                                                             <div class="input-group-btn">
  188.                                                                 <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant-{{ a[0].id }}">
  189.                                                                     <i class="fa fa-plus"></i>
  190.                                                                 </button>
  191.                                                             </div>
  192.                                                         </div>
  193.                                                     <div class="d-flex justify-content-between flex-lg-wrap">
  194.                                                         <p class="text-dark fs-5 fw-bold mb-0">{{a[0].prixTtc}} DH</p>
  195.                                                         <button type="button" class="btn border border-secondary rounded-pill px-3 text-primary" onClick='addToPanierArticle({{ a[0].id }});'><i class="fa fa-cart-plus me-2 text-primary"></i> Au panier</button>
  196.                                                     </div>
  197.                                                 </div>
  198.                                             </div>
  199.                                         </div>
  200.                                     {% endfor %}
  201.                                 </div>
  202.                             </div>
  203.                         </div>
  204.                     </div>
  205.                     {% for cat in categories %}
  206.                         <div id="tab-{{loop.index}}" class="tab-pane fade show p-0">
  207.                             <div class="row g-4">
  208.                                 <div class="col-lg-12">
  209.                                     <div class="row g-4">
  210.                                         {% for a in articles %}
  211.                                             {% if a[0].idSousCategorie == cat.id %}
  212.                                                 <div class="col-md-6 col-lg-4 col-xl-3">
  213.                                                     <div class="rounded position-relative fruite-item border border-secondary rounded-bottom">
  214.                                                         <div class="fruite-img">
  215.                                                             <a href="/product/{{ a["titreCat"] }}/{{ a["titreCat"] }}/{{ a[0].id }}/">
  216.                                                                 <img src="{{ asset(a[0].imgPrincipale) }}" class="img-fluid w-100 rounded-top" alt="" 
  217.                                                                 style="height: 210px !important;padding-left: 20px;padding-right: 20px;padding-top: 20px;">
  218.                                                             </a>
  219.                                                         </div>
  220.                                                         <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;"> {{a["titreCat"]}} </div>
  221.                                                         <div class="p-4">
  222.                                                             <h4>{{a[0].titre}}</h4>
  223.                                                             <p>{{a[0].description | raw}}</p>
  224.                                                             <div class="d-flex justify-content-between flex-lg-wrap">
  225.                                                                 <p class="text-dark fs-5 fw-bold mb-0">{{a[0].prixTtc}} DH</p>
  226.                                                                 <button type="button" class="btn border border-secondary rounded-pill px-3 text-primary" onClick='addToPanierArticle({{ a[0].id }});'><i class="fa fa-cart-plus me-2 text-primary"></i> Au panier</button>
  227.                                                             </div>
  228.                                                         </div>
  229.                                                     </div>
  230.                                                 </div>
  231.                                             {% endif %}
  232.                                         {% endfor %}
  233.                                     </div>
  234.                                 </div>
  235.                             </div>
  236.                         </div>
  237.                     {% endfor %}
  238.                 </div>
  239.             </div>      
  240.         </div>
  241.     </div>
  243.     <div class="container-fluid service py-1">
  244.         <div class="container py-5">
  245.             <div class="row g-4 justify-content-center">
  246.                 <div class="col-md-6 col-lg-4">
  247.                     <a href="#">
  248.                         <div class="service-item bg-secondary rounded border border-secondary">
  249.                             <img src="{{ asset("bundles/Frontoffice/img/featur-1.jpg")}}" class="img-fluid rounded-top w-100" alt="">
  250.                             <div class="px-4 rounded-bottom">
  251.                                 <div class="service-content bg-primary text-center p-4 rounded">
  252.                                     <h5 class="text-white">Pommes Fraîches</h5>
  253.                                     <h3 class="mb-0 text-secondary">20% de réduction</h3>
  254.                                 </div>
  255.                             </div>
  256.                         </div>
  257.                     </a>
  258.                 </div>
  259.                 <div class="col-md-6 col-lg-4">
  260.                     <a href="#">
  261.                         <div class="service-item bg-dark rounded border border-dark">
  262.                             <img src="{{ asset("bundles/Frontoffice/img/featur-2.jpg")}}" class="img-fluid rounded-top w-100" alt="">
  263.                             <div class="px-4 rounded-bottom">
  264.                                 <div class="service-content bg-light text-center p-4 rounded">
  265.                                     <h5 class="text-primary">Fruits Savoureux</h5>
  266.                                     <h3 class="mb-0">Livraison gratuite</h3>
  267.                                 </div>
  268.                             </div>
  269.                         </div>
  270.                     </a>
  271.                 </div>
  272.                 <div class="col-md-6 col-lg-4">
  273.                     <a href="#">
  274.                         <div class="service-item bg-primary rounded border border-primary">
  275.                             <img src="{{ asset("bundles/Frontoffice/img/featur-3.jpg")}}" class="img-fluid rounded-top w-100" alt="">
  276.                             <div class="px-4 rounded-bottom">
  277.                                 <div class="service-content bg-secondary text-center p-4 rounded">
  278.                                     <h5 class="text-white">Légume Exotique</h5>
  279.                                     <h3 class="mb-0 text-primary">30% de réduction</h3>
  280.                                 </div>
  281.                             </div>
  282.                         </div>
  283.                     </a>
  284.                 </div>
  285.             </div>
  286.         </div>
  287.     </div>
  289.     <div class="container-fluid banner my-1" style="background-color:rgb(1 122 8 / 59%) ;">{# #107aa280#}
  290.         <div class="container py-4">
  291.             <div class="row g-4 align-items-center">
  292.             <div class="col-lg-6">
  293.                 <div class="py-4">
  294.                     <h2 class="display-3 text-white">Fruits Exotiques Frais</h2>
  295.                     <p class="fw-normal display-3 text-dark mb-4">dans notre magasin</p>
  296.                     <p class="mb-4 text-dark">{{ArticlePromo[0].description | raw}}</p> {#href="/promotions"#}
  297.                     <a onClick='addToPanier({{ ArticlePromo[0].id  }},{{ ArticlePromo[0].minQte  }});'  class="banner-btn btn border-2 border-white rounded-pill text-dark py-3 px-5">ACHETER</a>
  298.                 </div>
  299.             </div>
  301.                 <div class="col-lg-6">
  302.                     <div class="position-relative">
  303.                         <img src="{{ asset(ArticlePromo[0].imgPrincipale) }}"  class="img-fluid w-100 rounded" alt="">
  304.                         <div class="d-flex align-items-center justify-content-center bg-white rounded-circle position-absolute" style="width: 140px; height: 140px; top: 0; left: 0;">
  305.                             <h2 style="font-size: 100px;padding-left:10px;">{{ArticlePromo[0].minQte}}</h2>
  306.                             <div class="d-flex flex-column">
  307.                                 {% if typeCompte == "PARTICULIER" %}
  308.                                     <span class="h3 mb-0">{{ArticlePromo[0].prixHT}} DH</span>
  309.                                 {% else %}
  310.                                     <span class="h3 mb-0">{{ArticlePromo[0].prixPro}} DH</span>
  311.                                 {% endif %}
  312.                                 <span class="h4 text-muted mb-0">{{ArticlePromo[0].unite}}</span>
  313.                             </div>
  314.                         </div>
  315.                     </div>
  316.                 </div>
  317.             </div>
  318.         </div>
  319.     </div>
  321.     <div class="container-fluid vesitable py-1">
  322.         <div class="container py-5">
  323.             <div style="display: flex;"><h1 class="mb-0">Nos Promotions</h1> <a href="/promotions"  class="voir_plus mt-3"> &nbsp;&nbsp; ( Voir plus )</a></div>
  324.             <div class="owl-carousel vegetable-carousel justify-content-center">
  325.             {% for a in ArticlesPromotions %}
  326.                 <div class="border border-primary rounded position-relative vesitable-item">
  327.                     <div class="vesitable-img">
  328.                         <a href="/product/{{ a["titreCat"] }}/{{ a["titreCat"] }}/{{ a[0].id }}/"><img src="{{ asset(a[0].imgPrincipale) }}" class="img-fluid w-100 rounded-top" alt="" 
  329.                         style="
  330.                             height: 210px !important;
  331.                             padding-left: 20px;
  332.                             padding-right: 20px;
  333.                             padding-top: 20px;"></a>
  334.                     </div>
  335.                     <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">{{a["titreCat"]}} </div>
  336.                     <div class="p-4 rounded-bottom">
  337.                         <h4>{{a[0].titre}}</h4>
  338.                         <p>{{a[0].description | raw}}</p>
  339.                         <div class="d-flex justify-content-between flex-lg-wrap">
  340.                             <p class="text-dark fs-5 fw-bold mb-0">{{a[0].prixTtc}} DH</p>
  342.                             <input type="text" style="display:none;" name="quant-{{ a[0].id }}" class="form-control input-number" id="quant-{{ a[0].id }}" value="{{ a[0].minQte }}" min="{{ a[0].minQte }}" max="150" unite="{{ a[0].unite }}">
  343.                             <button class="btn border border-secondary rounded-pill px-3 py-1 mb-4 text-primary" onClick='addToPanierArticle({{ a[0].id }});'>Ajouter au <i class="fa fa-shopping-cart"></i></button>                                    
  344.                         </div>
  345.                     </div>
  346.                 </div>
  347.             {% endfor %}
  348.             </div>
  349.         </div>
  350.     </div>
  352. {% endblock %}
  353. {% block js %}
  355.     <script src='https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js'></script>
  356.     <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
  357.     
  358.     <script type="text/javascript">
  361.         var listOfProduct = {{ articlesJson|json_encode|raw }};
  363.         function addArtPan(){
  364.             var qte = document.getElementById("qte").value;
  365.             var id = document.getElementById("idArticle").value;
  367.             addToPanier(id,qte);
  368.             var lastPan = parseInt(document.getElementById("nbrArticle").innerText);
  369.             var nbrPan = lastPan+1;
  370.             document.getElementById("nbrArticle").innerText = nbrPan;
  371.         }
  373.         function addToPanierArticle(id){
  374.             var qte = document.getElementById("quant-"+id).value;
  376.             addToPanier(id,qte);
  377.             var lastPan = parseInt(document.getElementById("nbrArticle").innerText);
  378.             var nbrPan = lastPan+1;
  379.             document.getElementById("nbrArticle").innerText = nbrPan;
  380.         }
  382.         function goToPage(url){
  383.             window.location = url;
  384.         }
  387.         /*---------slider----------*/
  389.         var $slider = $('.slider');
  391.         var $slickTrack = $('.slick-track');
  392.         var $slickCurrent = $('.slick-current');
  394.         var slideDuration = 900;
  396.         //RESET ANIMATIONS
  397.         // On init slide change
  398.         $slider.on('init', function(slick){
  399.             TweenMax.to($('.slick-track'), 0.9, {
  400.                 marginLeft: 0
  401.             });
  402.             TweenMax.to($('.slick-active'), 0.9, {
  403.                 x: 0,
  404.                 zIndex: 2
  405.             });
  406.         });
  407.         // On before slide change
  408.         $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
  409.             TweenMax.to($('.slick-track'), 0.9, {
  410.                 marginLeft: 0
  411.             });
  412.             TweenMax.to($('.slick-active'), 0.9, {
  413.                 x: 0
  414.             });
  415.         });
  417.         // On after slide change
  418.         $slider.on('afterChange', function(event, slick, currentSlide){
  419.             TweenMax.to($('.slick-track'), 0.9, {
  420.                 marginLeft: 0
  421.             });
  422.             $('.slick-slide').css('z-index','1');
  423.             TweenMax.to($('.slick-active'), 0.9, {
  424.                 x: 0,
  425.                 zIndex: 2
  426.             });
  427.         });
  429.         //SLICK INIT
  430.         $slider.slick({
  431.             speed: slideDuration,
  432.             dots: true,
  433.             waitForAnimate: true,
  434.             useTransform: true,
  435.             cssEase: 'cubic-bezier(0.455, 0.030, 0.130, 1.000)',
  436.             autoplay: true,
  437.             autoplaySpeed: 3000
  438.         })
  440.         //PREV
  441.         $('.slick-prev').on('mouseenter', function(){
  442.             TweenMax.to($('.slick-track'), 0.6, {
  443.                 marginLeft: "180px",
  444.                 ease: Quad.easeOut
  445.             });
  446.             TweenMax.to($('.slick-current'), 0.6, {
  447.                 x: -100,
  448.                 ease: Quad.easeOut
  449.             });
  450.         });
  452.         $('.slick-prev').on('mouseleave', function(){
  453.             TweenMax.to($('.slick-track'), 0.4, {
  454.                 marginLeft: 0,
  455.                 ease: Sine.easeInOut
  456.             });
  457.             TweenMax.to($('.slick-current'), 0.4, {
  458.                 x: 0,
  459.                 ease: Sine.easeInOut
  460.             });
  461.         });
  463.         //NEXT
  464.         $('.slick-next').on('mouseenter', function(){
  466.             TweenMax.to($('.slick-track'), 0.6, {
  467.                 marginLeft: "-180px",
  468.                 ease: Quad.easeOut
  469.             });
  470.             TweenMax.to($('.slick-current'), 0.6, {
  471.                 x: 100,
  472.                 ease: Quad.easeOut
  473.             });
  474.         });
  476.         $('.slick-next').on('mouseleave', function(){
  477.             TweenMax.to($('.slick-track'), 0.4, {
  478.                 marginLeft: 0,
  479.                 ease: Quad.easeInOut
  480.             });
  481.             TweenMax.to($('.slick-current'), 0.4, {
  482.                 x: 0,
  483.                 ease: Quad.easeInOut
  484.             });
  485.         });
  486.     </script>
  488.     <script src='{{ asset("bundles/Frontoffice/js/products.js") }}'></script>
  490. {% endblock %}