templates/front/category/index.html.twig line 1

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