templates/front/dec/searchProductsDec.html.twig line 14

Open in your IDE?
  1. {% extends 'front/base.html.twig' %}
  2. {% block title %}SUNSHINE ELEGANCE :: PROMOTIONS {% endblock %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     <style>
  6.         .product-cart-wrap .product-img-action-wrap {
  7.             max-height: none;
  8.         }
  9.     </style>
  10.     <script>
  11.         var ID_CATEGORY = '{{ idCategory }}';
  12.         var SEARCH = '{{ search }}';
  13.         // Filtres des tailles et couleurs
  14.         var taillesFilter = {{ Globals.getTailles(categories,false,false,search)|json_encode|raw }};
  15.         var couleursFilter = {{ Globals.getCouleurs(categories,false,false,search)|json_encode|raw }};
  16.     </script>
  17. {% endblock %}
  18. {% block body %}
  19.     {# {% verbatim %} #}
  20.     <main class="main" id="app" v-cloak>
  21.         <div class="page-header breadcrumb-wrap">
  22.             <div class="container">
  23.                 <div class="breadcrumb">
  24.                     <a href="{{ path('home') }}" rel="nofollow">Acceuil</a>
  25.                     <span></span> Recherche
  26.                 </div>
  27.             </div>
  28.         </div>
  29.         <section class="mt-50 mb-50">
  30.             <div class="container">
  31.                 <div class="row flex-row-reverse">
  32.                     <div class="col-lg-9">
  33.                         <div class="shop-product-fillter">
  34.                             <div class="totall-product">
  35.                                 <p> Nous avons trouvé <strong class="text-brand">${ totalItems }</strong> article<span
  36.                                             v-if="totalItems>1">s</span> !</p>
  37.                             </div>
  38.                             <div class="sort-by-product-area">
  39.                                 <div class="sort-by-cover mr-10">
  40.                                     <div class="sort-by-product-wrap">
  41.                                         <div class="sort-by">
  42.                                             <span><i class="fi-rs-apps"></i>Montrer:</span>
  43.                                         </div>
  44.                                         <div class="sort-by-dropdown-wrap">
  45.                                             <span v-show="pageSize!=9999"> ${ pageSize } <i
  46.                                                         class="fi-rs-angle-small-down"></i></span>
  47.                                             <span v-show="pageSize==9999"> Tous <i
  48.                                                         class="fi-rs-angle-small-down"></i></span>
  49.                                         </div>
  50.                                     </div>
  51.                                     <div class="sort-by-dropdown">
  52.                                         <ul>
  53.                                             <li class="activeFilter"><a :class="{ active: pageSize==9 }" href="#&"
  54.                                                                         @click="pageSize=9;getData(page,true)">9</a>
  55.                                             </li>
  56.                                             <li class="activeFilter"><a :class="{ active: pageSize==18 }" href="#&"
  57.                                                                         @click="pageSize=18;getData(page,true)">18</a>
  58.                                             </li>
  59.                                             <li class="activeFilter"><a :class="{ active: pageSize==36 }" href="#&"
  60.                                                                         @click="pageSize=36;getData(page,true)">36</a>
  61.                                             </li>
  62.                                             <li class="activeFilter"><a :class="{ active: pageSize==9999 }" href="#&"
  63.                                                                         @click="pageSize=9999;getData(page,true)">Tous</a>
  64.                                             </li>
  65.                                         </ul>
  66.                                     </div>
  67.                                 </div>
  68.                                 <div class="sort-by-cover">
  69.                                     <div class="sort-by-product-wrap">
  70.                                         <div class="sort-by">
  71.                                             <span><i class="fi-rs-apps-sort"></i>Trier par:</span>
  72.                                         </div>
  73.                                         <div class="sort-by-dropdown-wrap">
  74.                                             <span v-show="orderBy==1"> Nom: A à Z <i class="fi-rs-angle-small-down"></i></span>
  75.                                             <span v-show="orderBy==2"> Nom: Z à A <i class="fi-rs-angle-small-down"></i></span>
  76.                                             <span v-show="orderBy==3"> Prix: croissant <i
  77.                                                         class="fi-rs-angle-small-down"></i></span>
  78.                                             <span v-show="orderBy==4"> Prix: décroissant <i
  79.                                                         class="fi-rs-angle-small-down"></i></span>
  80.                                             <span v-show="orderBy==5"> Date ajout: croissant<i
  81.                                                         class="fi-rs-angle-small-down"></i></span>
  82.                                             <span v-show="orderBy==6"> Date ajout: décroissant<i
  83.                                                         class="fi-rs-angle-small-down"></i></span>
  84.                                         </div>
  85.                                     </div>
  86.                                     <div class="sort-by-dropdown">
  87.                                         <ul>
  88.                                             <li class="activeFilter"><a :class="{ active: orderBy==1 }" href="#&"
  89.                                                                         @click="orderBy=1;getData(page,true)">Nom: A à
  90.                                                     Z</a></li>
  91.                                             <li class="activeFilter"><a :class="{ active: orderBy==2 }" href="#&"
  92.                                                                         @click="orderBy=2;getData(page,true)">Nom: Z à
  93.                                                     A</a></li>
  94.                                             <li class="activeFilter"><a :class="{ active: orderBy==3 }" href="#&"
  95.                                                                         @click="orderBy=3;getData(page,true)">Prix:
  96.                                                     croissant</a></li>
  97.                                             <li class="activeFilter"><a :class="{ active: orderBy==4 }" href="#&"
  98.                                                                         @click="orderBy=4;getData(page,true)">Prix:
  99.                                                     décroissant</a></li>
  100.                                             <li class="activeFilter">
  101.                                                 <a :class="{ active: orderBy==5 }" href="#&"
  102.                                                    @click="orderBy=5;getData(page,true)">Date ajout: croissant</a>
  103.                                             </li>
  104.                                             <li class="activeFilter">
  105.                                                 <a :class="{ active: orderBy==6 }" href="#&"
  106.                                                    @click="orderBy=6;getData(page,true)">Date ajout: décroissant</a>
  107.                                             </li>
  108.                                         </ul>
  109.                                     </div>
  110.                                 </div>
  111.                             </div>
  112.                         </div>
  113.                         <!-- Produits -->
  114.                         <div class="row product-grid-3">
  115.                             <div class="col-lg-4 col-md-4 col-12 col-sm-6 row-product" v-for="entry in products">
  116.                                 <div class="product-cart-wrap mb-30 col-product">
  117.                                     <div class="product-img-action-wrap" @click="openProduct(entry.idProduit,entry.name,entry.id)">
  118.                                         <div class="product-img product-img-zoom">
  119.                                             <a href="#&">
  120.                                                 <!--<img class="default-img" src="../front/assets/imgs/shop/product-2-1.jpg" alt="Sunshine Elegance">-->
  121.                                                 <img class="default-img product-img"
  122.                                                      :src="base_url+'/images/300-400/'+entry.image" :alt="entry.name">
  123.                                                 <!--<img class="hover-img" src="../front/assets/imgs/shop/product-2-2.jpg" alt="Sunshine Elegance">-->
  124.                                             </a>
  125.                                         </div>
  126.                                         <!--<div class="product-action-1">
  127.                                             <a aria-label="Quick view" class="action-btn hover-up" data-bs-toggle="modal" data-bs-target="#quickViewModal">
  128.                                                 <i class="fi-rs-search"></i>
  129.                                             </a>
  130.                                             <a aria-label="Add To Wishlist" class="action-btn hover-up" href="shop-wishlist.html"><i class="fi-rs-heart"></i></a>
  131.                                             <a aria-label="Compare" class="action-btn hover-up" href="shop-compare.html"><i class="fi-rs-shuffle"></i></a>
  132.                                         </div>-->
  133.                                         <div class="product-badges product-badges-position product-badges-mrg"
  134.                                              v-if="(entry.promo && entry.promo.isValid) || !entry.stock || entry.isNew">
  135.                                             <span v-if="!entry.stock" class="hot mr-1"
  136.                                                   style="margin-right: 2px;font-size: 10px;">Rupture de stock</span>
  137.                                             <span v-if="entry.isNew" class="new mr-1"
  138.                                                   style="margin-right: 2px;font-size: 10px;">Nouveau</span>
  139.                                             <span class="best"
  140.                                                   v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='amount'"
  141.                                                   style="font-size: 10px;">-${ entry.promo.discountValue.toFixed(3) } <sup
  142.                                                         class="currency-style">TND</sup></span>
  143.                                             <span class="best"
  144.                                                   v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='percent'"
  145.                                                   style="font-size: 10px;">-${ entry.promo.discountValue } %</span>
  146.                                         </div>
  147.                                     </div>
  148.                                     <div class="product-content-wrap">
  149.                                         <h2 @click="openProduct(entry.idProduit,entry.name,entry.id)">
  150.                                             <div class="menu-item">${ entry.name }</div>
  151.                                         </h2>
  152.                                         <!--<div class="rating-result" title="90%">
  153.                                             <span>
  154.                                                 <span>90%</span>
  155.                                             </span>
  156.                                         </div>-->
  157.                                         <div class="product-price">
  158.                                             <span v-if="!entry.promo || (entry.promo && !entry.promo.isValid)">${ entry.priceTTC.toFixed(3) } <sup
  159.                                                         class="currency-style">TND</sup></span>
  160.                                             <span v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='amount'">${ (entry.priceTTC-entry.promo.discountValue).toFixed(3) } <sup
  161.                                                         class="currency-style">TND</sup></span>
  162.                                             <span v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='percent'">${ (entry.priceTTC-(entry.priceTTC*entry.promo.discountValue/100)).toFixed(3) } <sup
  163.                                                         class="currency-style">TND</sup></span>
  164.                                             <span class="old-price"
  165.                                                   v-if="entry.promo && entry.promo.isValid">${ entry.priceTTC.toFixed(3) } <sup
  166.                                                         class="currency-style">TND</sup></span>
  167.                                         </div>
  168.                                         <div class="product-action-1 show" @click="getProduit(entry.idProduit,entry.id)">
  169.                                             <button aria-label="Acheter maintenant" class="action-btn hover-up"><i
  170.                                                         class="fi-rs-shopping-bag-add"></i></button>
  171.                                         </div>
  172.                                     </div>
  173.                                 </div>
  174.                             </div>
  175.                         </div>
  176.                         <!--pagination-->
  177.                         <div class="pagination-area mt-15 mb-sm-5 mb-lg-0" v-show="pages.length>1">
  178.                             <nav aria-label="Page navigation example">
  179.                                 <ul class="pagination justify-content-start">
  180.                                     <!--li class="page-item active"><a class="page-link" href="#">01</a></li>-->
  181.                                     <li class="page-item" v-show="page>1" @click="getData(page-1)"><a class="page-link"
  182.                                                                                                       href="#&"><i
  183.                                                     class="fi-rs-angle-double-small-left"></i></a></li>
  184.                                     <li v-for="entry in pages" class="page-item" @click="getData(entry)"
  185.                                         :class="{ active: entry==page }"><a class="page-link" href="#&">${ entry }</a>
  186.                                     </li>
  187.                                     <li class="page-item" v-show="page<pages[pages.length-1]" @click="getData(page+1)">
  188.                                         <a class="page-link" href="#&"><i
  189.                                                     class="fi-rs-angle-double-small-right"></i></a></li>
  190.                                 </ul>
  191.                             </nav>
  192.                         </div>
  193.                     </div>
  194.                     <div class="col-lg-3 primary-sidebar sticky-sidebar">
  195.                         <!-- Fillter By Price -->
  196.                         <div class="sidebar-widget price_range range mb-30">
  197.                             <div class="widget-header position-relative mb-20 pb-10">
  198.                                 <h5 class="widget-title mb-10">Filter par prix</h5>
  199.                                 <div class="bt-1 border-color-1"></div>
  200.                             </div>
  201.                             <div class="price-filter">
  202.                                 <div class="price-filter-inner">
  203.                                     <div id="slider-range"></div>
  204.                                     <div class="price_slider_amount">
  205.                                         <div class="label-input">
  206.                                             <span>Intervalle:</span><input type="text" id="amount" name="price"
  207.                                                                            placeholder="Add Your Price"/>
  208.                                         </div>
  209.                                     </div>
  210.                                 </div>
  211.                             </div>
  212.                             <button class="btn btn-sm btn-default mt-10" :disabled="disabled"
  213.                                     @click="getData(page,true)"><i
  214.                                         class="fi-rs-filter mr-5"></i> Filtrer
  215.                             </button>
  216.                             <div class="list-group" v-if="totalItems">
  217.                                 <div class="list-group-item mb-10 mt-10">
  218.                                     <label class="fw-900">Tailles</label>
  219.                                     <div class="custome-checkbox">
  220.                                         <div class="row">
  221.                                             <div v-for="entry in taillesFilter" class="col-4"
  222.                                                  style="white-space: nowrap">
  223.                                                 <input class="form-check-input" type="checkbox" name="checkbox"
  224.                                                        :id="'exampleCheckbox'+entry.name" v-model="entry.selected"
  225.                                                        @change="getData(page,true)">
  226.                                                 <label class="form-check-label"
  227.                                                        :for="'exampleCheckbox'+entry.name"><span>${ entry.name }</span></label>
  228.                                                 <br>
  229.                                             </div>
  230.                                         </div>
  231.                                     </div>
  232.                                     <label class="fw-900 mt-15">Couleurs</label>
  233.                                     <div class="attr-detail attr-color mb-15">
  234.                                         <ul class="list-filter color-filter multi">
  235.                                             <li :class="entry.selected ? 'active' : ''" v-for="entry in couleursFilter"
  236.                                                 @click="entry.selected = !entry.selected,getData(page,true)">
  237.                                                 <a href="#" :title="entry.name">
  238.                                                     <span :style="{ 'background-color': entry.code ? entry.code :'#fff','border': '1px solid #ddd' }"></span>
  239.                                                 </a>
  240.                                             </li>
  241.                                         </ul>
  242.                                     </div>
  243.                                 </div>
  244.                             </div>
  245.                         </div>
  246.                         <!-- Product sidebar Widget -->
  247.                         {# <div class="sidebar-widget product-sidebar  mb-30 p-30 bg-grey border-radius-10">
  248.                             <div class="widget-header position-relative mb-20 pb-10">
  249.                                 <h5 class="widget-title mb-10">New products</h5>
  250.                                 <div class="bt-1 border-color-1"></div>
  251.                             </div>
  252.                             <div class="single-post clearfix">
  253.                                 <div class="image">
  254.                                     <img src="{{ asset('/front/assets/imgs/shop/thumbnail-3.jpg') }}" alt="#">
  255.                                 </div>
  256.                                 <div class="content pt-10">
  257.                                     <h5><a href="shop-product-detail.html">Chen Cardigan</a></h5>
  258.                                     <p class="price mb-0 mt-5">$99.50</p>
  259.                                     <div class="product-rate">
  260.                                         <div class="product-rating" style="width:90%"></div>
  261.                                     </div>
  262.                                 </div>
  263.                             </div>
  264.                             <div class="single-post clearfix">
  265.                                 <div class="image">
  266.                                     <img src="{{ asset('/front/assets/imgs/shop/thumbnail-4.jpg') }}" alt="#">
  267.                                 </div>
  268.                                 <div class="content pt-10">
  269.                                     <h6><a href="shop-product-detail.html">Chen Sweater</a></h6>
  270.                                     <p class="price mb-0 mt-5">$89.50</p>
  271.                                     <div class="product-rate">
  272.                                         <div class="product-rating" style="width:80%"></div>
  273.                                     </div>
  274.                                 </div>
  275.                             </div>
  276.                             <div class="single-post clearfix">
  277.                                 <div class="image">
  278.                                     <img src="{{ asset('/front/assets/imgs/shop/thumbnail-5.jpg') }}" alt="#">
  279.                                 </div>
  280.                                 <div class="content pt-10">
  281.                                     <h6><a href="shop-product-detail.html">Colorful Jacket</a></h6>
  282.                                     <p class="price mb-0 mt-5">$25</p>
  283.                                     <div class="product-rate">
  284.                                         <div class="product-rating" style="width:60%"></div>
  285.                                     </div>
  286.                                 </div>
  287.                             </div>
  288.                         </div>
  289.                         <div class="banner-img wow fadeIn mb-45 animated d-lg-block d-none">
  290.                             <img src="{{ asset('/front/assets/imgs/banner/banner-11.jpg') }}" alt="Sunshine Elegance">
  291.                             <div class="banner-text">
  292.                                 <span>Women Zone</span>
  293.                                 <h4>Save 17% on <br>Office Dress</h4>
  294.                                 <a href="shop-grid-right.html">Shop Now <i class="fi-rs-arrow-right"></i></a>
  295.                             </div>
  296.                         </div> #}
  297.                     </div>
  298.                 </div>
  299.             </div>
  300.         </section>
  301.     </main>
  302.     {# {% endverbatim %} #}
  303. {% endblock %}
  304. {% block footer %}
  305.     {{ parent() }}
  306. {% endblock %}
  307. {% block javascripts %}
  308.     {{ parent() }}
  309.     <script>
  310.         $("#search").val(SEARCH);
  311.         $("#search-mobile").val(SEARCH);
  312.         $("#categories").val(ID_CATEGORY).trigger('change');
  313.         // Reinialiser les filtres de recherche
  314.         window.onbeforeunload = function () {
  315.             //unchecked your check box here.
  316.             $("input[type='checkbox']").prop('checked', false);
  317.             //app.getData(app.page);
  318.         };
  319.     </script>
  320.     <script src="{{ asset('front/assets/scripts/category/productSearchDec.js') }}"></script>
  321. {% endblock %}