{% 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 %}