templates/frontoffice_bundle/base.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="description" content="">
  7.     <meta name="author" content="">
  8.     <title>L'épicerie de Rabat</title>
  9.     <link rel="icon" href="{{ asset("bundles/Frontoffice/images/logo_link.png") }}">
  11.      <!-- Google Web Fonts -->
  12.     <link rel="preconnect" href="https://fonts.googleapis.com">
  13.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  14.     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@600;800&display=swap" rel="stylesheet"> 
  16.     <!-- Icon Font Stylesheet -->
  17.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
  18.     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
  20.     <!-- Libraries Stylesheet -->
  21.     <link href="{{ asset("bundles/Frontoffice/lib/lightbox/css/lightbox.min.css") }}" rel="stylesheet">
  22.     <link href="{{ asset("bundles/Frontoffice/lib/owlcarousel/assets/owl.carousel.min.css") }}" rel="stylesheet">
  23.         <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet">
  26.     <!-- Customized Bootstrap Stylesheet -->
  27.     <link href="{{ asset("bundles/Frontoffice/css/bootstrap.min.css") }}" rel="stylesheet">
  29.     <link href="{{ asset("bundles/Frontoffice/css/animate.css") }}" rel="stylesheet">
  31.     <!-- Template Stylesheet -->
  32.     <link href="{{ asset("bundles/Frontoffice/css/style.css") }}" rel="stylesheet">
  33.     <link href="{{ asset("bundles/Frontoffice/css/toastr.css") }}" rel="stylesheet">
  35. </head>
  36. <body>
  37. <style>
  38. .owl-carousel .owl-dots{
  39.     display:none !important;
  40. }
  41. </style>
  42.     <!-- Spinner Start -->
  43.         <div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50  d-flex align-items-center justify-content-center">
  44.             <div class="spinner-grow text-primary" role="status"></div>
  45.         </div>
  46.         <!-- Spinner End -->
  49.         <!-- Navbar start -->
  50.         <div class="container-fluid fixed-top">
  51.             <div class="container topbar bg-primary d-none d-lg-block">
  52.                 <div class="d-flex justify-content-between">
  53.                     <div class="top-info ps-2">
  54.                         <small class="me-3"><i class="fas fa-phone-alt me-2 text-secondary"></i> <a href="#" class="text-white"> +212 5 37 55 66 77</a></small>
  55.                         <small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#" class="text-white">contact@epicerie.com</a></small>
  56.                     </div>
  57.                     <div class="top-link pe-2">
  58.                         {# <a href="#" class="text-white"><small class="text-white mx-2">Politique de confidentialité</small>/</a>
  59.                         <a href="#" class="text-white"><small class="text-white mx-2">Conditions d'utilisation</small>/</a>
  60.                         <a href="#" class="text-white"><small class="text-white ms-2">Ventes et remboursements</small></a> #}
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.             <div class="container px-0">
  65.                 <nav class="navbar navbar-light bg-white navbar-expand-xl">
  66.                     {# <a href="/" class="navbar-brand"><h1 class="text-primary display-6">Epicerie</h1></a> #}
  67.                     <a href="/" class="navbar-brand"><h1 class="text-primary display-6"><img src="{{ asset("bundles/Frontoffice/images/logo.jpg") }}" alt="logo" /></h1></a>
  68.                     <button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
  69.                         <span class="fa fa-bars text-primary"></span>
  70.                     </button>
  71.                     <div class="collapse navbar-collapse bg-white" id="navbarCollapse">
  72.                         <div class="navbar-nav mx-auto">
  73.                         <a href="/" class="nav-item nav-link {% if app.request.pathinfo == '/' %}active{% endif %}">Acceuil</a>
  74.                         <a href="/products" class="nav-item nav-link {% if app.request.pathinfo == '/products' %}active{% endif %}">Produits</a>
  75.                         <a href="/propos" class="nav-item nav-link {% if app.request.pathinfo == '/propos' %}active{% endif %}">A propos</a>
  76.                         <a href="/account" class="nav-item nav-link {% if app.request.pathinfo == '/account' %}active 
  77.                             {% elseif app.request.pathinfo == '/monProfil' %}active
  78.                             {% elseif app.request.pathinfo == '/mesCommandes' %}active
  79.                             {% elseif app.request.pathinfo == '/mesCommandes/detailsCommandes/' %}active
  80.                             {% endif %}">
  81.                         Mon compte</a>
  82.                         <a href="/contact" class="nav-item nav-link {% if app.request.pathinfo == '/contact' %}active{% endif %}">Contact</a>
  83.                     </div>
  85.                         <div class="d-flex m-3 me-0">
  86.                             {# <button class="btn-search btn border border-secondary btn-md-square rounded-circle bg-white me-4" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search text-primary"></i></button> #}
  87.                             <a href="/panier" class="position-relative me-4 my-auto">
  88.                                 <i class="fa fa-shopping-bag fa-2x"></i>
  89.                                 <span id='nbrArticle' class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1" style="top: -5px; left: 15px; height: 20px; min-width: 20px;">{{npanier}}</span>
  90.                             </a>
  91.                             <a href="/account" class="my-auto">
  92.                                 <i class="fas fa-user fa-2x"></i>
  93.                             </a>
  94.                         </div>
  95.                     </div>
  96.                 </nav>
  97.             </div>
  98.         </div>
  99.         <!-- Navbar End -->
  102. {% block body %}
  103. {% endblock %}
  104.         <!-- Footer Start -->
  105.         <div class="container-fluid bg-dark text-white-50 footer pt-5 mt-5">
  106.             <div class="container py-1">
  107.                 <div class="pb-4 mb-4" style="border-bottom: 1px solid rgba(226, 175, 24, 0.5) ;">
  108.                     <div class="row g-4">
  109.                         <div class="col-lg-3">
  110.                             <a href="#">
  111.                                 <h1 class="text-primary mb-0">Epicerie</h1>
  112.                                 <p class="text-secondary mb-0">Produits frais</p>
  113.                             </a>
  114.                         </div>
  115.                         <div class="col-lg-6">
  116.                             {# <div class="position-relative mx-auto">
  117.                                 <input class="form-control border-0 w-100 py-3 px-4 rounded-pill" type="number" placeholder="Votre email">
  118.                                 <button type="submit" class="btn btn-primary border-0 border-secondary py-3 px-4 position-absolute rounded-pill text-white" style="top: 0; right: 0;">S'abonner maintenant</button>
  119.                             </div> #}
  120.                         </div>
  121.                         <div class="col-lg-3">
  122.                             <div class="d-flex justify-content-end pt-3">
  123.                                 <a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i class="fab fa-facebook-f"></i></a>
  124.                                 <a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i class="fab fa-instagram"></i></a>
  125.                                 <a class="btn btn-outline-secondary btn-md-square rounded-circle" href=""><i class="fab fa-linkedin-in"></i></a>
  126.                             </div>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.                 <div class="row g-5">
  131.                     <div class="col-lg-3 col-md-6">
  132.                         <div class="footer-item">
  133.                             <h4 class="text-light mb-3">Pourquoi les gens nous apprécient !</h4>
  134.                             <p class="mb-4">La mise en page du texte reste essentiellement inchangée. Elle a été popularisée dans les années 1960 avec des logiciels de mise en page comme Aldus PageMaker, incluant des passages du Lorem Ipsum.</p>
  135.                             <a href="" class="btn border-secondary py-2 px-4 rounded-pill text-primary">Lire la suite</a>
  136.                         </div>
  137.                     </div>
  138.                     <div class="col-lg-3 col-md-6">
  139.                         <div class="d-flex flex-column text-start footer-item">
  140.                             <h4 class="text-light mb-3">Menu</h4>
  141.                             <a href="/" class="btn-link {% if app.request.pathinfo == '/' %}active{% endif %}">Acceuil</a>
  142.                             <a href="/products" class="btn-link {% if app.request.pathinfo == '/products' %}active{% endif %}">Produits</a>
  143.                             <a href="/propos" class="btn-link {% if app.request.pathinfo == '/propos' %}active{% endif %}">A propos</a>
  144.                             <a href="/account" class="btn-link {% if app.request.pathinfo == '/account' %}active{% endif %}">Mon compte</a>
  145.                             <a href="/contact" class="btn-link {% if app.request.pathinfo == '/contact' %}active{% endif %}">Contact</a>
  146.                         </div>
  147.                     </div>
  148.                     <div class="col-lg-3 col-md-6">
  149.                         <div class="d-flex flex-column text-start footer-item">
  150.                             <h4 class="text-light mb-3">Categories</h4>
  151.                             <a class="btn-link" href="/products/Légumes/1/">Légumes</a>
  152.                             <a class="btn-link" href="/products/Fruits/2/">Fruits</a>                                        
  153.                             <a class="btn-link" href="/products/Poissons/3/">Poissons</a>                                        
  154.                             <a class="btn-link" href="/products/Réstauration/4/">Réstauration</a>                                        
  155.                             <a class="btn-link" href="/products/Hygiènes/5/">Hygiènes</a>                                        
  156.                             <a class="btn-link" href="/products/Alimentations_générales/6/">Alimentations générales</a>
  157.                         </div>
  158.                     </div>
  159.                     <div class="col-lg-3 col-md-6">
  160.                         <div class="footer-item">
  161.                             <h4 class="text-light mb-3">Contact</h4>
  162.                             <p>Adresse: Rabat ville </p>
  163.                             <p>Email: contact@epicerie.com</p>
  164.                             <p>Télephone: +212 5 37 55 66 77</p>
  165.                             {# <img src="img/payment.png" class="img-fluid" alt=""> #}
  166.                         </div>
  167.                     </div>
  168.                 </div>
  169.             </div>
  170.         </div>
  171.         <div class="container-fluid copyright bg-dark py-4">
  172.             <div class="container">
  173.                 <div class="row">
  174.                     <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
  175.                             <span class="text-light"><a href="#"><i class="fas fa-copyright text-light me-2"></i>Épicerie</a>, Tous droits réservés.</span>
  176.                     </div>
  177.                     <div class="col-md-6 my-auto text-center text-md-end text-white">
  178.                         Conception & Développement <a class="border-bottom" href="https://proxisoft.ma" target='blank'>PROXISOFT</a>
  179.                     </div>
  180.                 </div>
  181.             </div>
  182.         </div>
  183.         <a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i class="fa fa-arrow-up"></i></a>   
  185.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  186.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
  187.     <script src="{{ asset("bundles/Frontoffice/lib/easing/easing.min.js") }}"></script>
  188.     <script src="{{ asset("bundles/Frontoffice/lib/waypoints/waypoints.min.js") }}"></script>
  189.     <script src="{{ asset("bundles/Frontoffice/lib/lightbox/js/lightbox.min.js") }}"></script>
  190.     {# <script src="{{ asset("bundles/Frontoffices/lib/owlcarousel/owl.carousel.min.js") }}"></script> #}
  191.     <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
  192.     <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
  193.     <script type="text/javascript" src="{{ asset('bundles/Backoffice/js/noty/packaged/jquery.noty.packaged.min.js') }}"></script>
  194.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
  195.     <!-- Template Javascript -->
  196.     <script src="{{ asset("bundles/Frontoffice/js/main.js") }}"></script>
  197.     <script src="{{ asset("bundles/Frontoffice/js/toastr.js") }}"></script>
  198. <script type="text/javascript">
  199. console.log('is con')
  200.   {# $(document).ready(function() { #}
  201.     {# $.ajax({
  202.     type: 'get',
  203.     url: '/getData',
  204.     success: function(data) {
  205.         // Parse JSON data
  206.         var categories = data.categorie;
  207.         
  208.                 var categoryLinks = $('#categoryLinks');
  209.         
  210.         // Iterate over categories and generate HTML links
  211.         categories.forEach(function(category) {
  212.             // Create a new <a> element for each category
  213.             var categoryLink = $('<a class="btn-link" href="/category/' + category.id + '">' + category.titre + '</a><br/>');
  214.             // Append the <a> element to the container
  215.             categoryLinks.append(categoryLink);
  216.         });
  217.         $("#nbrArticle").html(data.panier)
  218.     }
  219. }); #}
  221.     var owl = $('.owl-carousel');
  222.     owl.owlCarousel({
  223.         items:6, 
  224.     // items change number for slider display on desktop
  225.     
  226.         loop:true,
  227.         margin:10,
  228.         autoplay:true,
  229.         autoplayTimeout:3000,
  230.         autoplayHoverPause:true
  231.     });
  234.      {# }) #}
  235.     function goToMenu(menu){
  236.         window.location = menu;
  237.     }
  239.     $( "#newsletterForm" ).submit(function( event ) {
  241.         // Stop form from submitting normally
  242.         event.preventDefault();
  244.         // Get some values from elements on the page:
  245.         var $form = $( this ),
  246.                 mail = $form.find( "input[name='email']" ).val(),
  247.                 url = $form.attr( "action" );
  250.         // Send the data using post
  251.         var posting = $.post( url, {email: mail } );
  253.         // Put the results in a div
  254.         posting.done(function( data ) {
  255.             //var content = $( data ).find( "#content" );
  256.             //$( "#result" ).empty().append( content );*/
  257.             if(data == "OK"){
  258.                 $("#rsp").css("color","green");
  259.                 document.getElementById("rsp").innerHTML = "Merci de vous avoir enregistré dans notre newsletter";
  260.             }
  261.             else{
  262.                 $("#rsp").css("color","red");
  263.                 document.getElementById("rsp").innerHTML = data;
  264.             }
  266.         });
  267.     });
  268.    
  269.     $('.input-number').change(function() {
  271.         minValue =  parseFloat($(this).attr('min'));
  272.         maxValue =  parseFloat($(this).attr('max'));
  273.         valueCurrent = parseFloat($(this).val());
  274.         
  275.         name = $(this).attr('name');
  276.         if(valueCurrent >= minValue) {
  277.             $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
  278.         } else {
  279.             Swal.fire({
  280.                 icon: 'error',
  281.                 title: 'Oops...',
  282.                 text: "Désolé, la valeur minimale a été atteinte",
  283.             });
  284.             $(this).val($(this).data('oldValue'));
  285.         }
  286.         if(valueCurrent <= maxValue) {
  287.             $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled');
  288.         } else {
  289.             Swal.fire({
  290.                 icon: 'error',
  291.                 title: 'Oops...',
  292.                 text: "Désolé, la valeur maximale a été atteinte",
  293.             });
  294.             $(this).val($(this).data('oldValue'));
  295.         }
  298.     });
  299. </script>
  300.   
  301. {% block js %}
  304. {% endblock %}
  305. </body>
  306. </html>