templates/front/dec/listProductDec.html.twig line 116

Open in your IDE?
  1. {% extends 'front/base.html.twig' %}
  2. {% block title %}Sunshine Elegance | {{ categorie.getName() }} {% endblock %}
  3. {% block meta %}
  4.     <meta name="keywords" content="Chaussures,Chaussures Femme,Jebba,Robe,Bottine">
  5.     <meta name="description" content="Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
  6.     <meta name="author" content="Sunshine-Elegance">
  7.     <!-- Facebook OG -->
  8.     <meta property="og:image" content="{{ asset('front/assets/imgs/theme/logo3.png') }}">
  9.     <meta property="og:url" content="https://www.sunshineelegance.tn/">
  10.     <meta property="og:type" content="article">
  11.     <meta property="og:title" content="Sunshine Elegance | Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
  12.     <meta property="og:description" content="Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
  13.     <!-- Twitter OG -->
  14.     <meta name="twitter:title" content="Sunshine Elegance | Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
  15.     <meta name="twitter:description" content="Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
  16.     <meta name="twitter:image" content="{{ asset('front/assets/imgs/theme/logo3.png') }}">
  17.     <meta name="twitter:card" content="summary_large_image">
  18. {% endblock %}
  19. {% block stylesheets %}
  20.     {{ parent() }}
  21.     <style>
  22.         
  23.         .product-cart-wrap .product-img-action-wrap {
  24.             max-height: none;
  25.             width: 100%;
  26.             position: relative;
  27.             overflow: hidden;
  28.             
  29.         }
  30.         .product-img-action-wrap .product-img {
  31.             width: 100%;
  32.             height: auto;
  33.             object-fit: cover;
  34.             display: block;
  35.             
  36.         }
  37.         
  38.         
  39.         .product-badges span {
  40.             font-size: 0.75rem;
  41.             padding: 4px 8px;
  42.             border-radius: 4px;
  43.             font-weight: 500;
  44.         }
  45.         
  46.         
  48.         
  49.         @media (max-width: 768px) {
  50.             .order-mobile-first {
  51.               order: -1 !important;
  52.             }
  53.           }
  55.           /*rendre la barre de filtres plus compacte sur mobile*/
  56.           @media (max-width: 768px) {
  57.             .shop-product-fillter {
  58.               flex-direction: column;
  59.               align-items: flex-start;
  60.               gap: 12px;
  61.             }
  62.           
  63.             .sort-by-product-area {
  64.               flex-direction: column;
  65.               width: 100%;
  66.               gap: 10px;
  67.             }
  68.           
  69.             .sort-by-cover {
  70.               width: 100%;
  71.             }
  72.           
  73.             .sort-by-product-wrap {
  74.               display: flex;
  75.               justify-content: space-between;
  76.               align-items: center;
  77.               padding: 6px 12px;
  78.               background-color: #f7f8f9;
  79.               border: 1px solid #cce7d0;
  80.               border-radius: 20px;
  81.             }
  82.           
  83.             .sort-by-dropdown-wrap {
  84.               flex-grow: 1;
  85.               text-align: right;
  86.             }
  87.           
  88.             .sort-by-dropdown {
  89.               position: absolute;
  90.               left: 0;
  91.               top: 100%;
  92.               z-index: 10;
  93.             }
  94.           }
  95.           
  96.           
  97.           
  98.           /*amélioration affichage des cartes produit*/
  99.           @media (max-width: 768px) {
  100.             .row-product {
  101.               width: 50% !important;
  102.             }
  103.           }
  104.           
  105.           @media (max-width: 480px) {
  106.             .row-product {
  107.               width: 100% !important;
  108.             }
  109.           }
  110.           
  112.     </style>
  113.     <script>
  114.         var category_id = JSON.parse("{{ category_id|e('js') }}")
  115.         // Filtres des tailles et couleurs
  116.         var taillesFilter = {{ Globals.getTailles(categories)|json_encode|raw }};
  117.         var couleursFilter = {{ Globals.getCouleurs(categories)|json_encode|raw }};
  119.         
  120.         
  121.     </script>
  122. {% endblock %}
  124. {% block body %}
  125.     {# {% verbatim %} #}
  126.     <main class="main" id="app" v-cloak>
  127.         <div class="page-header breadcrumb-wrap">
  128.             <div class="container">
  129.                 <div class="breadcrumb">
  130.                     <a href="{{ path('home') }}" rel="nofollow">Acceuil</a>
  131.                     {% if categorie.parent.parent is defined and  categorie.parent.parent is not null %}
  132.                     <span></span>
  133.                         <a href="{{ CATEGORY_URL_TYPE == 1 ? path('category_dec', {id: categorie.parent.parent.id , name :categorie.parent.parent.name|slug }) : path('category_new', {id: categorie.parent.parent.id , name :categorie.parent.parent.name|slug }) }}"rel="nofollow">
  134.                             {{ categorie.parent.parent.name }}</a>
  135.                     {% endif %}
  136.                     {% if categorie.parent is not empty and  categorie.parent is not null  %}
  137.                     <span></span>
  138.                         <a href="{{ CATEGORY_URL_TYPE == 1 ? path('category_dec', {id: categorie.parent.id , name :categorie.parent.name|slug }) : path('category_new', {id: categorie.parent.id , name :categorie.parent.name|slug }) }}"rel="nofollow">
  139.                             {{ categorie.parent.name }}</a>
  140.                     {% endif %}
  141.                     <span></span> {{ categorie.getName() }}
  142.                 </div>
  143.             </div>
  144.         </div>
  146.        {# ===== SECTION PRINCIPALE DE LISTE DE PRODUITS ===== #}
  147. <section class="mt-50 mb-50">
  148.     <div class="container">
  149.         <div class="row flex-row-reverse">
  150.             {# ===== COLONNE PRINCIPALE (LISTE DES PRODUITS) ===== #}
  151.             <div class="col-lg-9">
  153.                 {# ===== BARRE DE FILTRAGE (nombre de produits, affichage et tri) ===== #}
  154.                 <div class="shop-product-fillter">
  155.                     {# Affichage du nombre total d'articles trouvés #}
  156.                     <div class="totall-product">
  157.                         <p>Nous avons trouvé <strong class="text-brand">${ totalItems }</strong> article<span v-if="totalItems>1">s</span> !</p>
  158.                     </div>
  160.                     {# Zone de tri et d'affichage par nombre #}
  161.                     <div class="sort-by-product-area">
  163.                         {# Choix du nombre de produits à afficher par page #}
  164.                         <div class="sort-by-cover mr-10">
  165.                             <div class="sort-by-product-wrap">
  166.                                 <div class="sort-by">
  167.                                     <span><i class="fi-rs-apps"></i>Montrer:</span>
  168.                                 </div>
  169.                                 <div class="sort-by-dropdown-wrap">
  170.                                     <span v-show="pageSize!=9999"> ${ pageSize } <i class="fi-rs-angle-small-down"></i></span>
  171.                                     <span v-show="pageSize==9999"> Tous <i class="fi-rs-angle-small-down"></i></span>
  172.                                 </div>
  173.                             </div>
  174.                             {# Dropdown pour choisir pageSize #}
  175.                             <div class="sort-by-dropdown">
  176.                                 <ul>
  177.                                     <li class="activeFilter"><a :class="{ active: pageSize==10 }" href="#&" @click="pageSize=10;getData(page,true)">10</a></li>
  178.                                     <li class="activeFilter"><a :class="{ active: pageSize==20 }" href="#&" @click="pageSize=20;getData(page,true)">20</a></li>
  179.                                     <li class="activeFilter"><a :class="{ active: pageSize==40 }" href="#&" @click="pageSize=40;getData(page,true)">40</a></li>
  180.                                     <li class="activeFilter"><a :class="{ active: pageSize==9999 }" href="#&" @click="pageSize=9999;getData(page,true)">Tous</a></li>
  181.                                 </ul>
  182.                             </div>
  183.                         </div>
  185.                         {# Choix du tri (ordre alphabétique, prix, date) #}
  186.                         <div class="sort-by-cover">
  187.                             <div class="sort-by-product-wrap">
  188.                                 <div class="sort-by">
  189.                                     <span><i class="fi-rs-apps-sort"></i>Trier par:</span>
  190.                                 </div>
  191.                                 <div class="sort-by-dropdown-wrap">
  192.                                     <span v-show="orderBy==1"> Nom: A à Z <i class="fi-rs-angle-small-down"></i></span>
  193.                                     <span v-show="orderBy==2"> Nom: Z à A <i class="fi-rs-angle-small-down"></i></span>
  194.                                     <span v-show="orderBy==3"> Prix: croissant <i class="fi-rs-angle-small-down"></i></span>
  195.                                     <span v-show="orderBy==4"> Prix: décroissant <i class="fi-rs-angle-small-down"></i></span>
  196.                                     <span v-show="orderBy==5"> Date ajout: croissant<i class="fi-rs-angle-small-down"></i></span>
  197.                                     <span v-show="orderBy==6"> Date ajout: décroissant<i class="fi-rs-angle-small-down"></i></span>
  198.                                 </div>
  199.                             </div>
  200.                             {# Dropdown pour le tri #}
  201.                             <div class="sort-by-dropdown">
  202.                                 <ul>
  203.                                     <li class="activeFilter"><a :class="{ active: orderBy==1 }" href="#&" @click="orderBy=1;getData(page,true)">Nom: A à Z</a></li>
  204.                                     <li class="activeFilter"><a :class="{ active: orderBy==2 }" href="#&" @click="orderBy=2;getData(page,true)">Nom: Z à A</a></li>
  205.                                     <li class="activeFilter"><a :class="{ active: orderBy==3 }" href="#&" @click="orderBy=3;getData(page,true)">Prix: croissant</a></li>
  206.                                     <li class="activeFilter"><a :class="{ active: orderBy==4 }" href="#&" @click="orderBy=4;getData(page,true)">Prix: décroissant</a></li>
  207.                                     <li class="activeFilter"><a :class="{ active: orderBy==5 }" href="#&" @click="orderBy=5;getData(page,true)">Date ajout: croissant</a></li>
  208.                                     <li class="activeFilter"><a :class="{ active: orderBy==6 }" href="#&" @click="orderBy=6;getData(page,true)">Date ajout: décroissant</a></li>
  209.                                 </ul>
  210.                             </div>
  211.                         </div>
  212.                     </div>
  213.                 </div>
  215.                 {# ===== GRILLE DE PRODUITS ===== #}
  216.                 <div class="row product-grid-3">
  217.                     {# Boucle sur chaque produit #}
  218.                     <div class="col-lg-6 col-md-6 col-12 col-sm-6 row-product" v-for="entry in products">
  219.                         <div class="product-cart-wrap mb-30 col-product">
  220.                             {# Image + Badges #}
  221.                             <div class="product-img-action-wrap" @click="openProduct(entry.idProduit,entry.name,entry.id)">
  222.                                 <div class="product-img product-img-zoom">
  223.                                     <a href="#&">
  224.                                         <img class="default-img product-img" :src="'{{ APP_URL }}/images/300-400/'+entry.image" :alt="entry.name">
  225.                                     </a>
  226.                                 </div>
  227.                                 
  228.                                 {# Affichage des badges: Rupture, Nouveau, Promo #}
  229.                                 <div class="product-badges product-badges-position product-badges-mrg" v-if="(entry.promo && entry.promo.isValid) || !entry.stock || entry.isNew">
  230.                                     <span v-if="!entry.stock" class="hot mr-1">Rupture de stock</span>
  231.                                     <span v-if="entry.isNew" class="new mr-1">Nouveau</span>
  232.                                     <span class="best" v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='amount'">-${ entry.promo.discountValue.toFixed(3) } <sup class="currency-style">TND</sup></span>
  233.                                     <span class="best" v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='percent'">-${ entry.promo.discountValue } %</span>
  234.                                 </div>
  235.                             </div>
  236.                             {# Titre + prix + bouton panier #}
  237.                             <div class="product-content-wrap">
  238.                                 <h2 @click="openProduct(entry.idProduit,entry.name,entry.id)">
  239.                                     <div class="menu-item card-title">${ entry.name }</div>
  240.                                 </h2>
  241.                                 <div class="product-price">
  242.                                   <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>
  243.                                     <span class="old-price" v-if="entry.promo && entry.promo.isValid">${ entry.priceTTC.toFixed(3) } <sup class="currency-style">TND</sup></span>
  244.                                 </div>
  245.                                 <div class="product-action-1 show" @click="getProduit(entry.idProduit,entry.id)">
  246.                                     <button aria-label="Acheter maintenant" class="action-btn hover-up"><i class="fi-rs-shopping-bag-add"></i></button>
  247.                                 </div>
  248.                             </div>
  249.                         </div>
  250.                     </div>
  251.                 </div>
  253.                 {# ===== PAGINATION ===== #}
  254.                 <div class="pagination-area mt-15 mb-sm-5 mb-lg-0" v-show="pages.length>1">
  255.                     <nav aria-label="Page navigation example">
  256.                         <ul class="pagination justify-content-start">
  257.                             <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>
  258.                             <li v-for="entry in pages" class="page-item" @click="getData(entry)" :class="{ active: entry==page }"><a class="page-link" href="#&">${ entry }</a></li>
  259.                             <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>
  260.                         </ul>
  261.                     </nav>
  262.                 </div>
  263.             </div>
  265.             {# ===== BARRE LATÉRALE (FILTRES) ===== #}
  266.             <div class="col-lg-3 order-mobile-first primary-sidebar sticky-sidebar">
  267.                 {# Bouton Filtrer affiché uniquement en mobile #}
  268.                 <button class="btn btn-outline-primary w-100 d-md-none mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#mobileFilters" aria-expanded="false" aria-controls="mobileFilters">
  269.                     <i class="fi-rs-filter me-2"></i> Affiner la recherche
  270.                 </button>
  271.                 <div class="collapse d-md-block" id="mobileFilters">
  272.                     <div class="sidebar-widget price_range range mb-30">
  273.                 
  274.                         
  275.                         <div class="widget-header position-relative mb-20 pb-10">
  276.                             <h5 class="widget-title mb-10">Filter par prix</h5>
  277.                             <div class="bt-1 border-color-1"></div>
  278.                         </div>
  279.                         {# Range de prix (jQuery UI slider) #}
  280.                         <div class="price-filter">
  281.                             <div class="price-filter-inner">
  282.                                 <div id="slider-range"></div>
  283.                                 <div class="price_slider_amount">
  284.                                     <div class="label-input">
  285.                                         <span>Intervalle:</span><input type="text" id="amount" name="price" placeholder="Ajouter le prix"/>
  286.                                     </div>
  287.                                 </div>
  288.                             </div>
  289.                         </div>
  290.                         <button class="btn btn-sm btn-default mt-10" :disabled="disabled" @click="getData(page,true)">
  291.                             <i class="fi-rs-filter mr-5"></i> Filtrer
  292.                         </button>
  294.                         {# Filtres par taille et couleur #}
  295.                         <div class="list-group" v-if="totalItems">
  296.                             <div class="list-group-item mb-10 mt-10">
  297.                                 <label class="fw-900">Tailles</label>
  298.                                 <div class="custome-checkbox">
  299.                                     <div class="row">
  300.                                         <div v-for="entry in taillesFilter" class="col-4" style="white-space: nowrap">
  301.                                             <input class="form-check-input" type="checkbox" name="checkbox" :id="'exampleCheckbox'+entry.name" v-model="entry.selected" @change="getData(page,true)">
  302.                                             <label class="form-check-label" :for="'exampleCheckbox'+entry.name"><span>${ entry.name }</span></label>
  303.                                         </div>
  304.                                     </div>
  305.                                 </div>
  306.                                 <label class="fw-900 mt-15">Couleurs</label>
  307.                                 <div class="attr-detail attr-color mb-15">
  308.                                     <ul class="list-filter color-filter multi">
  309.                                         <li :class="entry.selected ? 'active' : ''" v-for="entry in couleursFilter" @click="entry.selected = !entry.selected; getData(page,true)">
  310.                                             <a href="#" :title="entry.name">
  311.                                                 <span :style="{ 'background-color': entry.code ? entry.code :'#fff','border': '1px solid #ddd' }"></span>
  312.                                             </a>
  313.                                         </li>
  314.                                     </ul>
  315.                                 </div>
  316.                             </div>
  317.                         </div>
  318.                     </div>
  319.                 </div>
  320.             </div>
  321.             {# FIN BARRE LATÉRALE #}
  322.         </div>
  323.     </div>
  324. </section>
  326.     </main>
  327.     {# {% endverbatim %} #}
  328. {% endblock %}
  329. {% block javascripts %}
  330.     {{ parent() }}
  331.     <script>
  332.         // Reinialiser les filtres de recherche
  333.         window.onbeforeunload = function () {
  334.             //unchecked your check box here.
  335.             $("input[type='checkbox']").prop('checked', false);
  336.             //app.getData(app.page);
  337.         };
  338.     </script>
  339.     <script src="{{ asset('front/assets/scripts/dec/index.js') }}"></script>
  340. {% endblock %}