templates/front/product.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% set subCategory = product.subCategory %}
  3. {% set category = subCategory.category %}
  4. {% set productImg = (product.productFileName ? asset(vich_uploader_asset(product, 'productFile')) : asset('assets/img/defprod.png')) %}
  5. {% block metaTags %}
  6.     <meta name="description" content="{{ product.metaDescription ? product.metaDescription : product.description|raw }}">
  7.     <title>{{ product.metaTitle ? product.metaTitle : product.title }}</title>
  8.     <meta property="og:title" content="{{ product.metaTitle ? product.metaTitle : product.title }}">
  9.     <meta property="og:description" content="{{ product.metaDescription ? product.metaDescription : product.description|raw }}">
  10.     <meta property="og:image"
  11.           content="{{ absolute_url(productImg|imagine_filter('medium')) }}">
  12.     <meta property="og:url" content="{{ app.request.uri }}">
  14. {% endblock %}
  15. {% block body %}
  16.     <section class="container pab-80 position-relative zi-9">
  17.         <div class="may-50">
  18.             {% include "front/menu.html.twig" with {'menu':{
  19.                 (category.title):(category.isChaine ? "#" : path("front_products", {'catSlug':category.slug})),
  20.                 (subCategory.title):path("front_products", {'catSlug':category.slug, "subCatSlug":subCategory.slug}),
  21.                 (product.title):"#",
  22.             }} %}
  23.         </div>
  24.         <div class="row flex-row-reverse">
  25.             <div class="col-md-6 mab-0-md mab-10 pal-70-lg text-center text-sm-left">
  26.                 {% if subCategory.subCategoryFileName %}
  27.                     <div data-aos="fade-left"   data-aos-duration="800" class="d-flex justify-content-center-sm cg-15 mab-30">
  28.                         <div class="bgc-15683A pa-10">
  29.                             <img src="{{ asset(vich_uploader_asset(subCategory, 'subCategoryFile')) }}"
  30.                                  alt="{{ subCategory.title }}" class="he-25 white-filter"/>
  31.                         </div>
  32.                         <div class="d-flex ">
  33.                             <img src="{{ asset('assets/img/lafafrflag.svg') }}" alt="Facomia" class="he-45"/>
  34.                             <div class="pal-10 bgc-F7F6F2 he-45 wi-100 d-flex align-items-center skew position-relative">
  35.                                 <div class="bgc-F7F6F2 h-100 wi-10 position-absolute l-0 t-0 skew-text"></div>
  36.                                 <div class="skew-text okdavn">
  37.                                     {{ "landing.about.fabfr"|trans|raw }}
  38.                                 </div>
  39.                             </div>
  40.                         </div>
  41.                     </div>
  42.                 {% endif %}
  43.                 <h1 class="sjrklb mab-25" data-aos="fade-left"   data-aos-duration="800">{{ product.title }}</h1>
  44.                 <div data-aos="fade-left"   data-aos-duration="800" data-aos-delay="200" class="content pmb0 mab-30">
  45.                     {{ product.description|raw }}
  46.                 </div>
  47.                 <div data-aos="fade-up"   data-aos-duration="800" data-aos-delay="400" class="mab-30">
  48.                     <a href="{{ path('front_contact', {'slug':product.slug}) }}" class="btn btn1">
  49.                         <div class="btn-text">
  50.                             <i class="fa fa-envelope mar-5"></i>
  51.                             {{ "product.interest_btn"|trans }}
  52.                         </div>
  53.                     </a>
  54.                 </div>
  55.                 <div class="d-flex justify-content-center-sm cg-15 align-items-center">
  56.                     <div data-aos="fade-right"   data-aos-duration="800" data-aos-delay="600" class="dgdxuy">
  57.                         {{ "product.share"|trans }}
  58.                     </div>
  59.                     <div data-aos="fade-left"   data-aos-duration="800" data-aos-delay="600" id="share"
  60.                          data-facebook="{{ asset('assets/img/fb.svg') }}"
  61.                          data-linkedin="{{ asset('assets/img/link.svg') }}"
  62.                          data-twitter="{{ asset('assets/img/twit.svg') }}"
  63.                          ></div>
  64.                 </div>
  65.             </div>
  66.             <div class="col-md-6" data-aos="fade-right"   data-aos-duration="800">
  67.                 {% include "front/productMediaBig.html.twig" with {'img':productImg|imagine_filter('large'), "title":product.title, "id":"rlgdwh"} %}
  68.                 {% for key, productMedia in productMedias %}
  69.                     {% include "front/productMediaBig.html.twig" with {'img':asset(vich_uploader_asset(productMedia, 'productMediaFile'))|imagine_filter('large'), "title":productMedia.title, "id":productMedia.id} %}
  70.                 {% endfor %}
  71.                 <div class="d-flex cg-20 rg-20">
  72.                     {% include "front/productMediaSmall.html.twig" with {'img':productImg|imagine_filter('small'), "title":product.title, "id":"rlgdwh"} %}
  73.                     {% for key, productMedia in productMedias %}
  74.                         {% include "front/productMediaSmall.html.twig" with {'img':asset(vich_uploader_asset(productMedia, 'productMediaFile'))|imagine_filter('small'), "title":productMedia.title, "id":productMedia.id} %}
  75.                     {% endfor %}
  76.                 </div>
  77.                 {% if product.info %}
  78.                     <div class="may-30 bgc-F7F6F2 pay-15 pax-25 d-flex align-items-center cg-25">
  79.                         <i class="fa fa-info-circle c-15683A"></i>
  80.                         <div class="content pmb0">
  81.                             {{ product.info|raw }}
  82.                         </div>
  83.                     </div>
  84.                 {% endif %}
  85.             </div>
  87.         </div>
  88.     </section>
  89.     {% if relatedProducts %}
  90.         <section class="bgc-F7F6F2 pat-80 pab-50 position-relative">
  91.             <img src="{{ asset('assets/img/visudots.png')|imagine_filter('medium') }}" alt="Facomia"
  92.                  class="wi-170 position-absolute r-0 t-0 hbhcpk "/>
  93.             <img src="{{ asset('assets/img/bgrelpro.png')|imagine_filter('large') }}" alt="Facomia"
  94.                  class="w-100 b-0 position-absolute"/>
  96.             <div class="container container-product position-relative">
  97.                 <h2 class="mab-15 text-center eyidgv" data-aos="fade-up"   data-aos-duration="800" >
  98.                     {{ "product.related.title"|trans }}
  99.                 </h2>
  100.                 <div class="text-center mab-50"  data-aos="fade-up"   data-aos-duration="800">
  101.                     <img src="{{ asset('assets/img/line.png')|imagine_filter('small') }}" alt="Facomia" class="wi-150"/>
  102.                 </div>
  103.                 <div class="row">
  104.                     <div class="col-sm-1  align-items-center d-none d-sm-flex justify-content-center">
  105.                         <i class="fs-40 fal fa-arrow-circle-left c-15683A prev-hgsopl pointer"></i>
  106.                     </div>
  107.                     <div class="col-sm-10">
  108.                         <div class="hgsopl pab-15">
  109.                             {% for key, relatedProduct in relatedProducts %}
  110.                                 {% set targetProduct = relatedProduct.targetProduct %}
  111.                                 {% include "front/productListDetail.html.twig" with {'product':targetProduct, "categoryActive":category, "isSlider":1} %}
  112.                             {% endfor %}
  113.                         </div>
  114.                     </div>
  115.                     <div class="col-sm-1 align-items-center d-none d-sm-flex  justify-content-center">
  116.                         <i class="fs-40 fal fa-arrow-circle-right c-15683A next-hgsopl pointer"></i>
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.         </section>
  121.     {% endif %}
  122. {% endblock %}