templates/categorie/catBoutiques.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, shrink-to-fit=no">
  7.     <meta name="description" content="Suha - Multipurpose Ecommerce Mobile HTML Template">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="theme-color" content="#100DD1">
  10.     <meta name="apple-mobile-web-app-capable" content="yes">
  11.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12.     <!-- The above tags *must* come first in the head, any other head content must come *after* these tags -->
  13.     <!-- Title -->
  14.     <title>Suha - Multipurpose Ecommerce Mobile HTML Template</title>
  15.     <link rel="preconnect" href="https://fonts.googleapis.com/">
  16.     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
  17.     <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
  18.     <!-- Favicon -->
  19.    {% block stylesheets %}
  20.             {{ encore_entry_link_tags('app') }}
  21.         
  23.     <link rel="icon" href="{{asset('img/icons/icon-72x72.png')}}">
  24.     <!-- Apple Touch Icon -->
  25.     <link rel="apple-touch-icon" href="{{asset('img/icons/icon-96x96.png')}}">
  26.     <link rel="apple-touch-icon" sizes="152x152" href="{{asset('img/icons/icon-152x152.png')}}">
  27.     <link rel="apple-touch-icon" sizes="167x167" href="{{asset('img/icons/icon-167x167.png')}}">
  28.     <link rel="apple-touch-icon" sizes="180x180" href="{{asset('img/icons/icon-180x180.png')}}">
  29.     <!-- CSS Libraries -->
  30.     <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}">
  31.     <link rel="stylesheet" href="{{asset('css/animate.css')}}">
  32.     <link rel="stylesheet" href="{{asset('css/all.min.css')}}">
  33.     <link rel="stylesheet" href="{{asset('css/brands.min.css')}}">
  34.     <link rel="stylesheet" href="{{asset('css/solid.min.css')}}">
  35.     <link rel="stylesheet" href="{{asset('css/owl.carousel.min.css')}}">
  36.     <link rel="stylesheet" href="{{asset('css/magnific-popup.css')}}">
  37.     <link rel="stylesheet" href="{{asset('css/nice-select.css')}}">
  38.     <!-- Stylesheet -->
  39.     <link rel="stylesheet" href="{{asset('css/style.css')}}">
  40.     <link rel="stylesheet" href="{{asset('css/card.css')}}">
  41.     
  42.     <!-- Web App Manifest -->
  43.     <link rel="manifest" href="{{asset('js/manifest.json')}}">
  45.     {% endblock %}
  47.   </head>
  48.   <body>
  49.     {% block body %}
  51.     <!-- Header Area-->
  52.     <div class="header-area" id="headerArea">
  53.       <div class="container h-100 d-flex align-items-center justify-content-between rtl-flex-d-row-r">
  54.         <!-- Back Button-->
  56.         {% if app.user and app.user.compte == 'client' %}
  58.         <div class="back-button me-2">
  59.           <a href="{{path('app_main_particulier')}}">
  60.           <i class="fa-solid fa-arrow-left-long"></i>
  61.          </a>
  62.        </div>
  64.        {% elseif app.user and app.user.compte == 'vendeur' %}
  66.         <div class="back-button me-2">
  67.           <a href="{{path('app_main')}}">
  68.           <i class="fa-solid fa-arrow-left-long"></i>
  69.          </a>
  70.        </div>
  72.        {% else %}
  74.       <div class="back-button me-2">
  75.         <a href="{{ path('app_main')}}"><i class="fa-solid fa-arrow-left-long"></i></a>
  76.       </div>
  78.       {% endif %}
  79.       
  81.         <!-- Page Title-->
  82.         <div class="page-heading">
  83.           <h6 class="mb-0">Nos produits en Boutique</h6>
  84.         </div>
  85.         <!-- Filter Option
  86.         <div class="filter-option ms-2" data-bs-toggle="offcanvas" data-bs-target="#suhaFilterOffcanvas" aria-controls="suhaFilterOffcanvas"><i class="fa-solid fa-sliders"></i></div>-->
  88.         <div class="filter-option ms-2" data-bs-toggle="offcanvas"  aria-controls="suhaFilterOffcanvas"><i class="fa-solid fa-sliders"></i></div>
  89.       </div>
  90.     </div>
  91.     
  92.     <div class="offcanvas offcanvas-start suha-filter-offcanvas-wrap" tabindex="-1" id="suhaFilterOffcanvas" aria-labelledby="suhaFilterOffcanvasLabel">
  93.       <!-- Close button-->
  94.       <button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  95.       <!-- Offcanvas body-->
  96.       <div class="offcanvas-body py-5">
  97.         <div class="container">
  98.           <div class="row">
  99.             <div class="col-12">
  100.               <!-- Catagory-->
  101.               <div class="widget catagory mb-4">
  102.                 <h6 class="widget-title mb-2">Brand</h6>
  103.                 <div class="widget-desc">
  104.                   <!-- Single Checkbox-->
  105.                   <div class="form-check">
  106.                     <input class="form-check-input" id="zara" type="checkbox" checked>
  107.                     <label class="form-check-label" for="zara">Zara</label>
  108.                   </div>
  109.                   <!-- Single Checkbox-->
  110.                   <div class="form-check">
  111.                     <input class="form-check-input" id="Gucci" type="checkbox">
  112.                     <label class="form-check-label" for="Gucci">Gucci</label>
  113.                   </div>
  114.                   <!-- Single Checkbox-->
  115.                   <div class="form-check">
  116.                     <input class="form-check-input" id="Addidas" type="checkbox">
  117.                     <label class="form-check-label" for="Addidas">Addidas</label>
  118.                   </div>
  119.                   <!-- Single Checkbox-->
  120.                   <div class="form-check">
  121.                     <input class="form-check-input" id="Nike" type="checkbox">
  122.                     <label class="form-check-label" for="Nike">Nike</label>
  123.                   </div>
  124.                   <!-- Single Checkbox-->
  125.                   <div class="form-check">
  126.                     <input class="form-check-input" id="Denim" type="checkbox">
  127.                     <label class="form-check-label" for="Denim">Denim</label>
  128.                   </div>
  129.                 </div>
  130.               </div>
  131.             </div>
  132.             <div class="col-12">
  133.               <!-- Color-->
  134.               <div class="widget color mb-4">
  135.                 <h6 class="widget-title mb-2">Color Family</h6>
  136.                 <div class="widget-desc">
  137.                   <!-- Single Checkbox-->
  138.                   <div class="form-check">
  139.                     <input class="form-check-input" id="Purple" type="checkbox" checked>
  140.                     <label class="form-check-label" for="Purple">Purple</label>
  141.                   </div>
  142.                   <!-- Single Checkbox-->
  143.                   <div class="form-check">
  144.                     <input class="form-check-input" id="Black" type="checkbox">
  145.                     <label class="form-check-label" for="Black">Black</label>
  146.                   </div>
  147.                   <!-- Single Checkbox-->
  148.                   <div class="form-check">
  149.                     <input class="form-check-input" id="White" type="checkbox">
  150.                     <label class="form-check-label" for="White">White</label>
  151.                   </div>
  152.                   <!-- Single Checkbox-->
  153.                   <div class="form-check">
  154.                     <input class="form-check-input" id="Red" type="checkbox">
  155.                     <label class="form-check-label" for="Red">Red</label>
  156.                   </div>
  157.                   <!-- Single Checkbox-->
  158.                   <div class="form-check">
  159.                     <input class="form-check-input" id="Pink" type="checkbox">
  160.                     <label class="form-check-label" for="Pink">Pink</label>
  161.                   </div>
  162.                 </div>
  163.               </div>
  164.             </div>
  165.             <div class="col-12">
  166.               <!-- Size-->
  167.               <div class="widget size mb-4">
  168.                 <h6 class="widget-title mb-2">Size</h6>
  169.                 <div class="widget-desc">
  170.                   <!-- Single Checkbox-->
  171.                   <div class="form-check">
  172.                     <input class="form-check-input" id="XtraLarge" type="checkbox" checked>
  173.                     <label class="form-check-label" for="XtraLarge">Xtra Large</label>
  174.                   </div>
  175.                   <!-- Single Checkbox-->
  176.                   <div class="form-check">
  177.                     <input class="form-check-input" id="Large" type="checkbox">
  178.                     <label class="form-check-label" for="Large">Large</label>
  179.                   </div>
  180.                   <!-- Single Checkbox-->
  181.                   <div class="form-check">
  182.                     <input class="form-check-input" id="medium" type="checkbox">
  183.                     <label class="form-check-label" for="medium">Medium</label>
  184.                   </div>
  185.                   <!-- Single Checkbox-->
  186.                   <div class="form-check">
  187.                     <input class="form-check-input" id="Small" type="checkbox">
  188.                     <label class="form-check-label" for="Small">Small</label>
  189.                   </div>
  190.                   <!-- Single Checkbox-->
  191.                   <div class="form-check">
  192.                     <input class="form-check-input" id="ExtraSmall" type="checkbox">
  193.                     <label class="form-check-label" for="ExtraSmall">Extra Small</label>
  194.                   </div>
  195.                 </div>
  196.               </div>
  197.             </div>
  198.             <div class="col-12">
  199.               <!-- Ratings-->
  200.               <div class="widget ratings mb-4">
  201.                 <h6 class="widget-title mb-2">Ratings</h6>
  202.                 <div class="widget-desc">
  203.                   <!-- Single Checkbox-->
  204.                   <div class="form-check">
  205.                     <input class="form-check-input" id="5star" type="checkbox" checked>
  206.                     <label class="form-check-label" for="5star"><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i></label>
  207.                   </div>
  208.                   <!-- Single Checkbox-->
  209.                   <div class="form-check">
  210.                     <input class="form-check-input" id="4star" type="checkbox">
  211.                     <label class="form-check-label" for="4star"><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-secondary"></i></label>
  212.                   </div>
  213.                   <!-- Single Checkbox-->
  214.                   <div class="form-check">
  215.                     <input class="form-check-input" id="3star" type="checkbox">
  216.                     <label class="form-check-label" for="3star"><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-secondary"></i><i class="fa-solid fa-star text-secondary"></i></label>
  217.                   </div>
  218.                   <!-- Single Checkbox-->
  219.                   <div class="form-check">
  220.                     <input class="form-check-input" id="2star" type="checkbox">
  221.                     <label class="form-check-label" for="2star"><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-secondary"></i><i class="fa-solid fa-star text-secondary"></i><i class="fa-solid fa-star text-secondary"></i></label>
  222.                   </div>
  223.                   <!-- Single Checkbox-->
  224.                   <div class="form-check">
  225.                     <input class="form-check-input" id="1star" type="checkbox">
  226.                     <label class="form-check-label" for="1star"><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-secondary"></i><i class="fa-solid fa-star text-secondary"></i><i class="fa-solid fa-star text-secondary"></i><i class="fa-solid fa-star text-secondary"></i></label>
  227.                   </div>
  228.                 </div>
  229.               </div>
  230.             </div>
  231.             <div class="col-12">
  232.               <!-- Payment Type-->
  233.               <div class="widget payment-type mb-4">
  234.                 <h6 class="widget-title mb-2">Payment Type</h6>
  235.                 <div class="widget-desc">
  236.                   <!-- Single Checkbox-->
  237.                   <div class="form-check">
  238.                     <input class="form-check-input" id="cod" type="checkbox" checked>
  239.                     <label class="form-check-label" for="cod">Cash On Delivery</label>
  240.                   </div>
  241.                   <!-- Single Checkbox-->
  242.                   <div class="form-check">
  243.                     <input class="form-check-input" id="paypal" type="checkbox">
  244.                     <label class="form-check-label" for="paypal">Paypal</label>
  245.                   </div>
  246.                   <!-- Single Checkbox-->
  247.                   <div class="form-check">
  248.                     <input class="form-check-input" id="checkpayment" type="checkbox">
  249.                     <label class="form-check-label" for="checkpayment">Check Payment</label>
  250.                   </div>
  251.                   <!-- Single Checkbox-->
  252.                   <div class="form-check">
  253.                     <input class="form-check-input" id="payonner" type="checkbox">
  254.                     <label class="form-check-label" for="payonner">Payonner</label>
  255.                   </div>
  256.                   <!-- Single Checkbox-->
  257.                   <div class="form-check">
  258.                     <input class="form-check-input" id="mobbanking" type="checkbox">
  259.                     <label class="form-check-label" for="mobbanking">Mobile Banking</label>
  260.                   </div>
  261.                 </div>
  262.               </div>
  263.             </div>
  264.             <div class="col-12">
  265.               <!-- Price Range-->
  266.               <div class="widget price-range mb-4">
  267.                 <h6 class="widget-title mb-2">Price Range</h6>
  268.                 <div class="widget-desc">
  269.                   <!-- Min Value-->
  270.                   <div class="row g-3">
  271.                     <div class="col-6">
  272.                       <div class="form-floating">
  273.                         <input class="form-control" id="floatingInput" type="text" placeholder="1" value="1">
  274.                         <label for="floatingInput">Min</label>
  275.                       </div>
  276.                     </div>
  277.                     <div class="col-6">
  278.                       <div class="form-floating">
  279.                         <input class="form-control" id="floatingInput" type="text" placeholder="1" value="5000">
  280.                         <label for="floatingInput">Max</label>
  281.                       </div>
  282.                     </div>
  283.                   </div>
  284.                 </div>
  285.               </div>
  286.             </div>
  287.             <div class="col-12">
  288.               <!-- Apply Filter-->
  289.               <div class="apply-filter-btn"><a class="btn btn-success w-100" href="#">Apply Filter</a></div>
  290.             </div>
  291.           </div>
  292.         </div>
  293.       </div>
  294.     </div>
  296.     <div class="page-content-wrapper">
  297.       <!-- Catagory Banner-->
  298.       <div class="hero-wrapper">
  299.         <div class="container">
  300.           <div class="pt-3">
  301.             <!-- Hero Slides-->
  302.             <div class="hero-slides  owl-carousel">
  303.               <!-- Single Hero Slide-->
  304.               <div class="single-hero-slide active" 
  305.                  style="background-image: url({{ asset('img/bg-img/1.jpg')  }})">
  306.                 <div class="slide-content h-100 d-flex align-items-center">
  307.                   <div class="slide-text">
  308.                     <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="1000ms" data-duration="1000ms">AidMarket</h4>
  309.                     <p class="text-white" data-animation="fadeInUp" data-delay="400ms" data-duration="1000ms">Retrouvez prêt de chez vous, <br>des boutiques, des restaurants, <br> des espaces chics  et des magasins... </p><a class="btn btn-primary" href="#" data-animation="fadeInUp" data-delay="800ms" data-duration="1000ms">En savoir plus</a>
  310.                   </div>
  311.                 </div>
  312.               </div>
  313.               <!-- Single Hero Slide-->
  314.               <div class="single-hero-slide" 
  315.               style="background-image: url({{ asset('img/bg-img/2.jpg')  }})">
  316.                 <div class="slide-content h-100 d-flex align-items-center">
  317.                   <div class="slide-text">
  318.                     <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="1000ms" data-duration="1000ms">AidMarket</h4>
  319.                     <p class="text-white" data-animation="fadeInUp" data-delay="400ms" data-duration="1000ms">Nous vous apportons une visibilité <br> avec une grande communauté</p><a class="btn btn-success" href="#" data-animation="fadeInUp" data-delay="500ms" data-duration="1000ms">En savoir plus</a>
  320.                   </div>
  321.                 </div>
  322.               </div>
  323.               <!-- Single Hero Slide-->
  324.               <div class="single-hero-slide" 
  325.                  style="background-image: url( {{ asset('img/bg-img/14.jpg') }})"
  326.                  >
  327.                 <div class="slide-content h-100 d-flex align-items-center">
  328.                   <div class="slide-text">
  329.                     <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="1000ms" data-duration="1000ms">AidMarket</h4>
  330.                     <p class="text-white" data-animation="fadeInUp" data-delay="400ms" data-duration="1000ms">Vendre plus, acheter plus, avec <br> notre communauté grandissante</p><a class="btn btn-danger" href="#" data-animation="fadeInUp" data-delay="800ms" data-duration="1000ms">En savoir plus</a>
  331.                   </div>
  332.                 </div>
  333.               </div>
  334.             </div>
  335.           </div>
  336.         </div>
  337.       </div>
  338.       
  341.     
  342.    <div class="top-products-area py-3">
  343.         <div class="container">
  344.           <div class="section-heading d-flex align-items-center justify-content-between dir-rtl">
  345.             <h6>Nos produits en Boutique</h6>
  346.             <a class="btn p-0" href="#">Voir plus<i class="ms-1 fa-solid fa-arrow-right-long"></i></a>
  347.             <div class="layout-options">
  348.               <a  href="{{ path('app_cartboutique_Boutiques') }}">
  349.                 <i class="fa-solid fa-list-ul"></i>
  350.               </a>
  351.               {#<a  href="{{path('app_indexlist')}}"><i class="fa-solid fa-list-ul"></i></a>#}
  352.               <a class="active" href="#"><i class="fa-solid fa-border-all"></i></a>
  353.             </div>
  354.           </div>
  358. <div class="mb-3"></div>
  360.  <div class="row g-2 rtl-flex-d-row-r">
  361.             <!-- Product Card -->
  362.  {% for ListeUserVendeur in vendeurBoutiques %}
  364. <div class="col-6 col-md-4">
  365.               <!-- code start -->
  366. <div class="profile-area">
  367. <div class="twPc-div ">
  368.     <a class="twPc-bg twPc-block"></a>
  370.   <div>
  371.     <div class="twPc-button">
  372.             <!-- Twitter Button | you can get from: https://about.twitter.com/tr/resources/buttons#follow -->
  374.             <a href="#" class="btn btn-info rounded " data-show-count="false" data-size="large" data-show-screen-name="false" data-dnt="true" data-bs-toggle="modal" data-bs-target="#myModaler">
  375.               <span class="bx bx-like">Suivre </span> </a>
  376.                 <!-- Twitter Button -->   
  377.     </div>
  379.     <a title="page boutique" href="#" class="twPc-avatarLink">
  380.       <img alt="Mert S. Kaplan" width="50px" src="../img/icon.jpg" class="twPc-avatarImg">
  381.     </a>
  383.     <div class="twPc-divUser">
  384.       <div class="twPc-divName">
  385.         <a href="{{ path('app_boutique_vendeur', {id: ListeUserVendeur.id}) }}">
  386.           {{ ListeUserVendeur.nomBoutique }}</a>
  387.       </div>
  388.       
  389.     </div>
  391.     <div class="twPc-divStats">
  392.       <ul class="twPc-Arrange">
  393.         <li class="twPc-ArrangeSizeFit">
  394.           <a href="#" title="9.840 Tweet">
  395.             <span class="twPc-StatLabel twPc-block">Vues</span>
  396.             <span class="twPc-StatValue ">- </span>
  397.           </a>
  398.         </li>
  399.         <li class="twPc-ArrangeSizeFit">
  400.           <a href="#" title="885 Following">
  401.             <span class="twPc-StatLabel twPc-block">Suivi.es</span>
  402.             <span class="twPc-StatValue text-center"> - </span>
  403.           </a>
  404.         </li>
  405.         <li class="twPc-ArrangeSizeFit">
  406.           <a href="#" title="1.810 Followers">
  407.             <span class="twPc-StatLabel twPc-block">Following</span>
  408.             <span class="twPc-StatValue text-center"> - </span>
  409.           </a>
  410.         </li>
  411.       </ul>
  412.     </div>
  413.   </div>
  414. </div>
  415. </div>
  416. <!-- code end -->
  417. </div>
  419. {% endfor %}
  422. </div>
  424. <div class="modal" id="myModaler">
  425.   <div class="modal-dialog modal-dialog-centered">
  426.     <div class="modal-content">
  428.       <!-- Modal Header -->
  429.       <div class="modal-header">
  430.         <h4 class="modal-title">Veuillez créer un compte</h4>
  431.         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  432.       </div>
  434.       <!-- Modal body -->
  435.       <div class="modal-body">
  436.         <a href="{{ path('app_particulier') }}" class="btn btn-primary"> Compte particulier</a>
  437.         <a href="{{ path('app_auth') }}" class="btn btn-primary"> Compte Etablissement</a>
  438.       </div>
  440.       <!-- Modal footer -->
  441.       <div class="modal-footer">
  442.         <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
  443.       </div>
  445.     </div>
  446.   </div>
  447. </div>
  451. </div>
  452. </div>
  453.     </div>
  454.     <!-- Internet Connection Status-->
  455.     <div class="internet-connection-status" id="internetStatus"></div>
  456.     <!-- Footer Nav-->
  457.   
  458.   {% include 'main/footer.html.twig' %}
  460.     {% if app.user and app.user.compte == 'client' %}
  462.       {% include 'main/footerparticulier.html.twig' %}
  464.     {% elseif app.user and app.user.compte == 'vendeur' %}
  466.     {% include 'main/footer.html.twig' %}
  468.     <a href="{{ path('app_ajouterProduit') }}">
  469.       <div data-js="back-top" class="back-top">
  470.       
  471.         <img src="img/plus.png" width="110px"  alt="">
  472.      </div>
  473.     </a>
  475.   {% else %}
  477.    
  479.   {% endif %}
  482.  {% endblock %}
  485.         {% block javascripts %}
  486.             {{ encore_entry_script_tags('app') }}
  489.         
  490.    <!-- All JavaScript Files-->
  491.     <script src="{{asset('js/bootstrap.bundle.min.js')}}"></script>
  492.     <script src="{{asset('js/jquery.min.js')}}"></script>
  493.     <script src="{{asset('js/waypoints.min.js')}}"></script>
  494.     <script src="{{asset('js/jquery.easing.min.js')}}"></script>
  495.     <script src="{{asset('js/owl.carousel.min.js')}}"></script>
  496.     <script src="{{asset('js/jquery.magnific-popup.min.js')}}"></script>
  497.     <script src="{{asset('js/jquery.counterup.min.js')}}"></script>
  498.     <script src="{{asset('js/jquery.countdown.min.js')}}"></script>
  499.     <script src="{{asset('js/jquery.passwordstrength.js')}}"></script>
  500.     <script src="{{asset('js/jquery.nice-select.min.js')}}"></script>
  501.     <script src="{{asset('js/theme-switching.js')}}"></script>
  502.     <script src="{{asset('js/no-internet.js')}}"></script>
  503.     <script src="{{asset('js/active.js')}}"></script>
  504.     <script src="{{asset('js/pwa.js')}}"></script>
  506.     
  508.     {% endblock %}
  509.   </body>
  511. </html>