templates/client/toulesarticles.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.         
  21.         {{ encore_entry_link_tags('app') }}
  22.         
  24.     <link rel="icon" href="{{asset('img/icons/icon-72x72.png')}}">
  25.     <!-- Apple Touch Icon -->
  26.     <link rel="apple-touch-icon" href="{{asset('img/icons/icon-96x96.png')}}">
  27.     <link rel="apple-touch-icon" sizes="152x152" href="{{asset('img/icons/icon-152x152.png')}}">
  28.     <link rel="apple-touch-icon" sizes="167x167" href="{{asset('img/icons/icon-167x167.png')}}">
  29.     <link rel="apple-touch-icon" sizes="180x180" href="{{asset('img/icons/icon-180x180.png')}}">
  30.     <!-- CSS Libraries -->
  31.     <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}">
  32.     <link rel="stylesheet" href="{{asset('css/animate.css')}}">
  33.     <link rel="stylesheet" href="{{asset('css/all.min.css')}}">
  34.     <link rel="stylesheet" href="{{asset('css/brands.min.css')}}">
  35.     <link rel="stylesheet" href="{{asset('css/solid.min.css')}}">
  36.     <link rel="stylesheet" href="{{asset('css/owl.carousel.min.css')}}">
  37.     <link rel="stylesheet" href="{{asset('css/magnific-popup.css')}}">
  38.     <link rel="stylesheet" href="{{asset('css/nice-select.css')}}">
  39.     <!-- Stylesheet -->
  40.     <link rel="stylesheet" href="{{asset('css/style.css')}}">
  41.     <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>
  50.     {% block body %}
  53.     <!-- Header Area-->
  54.     <div class="header-area" id="headerArea">
  55.       <div class="container h-100 d-flex align-items-center justify-content-between rtl-flex-d-row-r">
  56.         <!-- Back Button-->
  58.         {% if app.user and app.user.compte == 'client' %}
  60.         <div class="back-button me-2">
  61.           <a href="{{path('app_main_particulier')}}">
  62.           <i class="fa-solid fa-arrow-left-long"></i>
  63.          </a>
  64.        </div>
  66.        {% elseif app.user and app.user.compte == 'vendeur' %}
  68.         <div class="back-button me-2">
  69.           <a href="{{path('app_main')}}">
  70.           <i class="fa-solid fa-arrow-left-long"></i>
  71.          </a>
  72.        </div>
  74.        {% else %}
  76.    
  78.       {% endif %}
  80.         <!-- Page Title-->
  81.         <div class="page-heading">
  82.           <h6 class="mb-0">Les articles en boutiques  </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>
  89.       </div>
  90.     </div>
  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.       <div class="py-3">
  296.         <div class="container">
  297.           <div class="row g-1 align-items-center rtl-flex-d-row-r">
  298.             <div class="col-8">
  299.               <!-- Product Catagories Slide -->
  300.               <div class="product-catagories owl-carousel catagory-slides">
  301.                 <a class="shadow-sm" href="#">
  302.                   <img src="img/product/5.png" alt="">Boutiques</a>
  303.                   <a class="shadow-sm" href="#"><img src="img/product/9.png" alt="">Magasins</a>
  304.                   <a class="shadow-sm" href="#"><img src="img/product/4.png" alt="">Esthétiques</a>
  305.                   <a class="shadow-sm" href="#"><img src="img/product/9.png" alt="">Beautés</a>
  306.                   <a class="shadow-sm" href="#"><img src="img/product/4.png" alt="">Prestataires</a>
  307.                 </div>
  308.             </div>
  309.             <div class="col-4">
  310.               <!-- Select Product Catagory-->
  311.               <div class="select-product-catagory">
  312.                 <select class="right small border-0" id="selectProductCatagory" name="selectProductCatagory" aria-label="Default select example">
  313.                   <option selected>afficher par</option>
  314.                   <option value="1">Nouveauté</option>
  315.                   <option value="2">Populaire</option>
  316.                   <option value="3">prix</option>
  317.                 </select>
  318.               </div>
  319.             </div>
  320.           </div>
  321.           <div class="mb-3"></div>
  328.           <!-- Top Products-->
  329.       <div class="top-products-area py-3">
  330.         <div class="container">
  331.           <div class="section-heading rtl-text-right">
  332.             <h6>Les articles disponibles</h6>
  333.           </div>
  337.   <div class="row g-2 rtl-flex-d-row-r">
  338.     {% if articles|length > 0 %}
  339.             
  340.        {% for listeArticles in articles %}
  341.            
  342.             <!-- Product Card -->
  343.             <div class="col-6 col-md-4">
  344.               <div class="card product-card">
  345.                 <div class="card-body">
  346.                   <!-- Badge<span class="badge rounded-pill badge-danger">-18%</span>-->
  347.                   <!-- Wishlist Button-->
  348.                   <a class="wishlist-btn" href="{{ path('app_details', {id: listeArticles.id}) }}">
  349.                     <!--<i class="fa-solid fa-heart"> </i>-->
  350.                   </a>
  351.                   <!-- Thumbnail -->
  352.                   <a class="product-thumbnail d-block" href="#">
  353.                     
  354.                     <!-- Offer Countdown Timer: Please use event time this format: YYYY/MM/DD hh:mm:ss -->
  356.                     <img src="{{ vich_uploader_asset(listeArticles) | imagine_filter('version_carre_medium') }}" alt="{{ listeArticles.titre }}">
  357.                    
  358.                   </a>
  359.                   <!-- Product Title -->
  360.                   <a class="product-title" href="#">{{ listeArticles.titre }}</a>
  361.                   <!-- Product Price -->
  362.                   <p class="sale-price">
  363.                     {{ listeArticles.prixdeVente }} Fr
  364.                     <span>{{ listeArticles.prixArticle }} Fr</span>
  365.                   </p>
  366.                   <!-- Rating -->
  367.                   
  368.                   <!-- Add to Cart --><a class="btn btn-success btn-sm" href="#"><i class="fa-solid fa-plus"></i></a>
  369.                 </div>
  370.               </div>
  371.             </div>
  373.              {% endfor %}
  375.  {% else %}
  377.   <p> aucun article n'est disponible...</p>
  379.  {% endif %}
  380.             
  381.           </div>
  383.         </div>
  384.       </div>
  387.         </div>
  388.       </div>
  389.     </div>
  390.     <!-- Internet Connection Status-->
  391.     <div class="internet-connection-status" id="internetStatus"></div>
  392.     <!-- Footer Nav-->
  393.     
  394.     {% if app.user and app.user.compte == 'client' %}
  396.       {% include 'main/footerparticulier.html.twig' %}
  398.     {% elseif app.user and app.user.compte == 'vendeur' %}
  400.     {% include 'main/footer.html.twig' %}
  402.     <a href="{{ path('app_ajouterProduit') }}">
  403.       <div data-js="back-top" class="back-top">
  404.       
  405.         <img src="img/plus.png" width="110px"  alt="">
  406.      </div>
  407.     </a>
  409.   {% else %}
  411.    
  413.   {% endif %}
  414.     
  416. {% endblock %}
  419.         {% block javascripts %}
  420.             {{ encore_entry_script_tags('app') }}
  421.         
  422.     <!-- All JavaScript Files-->
  423.     <script src="{{asset('js/bootstrap.bundle.min.js')}}"></script>
  424.     <script src="{{asset('js/jquery.min.js')}}"></script>
  425.     <script src="{{asset('js/waypoints.min.js')}}"></script>
  426.     <script src="{{asset('js/jquery.easing.min.js')}}"></script>
  427.     <script src="{{asset('js/owl.carousel.min.js')}}"></script>
  428.     <script src="{{asset('js/jquery.magnific-popup.min.js')}}"></script>
  429.     <script src="{{asset('js/jquery.counterup.min.js')}}"></script>
  430.     <script src="{{asset('js/jquery.countdown.min.js')}}"></script>
  431.     <script src="{{asset('js/jquery.passwordstrength.js')}}"></script>
  432.     <script src="{{asset('js/jquery.nice-select.min.js')}}"></script>
  433.     <script src="{{asset('js/theme-switching.js')}}"></script>
  434.     <script src="{{asset('js/no-internet.js')}}"></script>
  435.     <script src="{{asset('js/active.js')}}"></script>
  436.     <script src="{{asset('js/pwa.js')}}"></script>
  438.     {% endblock %}
  439.   </body>
  440. </html>