templates/famille_produit/famille_produit.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ familleProduit.metaTitle }}{% endblock %}
  5. {% block meta %}
  6.     <!-- Primary Meta Tags -->
  7.     <meta name="description" content="{{ familleProduit.metaDescription }}">
  9.     <!-- Open Graph -->
  10.     <meta property="og:type" content="website">
  11.     <meta property="og:url" content="{{ app.request.getSchemeAndHttpHost() ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}">
  12.     <meta property="og:title" content="{{ familleProduit.metaTitle }}">
  13.     <meta property="og:description" content="{{ familleProduit.metaDescription }}">
  14.     <meta property="og:image" content="{{ app.request.getSchemeAndHttpHost() ~ urlImageFamilleProduit ~ familleProduit.urlImage }}">
  16.     <!-- Twitter -->
  17.     <meta property="twitter:card" content="summary">
  18.     <meta property="twitter:url" content="{{ app.request.getSchemeAndHttpHost() ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}">
  19.     <meta property="twitter:title" content="{{ familleProduit.metaTitle }}">
  20.     <meta property="twitter:description" content="{{ familleProduit.metaDescription }}">
  21.     <meta property="twitter:image" content="{{ app.request.getSchemeAndHttpHost() ~ urlImageFamilleProduit ~ familleProduit.urlImage }}">
  22. {% endblock %}
  24. {% block stylesheets %}
  25.     <link rel="stylesheet" href="{{ asset('css/familleProduit.css') }}">
  26.     <link rel="stylesheet" href="{{ asset('css/demandeDevis.css?v=1.2') }}"/>
  27. {% endblock %}
  29. {% block entete %}
  30.     <img class="img-100" src='{{ urlImageFamilleProduit ~ familleProduit.urlImageEntete }}' alt='Aperçu {{ familleProduit.designation }}'>
  31.     <div class="row mb-5">
  32.         <div class="breadcrumb-container breadcrumb-produit px-5">
  33.             <nav aria-label="breadcrumb">
  34.                 <ol class="breadcrumb-reverse">
  35.                     <li class="breadcrumb-item"><a href="{{ path('homepage') }}">Accueil</a></li>
  36.                     <li class="breadcrumb-item active">{{ familleProduit.designation }}</li>
  37.                 </ol>
  38.             </nav>
  39.             <h1 class="titre-photo">{{ familleProduit.designation }}</h1>
  40.         </div>
  41.     </div>
  42. {% endblock %}
  44. {% block body %}
  45.     {#
  46.     {% if familleProduit.seoUrl == 'porte-de-placard-sur-mesure' %}
  47.         <!-- Modal -->
  48.         <div class="modal fade" id="demandeDevisModal" tabindex="-1" role="dialog" aria-labelledby="demandeDevisModalTitle" aria-hidden="true">
  49.             <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
  50.                 <div class="modal-content">
  51.                     <div class="modal-body">
  52.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  53.                             <span aria-hidden="true">&times;</span>
  54.                         </button>
  55.                         <div class="row">
  56.                             <div class="col-12 col-md-5 modal-col modal-top">
  57.                                 <video autoplay loop muted playsinline id="video" class="video" style="width: 100%">
  58.                                     <source src="https://media.cmai-groupe.com/asset/d7862f04-f284-4e00-976f-23fdebca2c65/mp4/Ouverture_placard.mp4" type="video/mp4">
  59.                                     Votre navigateur ne supporte pas les vidéos HTML5.
  60.                                 </video>
  61.                             </div>
  62.                             <div class="col-12 col-md-7 mt-4">
  63.                                 <h3 class="text-center">
  64.                                     Profitez de notre offre
  65.                                 </h3>
  66.                                 <p class="mt-3">En ce moment, une colonne de rangement <strong>offerte</strong> pour tout achat d'une porte de placard*</p>
  67.                                 {{ form_start(form) }}
  68.                                 <div class="_form-content" id="devis_promo">
  70.                                     <div class="row">
  71.                                         <div class="col-12 col-lg-4">
  72.                                             {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
  73.                                             {{ form_errors(form.name, {'attr': {'class': 'form-error'}}) }}
  74.                                         </div>
  75.                                         <div class="col-12 col-lg-4">
  76.                                             {{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
  77.                                             {{ form_errors(form.email, {'attr': {'class': 'form-error'}}) }}
  78.                                         </div>
  79.                                         <div class="col-12 col-lg-4">
  80.                                             {{ form_widget(form.phone, {'attr': {'class': 'form-control'}}) }}
  81.                                             {{ form_errors(form.phone, {'attr': {'class': 'form-error'}}) }}
  82.                                         </div>
  83.                                     </div>
  85.                                     <div class="row">
  86.                                         <div class="col-12 col-lg-6">
  87.                                             {{ form_widget(form.address, {'attr': {'class': 'form-control'}}) }}
  88.                                             {{ form_errors(form.address, {'attr': {'class': 'form-error'}}) }}
  89.                                         </div>
  90.                                         <div class="col-12 col-lg-3">
  91.                                             {{ form_widget(form.postalCode, {'attr': {'class': 'form-control'}}) }}
  92.                                             {{ form_errors(form.postalCode, {'attr': {'class': 'form-error'}}) }}
  93.                                         </div>
  94.                                         <div class="col-12 col-lg-3">
  95.                                             {{ form_widget(form.city, {'attr': {'class': 'form-control'}}) }}
  96.                                             {{ form_errors(form.city, {'attr': {'class': 'form-error'}}) }}
  97.                                         </div>
  98.                                     </div>
  100.                                     <div class="row">
  101.                                         <div class="col-12 col-md-7 mb-1">
  102.                                             {{ form_widget(form.message, {'attr': {'class': 'form-control'}}) }}
  103.                                             {{ form_errors(form.message, {'attr': {'class': 'form-error'}}) }}
  104.                                         </div>
  105.                                         <div class="col-12 col-md-5 d-flex flex-column align-items-center captcha">
  106.                                             {{ form_row(form.captcha) }}
  107.                                         </div>
  108.                                     </div>
  110.                                     <div class="bg-grey text-center pt-3 pb-2 container-expert">
  111.                                         <img class="image-expert" src="{{ asset('assets/images/Expert.png') }}" alt="portrait expert">
  112.                                         <p>
  113.                                             Vous serez recontacté dans un délai de 48h par notre <strong>Sogal Expert</strong> à moins de 30km de chez vous.
  114.                                         </p>
  115.                                     </div>
  117.                                     <div class="text-center mt-3 mb-4">
  118.                                         {{ form_widget(form.submit) }}
  119.                                         <div id="spinner-devis" class="spinner-border" role="status" style="display: none;">
  120.                                             <span class="sr-only">Chargement...</span>
  121.                                         </div>
  122.                                     </div>
  123.                                 </div>
  124.                                 {{ form_end(form) }}
  126.                                 <span class="mt-2" style="font-size: 12px">
  127.                                     *Offre valable pour tout achat et livraison en France métropolitaine d’un placard coulissant, pivotant, pliant ou battant hors modèles Sogal Eco+ et Initial.
  128.                                     Aménagement offert : une colonne Moduleco blanche,  Hauteur 2045 mm, Largeur 335 ou 500 mm. Eco-participation à la charge du client particulier.
  129.                                 </span>
  130.                             </div>
  131.                         </div>
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.     {% endif %}
  137.     #}
  139.     {% if familleProduit.description %}
  140.         <div class="row">
  141.             <div class="col-12">
  142.                 {{ familleProduit.description|raw }}
  143.             </div>
  144.         </div>
  145.     {% endif %}
  146.     <div class="row ">
  147.         {% if sousFamilleTypes is defined and sousFamilleTypes is not empty and sousFamilleTypes[familleProduit.seoUrl] and sousFamilleTypes[familleProduit.seoUrl] is not empty %}
  148.             {% for sfPosition, sousFamilleType in sousFamilleTypes[familleProduit.seoUrl] %}
  149.                 {%  set first = sousFamilleType|first %}
  150.                 {% if first.sousFamilleType is defined %}
  151.                     <a class="col-12 col-md-4 for-hover mb-4" href="{{  path('sous_famille_type', {familleProduit: familleProduit.seoUrl, sousFamilleType: first.sousFamilleType.seoUrl }) }}">
  152.                         <div class="row px-3">
  153.                             <div class="col-12 px-0">
  154.                                 <img class="img-fluid" src="{{ urlImageSousFamille ~ first.sousFamilleType.urlImage }}" alt="Aperçu {{ first.sousFamilleType.title }}">
  155.                                 <div class="img-bg"></div>
  156.                             </div>
  157.                         </div>
  158.                         <div class="row mt-3">
  159.                             <div class="col-12">
  160.                                 <h2 class="left-barre">
  161.                                     {{ first.sousFamilleType.title }}
  162.                                 </h2>
  163.                             </div>
  164.                         </div>
  165.                     </a>
  166.                 {% endif %}
  167.             {% endfor %}
  168.         {% else %}
  169.             {% for sousFamille in familleProduit.sousFamilles %}
  170.                 {% if sousFamille.produits is not empty %}
  171.                     <a class="col-12 col-md-6 for-hover mb-4" href="{{  path('sous_famille', {familleProduit: sousFamille.familleProduit.seoUrl, sousFamille: sousFamille.seoUrl }) }}">
  172.                         <div class="row px-3">
  173.                             <div class="col-12 px-0">
  174.                                 <img class="img-fluid" src="{{ urlImageSousFamille ~ sousFamille.urlImage }}" alt="Aperçu {{ sousFamille.designation }}">
  175.                                 <div class="img-bg"></div>
  176.                             </div>
  177.                         </div>
  178.                         <div class="row mt-3">
  179.                             <div class="col-12">
  180.                                 <h2 class="left-barre">
  181.                                     {{ sousFamille.designation }}
  182.                                 </h2>
  183.                             </div>
  184.                         </div>
  185.                     </a>
  186.                 {% endif %}
  187.             {% endfor %}
  188.         {% endif %}
  189.     </div>
  190.     
  191.     {% if familleProduit.descriptionFin %}
  192.         <div class="row">
  193.             <div class="col-12">
  194.                 {{ familleProduit.descriptionFin|raw }}
  195.             </div>
  196.         </div>
  197.     {% endif %}
  198. {% endblock %}