templates/Theme/Produit/Produit/Produit/acceuilproduit.html.twig line 74

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutuser.html.twig" %}
  3. {% block meta %}
  5.     {{ parent() }}
  6.     
  7.     <meta name="keywords" content="{{ site }}, Catalogue, Produit,{{ keywords }}"/>
  8.     <meta name="author" content="Noel Kenfack"/>
  9.     <meta name="description" content="{{ site }} | Catalogue des produits"/>
  10.     <link rel="stylesheet" href="{{ asset('autocomplete/css/jquery.auto-complete.css') }}"/>
  12. {% endblock %}
  14. {% block title %}
  16.     {{ parent() }} | Boutiques
  17.     
  18. {% endblock %}
  20. {% block userblog_body %}
  22. <section style="padding: 15px 0px 5px 0px; background: #f7f7f7;">
  23.     <div class="container">
  24.     <div class="row">
  25.     <div class="col-md-8">
  27.         <ul class="breadcrumbs">
  28.             <li><a href="{{ path('users_user_acces_plateforme') }}"><i class="fa fa-home" style="font-size: 11px;"></i> {{ 'Accueil'|trans }}</a></li>
  29.             <li><a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place') }}">{{ 'Produits'|trans }}</a></li>
  30.             {% if souscategorie != null %}
  31.             <li>{{ souscategorie.nom }}</li>
  32.             {% else %}
  33.             <li>{{ 'Tous les produits'|trans }}</li>
  34.             {% endif %}
  35.         </ul>
  36.     </div>
  37.     <div class="col-md-4 text-right">
  38.         {% include "Theme/General/Template/Menu/contacts.html.twig" %}
  39.     </div>
  40.     </div>
  41.     </div>
  42. </section>
  43.     
  44. <div class="section-content">
  45. <div class="container">
  47. <div class="row">
  48. <div class="col-md-12">
  49.     <div class="animecourant-panel" style="display: block;">
  50.             
  51.     </div>
  52. </div>
  53. </div>
  55. <div class="row">
  56.     
  57.     <div class="col-md-3" style="padding: 3px;">
  58.         <div class="toutleblock">
  59.             <div style="padding: 7px 2px; box-shadow:0px 0px 2px rgba(0,0,0,0.01); background: #fff; border: 1px solid #ddd;">
  60.                 {% include 'Theme/General/Template/Menu/formfiltreproduit.html.twig' %}
  61.             </div>
  62.             
  63.             <div  style="margin: 7px 0px 0px 0px; box-shadow:0px 0px 2px rgba(0,0,0,0.01); background: #fff;">
  64.             <ul class="list-group">
  65.                 
  66.                 {{ render(controller("App\\Controller\\Produit\\Produit\\CategorieController:menusouscategorie", {'taille': 10})) }}
  67.                 
  68.              </ul>
  69.             </div>
  70.             
  71.             <div style="margin: 7px 0px 0px 0px; box-shadow:0px 0px 2px rgba(0,0,0,0.01); background: #fff;">
  72.             <ul class="list-group">
  73.                 
  74.                 {{ render(controller("App\\Controller\\Produit\\Produit\\MarqueproduitController:menumarque", {'taille': 10})) }}
  75.                 
  76.              </ul>
  77.             </div>
  78.              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 stop-courant-panel">
  80.              </div>
  81.         </div>
  82.     </div>
  83.     
  84.     <div class="col-md-9" style="padding: 3px;">
  85.          
  86.         <div class="row" style="margin: 0px">
  87.             <div class="col-md-12">
  88.                 <h3 class="breadcrumbs-title">
  89.                  Liste des produits
  90.                 </h3>
  91.             </div>
  93.             {% for produit in liste_produit %}
  94.                 <div class="col-md-4 col-sm-6 col-xs-12">
  95.                 {% include 'Theme/Produit/Produit/Produit/produitdescription.html.twig' %}
  96.                 </div>
  97.             {% else %}
  98.                 <div class="col-md-12">
  99.                     <ul class="collapsible collapsible-accordion" data-collapsible="accordion" style="box-shadow: none;">
  100.                         <div style="height: 400px; border-left: 4px solid #3565ae; padding: 5px;">
  101.                             <div style="border-left: 5px solid #3565ae; padding: 3px; background: #f5f5f5; color: red;">{{ 'Aucune information disponible pour cette section'|trans }}</div>
  102.                         </div>
  103.                     </ul>            
  104.                 </div>
  105.             {% endfor %}
  106.             <div class="clearfix"></div>
  107.         </div>
  109.         <div class="clearfix"></div>
  110.           {% if nombrepage > 0 %}
  111.                         
  112.             {% if page > 1 and page <= nombrepage %}
  113.             {% set pagepre = page - 1 %}
  114.             {% else %}
  115.                 {% set pagepre = nombrepage %}
  116.             {% endif %}
  118.             {% if page < nombrepage %}
  119.                 {% set pagesuiv = page + 1 %}
  120.             {% else %}
  121.                 {% set pagesuiv =  1 %}
  122.             {% endif %}
  124.             {% if nombrepage < 5 %}
  125.                 {% set debut = 1 %}
  126.                 {% set fin = nombrepage %}
  127.             {% else %}
  128.                 {% if page > 2 and page < (nombrepage - 2) %}
  129.                     {% set debut = page - 2 %}
  130.                     {% if page + 2 >= nombrepage %}
  131.                         {% set fin = nombrepage %}
  132.                     {% else %}
  133.                         {% set fin = page + 2 %}
  134.                     {% endif %}
  135.                 {% else %}
  136.                     {% if page <= 2 %}
  137.                         {% if page == 1 %}
  138.                             {% set debut = 1 %}
  139.                             {% set fin = page + 3 %}
  140.                         {% else %}
  141.                             {% set debut = 1 %}
  142.                             {% set fin = page + 2 %}
  143.                         {% endif %}
  144.                     {% else %}
  145.                         {% set debut = page - 2 %}
  146.                         {% if page + 2 >= nombrepage %}
  147.                             {% set fin = nombrepage %}
  148.                         {% else %}
  149.                             {% set fin = page + 2 %}
  150.                         {% endif %}
  151.                     {% endif %}
  152.                 {% endif %}
  153.                 
  154.             {% endif %}
  155.             
  157.             <div class="row" style="margin: 15px  0px;">
  158.                <div class="col-md-12">
  159.                <div class="flex-container" style="background: #fafafa; ">
  160.                   <div class="paginate-ctn">
  161.                     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays,'idmarque': idmarque,'idtype': idtype,'idville': idville, 'page': 1 }) }}" style="display: inline-block;" class="round-effect"> <span class="fa fa-fast-backward"></span> </a>
  162.                     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays, 'idmarque': idmarque,'idtype': idtype, 'idville': idville,'page': pagepre }) }}" style="display: inline-block;" class="round-effect"> <span class="fa fa-step-backward"></span> </a>
  163.                     {% for p in debut..fin %}
  164.                         <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays,'idmarque': idmarque,'idtype': idtype, 'idville': idville, 'page': p }) }}" style="display: inline-block;" class="round-effect {% if p == page %}activepage{% endif %}">{{ p }}</a>
  165.                     {% endfor %}
  166.                     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays,'idmarque': idmarque,'idtype': idtype, 'idville': idville, 'page': pagesuiv }) }}" style="display: inline-block;" class="round-effect"> <span class="fa fa-step-forward"></span> </a>
  167.                     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays, 'idmarque': idmarque,'idtype': idtype, 'idville': idville, 'page': nombrepage }) }}" style="display: inline-block;" class="round-effect"> <span class="fa fa-fast-forward"></span> </a>
  168.                  </div>
  169.                </div>
  170.             </div>
  171.             </div>
  172.             <div class="clearfix"></div>
  173.             {% else %}
  175.             <div class="row" style="margin: 15px  0px;">
  176.                <div class="col-md-12">
  177.                <div class="flex-container" style="background: #fafafa; ">
  178.                   <div class="paginate-ctn">
  179.                 
  180.                     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays,'idmarque': idmarque,'idtype': idtype, 'idville': idville, 'page': page }) }}" style="display: inline-block;" class="round-effect"> <span class="fa fa-fast-backward"></span> </a>
  181.                     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays,'idmarque': idmarque,'idtype': idtype, 'idville': idville, 'page': page }) }}" style="display: inline-block;" class="round-effect"> <span class="fa fa-step-backward"></span> </a>
  182.                         <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays,'idmarque': idmarque,'idtype': idtype, 'idville': idville, 'page': 1 }) }}" style="display: inline-block;" class="round-effect activepage">1</a>
  183.                     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays,'idmarque': idmarque,'idtype': idtype, 'idville': idville, 'page': page }) }}" style="display: inline-block;" class="round-effect"> <span class="fa fa-step-forward"></span> </a>
  184.                     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': idscat,'idpays': idpays,'idmarque': idmarque,'idtype': idtype, 'idville': idville, 'page': page }) }}" style="display: inline-block;" class="round-effect"> <span class="fa fa-fast-forward"></span> </a>
  186.                 </div>
  187.                </div>
  188.             </div>
  189.             </div>
  191.             <div class="clearfix"></div>
  192.             {% endif %}
  193.     </div>
  194. </div>
  196. </div>
  197. </div>
  199. {% endblock %}
  201. {% block srcjavascripttemplate %}
  202. <script src="{{ asset('template/js/onvisible.js') }}" type="text/javascript"></script>
  203. <script src="{{ asset('autocomplete/js/jquery.auto-complete.js') }}"></script>
  204. {% endblock %}
  206. {% block javascripttemplate %}
  208. var bouge = 1;
  209. var dimension = 200;
  210. function activateelement()
  211. {
  212. var visibility = visibleElement('.animecourant-panel');
  214. if(visibility && bouge == 0){
  215.     bouge = 1;
  216.     $('.toutleblock').css('position','relative');
  217.     $('.toutleblock').css('bottom','0px');
  218.     $('.toutleblock').css('margin-bottom','0px');
  219. }
  220. }
  222. function stopelement()
  223. {
  224. var visibility = visibleElement('.stop-courant-panel');
  226. if(visibility && bouge == 1){
  227.     if(visibleElement('.animecourant-panel') && visibleElement('.stop-courant-panel'))
  228.     {
  229.     }else{
  230.     bouge = 0;
  231.     $('.toutleblock').css('position','fixed');
  232.     $('.toutleblock').css('width',dimension+'px');
  233.     $('.toutleblock').css('bottom','7px');
  234.     $('.toutleblock').css('margin-bottom','0px');
  235.     }
  236. }
  237. }
  239. function controlScroll()
  240. {
  241.     var largeur = ($(window).width());
  242.     dimension = $('.toutleblock').width();
  243.     if (largeur >= 768)
  244.     {
  245.         if(visibleElement('.animecourant-panel') && visibleElement('.stop-courant-panel'))
  246.         {
  247.         $('.toutleblock').css('position','fixed');
  248.         $('.toutleblock').css('width',dimension+'px');
  249.         }else{
  250.         window.setInterval(function() { stopelement(); }, 100);
  251.         window.setInterval(function() { activateelement(); }, 100);
  252.         }
  253.         
  254.     }
  255. }
  256. controlScroll();
  259. var jsonresult = {{ render(controller("App\\Controller\\Produit\\Service\\VilleController:autorechercheville", {'taille': 500})) }};
  260. var j = 0;
  261. var departchoices = [];
  262. for(var n in jsonresult){
  263.     nom = jsonresult[n].nom;
  264.     drapeau = jsonresult[n].drapeau;
  265.     id = jsonresult[n].id;
  266.     num = nom+":"+drapeau;
  267.     courantelem = [nom,drapeau,id];
  268.     departchoices[j] = courantelem;
  269.     j++;
  270. }
  272. $('#departement_etab').autoComplete({
  273.     minChars: 0,
  274.     source: function(term, suggest){
  275.         term = term.toLowerCase();
  276.         var suggestions = [];
  277.         for (i=0;i< departchoices.length;i++)
  278.             if (~(departchoices[i][0]+' '+departchoices[i][1]).toLowerCase().indexOf(term)) suggestions.push(departchoices[i]);
  279.         suggest(suggestions);
  280.     },
  281.     renderItem: function (item, search){
  282.         search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  283.         var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
  284.         return '<div class="autocomplete-suggestion" data-langname="'+item[0]+'" data-lang="'+item[1]+'" data-id="'+item[2]+'"  data-val="'+search+'" data-img="'+item[1]+'"><img src="{{ asset('') }}'+item[1]+'" style="width: 30px; height: 20px; padding: 2px; margin-bottom: -5px!important;"> '+item[0].replace(re, "<b>$1</b>")+'</div>';
  285.     },
  286.     onSelect: function(e, term, item){
  287.         $('#departement_etab').val(item.data("langname"));
  288.     },
  289.     cache: false
  290. });
  292. $("#departement_etab").focus(function(){
  293.     rechercheutilisateur(); 
  294. });
  296. function rechercheutilisateur()
  297. {
  298.     if($('#departement_etab').val().length >= 2)// on vérifier si l'utilisateur a entré plus de 5 caractères
  299.     {
  300.       var libre = $('.zone-recherche-quartier').attr('value'); // on initialise la variable libre
  301.       var donnee = $('#departement_etab').val();  //on récupère la donnée
  302.       if (libre == 0 && donnee != $('.zone-recherche-quartier').attr('name')){ // on vérifier si la requête précedente est rétournée et que la recherche ne corespnd pas à la dernière effectuée
  303.       $('.zone-recherche-quartier').attr('value',1); // on bloque d'autres recherches
  304.       $('.zone-recherche-quartier').attr('name',donnee); // on enregistre la recherche effectuer.
  305.      
  306.       $.ajax({
  307.             url : '{{ path('produit_service_auto_recherche_ville') }}',
  308.             data : 'donnee='+donnee+'',
  309.             type : 'POST',
  310.             dataType : 'json',
  311.             success : function(data, statut){
  312.                 
  313.                 $('.zone-recherche-quartier').attr('value',0); // on libère d'autre recherches
  315.                 compt = departchoices.length;
  316.                 jsonresulta =  data;
  317.                 
  318.                 
  319.                 for(var n in jsonresulta){
  320.                     nom = jsonresulta[n].nom;
  321.                     drapeau = jsonresulta[n].drapeau;
  322.                     id = jsonresulta[n].id;
  323.                     num = nom+":"+drapeau;
  324.                     courantelem = [nom,drapeau,id];
  325.                     departchoices[compt] = courantelem;
  326.                     compt++;
  327.                 }
  328.               setTimeout(function(){ rechercheutilisateur(); }, 100);  // on relance la fonction après 200 ms.
  329.               
  330.             }
  331.         });
  332.       }else{
  333.         setTimeout(function() { rechercheutilisateur(); }, 100);
  334.       }
  335.     }else{
  336.         setTimeout(function() { rechercheutilisateur(); }, 100);
  337.     }
  338. }
  341. {% endblock %}