templates/produit/info_produit.html.twig line 1

Open in your IDE?
  1. <div class="accordion" id="accordionInfoProduit">
  3.     {# Avantages / Plus Produit#}
  4.     <div class="card">
  5.         <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  6.             Avantages produits
  7.         </div>
  8.         <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionInfoProduit">
  9.             <div class="card-body">
  10.                 {{ produit.avantage|raw }}
  11.             </div>
  12.         </div>
  13.     </div>
  15.     {# Caractéristiques / Descriptif technique #}
  16.     <div class="card">
  17.         <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  18.             Descriptif
  19.         </div>
  20.         <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionInfoProduit">
  21.             <div class="card-body">
  22.                 {{ produit.caracteristique|raw }}
  23.             </div>
  24.         </div>
  25.     </div>
  27.     {# Nuancier (Remplissage + Profil) #}
  28.     {% if produit.remplissageNuanciers is not empty %}
  29.         <div class="card">
  30.             <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  31.                 Nuancier
  32.             </div>
  33.             <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionInfoProduit">
  34.                 <div class="card-body">
  35.                     {% if produit.profilGeometries is not empty %}
  36.                         <div class="mb-5">
  37.                             <ul class="nav row">
  38.                                 <li class="list-unstyled"><button  data-toggle="tab" href="#remplissageMobile" class="active">Nuancier décors</button></li>
  39.                                 <li class="list-unstyled ml-3"><button data-toggle="tab" href="#profilMobile">Design & finitions</button></li>
  40.                             </ul>
  41.                         </div>
  42.                     {% endif %}
  43.                     <div class="tab-content">
  44.                         {# Nuancier #}
  45.                         <div id="remplissageMobile" class="tab-pane fade in active show">
  46.                             {% for nuancier in produit.remplissageNuanciers %}
  47.                                 <div class="col-12 mb-3 mt-5 nuancier-cat">
  48.                                     <span>{{ nuancier.nom }}</span>
  49.                                 </div>
  50.                                 <div class="row text-center text-lg-left">
  51.                                     {% for decor in nuancier.decors %}
  52.                                         <div class="col-3 col-lg-2 mb-2 text-center">
  53.                                             <div class="nuancier border">
  54.                                                 <img class="img-fluid" src="{{ decor.code|raw }}" alt="{{ decor.nom }}">
  55.                                             </div>
  56.                                             {# <img data-titre="{{ decor.nom }}" class="myImg img-fluid img-thumbnail" src="{{ urlImageDecor ~ decor.code }}" alt="{{ decor.code }}" title="{{ decor.nom }}"> #}
  57.                                             <small>{{ decor.nom }}</small>
  58.                                         </div>
  59.                                     {% endfor %}
  60.                                 </div>
  61.                             {% endfor %}
  62.                         </div>
  63.                         {# Fin Nuancier #}
  64.                         {# Profil #}
  65.                         {% if produit.profilGeometries is not empty %}
  66.                             <div id="profilMobile" class="tab-pane fade">
  67.                                 {% for profil in produit.profilGeometries %}
  68.                                     <div class="col-12 nuancier-cat mb-2">
  69.                                         <span>{{ profil.nom }}</span>
  70.                                     </div>
  71.                                     <div class="row">
  72.                                         <div class="col-4 col-lg-2 my-4 text-center">
  73.                                             <div class="nuancier">
  74.                                                 <img class="img-fluid" src="{{ profil.code|raw }}" alt="{{ profil.nom }}">
  75.                                             </div>
  76.                                         </div>
  77.                                     </div>
  78.                                     <div class="row text-center text-lg-left mb-5">
  79.                                         {% for couleur in profil.profilCouleurs %}
  80.                                             <div class="col-3 col-lg-2 text-center mb-2">
  81.                                                 <div class="nuancier border">
  82.                                                     <img class="img-fluid" src="{{ couleur.code|raw }}" alt="{{ couleur.nom }}">
  83.                                                 </div>
  84.                                                 {# <img data-titre="{{ couleur.nom }}" class="myImg img-fluid img-thumbnail" src="{{ urlImageFinition ~ couleur.code }}" alt="{{ couleur.code }}" title="{{ couleur.nom }}"> #}
  85.                                                 <small>{{ couleur.nom }}</small>
  86.                                             </div>
  87.                                         {% endfor %}
  88.                                     </div>
  89.                                 {% endfor %}
  90.                             </div>
  91.                         {% endif %}
  92.                         {# Fin Porfil #}
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.     {% endif %}
  98.     {# Dimensions #}
  99.     {% if produit.hauteurFixe is not empty or produit.largeurFixe is not empty or produit.profondeurFixe is not empty or produit.hauteurMin is not empty or produit.largeurMin is not empty or produit.profondeurMin is not empty or produit.hauteurMax is not empty or produit.largeurMax is not empty or produit.profondeurMax is not empty %}
  100.         <div class="card">
  101.             <div class="card-header" id="headingFour" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
  102.                 Dimensions
  103.             </div>
  104.             <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionInfoProduit">
  105.                 <div class="card-body">
  106.                     <table class="table">
  107.                         <thead>
  108.                             <tr>
  109.                                 <th></th>
  110.                                 {% if produit.hauteurFixe is not empty or produit.largeurFixe is not empty or produit.profondeurFixe is not empty %}
  111.                                     <th>Fixe</th>
  112.                                 {% else %}
  113.                                     <th></th>    
  114.                                 {% endif %}
  115.                                 {% if produit.hauteurMin is not empty or produit.largeurMin is not empty or produit.profondeurMin is not empty %}
  116.                                     <th>Minimum</th>
  117.                                 {% else %}
  118.                                     <th></th>  
  119.                                 {% endif %}
  120.                                 {% if produit.hauteurMax is not empty or produit.largeurMax is not empty or produit.profondeurMax is not empty %}
  121.                                     <th>Maximum</th>
  122.                                 {% else %}
  123.                                     <th></th>  
  124.                                 {% endif %}
  125.                             </tr>
  126.                         </thead>
  127.                         <tbody>
  128.                             {% if produit.hauteurFixe is not empty or produit.hauteurMin is not empty or produit.hauteurMax is not empty %}
  129.                                 <tr>
  130.                                     <th>Hauteur</th>
  131.                                     <td>{{ produit.hauteurFixe|raw }}</td>
  132.                                     <td>{{ produit.hauteurMin|raw }}</td>
  133.                                     <td>{{ produit.hauteurMax|raw }}</td>
  134.                                 </tr>
  135.                             {% endif %}
  136.                             {% if produit.largeurFixe is not empty or produit.largeurMin is not empty or produit.largeurMax is not empty %}
  137.                                 <tr>
  138.                                     <th>Largeur</th>
  139.                                     <td>{{ produit.largeurFixe|raw }}</td>
  140.                                     <td>{{ produit.largeurMin|raw }}</td>
  141.                                     <td>{{ produit.largeurMax|raw }}</td>
  142.                                 </tr>
  143.                             {% endif %}
  144.                             {% if produit.profondeurFixe is not empty or produit.profondeurMin is not empty or produit.profondeurMax is not empty %}
  145.                                 <tr>
  146.                                     <th>Profondeur</th>
  147.                                     <td>{{ produit.profondeurFixe|raw }}</td>
  148.                                     <td>{{ produit.profondeurMin|raw }}</td>
  149.                                     <td>{{ produit.profondeurMax|raw }}</td>
  150.                                 </tr>
  151.                             {% endif %}
  152.                         </tbody>
  153.                     </table>
  154.                 </div>
  155.             </div>
  156.         </div>
  157.     {% endif %}
  158.     {# Notices  #}
  159.     {% if produit.notices is not empty %}
  160.         <div class="card">
  161.             <div class="card-header" id="headingFive" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
  162.                 Notices
  163.             </div>
  164.             <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionInfoProduit">
  165.                 <div class="card-body">
  166.                     <div class="row">
  167.                         {% for notice in produit.notices %}
  168.                             <div class="col-6 col-lg-4 mb-3">
  169.                                 <div class="d-flex align-items-start flex-column h-100">
  170.                                     <div class="titre-pdf">
  171.                                         {{ notice.titre|raw }}
  172.                                     </div>
  173.                                     <!-- <br /> -->
  174.                                     <div class="texte-pdf">
  175.                                         {{ notice.description|raw }}
  176.                                     </div>
  177.                                     <div class="mt-auto pdf notices">
  178.                                         {{ notice.url|raw }}
  179.                                     </div>
  180.                                 </div>
  181.                             </div>
  182.                         {% endfor %}
  183.                     </div>
  184.                 </div>
  185.             </div>
  186.         </div>
  187.     {% endif %}
  189.     {# Vidéo #}
  190.     {% if produit.videos is not empty %}
  191.         <div class="card">
  192.             <div class="card-header" id="headingSix" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
  193.                 Video
  194.             </div>
  195.             <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordionInfoProduit">
  196.                 <div class="card-body">
  197.                     {# Toggle titre Video #}
  198.                     <ul class="nav d-flex justify-content-center">
  199.                         {% for video in produit.videos %}
  200.                             <li class="list-unstyled"><button class="px-3 mx-1 {% if loop.index == 1 %}active{% endif %}" data-toggle="tab" href="#videoMobile-{{ video.id }}">{{ loop.index }}</button></li>
  201.                         {% endfor %}
  202.                     </ul>
  203.                     <div class="tab-content">
  204.                         {# urls vidéos #}
  205.                         {% for video in produit.videos %}
  206.                                 <div id="videoMobile-{{ video.id }}" class="tab-pane fade in {% if loop.index == 1 %}active show{% endif %}">
  207.                                     <div class="text-center mt-2 ml-2">
  208.                                         {% if video.url starts with "https://media." %}
  209.                                             <div class="embed-responsive embed-responsive-16by9 border">
  210.                                                 <video controls controlsList="nodownload">
  211.                                                     <source src="{{ video.url|raw }}" type="video/mp4">
  212.                                                     Votre navigateur ne supporte pas l&#39;affichage des videos embarqu&eacute;s.
  213.                                                 </video>
  214.                                             </div>
  215.                                         {% else %}
  216.                                             <div class="embed-responsive embed-responsive-16by9 border">
  217.                                                 <iframe 
  218.                                                     src="{{ video.url|raw }}" 
  219.                                                     width="640" 
  220.                                                     height="360" 
  221.                                                     frameborder="0" 
  222.                                                     allowfullscreen
  223.                                                     autoplay="false"
  224.                                                 >
  225.                                                 </iframe>
  226.                                             </div> 
  227.                                         {% endif %}
  228.                                         </div>
  229.                                 </div>
  230.                         {% endfor %}
  231.                     </div>
  232.                 </div>
  233.             </div>
  234.         </div>
  235.     {% endif %}
  236.     {# PDFs  #}
  237.     {% if produit.pdfs is not empty %}
  238.         <div class="card">
  239.             <div class="card-header" id="headingSeven" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
  240.                 Documentations
  241.             </div>
  242.             <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordionInfoProduit">
  243.                 <div class="card-body">
  244.                     <div class="row">
  245.                         {% for pdf in produit.pdfs %}
  246.                             <div class="col-6 col-lg-4 mb-3">
  247.                                 <div class="d-flex align-items-start flex-column h-100">
  248.                                     <div class="titre-pdf">
  249.                                         {{ pdf.titre|raw }}
  250.                                     </div>
  251.                                     <!-- <br /> -->
  252.                                     <div class="texte-pdf">
  253.                                         {{ pdf.description|raw }}
  254.                                     </div>
  255.                                     <div class="mt-auto pdf notices">
  256.                                         {{ pdf.url|raw }}
  257.                                     </div>
  258.                                 </div>
  259.                             </div>
  260.                         {% endfor %}
  261.                     </div>
  262.                 </div>
  263.             </div>
  264.         </div>
  265.     {% endif %}
  266. </div>