templates/home/detail.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Details - {{ article.libelle }} !{% endblock %}
  3. {% block stylesheets %}
  4.     <style>
  5.     .mobile-categ{
  6.          display: none;
  7.     }
  8.         @media (max-width: 480px) {
  9.     .same-categ {
  10.         display: none;
  11.     }
  12.     .pub-details {
  13.         display: none;
  14.     }
  15.       .mobile-categ{
  16.          display: block;
  17.     }
  18.     .image-mobile{
  19.       height: 100%;
  20.     }
  21. }
  22.     </style>
  23. {% endblock %}
  24. {% block body %}
  25.     <main class="main">
  26.         <div class="page-header breadcrumb-wrap">
  27.             <div class="container">
  28.                 <div class="breadcrumb">
  29.                     <a href="{{ path('app_home_index') }}" rel="nofollow"><i class="fi-rs-home mr-5"></i>Accueil</a>
  30.                     <span></span> <a href="{{ path('app_home_index') }}">Articles</a> <span></span> {{ article.libelle }}
  31.                 </div>
  32.             </div>
  33.         </div>
  34.         <div class="container mb-30">
  35.             <div class="row">
  36.                 <div class="col-xl-11 col-lg-12 m-auto">
  37.                     <div class="row">
  38.                         <div class="col-xl-9">
  39.                             <div class="product-detail accordion-detail">
  40.                                 <div class="row mb-20 mt-30">
  41.                                         <div class="col-md-4 col-sm-12 col-xs-12 mb-md-0 mb-sm-5">
  42.                                             <div class="detail-gallery">
  43.                                                
  44.                                                 <!-- MAIN SLIDES -->
  45.                                                 <div class=" product-image-slider image-mobile">
  46.                                                     <figure class="border-radius-10 ">
  47.                                                         <img src="{{ asset('uploads/articles/'~ article.code ~'/'~article.imageprincipale) }}" width="100%" height="200px" alt="product image" class="border-radius-10">
  48.                                                     </figure>
  49.                                                     {% for i in article.images  %}
  50.                                                         <figure class="border-radius-10">
  51.                                                             <img src="{{ asset('uploads/articles/'~ article.code ~'/'~ i.nom) }}"  height="250" alt="product image" class="border-radius-10">
  52.                                                         </figure>
  53.                                                     {% endfor %}
  54.                                                 </div>
  55.                                     
  56.                                                 <!-- THUMBNAILS -->
  57.                                                 <div class="slider-nav-thumbnails">
  58.                                                     <div>
  59.                                                         <img src="{{ asset('uploads/articles/'~ article.code ~'/'~article.imageprincipale) }}" alt="product image">
  60.                                                     </div>
  61.                                                     {% for i in article.images  %}
  62.                                                         <div>
  63.                                                             <img src="{{ asset('uploads/articles/'~ article.code ~'/'~ i.nom) }}" alt="product image">
  64.                                                         </div>
  65.                                                     {% endfor %}
  66.                                                 </div>
  67.                                             </div>
  68.                                             <!-- End Gallery -->
  69.                                             <hr/>
  70.                                             <div class="mobile-social-icon">
  71.                                                 <a href="#"><img src="{{ asset('assets/imgs/theme/icons/icon-facebook-white.svg') }}" alt="" /></a>
  72.                                                 <a href="#"><img src="{{ asset('assets/imgs/theme/icons/icon-twitter-white.svg') }}" alt="" /></a>
  73.                                                 <a href="#"><img src="{{ asset('assets/imgs/theme/icons/icon-instagram-white.svg') }}" alt="" /></a>
  74.                                                 <a href="#"><img src="{{ asset('assets/imgs/theme/icons/icon-whatsapp.svg') }}" alt="" /></a>
  75.                                             </div>
  76.                                         </div>
  77.                                         <div class="col-md-8 col-sm-12 col-xs-12">
  78.                                             <div class="detail-info pr-30 pl-30">
  79.                                                 {% if article.ispromo == true %}
  80.                                                     <span class="stock-status out-stock" style="background: #e1b12c; color: #FFFFFF">PROMO</span>
  81.                                                 {% endif %}
  82.                                                 {% if article.IsSolde == true %}
  83.                                                     <span class="stock-status out-stock"   style="background: #f87171; color: #FFFFFF">SOLDE </span>
  84.                                                 {% endif %}
  85.                                                 <h3 class="title-detail">{{ article.libelle }}</h3>
  86.                                                 {% if article.isNoprice == false %}
  87.                                                     <div class="clearfix product-price-cover">
  88.                                                         {% if article.ispromo == true %}
  89.                                                             <div class="product-price primary-color float-left">
  90.                                                                 <span class="current-price text-brand p-2 border-radius-10" style="font-size: large; background-color: #e1b12c; ">{{ article.prixpromo|number_format(0,'.',' ') }} FCFA</span>
  91.                                                                 <span class="old-price font-md ml-15 ">{{ article.prix|number_format(0,'.',' ') }} FCFA</span>
  92.                                                             </div>
  93.                                                         {% endif %}
  94.                                                         {% if article.ispromo == false %}
  95.                                                             <div class="product-price primary-color float-left">
  96.                                                                 {% if article.IsSolde == true %}
  97.                                                                     <span class="save-price font-md color3 ml-15">-{{ article.soldePourcentage }}%</span>
  98.                                                                 {% endif %}
  99.                                                                 <span class="current-price text-brand  p-2 border-radius-10" style="font-size: large; background-color: #e1b12c; ">{{ article.prix|number_format(0,'.',' ') }} FCFA</span>
  100.                                                             </div>
  101.                                                         {% endif %}
  102.                                                     </div>
  103.                                                 {% else %}
  104.                                                     <div class="clearfix product-price-cover">
  105.                                                         <div class="product-price primary-color float-left">
  106.                                                             <span class="text-brand  p-1" style="background: #e1b12c; color: #FFFFFF;">Prix à la demande</span>
  107.                                                         </div>
  108.                                                     </div>
  109.                                                 {% endif %}
  110.                                                 <div class="short-desc mb-30">
  111.                                                     <p class="font-lg">{{ article.description }}</p>
  112.                                                 </div>
  113.                                                 <div class="font-xs">
  114.                                                     <ul class="mr-50 float-start">
  115.                                                         <li class="mb-5"><img src="{{ asset('assets/imgs/theme/icons/icon-whatsapp.svg') }}" alt="" width="20px" height="20px"/>: <strong><span class="text-brand">{{ article.createdBy.telwhatsapp }}</span></strong></li>
  116.                                                         <li class="mb-5"><img src="{{ asset('assets/imgs/theme/icons/icon-phone.svg') }}" alt="" width="20px" height="20px"/>:<strong><span class="text-brand"> {{ article.createdBy.telephone }}</span></strong></li>
  117.                                                         <li class="mb-5">Ville: <strong><span class="text-brand">{{ article.ville }}</span></strong></li>
  118.                                                     </ul>
  119.                                                     <ul class="float-start">
  120.                                                         <li class="mb-5">Etat:<strong><span class="text-brand"> {{ article.etat }}</span> </strong></li>
  121.                                                         <li>Catégorie :<strong><span class="text-brand">{{ article.categorie.libelle }}</span></strong></li>
  122.                                                         <li class="mb-5">Publié le :<span class="text-brand"><strong> {{ article.pubDate |date("m/d/Y h:i") }}</strong></span></li>
  123.                                                     </ul>
  124.                                                 </div>
  125.                                                 <br/>
  126.                                                 <br/>
  127.                                             </div>
  128.                                             <!-- Detail Info -->
  129.                                         </div>
  130.                                 </div>
  131.                             </div>
  132.                             <div class="row mt-60">
  133.                                 <div class="col-12">
  134.                                     <h2 class="section-title style-1 mb-30">Dans la même categorie</h2>
  135.                                 </div>
  136.                                 <div class="col-12">
  137.                                     <section class="row related-products same-categ">
  138.                                         {% for a in articles %}
  139.                                             {% if a.id != article.id %}
  140.                                                 <div class="col-md-4 col-lg-4 col-sm-6  mb-2  articles">
  141.                                                     <article class="row align-items-center hover-up  mr-5 mb-1" style=" ; height: 120px">
  142.                                                         <figure class="col-md-4  col-sm-6 mb-0">
  143.                                                             {% if a.ispromo == true %}
  144.                                                                 <span class=" badge alert-success"  style="background: #e1b12c; color: #FFFFFF" >PROMO </span>
  145.                                                             {% endif %}
  146.                                                             {% if a.IsSolde == true %}
  147.                                                                 <span class=" badge alert-success"  style="background: #f87171; color: #FFFFFF" >Jusqu'à -{{ a.soldePourcentage}}% </span>
  148.                                                             {% endif %}
  149.                                                             <a href="{{ path('app_home_detail',{slug: a.slug} ) }}">
  150.                                                                 <img src="{{ asset('uploads/articles/'~ a.code ~'/'~a.imageprincipale) }}" alt="" />
  151.                                                             </a>
  152.                                                         </figure>
  153.                                                         <div class="col-md-8 mb-0 col-sm-6 ">
  154.                                                             <h6>
  155.                                                                 <a href="{{ path('app_home_detail',{slug: a.slug} ) }}">{{ a.libelle|length > 50 ?  a.libelle|slice(0, 50) ~ '...' : a.libelle  }}</a>
  156.                                                             </h6>
  157.                                                             <div class="product-price">
  158.                                                                 {% if a.ispromo==true %}
  159.                                                                     {% if a.isNoprice == true %}
  160.                                                                         <span>Prix à la demande</span>
  161.                                                                     {% else %}
  162.                                                                         <span>{{ a.prixpromo }} FCFA</span>
  163.                                                                     {% endif %}
  164.                                                                 {% elseif  a.IsSolde == true %}
  165.                                                                     {% if a.isNoprice == true %}
  166.                                                                         <span>Prix à la demande</span>
  167.                                                                     {% else %}
  168.                                                                         <span>{{ a.prix }} FCFA</span>
  169.                                                                     {% endif %}
  170.                                                                 {% else %}
  171.                                                                     <span>
  172.                                                                         {% if a.prix > 0%}
  173.                                                                             {{ a.prix }} FCFA
  174.                                                                         {% else %}
  175.                                                                             Prix à la demande
  176.                                                                         {% endif %}
  177.                                                                     </span>
  178.                                                                 {% endif %}
  179.                                                             </div>
  180.                                                             <div class="d-inline-block">
  181.                                                                 <span class="font-small text-muted">Publié le {{ a.pubDate| date('d/m/Y') }}</span>
  182.                                                             </div>
  183.                                                         </div>
  184.                                                     </article>
  185.                                                     <hr/>
  186.                                                 </div>
  187.                                             {% endif %}
  188.                                         {% endfor %}
  189.                                     </section>
  190.                                     <section class="section-padding mb-10 mobile-categ">
  191.                                         <div class="container">
  192.                                             <div class="row">
  193.                                                 <div class="col-xl-12 col-lg-12 col-md-6 mb-sm-5 mb-md-0 wow animate__animated animate__fadeInUp" data-wow-delay="0">
  194.                                                     <div class=" row product-list-small animated animated">
  195.                                                         {% for article in   articles  %}
  196.                                                         <div class="col-md-6 col-lg-3  mb-2  articles">
  197.                                                             <article class="row align-items-center hover-up  mr-5 mb-1" style="height: 120px">
  198.                                                                 <figure class="col-md-4  col-sm-6 mb-0">
  199.                                                                     {% if article.ispromo == true %}
  200.                                                                         <span class=" badge alert-success"  style="background: #e1b12c; color: #FFFFFF" >PROMO </span>
  201.                                                                     {% endif %}
  202.                                                                     {% if article.IsSolde == true %}
  203.                                                                         <span class=" badge alert-success"  style="background: #f87171; color: #FFFFFF" >Jusqu'à -{{ article.soldePourcentage}}% </span>
  204.                                                                     {% endif %}
  205.                                                                     <a href="{{ path('app_home_detail',{slug: article.slug} ) }}">
  206.                                                                         <img src="{{ asset('uploads/articles/'~ article.code ~'/'~article.imageprincipale) }}" alt="" height="100px" />
  207.                                                                     </a>
  208.                                                                 </figure>
  209.                                                                 <div class="col-md-8 mb-0 col-sm-6 ">
  210.                                                                     <h6>
  211.                                                                         <a href="{{ path('app_home_detail',{slug: article.slug} ) }}">{{ article.libelle|length > 50 ?  article.libelle|slice(0, 50) ~ '...' : article.libelle  }}</a>
  212.                                                                     </h6>
  213.                                                                     <div class="product-price">
  214.                                                                     {% if article.ispromo==true %}
  215.                                                                         {% if article.isNoprice == true %}
  216.                                                                             <span>Prix à la demande</span>
  217.                                                                         {% else %}
  218.                                                                         <span>{{ article.prixpromo|number_format(0,'.',' ') }} FCFA</span>
  219.                                                                         <span class="old-price">{{ article.prix|number_format(0,'.',' ') }} FCFA</span>
  220.                                                                         {% endif %}
  221.                                                                     {% elseif  article.IsSolde == true %}
  222.                                                                         {% if article.isNoprice == true %}
  223.                                                                             <span>Prix à la demande</span>
  224.                                                                         {% else %}
  225.                                                                             <span>{{ article.prix|number_format(0,'.',' ') }} FCFA</span>
  226.                                                                         {% endif %}
  227.                                                                     {% else %}
  228.                                                                         <span>
  229.                                                                             {% if article.prix > 0%}
  230.                                                                             {{ article.prix|number_format(0,'.',' ') }} FCFA
  231.                                                                             {% else %}
  232.                                                                                 Prix à la demande
  233.                                                                             {% endif %}
  234.                                                                         </span>
  235.                                                                     {% endif %}
  236.                                                                     </div>
  237.                                                                     <div class="d-inline-block">
  238.                                                                         <span class="font-small text-muted">Publié le {{ article.pubDate| date('d/m/Y h:i') }}</span>
  239.                                                                     </div>
  240.                                                                 </div>
  241.                                                             </article>
  242.                                                             <hr/>
  243.                                                         </div>
  244.                                                     {% endfor %}
  245.                                                     </div>
  246.                                                 </div>
  247.                                             </div>
  248.                                         </div>
  249.                                     </section>
  250.                                 </div>
  251.                                 <div class="row mt-4 pub-details">
  252.                                     <div class="col-12">
  253.                                         {% if pubImages["Z-B-IMG-PD"] is defined %}
  254.                                         <img src="{{ asset('uploads/pubs/'~ pubImages["Z-B-IMG-PD"]) }}" class="border-radius-10" alt="" width="100%"/>
  255.                                     {% else %}
  256.                                         <img src="{{ asset('assets/imgs/deals/img-12.jpg') }}" class="border-radius-10" alt="" width="100%"  />
  257.                                     {% endif %}
  258.                                     </div>
  259.                                 </div>
  260.                             </div>
  261.                         </div>
  262.                         <div class="col-xl-3 primary-sidebar sticky-sidebar mt-30">
  263.                             <div class="sidebar-widget widget-vendor mb-30 bg-grey-9 box-shadow-none">
  264.                                 <h5 class="section-title style-3 mb-10">Infos sur le vendeur</h5>
  265.                                 <hr/>
  266.                                 <div class="vendor-logo d-flex mb-30">
  267.                                     <div class="vendor-name ">
  268.                                         <h6>
  269.                                             <a href="vendor-details-2.html">{{ article.createdBy.boutique }}</a>
  270.                                         </h6>
  271.                                     </div>
  272.                                 </div>
  273.                                 <ul class="contact-infor">
  274.                                     <li><img src="{{ asset('assets/imgs/theme/icons/icon-email-2.svg') }}" alt="" /><strong><span>{{ article.createdBy.email }}</span> </strong>  </li>
  275.                                     <li><img src="{{ asset('assets/imgs/theme/icons/icon-location.svg') }}" alt="" /><strong><span>{{ article.createdBy.shop.ville }} {{ article.createdBy.shop.adresse }}</span></strong></li>
  276.                                     <li><img src="{{ asset('assets/imgs/theme/icons/icon-contact.svg') }}" alt="" /><strong><span>{{ article.createdBy.telephone }}</span></strong></li>
  277.                                     <li class="hr"><span></span></li>
  278.                                 </ul>
  279.                                 <p class="text-center"> <a href="" class="btn btn-lg " style="background: #e1b12c; color: #FFFFFF" > <i class="fi-rs-eye"></i> Visiter la boutique</a></p>
  280.                             </div>
  281.                             <!-- Product sidebar Widget -->
  282.                             <div class="">
  283.                                 {% if pubImages["Z-R-IMG-PD"] is defined %}
  284.                                     <img src="{{ asset('uploads/pubs/'~ pubImages["Z-R-IMG-PD"]) }}" alt="" class="border-radius-10" width="100%"/>
  285.                                 {% else %}
  286.                                     <img src="{{ asset('assets/imgs/deals/img-9.jpg') }}" class="border-radius-10" alt="" width="100%" />
  287.                                 {% endif %}
  288.                             </div>
  289.                         </div>
  290.                     </div>
  291.                 </div>
  292.             </div>
  293.         </div>
  294.     </main>
  295. {% endblock %}