templates/front/dec/promoProductsDec.html.twig line 12

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.         // Filtres des tailles et couleurs
  12.         var taillesFilter = {{ Globals.getTailles(0,false,true)|json_encode|raw }};
  13.         var couleursFilter = {{ Globals.getCouleurs(0,false,true)|json_encode|raw }};
  14.     </script>
  15. {% endblock %}
  17. {% block body %}
  19.     <main class="main">
  20.         <div class="page-header breadcrumb-wrap">
  21.             <div class="container">
  22.                 <div class="breadcrumb">
  23.                     <a href="{{ path('home') }}" rel="nofollow">Acceuil</a>
  24.                     <span></span> Promotion
  25.                 </div>
  26.             </div>
  27.         </div>
  28.         {% verbatim %}
  29.         <section class="mt-50 mb-50" id="app" v-cloak>
  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> nouveaux article<span v-if="totalItems>1">s</span> !</p>
  36.                             </div>
  37.                             <div class="sort-by-product-area">
  38.                                 <div class="sort-by-cover mr-10">
  39.                                     <div class="sort-by-product-wrap">
  40.                                         <div class="sort-by">
  41.                                             <span><i class="fi-rs-apps"></i>Montrer:</span>
  42.                                         </div>
  43.                                          <div class="sort-by-dropdown-wrap">
  44.                                             <span v-show="pageSize!=9999"> {{ pageSize }} <i class="fi-rs-angle-small-down"></i></span>
  45.                                             <span v-show="pageSize==9999"> Tous <i class="fi-rs-angle-small-down"></i></span>
  46.                                         </div>
  47.                                     </div>
  48.                                     <div class="sort-by-dropdown">
  49.                                         <ul>
  50.                                             <li class="activeFilter"><a :class="{ active: pageSize==9 }" href="#&" @click="pageSize=9;getData(page,true)">9</a></li>
  51.                                             <li class="activeFilter"><a :class="{ active: pageSize==18 }" href="#&" @click="pageSize=18;getData(page,true)">18</a></li>
  52.                                             <li class="activeFilter"><a :class="{ active: pageSize==36 }" href="#&" @click="pageSize=36;getData(page,true)">36</a></li>
  53.                                             <li class="activeFilter"><a :class="{ active: pageSize==9999 }" href="#&" @click="pageSize=9999;getData(page,true)">Tous</a></li>
  54.                                         </ul>
  55.                                     </div>
  56.                                 </div>
  57.                                 <div class="sort-by-cover">
  58.                                     <div class="sort-by-product-wrap">
  59.                                         <div class="sort-by">
  60.                                             <span><i class="fi-rs-apps-sort"></i>Trier par:</span>
  61.                                         </div>
  62.                                         <div class="sort-by-dropdown-wrap">
  63.                                             <span v-show="orderBy==1"> Nom: A à Z <i class="fi-rs-angle-small-down"></i></span>
  64.                                             <span v-show="orderBy==2"> Nom: Z à A <i class="fi-rs-angle-small-down"></i></span>
  65.                                             <span v-show="orderBy==3"> Prix: croissant <i class="fi-rs-angle-small-down"></i></span>
  66.                                             <span v-show="orderBy==4"> Prix: décroissant <i class="fi-rs-angle-small-down"></i></span>
  67.                                             <span v-show="orderBy==5"> Date ajout: croissant<i class="fi-rs-angle-small-down"></i></span>
  68.                                             <span v-show="orderBy==6"> Date ajout: décroissant<i class="fi-rs-angle-small-down"></i></span>
  69.                                         </div>
  70.                                     </div>
  71.                                     <div class="sort-by-dropdown">
  72.                                         <ul>
  73.                                             <li class="activeFilter"><a :class="{ active: orderBy==1 }" href="#&" @click="orderBy=1;getData(page,true)">Nom: A à Z</a></li>
  74.                                             <li class="activeFilter"><a :class="{ active: orderBy==2 }" href="#&" @click="orderBy=2;getData(page,true)">Nom: Z à A</a></li>
  75.                                             <li class="activeFilter"><a :class="{ active: orderBy==3 }" href="#&" @click="orderBy=3;getData(page,true)">Prix: croissant</a></li>
  76.                                             <li class="activeFilter"><a :class="{ active: orderBy==4 }" href="#&" @click="orderBy=4;getData(page,true)">Prix: décroissant</a></li>
  77.                                             <li class="activeFilter">
  78.                                                 <a :class="{ active: orderBy==5 }" href="#&" @click="orderBy=5;getData(page,true)">Date ajout: croissant</a>
  79.                                             </li>
  80.                                             <li class="activeFilter">
  81.                                                 <a :class="{ active: orderBy==6 }" href="#&" @click="orderBy=6;getData(page,true)">Date ajout: décroissant</a>
  82.                                             </li>
  84.                                         </ul>
  85.                                     </div>
  86.                                 </div>
  87.                             </div>
  88.                         </div>
  89.                         <!-- Produits -->
  90.                         <div class="row product-grid-3">
  91.                             <div class="col-lg-4 col-md-4 col-12 col-sm-6 row-product" v-for="entry in products">
  92.                                 <div class="product-cart-wrap mb-30 col-product">
  93.                                     <div class="product-img-action-wrap" @click="openProduct(entry.idProduit,entry.name,entry.id)">
  94.                                         <div class="product-img product-img-zoom">
  95.                                             <a href="#&">
  96.                                                 <!--<img class="default-img" src="../front/assets/imgs/shop/product-2-1.jpg" alt="Sunshine Elegance">-->
  97.                                                 <img class="default-img product-img" :src="'./images/300-400/'+entry.image" :alt="entry.name">
  98.                                                 <!--<img class="hover-img" src="../front/assets/imgs/shop/product-2-2.jpg" alt="Sunshine Elegance">-->
  99.                                             </a>
  100.                                         </div>
  101.                                         <!--<div class="product-action-1">
  102.                                             <a aria-label="Quick view" class="action-btn hover-up" data-bs-toggle="modal" data-bs-target="#quickViewModal">
  103.                                                 <i class="fi-rs-search"></i>
  104.                                             </a>
  105.                                             <a aria-label="Add To Wishlist" class="action-btn hover-up" href="shop-wishlist.html"><i class="fi-rs-heart"></i></a>
  106.                                             <a aria-label="Compare" class="action-btn hover-up" href="shop-compare.html"><i class="fi-rs-shuffle"></i></a>
  107.                                         </div>-->
  108.                                         <div class="product-badges product-badges-position product-badges-mrg" v-if="(entry.promo && entry.promo.isValid) || !entry.stock || entry.isNew">
  109.                                             <span v-if="!entry.stock" class="hot mr-1" style="margin-right: 2px;font-size: 10px;">Rupture de stock</span>
  110.                                             <span v-if="entry.isNew" class="new mr-1" style="margin-right: 2px;font-size: 10px;">Nouveau</span>
  111.                                             <span class="best" v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='amount'" style="font-size: 10px;">-{{ entry.promo.discountValue.toFixed(3) }} <sup
  112.                                                         class="currency-style">TND</sup></span>
  113.                                             <span class="best" v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='percent'" style="font-size: 10px;">-{{ entry.promo.discountValue }} %</span>
  114.                                         </div>
  115.                                     </div>
  116.                                     <div class="product-content-wrap">
  118.                                         <h2 @click="openProduct(entry.idProduit,entry.name,entry.id)"><div class="menu-item">{{ entry.name }}</div></h2>
  119.                                         <!--<div class="rating-result" title="90%">
  120.                                             <span>
  121.                                                 <span>90%</span>
  122.                                             </span>
  123.                                         </div>-->
  124.                                         <div class="product-price">
  125.                                             <span v-if="!entry.promo || (entry.promo && !entry.promo.isValid)">{{ entry.priceTTC.toFixed(3) }} <sup class="currency-style">TND</sup></span>
  126.                                             <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>
  127.                                             <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>
  128.                                             <span class="old-price" v-if="entry.promo">{{ entry.priceTTC.toFixed(3) }} <sup class="currency-style">TND</sup></span>
  129.                                         </div>
  130.                                         <div class="product-action-1 show" @click="getProduit(entry.idProduit,entry.id)">
  131.                                             <button aria-label="Acheter maintenant" class="action-btn hover-up"><i
  132.                                                         class="fi-rs-shopping-bag-add"></i></button>
  133.                                         </div>
  134.                                     </div>
  135.                                 </div>
  136.                             </div>
  139.                         </div>
  140.                         <!--pagination-->
  141.                         <div class="pagination-area mt-15 mb-sm-5 mb-lg-0" v-show="pages.length>1">
  142.                             <nav aria-label="Page navigation example">
  143.                                 <ul class="pagination justify-content-start">
  144.                                     <!--li class="page-item active"><a class="page-link" href="#">01</a></li>-->
  145.                                     <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>
  146.                                     <li v-for="entry in pages" class="page-item" @click="getData(entry)" :class="{ active: entry==page }"><a class="page-link" href="#&">{{ entry }}</a></li>
  147.                                     <!--<li class="page-item"><a class="page-link" href="#">03</a></li>
  148.                                     <li class="page-item"><a class="page-link dot" href="#">...</a></li>
  149.                                     <li class="page-item"><a class="page-link" href="#">16</a></li>-->
  150.                                     <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>
  151.                                 </ul>
  152.                             </nav>
  153.                         </div>
  154.                     </div>
  155.                     <div class="col-lg-3 primary-sidebar sticky-sidebar">
  156.                         <!--<div class="widget-category mb-30">
  157.                             <h5 class="section-title style-1 mb-30 wow fadeIn animated">Category</h5>
  158.                             <ul class="categories">
  159.                                 <li><a href="shop-grid-right.html">Shoes & Bags</a></li>
  160.                                 <li><a href="shop-grid-right.html">Blouses & Shirts</a></li>
  161.                                 <li><a href="shop-grid-right.html">Dresses</a></li>
  162.                                 <li><a href="shop-grid-right.html">Swimwear</a></li>
  163.                                 <li><a href="shop-grid-right.html">Beauty</a></li>
  164.                                 <li><a href="shop-grid-right.html">Jewelry & Watch</a></li>
  165.                                 <li><a href="shop-grid-right.html">Accessories</a></li>
  166.                             </ul>
  167.                         </div>-->
  168.                         <!-- Fillter By Price -->
  169.                         <div class="sidebar-widget price_range range mb-30">
  170.                             <div class="widget-header position-relative mb-20 pb-10">
  171.                                 <h5 class="widget-title mb-10">Filter par prix</h5>
  172.                                 <div class="bt-1 border-color-1"></div>
  173.                             </div>
  174.                             <div class="price-filter">
  175.                                 <div class="price-filter-inner">
  176.                                     <div id="slider-range"></div>
  177.                                     <div class="price_slider_amount">
  178.                                         <div class="label-input">
  179.                                             <span>Intervalle:</span><input type="text" id="amount" name="price"
  180.                                                                            placeholder="Add Your Price"/>
  181.                                         </div>
  182.                                     </div>
  183.                                 </div>
  184.                             </div>
  185.                             <button class="btn btn-sm btn-default mt-10" :disabled="disabled" @click="getData(page,true)"><i
  186.                                         class="fi-rs-filter mr-5"></i> Filtrer
  187.                             </button>
  188.                             <div class="list-group" v-if="totalItems">
  189.                                 <div class="list-group-item mb-10 mt-10">
  190.                                     <label class="fw-900">Tailles</label>
  191.                                     <div class="custome-checkbox">
  192.                                         <div class="row">
  193.                                             <div v-for="entry in taillesFilter" class="col-4" style="white-space: nowrap">
  194.                                                 <input class="form-check-input" type="checkbox" name="checkbox"
  195.                                                        :id="'exampleCheckbox'+entry.name" v-model="entry.selected"
  196.                                                        @change="getData(page,true)">
  197.                                                 <label class="form-check-label" :for="'exampleCheckbox'+entry.name"><span>{{ entry.name }}</span></label>
  198.                                                 <br>
  199.                                             </div>
  200.                                         </div>
  202.                                     </div>
  203.                                     <label class="fw-900 mt-15">Couleurs</label>
  204.                                     <div class="attr-detail attr-color mb-15">
  205.                                         <ul class="list-filter color-filter multi">
  206.                                             <li :class="entry.selected ? 'active' : ''" v-for="entry in couleursFilter" @click="entry.selected = !entry.selected,getData(page,true)">
  207.                                                 <a href="#" :title="entry.name">
  208.                                                     <span :style="{ 'background-color': entry.code ? entry.code :'#fff','border': '1px solid #ddd' }"></span>
  210.                                                 </a>
  211.                                             </li>
  212.                                         </ul>
  213.                                     </div>
  214.                                 </div>
  215.                             </div>
  217.                         </div>
  219.                     </div>
  220.                 </div>
  221.             </div>
  222.         </section>
  223.         {% endverbatim %}
  224.     </main>
  226. {% endblock %}
  228. {% block footer %}
  229.     {{ parent() }}
  230. {% endblock %}
  232. {% block javascripts %}
  233.     {{ parent() }}
  234.     <script>
  235.         // Reinialiser les filtres de recherche
  236.         window.onbeforeunload = function () {
  237.             //unchecked your check box here.
  238.             $("input[type='checkbox']").prop('checked', false);
  239.             //app.getData(app.page);
  240.         };
  241.     </script>
  242.     <script src="{{ asset('front/assets/scripts/category/productsPromoDec.js') }}"></script>
  244. {% endblock %}