templates/FO/FO/home.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block title %}Accessoires 4x4 & Equipements Off Road {% endblock %}
  3. {% block body %}
  5.             <!-- page content -->
  7.             <div class="right_col" role="main" style="padding-left : 0px;padding-right:0px !important;">
  8.                 <!-- top tiles -->
  9.                 <div class="row" style="margin-right:0px;">
  10.                     {% if carrousel|length > 0 %}
  11.                         <div id="carouselDesktop" class="carousel slide d-none d-md-block" data-ride="carousel">
  12.                             <ol class="carousel-indicators">
  13.                                 {% for c in carrousel %}
  14.                                     <li data-target="#carouselDesktop" data-slide-to="{{ loop.index0 }}" class="{% if loop.index0 == 0 %}active{% endif %}"></li>
  15.                                 {% endfor %}
  16.                             </ol>
  17.                             <div class="carousel-inner">
  18.                                 {% for c in carrousel %}
  19.                                     <div class="carousel-item {% if loop.first %}active{% endif %}">
  20.                                         {% set lien = c.lien %}
  21.                                         {% if c.articles != "" %}
  22.                                             {% set articles_cible = c.articles|json_decode %}
  23.                                             {% if articles_cible is not empty and articles_cible|length > 0 %}
  24.                                                 {% set lien = "/catalogue?" %}
  25.                                                 {% for article in articles_cible %}
  26.                                                     {% set lien = lien ~ 'p[]=' ~ article ~ '&' %}
  27.                                                 {% endfor %}
  28.                                                 {% set lien = lien|slice(0, -1) %}
  29.                                             {% endif %}
  30.                                         {% endif %}
  31.                                         {% if lien != "" %}
  32.                                         <a href="{{ lien }}">
  33.                                             {% endif %}
  34.                                             <img class="d-block w-100" src="/uploads/societe/carrousel/{{ c.url }}">
  35.                                             {% if lien != "" %}
  36.                                         </a>
  37.                                         {% endif %}
  38.                                     </div>
  39.                                 {% endfor %}
  40.                             </div>
  41.                         </div>
  42.                     {% endif %}
  45.                     {% if carrouselMobile|length > 0 %}
  46.                         <div id="carouselMobile" class="carousel slide d-md-none" data-ride="carousel">
  47.                             <ol class="carousel-indicators">
  48.                                 {% for c in carrouselMobile %}
  49.                                     <li data-target="#carouselMobile" data-slide-to="{{ loop.index0 }}" class="{% if loop.index0 == 0 %}active{% endif %}"></li>
  50.                                 {% endfor %}
  51.                             </ol>
  52.                             <div class="carousel-inner">
  53.                                 {% for c in carrouselMobile %}
  54.                                     <div class="carousel-item {% if loop.first %}active{% endif %}">
  57.                                         {% set lien = c.lien %}
  58.                                         {% if c.articles != "" %}
  59.                                             {% set articles_cible = c.articles|json_decode %}
  60.                                             {% if articles_cible is not empty and articles_cible|length > 0 %}
  61.                                                 {% set lien = "/catalogue?" %}
  62.                                                 {% for article in articles_cible %}
  63.                                                     {% set lien = lien ~ 'p[]=' ~ article ~ '&' %}
  64.                                                 {% endfor %}
  65.                                                 {% set lien = lien|slice(0, -1) %}
  66.                                             {% endif %}
  67.                                         {% endif %}
  69.                                         {% if lien != "" %}
  70.                                             <a href="{{ lien }}">
  71.                                         {% endif %}
  72.                                             <img class="d-block w-100" src="/uploads/societe/carrousel/{{ c.url }}">
  73.                                         {% if lien != "" %}
  74.                                             </a>
  75.                                         {% endif %}
  76.                                     </div>
  77.                                 {% endfor %}
  78.                             </div>
  79.                         </div>
  80.                     {% endif %}
  81.                 </div>
  83.                 {#
  84.                 <div class="row" style="margin-right:0px;">
  85.                     {% if 1==1 and carrousel|length > 0 %}
  86.                     <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  87.                         <ol class="carousel-indicators">
  88.                         {% for c in carrousel %}
  89.                             <li data-target="#carouselExampleIndicators" data-slide-to="{{ loop.index0 }}" class="{% if loop.index0 == 0 %}active{% endif %}"></li>
  90.                         {% endfor %}
  91.                         </ol>
  92.                         <div class="carousel-inner" role="listbox">
  93.                         {% for c in carrousel %}
  94.                         <div class="carousel-item {% if loop.index0 == 0 %}active{% endif %}">
  95.                             {% if c.lien != "" %}
  96.                                 <a href="{{ c.lien }}">
  97.                             {% endif %}
  98.                             <img class="d-block img-fluid w-100" src="/uploads/societe/carrousel/{{ c.url }}">
  99.                                 {% if c.lien != "" %}
  100.                                 </a>>
  101.                             {% endif %}
  102.                         </div>
  103.                         {% endfor %}
  104.                         </div>
  105.                     </div>
  106.                     {% endif %}
  107.                 </div>#}
  109.                 <style>
  110.                     /* Conteneur principal */
  111.                     .layout-row {
  112.                         display: flex;
  113.                         flex-wrap: nowrap;      /* par défaut sur desktop : tout sur une ligne */
  114.                         gap: 22px;              /* espace entre les éléments */
  115.                         padding: 22px;
  116.                         box-sizing: border-box;
  117.                         width: 100%;
  118.                         padding-right:0px;
  119.                     }
  121.                     /* Carrés génériques */
  122.                     .card-item {
  123.                         display: flex;
  124.                         justify-content: center;
  125.                         align-items: center;
  126.                         height: 150px;
  127.                         background-color: #4c4c4c;
  128.                         border: none;
  129.                         flex-shrink: 0;
  130.                     }
  132.                     /* Largeur des 3 carrés (50% divisé par 3 - gap) */
  133.                     .card1, .card2, .card3 {
  134.                         flex: 0 0 calc((50% - 2 * 22px)/3);
  135.                     }
  137.                     /* Rectangle : prend 50% restant */
  138.                     .card-rectangle {
  139.                         flex: 0 0 calc(50% - 22px);
  140.                         display: flex;
  141.                         justify-content: center;
  142.                         align-items: center;
  143.                         background-color: #4c4c4c;
  144.                         background-image: url('/images/operateur.png') !important;
  145.                         background-size: cover;
  146.                         background-position: top;
  147.                         background-repeat: no-repeat;
  148.                     }
  150.                     /* Texte interne */
  151.                     .card-content {
  152.                         display: block;
  153.                         text-align: center;
  154.                         color: #fbb911;
  155.                         font-weight: bold;
  156.                         font-size: 16px;
  157.                         line-height: 1.2;
  158.                     }
  160.                     .card-content a {
  161.                         color: #fbb911 !important;
  162.                         text-decoration: none;
  163.                         cursor: pointer;
  164.                     }
  166.                     .highlight {
  167.                         font-size: 1.6em;
  168.                         color: #fbb911;
  169.                     }
  171.                     .highlight-white {
  172.                         color: white;
  173.                     }
  175.                     /* Ligne de contact pour la carte 3 */
  176.                     .contact-line {
  177.                         width: 90%;
  178.                         text-align: center;
  179.                         margin: 2px 0;
  180.                     }
  182.                     /* Responsive mobile */
  183.                     @media (max-width: 767px) {
  184.                         .layout-row {
  185.                             flex-wrap: wrap;   /* autorise le retour à la ligne */
  186.                             padding: 0;        /* supprime le padding sur mobile */
  187.                             gap: 10px;         /* gap réduit pour éviter débordement */
  188.                             margin-top:10px;
  189.                             margin-bottom:10px;
  190.                         }
  192.                         /* Carré1 et carré2 côte à côte */
  193.                         .card1, .card2 {
  194.                             flex: 0 0 calc(50% - 5px);   /* 50% moins la moitié du gap */
  195.                             max-width: calc(50% - 5px);
  196.                         }
  198.                         /* Carré3 et rectangle empilés */
  199.                         .card3, .card-rectangle {
  200.                             flex: 0 0 100%;
  201.                             max-width: 100%;
  202.                         }
  203.                         .card-rectangle {
  204.                             flex: 0 0 100%;
  205.                             max-width: 100%;
  206.                             box-sizing: border-box;  /* inclut le padding/gap dans la largeur */
  207.                             height: 150px;           /* même hauteur que les autres cartes */
  208.                             display: block;          /* assure que le div est visible */
  209.                             background-size: cover;
  210.                             background-position: center;
  211.                             background-repeat: no-repeat;
  212.                         }
  213.                         .right_col {
  214.                             padding-left : 0px !important;
  215.                         }
  216.                     }
  217.                 </style>
  219.                 <div class="layout-row">
  220.                     <!-- Carré 1 -->
  221.                     <div class="card-item card1">
  222.                         <div class="card-content">
  223.                             références<br/>
  224.                             <span class="highlight">870 000</span><br/>
  225.                             dont <span class="highlight-white">95 000</span> en stock
  226.                         </div>
  227.                     </div>
  229.                     <!-- Carré 2 -->
  230.                     <div class="card-item card2">
  231.                         <div class="card-content">
  232.                             magasin<br/>
  233.                             <span class="highlight">7500 M2</span><br/>
  234.                             de <span class="highlight-white">surface</span>
  235.                         </div>
  236.                     </div>
  238.                     <!-- Carré 3 -->
  239.                     <div class="card-item card3">
  240.                         <div class="card-content">
  241.                             <span class="highlight-white">Une question ?</span><br/>
  242.                             <span class="highlight"><a href="tel:+33475851048" style="color:#fbb911;">04 75 85 10 48</a></span><br/>
  243.                             <a href="#" style="color:#fbb911;">contact@outback-import.fr</a>
  244.                         </div>
  245.                     </div>
  247.                     <!-- Rectangle -->
  248.                     <div class="card-rectangle">
  249.                         <div class="rectangle-content">
  250.                             <!-- Ici tu peux mettre image ou deux sous-éléments collés -->
  251.                         </div>
  252.                     </div>
  253.                 </div>
  264.                 <div class="row" style="padding-left:10px;margin-right:0px;">
  265.                     <div class="col-lg-12" style="padding-top:15px;background:#e5e5e5;border: 0px solid #f1f4f6;border-radius: 0px;">
  266.                         <ul class="stats-overview" style="border-bottom:0px;margin-bottom:0px;padding-left:0px;">
  268.                             <li class="dark">
  269.                                 <i class=" fa fa-credit-card" style="font-size :2em;"></i>
  270.                                 <div style="margin-top:5px;text-transform:uppercase;" class="">Paiements sécurisés</div>
  273.                             </li>
  274.                             <li class="dark">
  275.                                 <i class=" fa fa-gears" style="font-size :2em;"></i>
  276.                                 <div style="margin-top:5px;text-transform:uppercase;" class="">Garanties 2 ans</div>
  278.                             </li>
  279.                             <li class="dark">
  280.                                 <i class=" fa fa-truck" style="font-size :2em;"></i>
  281.                                 <div style="margin-top:5px;text-transform:uppercase;" class="">Livraison rapide</div>
  283.                             </li>
  285.                         </ul>
  286.                     </div>
  287.                 </div>
  291.                 <div class="row" style="margin-top:15px;padding-left:10px;margin-left:0px;padding-right:20px;background:white;margin-right:0px;">
  294.                     <div class="col-lg-7 " style="padding-left:0px;">
  295.                         <div class="container _x_panel recherche_catalogue" style="margin-top:15px;">
  296.                             <!-- Titre global du formulaire -->
  297.                             <h2 class="off form-title dark" >Recherche de pièces</h2>
  299.                             <script src="{{ asset('js_ep/moteur_recherche_article.js') }}"></script>
  301.                             <script>
  302.                                 $(document).ready(function(){
  304.                                     {% if parametres.mv is defined and parametres.mv != "" and parametres.mv != "0"  %}
  305.                                     var initialData = { id: {{parametres.mv}}, text: "{{parametres.mv_l}}", libelle: "{{parametres.mv_l}}" };
  306.                                     {% else %}
  307.                                     var initialData = { id: 0, text: "Marque", text: "Marque" };
  308.                                     {% endif %}
  309.                                     var option = new Option(initialData.text, initialData.id, true, true);
  311.                                     $selectMarqueVehicule.append(option).trigger('change');
  314.                                     {% if parametres.mov is defined and parametres.mov != "" and parametres.mov != "0"  %}
  315.                                     var initialData = { id: {{parametres.mov}}, text: "{{parametres.mov_l}}" };
  316.                                     {% else %}
  317.                                     var initialData = { id: 0, text: "Modèle"};
  318.                                     {% endif %}
  319.                                     var option = new Option(initialData.text, initialData.id, true, true);
  320.                                     $selectModeleVehicule.append(option).trigger('change');
  323.                                     {% if parametres.tv is defined and parametres.tv != "" and parametres.tv != "0" %}
  324.                                     var initialData = { id: {{parametres.tv}}, text: "{{parametres.tv_l}}" };
  325.                                     {% else %}
  326.                                     var initialData = { id: 0, text: "Type"};
  327.                                     {% endif %}
  328.                                     var option = new Option(initialData.text, initialData.id, true, true);
  329.                                     $selectTypeVehicule.append(option).trigger('change');
  332.                                     {% if parametres.m is defined and parametres.m != "" and parametres.m != "0" %}
  333.                                     var initialData = { id: {{parametres.m}}, text: "{{parametres.m_l}}" };
  334.                                     {% else %}
  335.                                     var initialData = { id: 0, text: "Marque" };
  336.                                     {% endif %}
  337.                                     var option = new Option(initialData.text, initialData.id, true, true);
  338.                                     $selectMarqueArticle.append(option).trigger('change');
  342.                                     {% if parametres.c is defined and parametres.c != "" and parametres.c != "0" %}
  343.                                     var initialData = { id: {{parametres.c}},  text: "{{parametres.c_l}}" };
  344.                                     {% else %}
  345.                                     var initialData = { id: 0, text: "Catégorie" };
  346.                                     {% endif %}
  348.                                     var option = new Option(initialData.text, initialData.id, true, true);
  349.                                     $selectCategorieArticle.append(option).trigger('change');
  351.                                     {% if parametres.cn2 is defined and parametres.cn2 != "" and parametres.cn2 != "0" %}
  352.                                     var initialData = { id: {{parametres.cn2}}, text: "{{parametres.cn2_l}}" };
  353.                                     {% else %}
  354.                                     var initialData = { id: 0, text: "Catégorie N2" };
  355.                                     {% endif %}
  356.                                     var option = new Option(initialData.text, initialData.id, true, true);
  357.                                     $selectCategorieArticleN2.append(option).trigger('change');
  360.                                     {% if parametres.cn3 is defined and parametres.cn3 != "" and parametres.cn3 != "0" %}
  361.                                     var initialData = { id: {{parametres.cn3}}, text: "{{parametres.cn3_l}}" };
  362.                                     {% else %}
  363.                                     var initialData = { id: 0, text: "Catégorie N3" };
  364.                                     {% endif %}
  365.                                     var option = new Option(initialData.text, initialData.id, true, true);
  366.                                     $selectCategorieArticleN3.append(option).trigger('change');
  368.                                 });
  369.                             </script>
  371.                             <form action="/catalogue"  id="searchForm" method="GET" style="padding-bottom:20px;">
  372.                                 <div class="form-container" style="margin-top:0px;">
  373.                                     <!-- Colonne gauche -->
  374.                                     <div class="form-column" style="padding:0;">
  375.                                         <div class="_off column-title"><i class="fa fa-car"></i> Véhicule</div>
  376.                                         <div class="form-group">
  377.                                            {#  <label for="marque">Marque</label> #}
  378.                                             <input type="hidden" id="mv_l" name="mv_l" value="{% if parametres.mv_l is defined and parametres.mv_l != ""  %}{{ parametres.mv_l }}{% endif %}">
  379.                                             <select id="dtc_marque_vehicule_select2" class="form-control" name="mv"></select>
  381.                                         </div>
  382.                                         <div class="form-group">
  383.                                             {# <label for="modele">Modèle</label> #}
  384.                                             <input type="hidden" id="mov_l" name="mov_l" value="{% if parametres.mv_l is defined and parametres.mv_l != ""  %}{{ parametres.mv_l }}{% endif %}">
  385.                                             <select class="form-control" id="dtc_modele_vehicule_select2" name="mov"></select>
  386.                                         </div>
  387.                                         <div class="form-group">
  388.                                             {# <label for="type">Type</label> #}
  389.                                             <input type="hidden" id="tv_l" name="tv_l" value="{% if parametres.tv_l is defined and parametres.tv_l != ""  %}{{ parametres.tv_l }}{% endif %}">
  390.                                             <select class="form-control" id="dtc_type_vehicule_select2" name="tv"></select>
  391.                                         </div>
  395.                                         {#
  396.                                         <div class="masquer_mobile animated flipInY orange" style="width:auto;margin-top:0px;">
  397.                                             <div class="tile-stats" style="margin-bottom:9px;padding:10px;padding-top:5px;padding-bottom:5px;background:#F7F7F7;padding-left :5px;">
  398.                                                 <div class="gauche" style="">
  399.                                                     <i style="font-size:3em;padding-right:10px;" class="  fa fa-dropbox"></i>
  400.                                                 </div>
  401.                                                 <div class="gauche text-left" style="padding-left:10px;padding-right:5px;line-height:1.25em;display:contents;">
  402.                                                     <div style="font-size:0.97em;padding-top:3px;" class="dark">Plus de 870 000 produits référencés dont plus de 95 000 en stock.</div>
  403.                                                 </div>
  404.                                             </div>
  405.                                         </div>
  406.                                         #}
  407.                                         <div class="_off column-title"><i class="fa fa-bars"></i> Catégories</div>
  408.                                         <div class="form-group">
  409.                                             {#<label for="cat1">Catégorie</label>#}
  410.                                             <input type="hidden" id="c_l" name="c_l" value="{% if parametres.c_l is defined and parametres.c_l != ""  %}{{ parametres.c_l }}{% endif %}">
  411.                                             <select class="form-control" id="dtc_categorie_article_n1_select2" name="c"></select>
  412.                                         </div>
  413.                                         <div class="form-group">
  414.                                             {#<label for="cat2">Catégorie N2</label>#}
  415.                                             <input type="hidden" id="cn2_l" name="cn2_l" value="{% if parametres.cn2_l is defined and parametres.cn2_l != ""  %}{{ parametres.cn2_l }}{% endif %}">
  416.                                             <select class="form-control" id="dtc_categorie_article_n2_select2" name="cn2"></select>
  417.                                         </div>
  418.                                         <div class="form-group">
  419.                                             {#<label for="cat3">Catégorie N3</label>#}
  420.                                             <input type="hidden" id="cn3_l" name="cn3_l" value="{% if parametres.cn3_l is defined and parametres.cn3_l != ""  %}{{ parametres.cn3_l }}{% endif %}">
  421.                                             <select class="form-control" id="dtc_categorie_article_n3_select2" name="cn3"></select>
  422.                                         </div>
  429.                                     </div>
  431.                                     <!-- Séparateur vertical -->
  432.                                     <div class="separator"></div>
  434.                                     <!-- Colonne droite -->
  435.                                     <div class="form-column" style="padding:0; display:flex; flex-direction:column;">
  437.                                         <div class="form-group">
  438.                                             <div class="_off column-title"><i class="fa fa-star"></i> Marque</div>
  439.                                             {# <label for="modele">Marque</label> #}
  440.                                             <input type="hidden" id="m_l" name="m_l" value="{% if parametres.m_l is defined and parametres.m_l != ""  %}{{ parametres.m_l }}{% endif %}">
  441.                                             <select class="form-control" id="dtc_marque_article_select2" name="m"></select>
  442.                                         </div>
  444.                                         <div class="_off column-title"><i class="fa fa-cubes"></i> Stock</div>
  445.                                         <div class="form-group row" style="margin-bottom:0px;">
  446.                                             <div class="col-md-12 col-sm-12">
  447.                                                 <label>
  448.                                                     <input type="checkbox" name="st" value="1" class="js-switch"  /> En stock uniquement
  449.                                                 </label>
  450.                                             </div>
  451.                                         </div>
  453.                                         <div class="form-group">
  454.                                             <div class="_off column-title"><i class="fa fa-search"></i> Recherche </div>
  455.                                            {#  <label for="keywords">Recherche <i class="fa fa-search"></i></label>#}
  456.                                             <input type="text" class="form-control" name="mc" placeholder="Entrez un mot clé">
  457.                                         </div>
  461.                                         <div class="btn-recherche-catalogue-reponsive btn-container" style="margin-top:auto;margin-bottom:15px;">
  462.                                             <button style="width:100%;margin-left:0px;" type="submit" class="btn btn-success"><i class="fa fa-search"></i> Lancer la recherche </button>
  463.                                         </div>
  464.                                     </div>
  465.                                 </div>
  468.                             </form>
  469.                         </div>
  471.                     </div>
  472.                     <style>
  473.                         .logo_img_nb {
  474.                               /* largeur max de l'image */
  475.                             max-height: 65px;
  476.                             margin-right: 10px;
  477.                              /* espace en bas pour quand elles passent à la ligne */
  478.                         }
  480.                         .parent_logo_nb {
  481.                             display: flex;
  482.                             align-items: center;         /* centre verticalement le contenu */
  483.                             justify-content: center;
  486.                             padding-top: 0px;
  487.                             padding-left: 0;
  488.                             padding-right: 0;
  489.                         }
  491.                         .images-wrapper {
  492.                             display: flex;
  493.                             flex-wrap: wrap;             /* permet aux images de passer à la ligne */
  494.                             justify-content: center;     /* centre les images horizontalement */
  495.                             gap: 5px;                   /* espace entre les images */
  496.                         }
  497.                     </style>
  498.                     <div class="parent_logo_nb col-lg-5 _text-center" style="padding-left:0px;padding-right:0px;padding-top:10px;">
  499.                         <div class="images-wrapper">
  500.                         {% if logosMarque|length > 0 %}
  501.                             {% for l in logosMarque %}
  502.                                 {% if l.logoNb != "" %}
  503.                                     <img class="logo_img_nb" style="" src="{{ asset('/uploads/logos/marques-nb/' ~ l.id ~ '/' ~ l.logoNb) | imagine_filter('H400x300') }}" alt="{{ l.libelle }}" title="{{ l.libelle }}">
  504.                                 {% endif %}
  506.                             {% endfor %}
  507.                         {% endif %}
  508.                         </div>
  510.                     </div>
  512.                 </div>
  516.                 {% set articles_plus = [] %}
  517.                 {% if app.user.client.id is defined %}
  518.                     {% set articles_plus = dtc_article.findRandomArticles(6,cat_produit_home,app.user.client.id) %}
  519.                 {% else %}
  520.                     {% set articles_plus = dtc_article.findRandomArticles(6,cat_produit_home,NULL) %}
  521.                 {% endif %}
  524.                 {% if articles_plus|length > 0 %}
  525.                 <div class="row justify-content-center" style="margin-top:15px;padding-left:10px;margin-right:0px;">
  527.                         {% for p in articles_plus %}
  528.                             <div class="col-lg-2 col-md-2 mb-3 col-6">
  529.                                 <div class="card suggestion-card">
  531.                                     {% set slug = dtc_article.getslugifArticle(p.id) %}
  533.                                     <a href="{{ path("dtc_article_afficher" , { 'id': p.id,'slug':slug }) }}">
  534.                                         {% set images = dtc_image_article.getImageDefaut(p.id) %}
  535.                                         {% if images[0] is defined %}
  536.                                             {# <img style="max-width:100%;" src="{{ asset(images[0].getUploadDir ~ '/' ~ p.id ~ '/' ~ images[0].url) | imagine_filter('400x300') }}" class="suggestion-img">#}
  537.                                             <img style="max-width:100%;" src="{{ url_image_distant }}/image/400/300/{{ images[0].ulid }}" class="suggestion-img">
  538.                                         {% else %}
  539.                                             <img style="max-width:100%;" src="{{ asset('images/defaut-img-product.jpg') }}" class="suggestion-img">
  540.                                         {% endif %}
  541.                                     </a>
  543.                                     <div class="p-2 text-center">
  544.                                         <div class="product-ref"><a href="{{ path("dtc_article_afficher" , { 'id': p.id,'slug':slug }) }}">Réf: {{ p.reference }}</a></div>
  545.                                         <strong> <a class="no-transform-text" href="{{ path("dtc_article_afficher" , { 'id': p.id,'slug':slug }) }}">{{ p.libelle }}</a></strong>
  547.                                         {% set remise = NULL %}
  549.                                         {% if app.user.id is defined and app.user.client.id is defined %}
  550.                                             {% set remise = dtc_article.getRemisesPossibleArticleClient({'article':p.id},app.user.client) %}
  551.                                         {% endif %}
  554.                                         {% if remise.remiseId is defined and remise.remiseId > 0 %}
  555.                                             <div style="margin-bottom:10px;">
  556.                                                 <div>
  557.                                                     <span class="old-price" style="font-size:1.2em;"><b>{{ p.prix_vente|price|raw }}&nbsp;€<span class="price-ttc">HT</span></b></span>
  558.                                                 </div>
  559.                                                 <div style="margin-top:5px;">
  560.                                                     <div class="discount" style="font-size:0.9em;display:inline;">Remise pro -{{ remise.valeur }}%</div>
  561.                                                 </div>
  562.                                                 <div style="margin-top:5px;">
  563.                                                     <span class=" new-price" style="font-size:1.2em;"><span style="font-size:1.4em;">{{ remise.prixRemise|price|raw }}&nbsp;€<span class="price-ttc">HT</span></span></span>
  564.                                                     <div class="both"></div>
  565.                                                 </div>
  566.                                             </div>
  567.                                             <div class="both"></div>
  568.                                         {% else %}
  570.                                             {% if app.user.id is defined  %}
  571.                                                 <p class="mb-0">{{ p.prix_vente|price|raw }}&nbsp;€ HT</p>
  572.                                             {% else %}
  573.                                                 {% set prix_ttc = dtc_article.getPrixVenteTtc(p.id) %}
  574.                                                 <p class="mb-0">{{ prix_ttc|price|raw }}&nbsp;&euro; TTC</p>
  575.                                             {% endif %}
  579.                                         {% endif %}
  582.                                         <div style="margin-top:10px;">
  583.                                             {% if app.user.id is defined  %}
  584.                                             <button data-id="{{ p.id }}" style="" class="btn-ajouter-panier btn btn-success btn-sm"><span class="fa fa-shopping-cart"></span> Ajouter</button>
  585.                                             {% else %}
  586.                                                 <a href="/login" class="btn btn-success btn-sm"><span class="fa fa-shopping-cart"></span> Ajouter</a>
  588.                                             {% endif %}
  589.                                         </div>
  590.                                     </div>
  591.                                 </div>
  592.                             </div>
  593.                         {% endfor %}
  595.                 </div>
  596.                 {% endif %}
  601.                     </div>
  602.                 </div>
  603.             </div>
  604.             <!-- /page content -->
  608. {% endblock %}