templates/Articles/Article/afficher.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block title %}{{ article.reference }} : {{ article.libelle }}{% endblock %}
  3. {% block body %}
  4.     <script src="{{ asset('js_ep/epobi_article.js') }}"></script>
  5.     <!-- page content -->
  6.     <style>
  7.         @keyframes bounce {
  8.             0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  9.             40% { transform: translateY(-5px); }
  10.             60% { transform: translateY(-3px); }
  11.         }
  12.     </style>
  13.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  14.     <div class="right_col fiche_produit" role="main">
  16.         {% set images = dtc_image_article.getImages(article.id) %}
  17.         {% set slug = dtc_article.getslugifArticle(article) %}
  18.         <div class="col-lg-6 container_gallery_fiche_produit">
  19.             <div class="gallery-container-fiche-produit">
  20.                 <!-- Galerie principale -->
  21.                 <div class="swiper main">
  22.                     <div class="swiper-wrapper">
  24.                         {% if images|length > 0 %}
  25.                             {% for im in images  %}
  26.                                 {% set slugImage = dtc_article.getslugifImage(im) %}
  27.                                 {#  <img  src="{{ asset(im.getUploadDir ~ '/' ~ article.id ~ '/' ~ im.url) | imagine_filter('800x600') }}" alt=""> #}
  28.                                 <div class="swiper-slide"><img src="{{ url_image_distant }}/image/800/600/{{ im.ulid }}/{{ slugImage }}" alt="{{ slug }}"></div>
  29.                             {% endfor %}
  30.                         {% else %}
  31.                             <div class="swiper-slide"><img  src="{{ asset('images/defaut-img-product.jpg') }}" alt="{{ slug }}"></div>
  32.                         {% endif %}
  33.                     </div>
  34.                 </div>
  36.                 <!-- Miniatures -->
  37.                 <div class="swiper thumbs">
  38.                     <div class="swiper-wrapper">
  39.                         {% if images|length > 0 %}
  40.                             {% for im in images  %}
  41.                                 {% set slugImage = dtc_article.getslugifImage(im) %}
  42.                                 {# <div class="swiper-slide"><img src="{{ asset(im.getUploadDir ~ '/' ~ article.id ~ '/' ~ im.url) | imagine_filter('800x600') }}" alt=""></div>#}
  43.                                 <div class="swiper-slide"><img  src="{{ url_image_distant }}/image/800/600/{{ im.ulid }}/{{ slugImage }}" alt="{{ slug }}"></div>
  44.                             {% endfor %}
  45.                         {% else %}
  46.                             <div class="swiper-slide"><img src="{{ asset('images/defaut-img-product.jpg') }}" alt="{{ slug }}"></div>
  47.                         {% endif %}
  48.                     </div>
  49.                     <!-- Flèches miniatures -->
  50.                     {% if images|length > 1 %}
  51.                     <div class="swiper-thumbs-button-prev">&#10094;</div>
  52.                     <div class="swiper-thumbs-button-next">&#10095;</div>
  53.                     {% endif %}
  54.                 </div>
  55.             </div>
  56.          </div>
  57.         <script>
  58.             // Miniatures (thumbs) Swiper
  59.             const thumbsSwiper = new Swiper('.thumbs', {
  60.                 spaceBetween: 10,
  61.                 slidesPerView: 'auto', // permet de garder des carrés responsives
  62.                 watchSlidesProgress: true,
  63.                 navigation: {
  64.                     nextEl: '.swiper-thumbs-button-next',
  65.                     prevEl: '.swiper-thumbs-button-prev',
  66.                 },
  67.             });
  68.             // Galerie principale
  69.             const mainSwiper = new Swiper('.main', {
  70.                 spaceBetween: 10,
  71.                 effect: 'fade',
  72.                 loop: true,
  73.                 thumbs: {
  74.                     swiper: thumbsSwiper,
  75.                 },
  76.             });
  77.         </script>
  78.         <div class="col-lg-6 _x_panel" style="">
  79.             <h1 class="no-transform-text dark" style="margin-top:0px;">{{ article.libelle }}</h1>
  80.             <h2 class="no-transform-text dark" style="margin-top:0px;">{{ article.libelleSecondaire }}</h2>
  82.             <div style="margin-top:20px;">Référence : <b style='letter-spacing : 1px;font-family:"Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif';>{{ article.reference }}</b></div>
  85.             {% set remise = NULL %}
  86.             {% if app.user.id is defined  %}
  87.                 {% set remise = dtc_article.getRemisesPossibleArticleClient({'article':article},app.user.client) %}
  88.             {% endif %}
  91.             {% if remise.remiseId is not defined or remise.remiseId == ""  %}
  92.             <div class="" style="padding-left : 0px;">
  93.                 <div class="_col-12 price-container" style="margin-top:15px;margin-bottom:30px;padding-top:5px;width:auto;">
  94.                     <span class="new-price">
  95.                         {% if app.user.id is defined  %}
  98.                             <span class="no-transform-text">Tarif net :</span>  {{ article.prixVente|price|raw }}&nbsp;€<span class="price-ttc">HT</span>
  100.                         {% else %}
  101.                             {% set prix_ttc = dtc_article.getPrixVenteTtc(article) %}
  102.                             <span class="no-transform-text">Tarif net :</span> {{ prix_ttc|price|raw }}&nbsp;€<span class="price-ttc">TTC</span>
  103.                         {% endif %}
  104.                     </span>
  105.                 </div>
  106.                 <div class="clearfix"></div>
  107.                 {% if article.marque.id is defined  != "" and article.marque.logo != "" %}
  108.                <img class="logo_marque_page_article" src="{{ asset('/uploads/logos/marques/' ~ article.marque.id ~ '/' ~ article.marque.logo) | imagine_filter('H400x300') }}">
  109.                 {% endif %}
  110.             </div>
  111.             {% endif %}
  112.             <div class="both"></div>
  113.             {% if remise.remiseId is defined and remise.remiseId > 0 %}
  114.             <div class="col-lg-12 col-12" style="padding-left : 0px;">
  115.                 <div class=" price-container" style="margin-top:20px;margin-bottom:35px;">
  116.                     <div style="font-size:1.4em;">
  117.                         <span class="droite new-price gray" style="font-size:1em;"><span style="font-size:0.8em;">Tarif&nbsp;public&nbsp;<br></span> {{ article.prixVente|price|raw }}&nbsp;€<span class="price-ttc">HT</span></span>
  118.                     </div>
  119.                     <div class="both"></div>
  120.                     <div style="line-height: 1.05;">
  121.                         <span class="droite new-price" style="color:white;"><span style="font-size:0.55em;color:white;">Tarif&nbsp;remisé <br></span> {{ remise.prixRemise|price|raw }}&nbsp;€<span class="price-ttc">HT</span></span>
  122.                     </div>
  123.                     <div style="_position:absolute;" class="discount">-{{ remise.valeur }}%</div>
  124.                 </div>
  125.                 {% if article.marque.id is defined  != "" and article.marque.logo != "" %}
  126.                     <div><img class="both logo_marque_page_article" src="{{ asset('/uploads/logos/marques/' ~ article.marque.id ~ '/' ~ article.marque.logo) | imagine_filter('H400x300') }}" style=""></div>
  127.                 {% endif %}
  128.             </div>
  129.             {% endif %}
  133.             <div style="_min-height:100px;">
  135.                 <div class="both"></div>
  136.                 <ul class="quick-list" style="margin-top:5px;">
  138.                     {% if article.marque.id is defined %}
  139.                     <li><i class="fa fa-star"></i>{{ article.marque.libelle }}</li>
  140.                     {% endif %}
  142.                     {% if article.poids > 0 %}
  143.                         <li ><i class="fa fa-dashboard"></i><span id="ouvrir-notices" style="cursor:pointer;">{{ article.poids }} Kg</span></li>
  144.                     {% endif %}
  146.                     {% if article.largeur > 0 and article.hauteur > 0 and article.profondeur > 0 %}
  147.                         <li ><i class="fa fa-arrows"></i><span id="ouvrir-notices" style="cursor:pointer;">{{ article.largeur }} cm x {{ article.hauteur }} cm x {{ article.profondeur }} cm</span></li>
  148.                     {% endif %}
  151.                     <li class="no-transform-text"><i class="fa fa-envelope"></i><a data-link="{{ path ("dtc_contact_modal", {"article":article.id} ) }}" class="open-modal-form" data-taille="" data-target="#blocModal" data-toggle="modal" href="#">Demander des informations sur ce produit</a> </li>
  153.                     {% if 1!=1 and article.documents|length > 0 %}
  154.                         <li ><i class="fa fa-file-pdf-o"></i><span id="ouvrir-notices" style="cursor:pointer;">Notices</span></li>
  155.                     {% endif %}
  156.                     {% if 1!=1 and articleOptions|length > 0 %}
  157.                         <li ><i class="fa fa-cubes"></i><span id="ouvrir-options" style="cursor:pointer;">Options</span></li>
  158.                     {% endif %}
  159.                     {% if 1!=1 and articleComplements|length > 0 %}
  160.                         <li ><i class="fa fa-cubes"></i><span id="ouvrir-complements" style="cursor:pointer;">Compléments</span></li>
  161.                     {% endif %}
  162.                     {% if 1!=1 and articleComposants|length > 0 %}
  163.                         <li ><i class="fa fa-cubes"></i><span id="ouvrir-composants" style="cursor:pointer;">Composants</span></li>
  164.                     {% endif %}
  169.                     {% if article.dispo > 0 %}
  170.                         <li class="green etat_stock_en_stock"><i class="fa fa-circle etat_stock_en_stock"></i>En stock ({{ article.dispo }})</li>
  171.                     {% else %}
  172.                         {% set datesProchainesDispo = dtc_article.getDatesProchainesDispo(article.id) %}
  173.                         {% if datesProchainesDispo|length > 0 %}
  174.                             <li class="yellow etat_stock_reappro"><i class="fa fa-circle yellow etat_stock_reappro"></i>En approvisionement :
  175.                                 {% for d in datesProchainesDispo %}
  176.                                     <div>{{ d.quantite }} entrée{% if d.quantite > 1 %}s{% endif %} en stock prévue{% if d.quantite > 1 %}s{% endif %} {% if d.date != "" %}le  {{ d.date|date("d/m/Y") }}{% else %} (date à confirmer){% endif %} </div>
  177.                                 {% endfor %}
  178.                             </li>
  179.                         {% else %}
  180.                             <li class="etat_stock_sur_commande orange"><i class="etat_stock_sur_commande fa fa-circle orange"></i>Sur commande</li>
  181.                         {% endif %}
  182.                     {% endif %}
  187.                     {% if articleComplements|length > 0 %}
  188.                     <li class="off"><a id="articleComplements_{{ article.id }}" data-link="{{ path ("dtc_article_complement_modal", {"id":article.id} ) }}" class="open-modal-form" data-taille="modal-lg" data-target="#blocModal" data-toggle="modal" href="#"></a></li>
  189.                     {% endif %}
  191.                 </ul>
  192.                 <style>
  193.                     .pdf-card img {
  195.                         object-fit: cover;
  196.                         transition: transform 0.3s;
  198.                     }
  199.                     .pdf-card:hover img {
  200.                         transform: scale(1.05);
  201.                     }
  202.                     .pdf-card img {
  203.                         width: 100%;
  204.                         max-height: 150px; /* limite sans déformer */
  205.                         min-height: 150px; /* limite sans déformer */
  206.                         height: auto;
  207.                     }
  208.                 </style>
  209.                 {% if catalogues|length >0  %}
  210.                     {% for p in catalogues %}
  211.                         {% if p.document.dossier == "catalogue" or  p.document.dossier == "fiche" %}
  213.                             {% set url_img = asset('uploads/societe/'~p.document.dossier~'/'~p.document.url) %}
  214.                             {% set url_img = url_img|replace({".pdf":".jpg"}) %}
  217.                             <div class="bloc-pdf-catalogue col-2 col-sm-4 col-md-3 col-lg-2 d-flex mb-1">
  218.                                 <div class="card pdf-card _h-100 w-100">
  219.                                     <a title="Télécharger le catalogue" target="_blank" href="{{ asset('uploads/societe/'~p.document.dossier~'/'~p.document.url) }}">
  220.                                         <img src="{{ url_img }}" class="img-responsive-custom card-img-top" alt="Miniature PDF">
  221.                                     </a>
  222.                                 </div>
  223.                             </div>
  227.                         {% endif %}
  228.                     {% endfor %}
  229.                     <div class="both"></div>
  230.                 {% endif %}
  233.             </div>
  236.             <div class="bloc_add_panier d-flex align-items-stretch mt-3" style="width:100%; max-width:320px;">
  237.                 <input id="quantite" name="quantite" type="number" class="mr-2 text-center form-control" style="width:100px;" value="1">
  238.                 {% if app.user.id is defined %}
  239.                 <button data-id="{{ article.id }}" href="" style="width:200px;" class="btn-ajouter-panier gauche bottom-link btn btn-success">
  240.                     <span class="fa fa fa-shopping-cart"></span> Ajouter au panier
  241.                 </button>
  242.                 {% else  %}
  243.                     <a href="/login" style="width:200px;" class="btn-ajouter-panier gauche bottom-link btn btn-success"><span class="fa fa fa-shopping-cart"></span> Ajouter au panier</a>
  244.                 {% endif %}
  246.             </div>
  247.         </div>
  253.         <div class="col-lg-12 x_panel container_tab_fiche_produit" style="margin-top:15px;">
  254.             <div class="tabs-scroll">
  255.             <ul class="nav nav-tabs bar_tabs " id="myTab" role="tablist">
  256.                 <li class="nav-item">
  257.                     <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
  258.                 </li>
  259.                 <li class="nav-item">
  260.                     <a class="nav-link" id="applications-tab" data-toggle="tab" href="#applications" role="tab" aria-controls="applications" aria-selected="false">Compatibilité</a>
  261.                 </li>
  262.                 {% if
  263.                     article.referenceAppel1 != ""
  264.                     or
  265.                     article.referenceAppel2 != ""
  266.                     or
  267.                     article.referenceAppel3 != ""
  268.                     or
  269.                     article.referenceAppel4 != ""
  270.                     or
  271.                     article.referenceAppel5 != ""
  272.                     or
  273.                     article.referenceAppel6 != ""
  274.                     or
  275.                     article.referenceAppel7 != ""
  276.                     or
  277.                     article.referenceAppel8 != ""
  278.                     or
  279.                     article.referenceAppel9 != ""
  280.                     or
  281.                     article.referenceAppel10 != ""
  282.                 %}
  283.                 <li class="nav-item">
  284.                     <a class="nav-link" id="equivalences-tab" data-toggle="tab" href="#equivalences" role="tab" aria-controls="equivalences" aria-selected="false">Équivalences</a>
  285.                 </li>
  286.                 {% endif %}
  287.                 {% if article.documents|length > 0 %}
  288.                 <li class="nav-item">
  289.                     <a class="nav-link" id="notices-tab" data-toggle="tab" href="#notices" role="tab" aria-controls="notices" aria-selected="false">Notices ({{ article.documents|length }})</a>
  290.                 </li>
  291.                 {% endif %}
  292.                 {% if articleOptions|length > 0 %}
  293.                 <li class="nav-item">
  294.                     <a class="nav-link" id="options-tab" data-toggle="tab" href="#options" role="tab" aria-controls="options" aria-selected="false">Options ({{ articleOptions|length }})</a>
  295.                 </li>
  296.                 {% endif %}
  297.                 {% if articleComplements|length > 0 %}
  298.                 <li class="nav-item">
  299.                     <a class="nav-link" id="complements-tab" data-toggle="tab" href="#complements" role="tab" aria-controls="complements" aria-selected="false">Compléments ({{ articleComplements|length }})</a>
  300.                 </li>
  301.                 {% endif %}
  303.                 {% if articleComposants|length > 0 %}
  304.                 <li class="nav-item">
  305.                     <a class="nav-link" id="composants-tab" data-toggle="tab" href="#composants" role="tab" aria-controls="composants" aria-selected="false">Composants ({{ articleComposants|length }})</a>
  306.                 </li>
  307.                 {% endif %}
  309.             </ul>
  310.             </div>
  311.             <div class="tab-content" id="myTabContent">
  312.                 <div class="no-transform-text tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab" style="padding-bottom:10px;">
  313.                     {{ article.description|raw }}
  314.                 </div>
  316.                 {% if articleComposants|length > 0 %}
  317.                 <div class=" tab-pane fade" id="composants" role="tabpanel" aria-labelledby="composants-tab">
  318.                     <ul id="liste_composants" class="list-group">
  319.                         {% for ac in articleComposants %}
  320.                         <!-- Composant 1 -->
  321.                         <li class="list-group-item">
  322.                             {% set slug = dtc_article.getslugifArticle(ac.article) %}
  323.                             <a href="{{ path("dtc_article_afficher" , { 'id': ac.article.id,'slug':slug }) }}">
  324.                                 {% set images = dtc_image_article.getImageDefaut(ac.article.id) %}
  325.                                 {% if images[0] is defined %}
  326.                                     {% set slugImage = dtc_article.getslugifImage(images[0].id) %}
  327.                                    {# <img class="card-img-top" alt="{{ ac.article.libelle }}" src="{{ asset(images[0].getUploadDir ~ '/' ~ ac.article.id ~ '/' ~ images[0].url) | imagine_filter('400x300') }}" style="max-width:100%;">#}
  328.                                     <img class="card-img-top" alt="{{ ac.article.libelle }}" src="{{ url_image_distant }}/image/400/300/{{ images[0].ulid }}/{{ slugImage }}" style="max-width:100%;">
  329.                                 {% else %}
  330.                                     <img class="card-img-top" src="{{ asset('images/defaut-img-product.jpg') }}" style="max-width:100%;">
  331.                                 {% endif %}
  332.                             </a>
  333.                             <div class="component-text flex-grow-1">
  334.                                 <div class="text-muted">  <a href="{{ path("dtc_article_afficher" , { 'id': ac.article.id,'slug':slug }) }}">Réf: {{ ac.article.reference }}</a></div>
  335.                                 <div class="no-transform-text dark">  <a href="{{ path("dtc_article_afficher" , { 'id': ac.article.id,'slug':slug }) }}">{{ ac.article.libelle }}</a></div>
  336.                             </div>
  337.                             <span class="badge badge-info badge-qty">Quantité: {{ ac.quantite }}</span>
  338.                         </li>
  339.                         {% endfor %}
  341.                     </ul>
  342.                 </div>
  343.                 {% endif %}
  344.                 <div class="tab-pane fade" id="applications" role="tabpanel" aria-labelledby="applications-tab">
  346.                     {% if article.universel == 1 %}
  347.                         <div style="padding-bottom:10px;">Produit compatible avec tous les types de véhicules.</div>
  348.                     {% endif %}
  350.                     {% set applications = dtc_article.getApplicationsArticle(article) %}
  351.                     {% if applications|length > 0 %}
  352.                         {% for app in applications %}
  353.                             <div>{{ app.libelle_marque }}</div>
  354.                             {% if app.modeles|length > 0 %}
  355.                                 <ul>
  356.                                     {% for m in app.modeles %}
  357.                                         <li><b>{{ m.libelle_modele }}</b></li>
  358.                                         {% if m.types|length > 0 %}
  359.                                             <ul>
  360.                                                 {% for t in m.types %}
  361.                                                     <li>{{ t.libelle_type }}</li>
  362.                                                 {% endfor  %}
  363.                                             </ul>
  364.                                         {% endif %}
  365.                                     {% endfor %}
  366.                                 </ul>
  367.                             {% endif  %}
  368.                             <div class="both" style="height:10px;"></div>
  369.                         {% endfor %}
  370.                     {% endif %}
  371.                 </div>
  372.                 <div class="tab-pane fade" id="options" role="tabpanel" aria-labelledby="options-tab">
  373.                     {% if articleOptions|length > 0 %}
  374.                     <div class="row">
  375.                         {% for o in articleOptions %}
  376.                             <div class="col-lg-2 col-md-6 mb-4 col-6">
  377.                                 <div class="card-options-fiche-produit h-100 shadow-sm">
  378.                                     {% set slug = dtc_article.getslugifArticle(o.enfant) %}
  379.                                     <a href="{{ path("dtc_article_afficher" , { 'id': o.enfant.id,'slug':slug }) }}">
  380.                                     {% set images = dtc_image_article.getImageDefaut(o.enfant.id) %}
  381.                                     {% if images[0] is defined %}
  382.                                         {# <img class="card-img-top" alt="{{ o.enfant.libelle }}" src="{{ asset(images[0].getUploadDir ~ '/' ~ o.enfant.id ~ '/' ~ images[0].url) | imagine_filter('400x300') }}" style="max-width:100%;">#}
  384.                                         {% set slugImage = dtc_article.getslugifImage(images[0].id) %}
  385.                                         {# <div class="swiper-slide"><img src="{{ asset(im.getUploadDir ~ '/' ~ article.id ~ '/' ~ im.url) | imagine_filter('800x600') }}" alt=""></div>#}
  386.                                         <img class="card-img-top" alt="{{ o.enfant.libelle }}" src="{{ url_image_distant }}/image/400/300/{{ images[0].ulid }}/{{ slugImage }}" style="max-width:100%;">
  387.                                     {% else %}
  388.                                         <img class="card-img-top" src="{{ asset('images/defaut-img-product.jpg') }}" style="max-width:100%;">
  389.                                     {% endif %}
  390.                                     </a>
  391.                                     <div class="card-body text-center">
  392.                                         <div class="d-flex align-items-center justify-content-center mb-2">
  393.                                             <span class="product-ref"><a href="{{ path("dtc_article_afficher" , { 'id': o.enfant.id,'slug':slug }) }}">Réf: {{ o.enfant.reference }}</a></span>
  394.                                         </div>
  395.                                         <h5 class="card-title dark" style="font-size:1em;"><a href="{{ path("dtc_article_afficher" , { 'id': o.enfant.id,'slug':slug }) }}">{{ o.enfant.libelle }}</a></h5>
  398.                                         {% set remise = NULL %}
  400.                                         {% if app.user.id is defined  %}
  401.                                             {% set remise = dtc_article.getRemisesPossibleArticleClient({'article':o.enfant},app.user.client) %}
  402.                                         {% endif %}
  405.                                         {% if remise.remiseId is defined and remise.remiseId > 0 %}
  406.                                             <div style="margin-bottom:10px;">
  407.                                                 <div class="old-price-parent">
  408.                                                     <span class="old-price" style="font-size:1.2em;"><b>{{ o.enfant.prixVente|price|raw }}&nbsp;€<span class="price-ttc">HT</span></b></span>
  409.                                                 </div>
  410.                                                 <div style="margin-top:5px;">
  411.                                                     <div class="discount" style="font-size:0.8em;display:inline;">Remise pro -{{ remise.valeur }}%</div>
  412.                                                 </div>
  413.                                                 <div style="margin-top:5px;">
  414.                                                     <span class=" new-price" style="font-size:1.2em;"><span style="font-size:1.4em;">{{ remise.prixRemise|price }}&nbsp;€<span class="price-ttc">HT</span></span></span>
  415.                                                     <div class="both"></div>
  416.                                                 </div>
  417.                                             </div>
  418.                                             <div class="both"></div>
  419.                                         {% else %}
  421.                                             <p class="card-text">
  422.                                             {% if app.user.id is defined  %}
  423.                                                 <span class="card-price">{{ o.enfant.prixVente|price|raw }}&nbsp;&euro; HT</span>
  424.                                             {% else %}
  425.                                                 {% set prix_ttc = dtc_article.getPrixVenteTtc(o.enfant) %}
  426.                                                 <span class="card-price">{{ prix_ttc|price|raw }}&nbsp;&euro; TTC</span>
  427.                                             {% endif %}
  428.                                             </p>
  429.                                         {% endif %}
  432.                                         {% if app.user.id is defined %}
  433.                                             <button data-texte="<span class='fa fa fa-shopping-cart'></span> Ajouter" data-id="{{ o.enfant.id }}" style="" class="btn-ajouter-panier btn btn-success btn-sm"><span class="fa fa fa-shopping-cart"></span> Ajouter</button>
  434.                                         {% else  %}
  435.                                             <a href="/login" class="btn-ajouter-panier btn btn-success btn-sm"><span class="fa fa fa-shopping-cart"></span> Ajouter</a>
  437.                                         {% endif %}
  442.                                     </div>
  443.                                 </div>
  444.                             </div>
  445.                         {% endfor %}
  446.                     </div>
  447.                     {% endif %}
  448.                 </div>
  450.                 <div class="tab-pane fade" id="complements" role="tabpanel" aria-labelledby="complements-tab">
  451.                     {% if articleComplements|length > 0 %}
  452.                         <div class="row">
  453.                             {% for o in articleComplements %}
  454.                                 <div class="col-lg-2 col-md-6 mb-4 col-6">
  455.                                     <div class="card-options-fiche-produit h-100 shadow-sm">
  456.                                         {% set slug = dtc_article.getslugifArticle(o.enfant) %}
  457.                                         <a href="{{ path("dtc_article_afficher" , { 'id': o.enfant.id,'slug':slug }) }}">
  458.                                             {% set images = dtc_image_article.getImageDefaut(o.enfant.id) %}
  459.                                             {% if images[0] is defined %}
  460.                                                 {% set slugImage = dtc_article.getslugifImage(images[0].id) %}
  461.                                                 <img class="card-img-top" alt="{{ o.enfant.libelle }}" src="{{ url_image_distant }}/image/400/300/{{ images[0].ulid }}/{{ slugImage }}" style="max-width:100%;">
  462.                                             {% else %}
  463.                                                 <img class="card-img-top" src="{{ asset('images/defaut-img-product.jpg') }}" style="max-width:100%;">
  464.                                             {% endif %}
  465.                                         </a>
  467.                                         <div class="card-body text-center">
  468.                                             <div class="d-flex align-items-center justify-content-center mb-2">
  469.                                                 <span class="product-ref"><a href="{{ path("dtc_article_afficher" , { 'id': o.enfant.id,'slug':slug }) }}">Réf: {{ o.enfant.reference }}</a></span>
  470.                                             </div>
  471.                                             <h5 class="card-title dark" style="font-size:1em;"><a href="{{ path("dtc_article_afficher" , { 'id': o.enfant.id,'slug':slug }) }}">{{ o.enfant.libelle }}</a></h5>
  474.                                             {% set remise = NULL %}
  476.                                             {% if app.user.id is defined  %}
  477.                                                 {% set remise = dtc_article.getRemisesPossibleArticleClient({'article':o.enfant},app.user.client) %}
  478.                                             {% endif %}
  481.                                             {% if remise.remiseId is defined and remise.remiseId > 0 %}
  482.                                                 <div style="margin-bottom:10px;">
  483.                                                     <div>
  484.                                                         <span class="old-price" style="font-size:1.2em;"><b>{{ o.enfant.prixVente|price|raw }}&nbsp;€<span class="price-ttc">HT</span></b></span>
  485.                                                     </div>
  486.                                                     <div style="margin-top:5px;">
  487.                                                         <div class="discount" style="font-size:0.8em;display:inline;">Remise pro -{{ remise.valeur }}%</div>
  488.                                                     </div>
  489.                                                     <div style="margin-top:5px;">
  490.                                                         <span class=" new-price" style="font-size:1.2em;"><span style="font-size:1.4em;">{{ remise.prixRemise|price }}&nbsp;€<span class="price-ttc">HT</span></span></span>
  491.                                                         <div class="both"></div>
  492.                                                     </div>
  493.                                                 </div>
  494.                                                 <div class="both"></div>
  495.                                             {% else %}
  496.                                                 <p class="card-text">
  499.                                                     {% if app.user.id is defined  %}
  500.                                                         <span class="card-price">{{ o.enfant.prixVente|price|raw }}&nbsp;&euro; HT</span>
  501.                                                     {% else %}
  502.                                                         {% set prix_ttc = dtc_article.getPrixVenteTtc(o.enfant) %}
  503.                                                         <span class="card-price">{{ prix_ttc|price|raw }}&nbsp;&euro; TTC</span>
  504.                                                     {% endif %}
  508.                                                 </p>
  509.                                             {% endif %}
  511.                                             <input id="quantite" name="quantite" type="hidden" class="gauche text-center form-control" style="width:100%;" value="{{ o.multiple}}">
  512.                                             <div class="both"></div>
  515.                                             {% if app.user.id is defined %}
  516.                                                 <button data-texte="<span class='fa fa fa-shopping-cart'></span> Ajouter" data-id="{{ o.enfant.id }}" style="" class="btn-ajouter-panier btn btn-success btn-sm"><span class="fa fa fa-shopping-cart"></span> Ajouter</button>
  517.                                             {% else  %}
  518.                                                 <a href="/login" class="btn-ajouter-panier btn btn-success btn-sm"><span class="fa fa fa-shopping-cart"></span> Ajouter</a>
  519.                                             {% endif %}
  522.                                         </div>
  523.                                     </div>
  524.                                 </div>
  525.                             {% endfor %}
  526.                         </div>
  527.                     {% endif %}
  528.                 </div>
  532.                 <div class="tab-pane fade" id="notices" role="tabpanel" aria-labelledby="notices-tab">
  534.                     {% if article.documents|length > 0 %}
  535.                         <ul class="list-group list-group-flush liste_notices">
  536.                         {% for im in article.documents  %}
  537.                             <li class="list-group-item d-flex justify-content-between align-items-center file-item">
  538.                                 <div><i class="fa fa-file-pdf-o  fa-file-pdf file-icon mr-2"></i> {{ im.url }}</div>
  539.                                 <a href="{{ asset(im.getUploadDir ~ '/' ~ article.id ~ '/' ~ im.url)  }}" class="btn btn-outline-primary btn-sm" download>
  540.                                     <i class="fa fa-download"></i> Télécharger
  541.                                 </a>
  542.                             </li>
  543.                         {% endfor %}
  544.                     </ul>
  545.                     {% endif %}
  548.                 </div>
  549.                 <div class="tab-pane fade" id="equivalences" role="tabpanel" aria-labelledby="equivalences-tab">
  551.                     <div id="liste_ref_equivalances">
  552.                         <ul class="list-group list-group-flush">
  554.                             {% if article.referenceAppel1  != "" %}
  555.                                 <li class="list-group-item">
  556.                                     <div class="list-left">
  557.                                         <div>
  558.                                             <p class="item-title">{{ article.referenceAppel1 }}</p>
  559.                                            {#  <p class="item-sub">.</p> #}
  560.                                         </div>
  561.                                     </div>
  562.                                 </li>
  563.                             {% endif %}
  565.                             {% if article.referenceAppel2  != "" %}
  566.                                 <li class="list-group-item">
  567.                                     <div class="list-left">
  568.                                         <div>
  569.                                             <p class="item-title">{{ article.referenceAppel2 }}</p>
  571.                                         </div>
  572.                                     </div>
  573.                                 </li>
  574.                             {% endif %}
  576.                             {% if article.referenceAppel3  != "" %}
  577.                                 <li class="list-group-item">
  578.                                     <div class="list-left">
  579.                                         <div>
  580.                                             <p class="item-title">{{ article.referenceAppel3 }}</p>
  581.                                             <p class="item-sub">.</p>
  582.                                         </div>
  583.                                     </div>
  584.                                 </li>
  585.                             {% endif %}
  587.                             {% if article.referenceAppel4  != "" %}
  588.                                 <li class="list-group-item">
  589.                                     <div class="list-left">
  590.                                         <div>
  591.                                             <p class="item-title">{{ article.referenceAppel4 }}</p>
  592.                                             <p class="item-sub">.</p>
  593.                                         </div>
  594.                                     </div>
  595.                                 </li>
  596.                             {% endif %}
  598.                             {% if article.referenceAppel5  != "" %}
  599.                                 <li class="list-group-item">
  600.                                     <div class="list-left">
  601.                                         <div>
  602.                                             <p class="item-title">{{ article.referenceAppel5 }}</p>
  604.                                         </div>
  605.                                     </div>
  606.                                 </li>
  607.                             {% endif %}
  609.                             {% if article.referenceAppel6  != "" %}
  610.                                 <li class="list-group-item">
  611.                                     <div class="list-left">
  612.                                         <div>
  613.                                             <p class="item-title">{{ article.referenceAppel6 }}</p>
  615.                                         </div>
  616.                                     </div>
  617.                                 </li>
  618.                             {% endif %}
  620.                             {% if article.referenceAppel7  != "" %}
  621.                                 <li class="list-group-item">
  622.                                     <div class="list-left">
  623.                                         <div>
  624.                                             <p class="item-title">{{ article.referenceAppel7 }}</p>
  626.                                         </div>
  627.                                     </div>
  628.                                 </li>
  629.                             {% endif %}
  631.                             {% if article.referenceAppel8  != "" %}
  632.                                 <li class="list-group-item">
  633.                                     <div class="list-left">
  634.                                         <div>
  635.                                             <p class="item-title">{{ article.referenceAppel8 }}</p>
  637.                                         </div>
  638.                                     </div>
  639.                                 </li>
  640.                             {% endif %}
  642.                             {% if article.referenceAppel9  != "" %}
  643.                                 <li class="list-group-item">
  644.                                     <div class="list-left">
  645.                                         <div>
  646.                                             <p class="item-title">{{ article.referenceAppel9 }}</p>
  648.                                         </div>
  649.                                     </div>
  650.                                 </li>
  651.                             {% endif %}
  653.                             {% if article.referenceAppel10  != "" %}
  654.                                 <li class="list-group-item">
  655.                                     <div class="list-left">
  656.                                         <div>
  657.                                             <p class="item-title">{{ article.referenceAppel10 }}</p>
  659.                                         </div>
  660.                                     </div>
  661.                                 </li>
  662.                             {% endif %}
  663.                         </ul>
  664.                     </div>
  665.                 </div>
  666.             </div>
  667.         </div>
  668.     </div>
  669.     <!-- /page content -->
  670. {% endblock %}