templates/categorie/catMagasins.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')}}">
  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.       
  80.         <!-- Page Title-->
  81.         <div class="page-heading">
  82.           <h6 class="mb-0">Produits en Magasins</h6>
  83.         </div>
  84.         <!-- Filter Option
  85.         <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>-->
  87.         <div class="filter-option ms-2" data-bs-toggle="offcanvas" aria-controls="suhaFilterOffcanvas"><i class="fa-solid fa-sliders"></i></div>
  88.       </div>
  89.     </div>
  90.     
  91.     <div class="offcanvas offcanvas-start suha-filter-offcanvas-wrap" tabindex="-1" id="suhaFilterOffcanvas" aria-labelledby="suhaFilterOffcanvasLabel">
  92.       <!-- Close button-->
  93.       <button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  94.       <!-- Offcanvas body-->
  95.       <div class="offcanvas-body py-5">
  96.         <div class="container">
  97.           <div class="row">
  98.             <div class="col-12">
  99.               <!-- Catagory-->
  100.               <div class="widget catagory mb-4">
  101.                 <h6 class="widget-title mb-2">Brand</h6>
  102.                 <div class="widget-desc">
  103.                   <!-- Single Checkbox-->
  104.                   <div class="form-check">
  105.                     <input class="form-check-input" id="zara" type="checkbox" checked>
  106.                     <label class="form-check-label" for="zara">Zara</label>
  107.                   </div>
  108.                   <!-- Single Checkbox-->
  109.                   <div class="form-check">
  110.                     <input class="form-check-input" id="Gucci" type="checkbox">
  111.                     <label class="form-check-label" for="Gucci">Gucci</label>
  112.                   </div>
  113.                   <!-- Single Checkbox-->
  114.                   <div class="form-check">
  115.                     <input class="form-check-input" id="Addidas" type="checkbox">
  116.                     <label class="form-check-label" for="Addidas">Addidas</label>
  117.                   </div>
  118.                   <!-- Single Checkbox-->
  119.                   <div class="form-check">
  120.                     <input class="form-check-input" id="Nike" type="checkbox">
  121.                     <label class="form-check-label" for="Nike">Nike</label>
  122.                   </div>
  123.                   <!-- Single Checkbox-->
  124.                   <div class="form-check">
  125.                     <input class="form-check-input" id="Denim" type="checkbox">
  126.                     <label class="form-check-label" for="Denim">Denim</label>
  127.                   </div>
  128.                 </div>
  129.               </div>
  130.             </div>
  131.             <div class="col-12">
  132.               <!-- Color-->
  133.               <div class="widget color mb-4">
  134.                 <h6 class="widget-title mb-2">Color Family</h6>
  135.                 <div class="widget-desc">
  136.                   <!-- Single Checkbox-->
  137.                   <div class="form-check">
  138.                     <input class="form-check-input" id="Purple" type="checkbox" checked>
  139.                     <label class="form-check-label" for="Purple">Purple</label>
  140.                   </div>
  141.                   <!-- Single Checkbox-->
  142.                   <div class="form-check">
  143.                     <input class="form-check-input" id="Black" type="checkbox">
  144.                     <label class="form-check-label" for="Black">Black</label>
  145.                   </div>
  146.                   <!-- Single Checkbox-->
  147.                   <div class="form-check">
  148.                     <input class="form-check-input" id="White" type="checkbox">
  149.                     <label class="form-check-label" for="White">White</label>
  150.                   </div>
  151.                   <!-- Single Checkbox-->
  152.                   <div class="form-check">
  153.                     <input class="form-check-input" id="Red" type="checkbox">
  154.                     <label class="form-check-label" for="Red">Red</label>
  155.                   </div>
  156.                   <!-- Single Checkbox-->
  157.                   <div class="form-check">
  158.                     <input class="form-check-input" id="Pink" type="checkbox">
  159.                     <label class="form-check-label" for="Pink">Pink</label>
  160.                   </div>
  161.                 </div>
  162.               </div>
  163.             </div>
  164.             <div class="col-12">
  165.               <!-- Size-->
  166.               <div class="widget size mb-4">
  167.                 <h6 class="widget-title mb-2">Size</h6>
  168.                 <div class="widget-desc">
  169.                   <!-- Single Checkbox-->
  170.                   <div class="form-check">
  171.                     <input class="form-check-input" id="XtraLarge" type="checkbox" checked>
  172.                     <label class="form-check-label" for="XtraLarge">Xtra Large</label>
  173.                   </div>
  174.                   <!-- Single Checkbox-->
  175.                   <div class="form-check">
  176.                     <input class="form-check-input" id="Large" type="checkbox">
  177.                     <label class="form-check-label" for="Large">Large</label>
  178.                   </div>
  179.                   <!-- Single Checkbox-->
  180.                   <div class="form-check">
  181.                     <input class="form-check-input" id="medium" type="checkbox">
  182.                     <label class="form-check-label" for="medium">Medium</label>
  183.                   </div>
  184.                   <!-- Single Checkbox-->
  185.                   <div class="form-check">
  186.                     <input class="form-check-input" id="Small" type="checkbox">
  187.                     <label class="form-check-label" for="Small">Small</label>
  188.                   </div>
  189.                   <!-- Single Checkbox-->
  190.                   <div class="form-check">
  191.                     <input class="form-check-input" id="ExtraSmall" type="checkbox">
  192.                     <label class="form-check-label" for="ExtraSmall">Extra Small</label>
  193.                   </div>
  194.                 </div>
  195.               </div>
  196.             </div>
  197.             <div class="col-12">
  198.               <!-- Ratings-->
  199.               <div class="widget ratings mb-4">
  200.                 <h6 class="widget-title mb-2">Ratings</h6>
  201.                 <div class="widget-desc">
  202.                   <!-- Single Checkbox-->
  203.                   <div class="form-check">
  204.                     <input class="form-check-input" id="5star" type="checkbox" checked>
  205.                     <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>
  206.                   </div>
  207.                   <!-- Single Checkbox-->
  208.                   <div class="form-check">
  209.                     <input class="form-check-input" id="4star" type="checkbox">
  210.                     <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>
  211.                   </div>
  212.                   <!-- Single Checkbox-->
  213.                   <div class="form-check">
  214.                     <input class="form-check-input" id="3star" type="checkbox">
  215.                     <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>
  216.                   </div>
  217.                   <!-- Single Checkbox-->
  218.                   <div class="form-check">
  219.                     <input class="form-check-input" id="2star" type="checkbox">
  220.                     <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>
  221.                   </div>
  222.                   <!-- Single Checkbox-->
  223.                   <div class="form-check">
  224.                     <input class="form-check-input" id="1star" type="checkbox">
  225.                     <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>
  226.                   </div>
  227.                 </div>
  228.               </div>
  229.             </div>
  230.             <div class="col-12">
  231.               <!-- Payment Type-->
  232.               <div class="widget payment-type mb-4">
  233.                 <h6 class="widget-title mb-2">Payment Type</h6>
  234.                 <div class="widget-desc">
  235.                   <!-- Single Checkbox-->
  236.                   <div class="form-check">
  237.                     <input class="form-check-input" id="cod" type="checkbox" checked>
  238.                     <label class="form-check-label" for="cod">Cash On Delivery</label>
  239.                   </div>
  240.                   <!-- Single Checkbox-->
  241.                   <div class="form-check">
  242.                     <input class="form-check-input" id="paypal" type="checkbox">
  243.                     <label class="form-check-label" for="paypal">Paypal</label>
  244.                   </div>
  245.                   <!-- Single Checkbox-->
  246.                   <div class="form-check">
  247.                     <input class="form-check-input" id="checkpayment" type="checkbox">
  248.                     <label class="form-check-label" for="checkpayment">Check Payment</label>
  249.                   </div>
  250.                   <!-- Single Checkbox-->
  251.                   <div class="form-check">
  252.                     <input class="form-check-input" id="payonner" type="checkbox">
  253.                     <label class="form-check-label" for="payonner">Payonner</label>
  254.                   </div>
  255.                   <!-- Single Checkbox-->
  256.                   <div class="form-check">
  257.                     <input class="form-check-input" id="mobbanking" type="checkbox">
  258.                     <label class="form-check-label" for="mobbanking">Mobile Banking</label>
  259.                   </div>
  260.                 </div>
  261.               </div>
  262.             </div>
  263.             <div class="col-12">
  264.               <!-- Price Range-->
  265.               <div class="widget price-range mb-4">
  266.                 <h6 class="widget-title mb-2">Price Range</h6>
  267.                 <div class="widget-desc">
  268.                   <!-- Min Value-->
  269.                   <div class="row g-3">
  270.                     <div class="col-6">
  271.                       <div class="form-floating">
  272.                         <input class="form-control" id="floatingInput" type="text" placeholder="1" value="1">
  273.                         <label for="floatingInput">Min</label>
  274.                       </div>
  275.                     </div>
  276.                     <div class="col-6">
  277.                       <div class="form-floating">
  278.                         <input class="form-control" id="floatingInput" type="text" placeholder="1" value="5000">
  279.                         <label for="floatingInput">Max</label>
  280.                       </div>
  281.                     </div>
  282.                   </div>
  283.                 </div>
  284.               </div>
  285.             </div>
  286.             <div class="col-12">
  287.               <!-- Apply Filter-->
  288.               <div class="apply-filter-btn"><a class="btn btn-success w-100" href="#">Apply Filter</a></div>
  289.             </div>
  290.           </div>
  291.         </div>
  292.       </div>
  293.     </div>
  294.     <div class="page-content-wrapper">
  295.       <!-- Catagory Banner-->
  296.       <div class="hero-wrapper">
  297.         <div class="container">
  298.           <div class="pt-3">
  299.             <!-- Hero Slides-->
  300.             <div class="hero-slides  owl-carousel">
  301.               <!-- Single Hero Slide-->
  302.               <div class="single-hero-slide active" 
  303.                  style="background-image: url({{ asset('img/bg-img/1.jpg')  }})">
  304.                 <div class="slide-content h-100 d-flex align-items-center">
  305.                   <div class="slide-text">
  306.                     <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="1000ms" data-duration="1000ms">AidMarket</h4>
  307.                     <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>
  308.                   </div>
  309.                 </div>
  310.               </div>
  311.               <!-- Single Hero Slide-->
  312.               <div class="single-hero-slide" 
  313.               style="background-image: url({{ asset('img/bg-img/2.jpg')  }})">
  314.                 <div class="slide-content h-100 d-flex align-items-center">
  315.                   <div class="slide-text">
  316.                     <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="1000ms" data-duration="1000ms">AidMarket</h4>
  317.                     <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>
  318.                   </div>
  319.                 </div>
  320.               </div>
  321.               <!-- Single Hero Slide-->
  322.               <div class="single-hero-slide" 
  323.                  style="background-image: url( {{ asset('img/bg-img/14.jpg') }})"
  324.                  >
  325.                 <div class="slide-content h-100 d-flex align-items-center">
  326.                   <div class="slide-text">
  327.                     <h4 class="text-white mb-0" data-animation="fadeInUp" data-delay="1000ms" data-duration="1000ms">AidMarket</h4>
  328.                     <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>
  329.                   </div>
  330.                 </div>
  331.               </div>
  332.             </div>
  333.           </div>
  334.         </div>
  335.       </div>
  336.       
  337.   
  338.    <div class="top-products-area py-3">
  339.         <div class="container">
  340.           <div class="section-heading d-flex align-items-center justify-content-between dir-rtl">
  341.             <h6>Nos Magasins</h6>
  342.             <a class="btn p-0" href="#">Voir plus<i class="ms-1 fa-solid fa-arrow-right-long"></i></a>
  343.             <div class="layout-options">
  344.               <a href="{{ path('app_boutique_catcategorie') }}"><i class="fa-solid fa-list-ul"></i></a>
  345.               {#<a  href="{{path('app_indexlist')}}"><i class="fa-solid fa-list-ul"></i></a>#}
  346.               <a class="active" href="#"><i class="fa-solid fa-border-all"></i></a>
  347.             </div>
  348.           </div>
  350. <div class="mb-3"></div>
  352. <div class="row g-2 rtl-flex-d-row-r">
  354. <!-- Product Card -->
  355.  {% for ListeUserVendeur in vendeur %}
  357. <div class="col-6 col-md-4">
  358.               <!-- code start -->
  359. <div class="profile-area">
  360. <div class="twPc-div ">
  361.     <a class="twPc-bg twPc-block"></a>
  363.   <div>
  364.     <div class="twPc-button">
  365.             <!-- Twitter Button | you can get from: https://about.twitter.com/tr/resources/buttons#follow -->
  367.         <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">
  368.         <span class="bx bx-like">Suivre </span> 
  369.         </a>
  370.                 <!-- Twitter Button -->   
  371.     </div>
  373.     <a title="page boutique" href="#" class="twPc-avatarLink">
  374.       <img alt="Mert S. Kaplan" width="50px" src="../img/icon.jpg" class="twPc-avatarImg">
  375.     </a>
  377.     <div class="twPc-divUser">
  378.       <div class="twPc-divName">
  379.         <a href="{{ path('app_boutique_vendeur', {id: ListeUserVendeur.id}) }}">
  380.           {{ ListeUserVendeur.nomBoutique }}</a>
  381.       </div>
  382.       
  383.     </div>
  385.     <div class="twPc-divStats">
  386.       <ul class="twPc-Arrange">
  387.         <li class="twPc-ArrangeSizeFit">
  388.           <a href="#" title="9.840 Tweet">
  389.             <span class="twPc-StatLabel twPc-block">Vues</span>
  390.             <span class="twPc-StatValue ">- </span>
  391.           </a>
  392.         </li>
  393.         <li class="twPc-ArrangeSizeFit">
  394.           <a href="#" title="885 Following">
  395.             <span class="twPc-StatLabel twPc-block">Suivi.es</span>
  396.             <span class="twPc-StatValue text-center"> - </span>
  397.           </a>
  398.         </li>
  399.         <li class="twPc-ArrangeSizeFit">
  400.           <a href="#" title="1.810 Followers">
  401.             <span class="twPc-StatLabel twPc-block">Following</span>
  402.             <span class="twPc-StatValue text-center"> - </span>
  403.           </a>
  404.         </li>
  405.       </ul>
  406.     </div>
  407.   </div>
  408. </div>
  409. </div>
  410. <!-- code end -->
  411. </div>
  413. {% endfor %}
  416. </div>
  418. <div class="modal" id="myModaler">
  419.   <div class="modal-dialog modal-dialog-centered">
  420.     <div class="modal-content">
  422.       <!-- Modal Header -->
  423.       <div class="modal-header">
  424.         <h4 class="modal-title">Veuillez créer un compte</h4>
  425.         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  426.       </div>
  428.       <!-- Modal body -->
  429.       <div class="modal-body">
  430.         <a href="{{ path('app_particulier') }}" class="btn btn-primary"> Compte particulier</a>
  431.         <a href="{{ path('app_auth') }}" class="btn btn-primary"> Compte Etablissement</a>
  432.       </div>
  434.       <!-- Modal footer -->
  435.       <div class="modal-footer">
  436.         <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
  437.       </div>
  439.     </div>
  440.   </div>
  441. </div>
  443. </div>
  444. </div>
  445.     </div>
  446.     <!-- Internet Connection Status-->
  447.     <div class="internet-connection-status" id="internetStatus"></div>
  448.     <!-- Footer Nav-->
  449.     
  451. {% include 'main/footer.html.twig' %}
  453.     {% if app.user and app.user.compte == 'client' %}
  455.       {% include 'main/footerparticulier.html.twig' %}
  457.     {% elseif app.user and app.user.compte == 'vendeur' %}
  459.     {% include 'main/footer.html.twig' %}
  461.     <a href="{{ path('app_ajouterProduit') }}">
  462.       <div data-js="back-top" class="back-top">
  463.       
  464.         <img src="img/plus.png" width="110px"  alt="">
  465.      </div>
  466.     </a>
  468.   {% else %}
  470.    
  472.   {% endif %}
  475.  {% endblock %}
  478.         {% block javascripts %}
  479.             {{ encore_entry_script_tags('app') }}
  482.         
  483.    <!-- All JavaScript Files-->
  484.     <script src="{{asset('js/bootstrap.bundle.min.js')}}"></script>
  485.     <script src="{{asset('js/jquery.min.js')}}"></script>
  486.     <script src="{{asset('js/waypoints.min.js')}}"></script>
  487.     <script src="{{asset('js/jquery.easing.min.js')}}"></script>
  488.     <script src="{{asset('js/owl.carousel.min.js')}}"></script>
  489.     <script src="{{asset('js/jquery.magnific-popup.min.js')}}"></script>
  490.     <script src="{{asset('js/jquery.counterup.min.js')}}"></script>
  491.     <script src="{{asset('js/jquery.countdown.min.js')}}"></script>
  492.     <script src="{{asset('js/jquery.passwordstrength.js')}}"></script>
  493.     <script src="{{asset('js/jquery.nice-select.min.js')}}"></script>
  494.     <script src="{{asset('js/theme-switching.js')}}"></script>
  495.     <script src="{{asset('js/no-internet.js')}}"></script>
  496.     <script src="{{asset('js/active.js')}}"></script>
  497.     <script src="{{asset('js/pwa.js')}}"></script>
  499.     
  501.     {% endblock %}
  502.   </body>
  504. </html>