{% extends 'front/base.html.twig' %}
{% block title %}SUNSHINE ELEGANCE :: PROMOTIONS {% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.product-cart-wrap .product-img-action-wrap {
max-height: none;
}
</style>
<script>
var ID_CATEGORY = '{{ idCategory }}';
var SEARCH = '{{ search }}';
// Filtres des tailles et couleurs
var taillesFilter = {{ Globals.getTailles(categories,false,false,search)|json_encode|raw }};
var couleursFilter = {{ Globals.getCouleurs(categories,false,false,search)|json_encode|raw }};
</script>
{% endblock %}
{% block body %}
{# {% verbatim %} #}
<main class="main" id="app" v-cloak>
<div class="page-header breadcrumb-wrap">
<div class="container">
<div class="breadcrumb">
<a href="{{ path('home') }}" rel="nofollow">Acceuil</a>
<span></span> Recherche
</div>
</div>
</div>
<section class="mt-50 mb-50">
<div class="container">
<div class="row flex-row-reverse">
<div class="col-lg-9">
<div class="shop-product-fillter">
<div class="totall-product">
<p> Nous avons trouvé <strong class="text-brand">${ totalItems }</strong> article<span
v-if="totalItems>1">s</span> !</p>
</div>
<div class="sort-by-product-area">
<div class="sort-by-cover mr-10">
<div class="sort-by-product-wrap">
<div class="sort-by">
<span><i class="fi-rs-apps"></i>Montrer:</span>
</div>
<div class="sort-by-dropdown-wrap">
<span v-show="pageSize!=9999"> ${ pageSize } <i
class="fi-rs-angle-small-down"></i></span>
<span v-show="pageSize==9999"> Tous <i
class="fi-rs-angle-small-down"></i></span>
</div>
</div>
<div class="sort-by-dropdown">
<ul>
<li class="activeFilter"><a :class="{ active: pageSize==9 }" href="#&"
@click="pageSize=9;getData(page,true)">9</a>
</li>
<li class="activeFilter"><a :class="{ active: pageSize==18 }" href="#&"
@click="pageSize=18;getData(page,true)">18</a>
</li>
<li class="activeFilter"><a :class="{ active: pageSize==36 }" href="#&"
@click="pageSize=36;getData(page,true)">36</a>
</li>
<li class="activeFilter"><a :class="{ active: pageSize==9999 }" href="#&"
@click="pageSize=9999;getData(page,true)">Tous</a>
</li>
</ul>
</div>
</div>
<div class="sort-by-cover">
<div class="sort-by-product-wrap">
<div class="sort-by">
<span><i class="fi-rs-apps-sort"></i>Trier par:</span>
</div>
<div class="sort-by-dropdown-wrap">
<span v-show="orderBy==1"> Nom: A à Z <i class="fi-rs-angle-small-down"></i></span>
<span v-show="orderBy==2"> Nom: Z à A <i class="fi-rs-angle-small-down"></i></span>
<span v-show="orderBy==3"> Prix: croissant <i
class="fi-rs-angle-small-down"></i></span>
<span v-show="orderBy==4"> Prix: décroissant <i
class="fi-rs-angle-small-down"></i></span>
<span v-show="orderBy==5"> Date ajout: croissant<i
class="fi-rs-angle-small-down"></i></span>
<span v-show="orderBy==6"> Date ajout: décroissant<i
class="fi-rs-angle-small-down"></i></span>
</div>
</div>
<div class="sort-by-dropdown">
<ul>
<li class="activeFilter"><a :class="{ active: orderBy==1 }" href="#&"
@click="orderBy=1;getData(page,true)">Nom: A à
Z</a></li>
<li class="activeFilter"><a :class="{ active: orderBy==2 }" href="#&"
@click="orderBy=2;getData(page,true)">Nom: Z à
A</a></li>
<li class="activeFilter"><a :class="{ active: orderBy==3 }" href="#&"
@click="orderBy=3;getData(page,true)">Prix:
croissant</a></li>
<li class="activeFilter"><a :class="{ active: orderBy==4 }" href="#&"
@click="orderBy=4;getData(page,true)">Prix:
décroissant</a></li>
<li class="activeFilter">
<a :class="{ active: orderBy==5 }" href="#&"
@click="orderBy=5;getData(page,true)">Date ajout: croissant</a>
</li>
<li class="activeFilter">
<a :class="{ active: orderBy==6 }" href="#&"
@click="orderBy=6;getData(page,true)">Date ajout: décroissant</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Produits -->
<div class="row product-grid-3">
<div class="col-lg-4 col-md-4 col-12 col-sm-6 row-product" v-for="entry in products">
<div class="product-cart-wrap mb-30 col-product">
<div class="product-img-action-wrap" @click="openProduct(entry.idProduit,entry.name,entry.id)">
<div class="product-img product-img-zoom">
<a href="#&">
<!--<img class="default-img" src="../front/assets/imgs/shop/product-2-1.jpg" alt="Sunshine Elegance">-->
<img class="default-img product-img"
:src="base_url+'/images/300-400/'+entry.image" :alt="entry.name">
<!--<img class="hover-img" src="../front/assets/imgs/shop/product-2-2.jpg" alt="Sunshine Elegance">-->
</a>
</div>
<!--<div class="product-action-1">
<a aria-label="Quick view" class="action-btn hover-up" data-bs-toggle="modal" data-bs-target="#quickViewModal">
<i class="fi-rs-search"></i>
</a>
<a aria-label="Add To Wishlist" class="action-btn hover-up" href="shop-wishlist.html"><i class="fi-rs-heart"></i></a>
<a aria-label="Compare" class="action-btn hover-up" href="shop-compare.html"><i class="fi-rs-shuffle"></i></a>
</div>-->
<div class="product-badges product-badges-position product-badges-mrg"
v-if="(entry.promo && entry.promo.isValid) || !entry.stock || entry.isNew">
<span v-if="!entry.stock" class="hot mr-1"
style="margin-right: 2px;font-size: 10px;">Rupture de stock</span>
<span v-if="entry.isNew" class="new mr-1"
style="margin-right: 2px;font-size: 10px;">Nouveau</span>
<span class="best"
v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='amount'"
style="font-size: 10px;">-${ entry.promo.discountValue.toFixed(3) } <sup
class="currency-style">TND</sup></span>
<span class="best"
v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='percent'"
style="font-size: 10px;">-${ entry.promo.discountValue } %</span>
</div>
</div>
<div class="product-content-wrap">
<h2 @click="openProduct(entry.idProduit,entry.name,entry.id)">
<div class="menu-item">${ entry.name }</div>
</h2>
<!--<div class="rating-result" title="90%">
<span>
<span>90%</span>
</span>
</div>-->
<div class="product-price">
<span v-if="!entry.promo || (entry.promo && !entry.promo.isValid)">${ entry.priceTTC.toFixed(3) } <sup
class="currency-style">TND</sup></span>
<span v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='amount'">${ (entry.priceTTC-entry.promo.discountValue).toFixed(3) } <sup
class="currency-style">TND</sup></span>
<span v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='percent'">${ (entry.priceTTC-(entry.priceTTC*entry.promo.discountValue/100)).toFixed(3) } <sup
class="currency-style">TND</sup></span>
<span class="old-price"
v-if="entry.promo && entry.promo.isValid">${ entry.priceTTC.toFixed(3) } <sup
class="currency-style">TND</sup></span>
</div>
<div class="product-action-1 show" @click="getProduit(entry.idProduit,entry.id)">
<button aria-label="Acheter maintenant" class="action-btn hover-up"><i
class="fi-rs-shopping-bag-add"></i></button>
</div>
</div>
</div>
</div>
</div>
<!--pagination-->
<div class="pagination-area mt-15 mb-sm-5 mb-lg-0" v-show="pages.length>1">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-start">
<!--li class="page-item active"><a class="page-link" href="#">01</a></li>-->
<li class="page-item" v-show="page>1" @click="getData(page-1)"><a class="page-link"
href="#&"><i
class="fi-rs-angle-double-small-left"></i></a></li>
<li v-for="entry in pages" class="page-item" @click="getData(entry)"
:class="{ active: entry==page }"><a class="page-link" href="#&">${ entry }</a>
</li>
<li class="page-item" v-show="page<pages[pages.length-1]" @click="getData(page+1)">
<a class="page-link" href="#&"><i
class="fi-rs-angle-double-small-right"></i></a></li>
</ul>
</nav>
</div>
</div>
<div class="col-lg-3 primary-sidebar sticky-sidebar">
<!-- Fillter By Price -->
<div class="sidebar-widget price_range range mb-30">
<div class="widget-header position-relative mb-20 pb-10">
<h5 class="widget-title mb-10">Filter par prix</h5>
<div class="bt-1 border-color-1"></div>
</div>
<div class="price-filter">
<div class="price-filter-inner">
<div id="slider-range"></div>
<div class="price_slider_amount">
<div class="label-input">
<span>Intervalle:</span><input type="text" id="amount" name="price"
placeholder="Add Your Price"/>
</div>
</div>
</div>
</div>
<button class="btn btn-sm btn-default mt-10" :disabled="disabled"
@click="getData(page,true)"><i
class="fi-rs-filter mr-5"></i> Filtrer
</button>
<div class="list-group" v-if="totalItems">
<div class="list-group-item mb-10 mt-10">
<label class="fw-900">Tailles</label>
<div class="custome-checkbox">
<div class="row">
<div v-for="entry in taillesFilter" class="col-4"
style="white-space: nowrap">
<input class="form-check-input" type="checkbox" name="checkbox"
:id="'exampleCheckbox'+entry.name" v-model="entry.selected"
@change="getData(page,true)">
<label class="form-check-label"
:for="'exampleCheckbox'+entry.name"><span>${ entry.name }</span></label>
<br>
</div>
</div>
</div>
<label class="fw-900 mt-15">Couleurs</label>
<div class="attr-detail attr-color mb-15">
<ul class="list-filter color-filter multi">
<li :class="entry.selected ? 'active' : ''" v-for="entry in couleursFilter"
@click="entry.selected = !entry.selected,getData(page,true)">
<a href="#" :title="entry.name">
<span :style="{ 'background-color': entry.code ? entry.code :'#fff','border': '1px solid #ddd' }"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Product sidebar Widget -->
{# <div class="sidebar-widget product-sidebar mb-30 p-30 bg-grey border-radius-10">
<div class="widget-header position-relative mb-20 pb-10">
<h5 class="widget-title mb-10">New products</h5>
<div class="bt-1 border-color-1"></div>
</div>
<div class="single-post clearfix">
<div class="image">
<img src="{{ asset('/front/assets/imgs/shop/thumbnail-3.jpg') }}" alt="#">
</div>
<div class="content pt-10">
<h5><a href="shop-product-detail.html">Chen Cardigan</a></h5>
<p class="price mb-0 mt-5">$99.50</p>
<div class="product-rate">
<div class="product-rating" style="width:90%"></div>
</div>
</div>
</div>
<div class="single-post clearfix">
<div class="image">
<img src="{{ asset('/front/assets/imgs/shop/thumbnail-4.jpg') }}" alt="#">
</div>
<div class="content pt-10">
<h6><a href="shop-product-detail.html">Chen Sweater</a></h6>
<p class="price mb-0 mt-5">$89.50</p>
<div class="product-rate">
<div class="product-rating" style="width:80%"></div>
</div>
</div>
</div>
<div class="single-post clearfix">
<div class="image">
<img src="{{ asset('/front/assets/imgs/shop/thumbnail-5.jpg') }}" alt="#">
</div>
<div class="content pt-10">
<h6><a href="shop-product-detail.html">Colorful Jacket</a></h6>
<p class="price mb-0 mt-5">$25</p>
<div class="product-rate">
<div class="product-rating" style="width:60%"></div>
</div>
</div>
</div>
</div>
<div class="banner-img wow fadeIn mb-45 animated d-lg-block d-none">
<img src="{{ asset('/front/assets/imgs/banner/banner-11.jpg') }}" alt="Sunshine Elegance">
<div class="banner-text">
<span>Women Zone</span>
<h4>Save 17% on <br>Office Dress</h4>
<a href="shop-grid-right.html">Shop Now <i class="fi-rs-arrow-right"></i></a>
</div>
</div> #}
</div>
</div>
</div>
</section>
</main>
{# {% endverbatim %} #}
{% endblock %}
{% block footer %}
{{ parent() }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
$("#search").val(SEARCH);
$("#search-mobile").val(SEARCH);
$("#categories").val(ID_CATEGORY).trigger('change');
// Reinialiser les filtres de recherche
window.onbeforeunload = function () {
//unchecked your check box here.
$("input[type='checkbox']").prop('checked', false);
//app.getData(app.page);
};
</script>
<script src="{{ asset('front/assets/scripts/category/productSearchDec.js') }}"></script>
{% endblock %}