{% extends "@Flexy/FrontBundle/templates/layout.html.twig" %} {% block stylesheets %} {{ parent() }} <link rel="stylesheet" href="{{asset('bundles/flexyfront/assets/css/chosen.css')}}"> <style> .chosen-container-single .chosen-single { padding: 5px 8px 30px 13px !important; border: 1px solid #f5f5f5 !important; font-size: 16px !important; color: #a0a0a0 !important; } </style> {% endblock %}{% block body %} <div class="body-wrapper"> <!-- Begin Li's Breadcrumb Area --> <div class="breadcrumb-area"> <div class="container"> <div class="breadcrumb-content"> <ul> <li><a href="index.html">Home</a></li> <li class="active">Shop List Right Sidebar</li> </ul> </div> </div> </div> <!-- Li's Breadcrumb Area End Here --> <!-- Begin Li's Content Wraper Area --> <div class="content-wraper pt-60 pb-60"> <div class="container"> <div class="row"> <div class="col-lg-9 order-2 order-lg-1"> <!-- Begin Li's Banner Area --> <div class="single-banner shop-page-banner d-none"> <a href="#"> <img src="{{asset('bundles/flexyfront/assets/images/bg-banner/2.jpg')}}" alt="Li's Static Banner"> </a> </div> <!-- Li's Banner Area End Here --> <!-- shop-top-bar start --> <div class="shop-top-bar mt-30"> <div class="shop-bar-inner"> <div class="product-view-mode"> <!-- shop-item-filter-list start --> <ul class="nav shop-item-filter-list" role="tablist"> <li role="presentation"><a data-toggle="tab" role="tab" aria-controls="grid-view" href="#grid-view"><i class="fa fa-th"></i></a></li> <li class="active" role="presentation"><a aria-selected="true" class="active show" data-toggle="tab" role="tab" aria-controls="list-view" href="#list-view"><i class="fa fa-th-list"></i></a></li> </ul> <!-- shop-item-filter-list end --> </div> <div class="toolbar-amount"> <span>1 sur 9</span> </div> </div> <!-- product-select-box start --> <div class="product-select-box"> <div class="product-short"> <p>Lister par:</p> <select class="nice-select"> <option value="trending">Les nouveaux</option> <option value="sales">Nom (A - Z)</option> <option value="sales">Nom (Z - A)</option> <option value="rating">Prix (Low > High)</option> <option value="date">Avis (Lowest)</option> <option value="price-asc">Model (A - Z)</option> <option value="price-asc">Model (Z - A)</option> </select> </div> </div> <!-- product-select-box end --> </div> <!-- shop-top-bar end --> <!-- shop-products-wrapper start --> <div class="shop-products-wrapper"> <div class="tab-content"> <div id="grid-view" class="tab-pane fade" role="tabpanel"> <div class="product-area shop-product-area"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/1.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/2.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/3.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/4.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/5.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/6.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/7.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/8.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/9.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/10.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/11.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> <div class="col-lg-4 col-md-4 col-sm-6 mt-40"> <!-- single-product-wrap start --> <div class="single-product-wrap"> <div class="product-image"> <a href="single-product.html"> <img src="{{asset('bundles/flexyfront/assets/images/product/large-size/12.jpg')}}" alt="Li's Product Image"> </a> <span class="sticker">New</span> </div> <div class="product_desc"> <div class="product_desc_info"> <div class="product-review"> <h5 class="manufacturer"> <a href="product-details.html">TCL TV(s)</a> </h5> <div class="rating-box"> <ul class="rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> <li class="no-star"><i class="fa fa-star"></i></li> </ul> </div> </div> <h4><a class="product_name" href="single-product.html">Accusantium dolorem1</a></h4> <div class="price-box"> <span class="new-price">MAD 46.80</span> </div> </div> <div class="add-actions"> <ul class="add-actions-link"> <li class="add-cart active"><a href="shopping-cart.html">Ajouter au panier</a></li> <li><a href="#" title="Prévisualiser" class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-eye"></i></a></li> <li><a class="links-details" href="wishlist.html"><i class="fa fa-heart-o"></i></a></li> </ul> </div> </div> </div> <!-- single-product-wrap end --> </div> </div> </div> </div> <div id="list-view" class="tab-pane fade product-list-view active show" role="tabpanel"> <div class="row"> <div class="col"> {% for singleProduct in products %} {% include "@Flexy/FrontBundle/templates/products/includes/_singleProductListView.html.twig" with {singleProduct:singleProduct} %} {% endfor %} </div> </div> </div> <div class="paginatoin-area"> <div class="row"> <div class="col-lg-6 col-md-6"> <p>Affichés 1 -9 (Produits)</p> </div> <div class="col-lg-6 col-md-6"> <ul class="pagination-box"> <li><a href="#" class="Précedent"><i class="fa fa-chevron-left"></i> Précedent</a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#" class="Suivant"> Suivant <i class="fa fa-chevron-right"></i></a> </li> </ul> </div> </div> </div> </div> </div> <!-- shop-products-wrapper end --> </div> <div class="col-lg-3 order-1 order-lg-2"> {{render(path('front_sideBarFilter',{filter:app.request.get("filter")}))}} </div> </div> </div> </div> <!-- Content Wraper Area End Here --> </div>{% endblock %} {% block javascripts %} {{parent()}} <script> $(".shop-item-filter-list a").click(function(){ var cible = $(this).attr("aria-controls"); $(".tab-pane").removeClass("active show"); $("#"+cible).addClass("active show"); }); </script> {% endblock %}