templates/sous_famille/sous_famille.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ sousFamille.metaTitle }}{% endblock %}
  5. {% block meta %}
  6.     <!-- Primary Meta Tags -->
  7.     <meta name="description" content="{{ sousFamille.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="{{ sousFamille.metaTitle }}">
  13.     <meta property="og:description" content="{{ sousFamille.metaDescription }}">
  14.     <meta property="og:image" content="{{ app.request.getSchemeAndHttpHost() ~ urlImageSousFamille ~ sousFamille.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="{{ sousFamille.metaTitle }}">
  20.     <meta property="twitter:description" content="{{ sousFamille.metaDescription }}">
  21.     <meta property="twitter:image" content="{{ app.request.getSchemeAndHttpHost() ~ urlImageSousFamille ~ sousFamille.urlImage }}">
  22. {% endblock %}
  24. {% block stylesheets %}
  25.     <link rel="stylesheet" href="{{ asset('css/sousFamille.css') }}">
  26.     <link rel="stylesheet" href="{{ asset('css/demandeDevis.css?v=1.2') }}"/>
  27. {% endblock %}
  29. {% block entete %}
  30.     <img class="img-100" src='{{ urlImageSousFamille ~ sousFamille.urlImageEntete }}' alt='Aperçu {{ sousFamille.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"><a href="{{ path('famille_produit', {seoUrl: sousFamille.familleProduit.seoUrl }) }}">{{ sousFamille.familleProduit.designation }}</a></li>
  37.                     <li class="breadcrumb-item active">{{ sousFamille.designation }}</li>
  38.                 </ol>
  39.             </nav>
  40.             <h1 class="titre-photo">{{ sousFamille.designation }}</h1>
  41.         </div>
  42.     </div>
  43. {% endblock %}
  45. {% block body %}
  47.     {% if sousFamille.familleProduit.seoUrl == 'porte-de-placard-sur-mesure' %}
  48.         <!-- Modal -->
  49.         <div class="modal fade" id="demandeDevisModal" tabindex="-1" role="dialog" aria-labelledby="demandeDevisModalTitle" aria-hidden="true">
  50.             <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
  51.                 <div class="modal-content">
  52.                     <div class="modal-body">
  53.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  54.                             <span aria-hidden="true">&times;</span>
  55.                         </button>
  56.                         <div class="row">
  57.                             <div class="col-12 col-md-5 modal-col modal-top">
  58.                                 <video autoplay loop muted playsinline id="video" class="video" style="width: 100%">
  59.                                     <source src="https://media.cmai-groupe.com/asset/d7862f04-f284-4e00-976f-23fdebca2c65/mp4/Ouverture_placard.mp4" type="video/mp4">
  60.                                     Votre navigateur ne supporte pas les vidéos HTML5.
  61.                                 </video>
  62.                             </div>
  63.                             <div class="col-12 col-md-7 mt-4">
  64.                                 <h3 class="text-center">
  65.                                     Profitez de notre offre
  66.                                 </h3>
  67.                                 <p class="mt-3">En ce moment, une colonne de rangement <strong>offerte</strong> pour tout achat d'une porte de placard*</p>
  68.                                 {{ form_start(form) }}
  69.                                 <div class="_form-content" id="devis_promo">
  71.                                     <div class="row">
  72.                                         <div class="col-12 col-lg-4">
  73.                                             {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
  74.                                             {{ form_errors(form.name, {'attr': {'class': 'form-error'}}) }}
  75.                                         </div>
  76.                                         <div class="col-12 col-lg-4">
  77.                                             {{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
  78.                                             {{ form_errors(form.email, {'attr': {'class': 'form-error'}}) }}
  79.                                         </div>
  80.                                         <div class="col-12 col-lg-4">
  81.                                             {{ form_widget(form.phone, {'attr': {'class': 'form-control'}}) }}
  82.                                             {{ form_errors(form.phone, {'attr': {'class': 'form-error'}}) }}
  83.                                         </div>
  84.                                     </div>
  86.                                     <div class="row">
  87.                                         <div class="col-12 col-lg-6">
  88.                                             {{ form_widget(form.address, {'attr': {'class': 'form-control'}}) }}
  89.                                             {{ form_errors(form.address, {'attr': {'class': 'form-error'}}) }}
  90.                                         </div>
  91.                                         <div class="col-12 col-lg-3">
  92.                                             {{ form_widget(form.postalCode, {'attr': {'class': 'form-control'}}) }}
  93.                                             {{ form_errors(form.postalCode, {'attr': {'class': 'form-error'}}) }}
  94.                                         </div>
  95.                                         <div class="col-12 col-lg-3">
  96.                                             {{ form_widget(form.city, {'attr': {'class': 'form-control'}}) }}
  97.                                             {{ form_errors(form.city, {'attr': {'class': 'form-error'}}) }}
  98.                                         </div>
  99.                                     </div>
  101.                                     <div class="row">
  102.                                         <div class="col-12 col-md-7 mb-1">
  103.                                             {{ form_widget(form.message, {'attr': {'class': 'form-control'}}) }}
  104.                                             {{ form_errors(form.message, {'attr': {'class': 'form-error'}}) }}
  105.                                         </div>
  106.                                         <div class="col-12 col-md-5 d-flex flex-column align-items-center captcha">
  107.                                             {{ form_row(form.captcha) }}
  108.                                         </div>
  109.                                     </div>
  111.                                     <div class="bg-grey text-center pt-3 pb-2 container-expert">
  112.                                         <img class="image-expert" src="{{ asset('assets/images/Expert.png') }}" alt="portrait expert">
  113.                                         <p>
  114.                                             Vous serez recontacté dans un délai de 48h par <br>
  115.                                             notre <strong>Sogal Expert</strong> à moins de 30km de chez vous.
  116.                                         </p>
  117.                                     </div>
  119.                                     <div class="text-center mt-3 mb-4">
  120.                                         {{ form_widget(form.submit) }}
  121.                                         <div id="spinner-devis" class="spinner-border" role="status" style="display: none;">
  122.                                             <span class="sr-only">Chargement...</span>
  123.                                         </div>
  124.                                     </div>
  125.                                 </div>
  126.                                 {{ form_end(form) }}
  127.                                 <span class="mt-2" style="font-size: 12px">
  128.                                     *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.
  129.                                     Aménagement offert : une colonne Moduleco blanche,  Hauteur 2045 mm, Largeur 335 ou 500 mm. Eco-participation à la charge du client particulier.
  130.                                 </span>
  131.                             </div>
  132.                         </div>
  133.                     </div>
  134.                 </div>
  135.             </div>
  136.         </div>
  137.     {% endif %}
  139. {% if sousFamille.description %}
  140. <div class="row">
  141.     <div class="col-12">
  142.         {{ sousFamille.description|raw }}
  143.     </div>
  144. </div>
  145. {% endif %}
  147. <form id="options" class="row pt-4">
  148.     {# Filtre Nombre partition #}
  149.         {% if partitions is not empty %}
  150.             <div class="col-12 col-sm-6 col-md-3 mb-3">
  151.                 <fieldset data-group="nombrePartition">
  152.                     <div class="btn-group w-100">
  153.                         <button class="button-filter dropdown-toggle w-100" id="dropdownPartition" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  154.                             Style de porte
  155.                         </button>                        
  156.                         <div class="dropdown-menu w-100"  aria-labelledby="dropdownPartition">
  157.                             {% for partition in partitions %}
  158.                                     <div class="d-flex justify-content-start partition">
  159.                                         <div class="d-flex align-items-center" data-ordre={{ partition.placement }}>
  160.                                             <input 
  161.                                                 class="checkbox"
  162.                                                 type="checkbox" 
  163.                                                 id="customCheckPartition{{ partition.id }}"
  164.                                                 value=".nombrePartition-{{ partition.id }}" 
  165.                                                 name="nombrePartition"
  166.                                                 >
  167.                                         </div>
  168.                                         <label class="d-flex align-items-center my-1 label" for="customCheckPartition{{ partition.id }}" title="{{ partition.format }}"><img class="picto" src="{{ urlPartitionProduit ~ partition.url }}" alt="{{ partition.format }}"></label>
  169.                                     </div>
  170.                             {% endfor %}
  171.                         </div>
  172.                     </div>
  173.                 </fieldset>
  174.             </div>
  175.         {% endif %}
  176.     {# Filtre personalidé : Emplacement n°1 #}
  177.         {% if filtrePersonaliseResults is not empty %}
  178.             <div class="col-12 col-sm-6 col-md-3 mb-3">
  179.                 <fieldset data-group="fp1">
  180.                     <div class="btn-group w-100">
  181.                         <button class="button-filter dropdown-toggle w-100" data-toggle="dropdown" id="dropdownFp1" aria-haspopup="true" aria-expanded="false">
  182.                             {{ sousFamille.designationCollectionFiltre }}
  183.                         </button>
  184.                         <div class="dropdown-menu w-100" aria-labelledby="dropdownFp1">
  185.                             {% for fp1 in filtrePersonaliseResults %}
  186.                                 <div class="d-flex justify-content-start">
  187.                                     <div class="">
  188.                                         <input 
  189.                                             class="checkbox"
  190.                                             type="checkbox" 
  191.                                             id="customCheck{{ fp1.designation }}"
  192.                                             value=".fp1-{{ fp1.id }}" 
  193.                                             name="fp1"
  194.                                             >
  195.                                         </div>
  196.                                     <label class="label my-1" for="customCheck{{ fp1.designation }}" title="{{ fp1.infobulle }}"><small>{{ fp1.designation }}</small></label>
  197.                                 </div>
  198.                             {% endfor %}
  199.                         </div>
  200.                     </div>
  201.                 </fieldset>
  202.             </div>
  203.         {% endif %}
  204.     {# Filtre personalidé : Emplacement n°2 #}
  205.         {% if filtrePersonaliseBisResults is not empty %}
  206.             <div class="col-12 col-sm-6 col-md-3 mb-3">
  207.                 <fieldset data-group="fp2">
  208.                     <div class="btn-group w-100">
  209.                         <button class="button-filter dropdown-toggle w-100" data-toggle="dropdown" id="dropdownFp2" aria-haspopup="true" aria-expanded="false">
  210.                             {{ sousFamille.designationCollectionFiltreBis }}
  211.                         </button>
  212.                         <div class="dropdown-menu w-100" aria-labelledby="dropdownFp2">
  213.                             {% for fp2 in filtrePersonaliseBisResults %}
  214.                                 <div class="d-flex justify-content-start">
  215.                                     <div class="">
  216.                                         <input 
  217.                                             class="checkbox"
  218.                                             type="checkbox" 
  219.                                             id="customCheck{{ fp2.designation }}"
  220.                                             value=".fp2-{{ fp2.id }}" 
  221.                                             name="fp2"
  222.                                             >
  223.                                         </div>
  224.                                     <label class="label my-1" for="customCheck{{ fp2.designation }}" title="{{ fp2.infobulle }}"><small>{{ fp2.designation }}</small></label>
  225.                                 </div>
  226.                             {% endfor %}
  227.                         </div>
  228.                     </div>
  229.                 </fieldset>
  230.             </div>
  231.         {% endif %}
  232. </form>
  234. <div class="row" id="container">
  235.     {% for produit in sousFamille.produits %}
  236.             {% if produit.actif %}
  237.             <div class="item col-12 col-md-4
  238.                 {% if produit.partitionProduit is not empty %}nombrePartition-{{ produit.partitionProduit.id }}{% endif %}
  239.                 {% if produit.premierFiltres %} 
  240.                     {% for filtre in produit.premierFiltres %} fp1-{{ filtre.id }} {% endfor %}
  241.                 {% endif %}
  242.                 {% if produit.secondFiltres %} 
  243.                     {% for filtre in produit.secondFiltres %} fp2-{{ filtre.id }} {% endfor %}
  244.                 {% endif %}
  245.                 "
  246.             >
  247.                 <a class="for-hover mb-4" href="{{ path('ficheProduit', { famille: sousFamille.familleProduit.seoUrl , sousFamille: sousFamille.seoUrl , produit: produit.seoUrl }) }}">
  248.                     <div class="row px-3">
  249.                         <div class="col-12 px-0">
  250.                             <img class="img-fluid" src="{{ urlImageProduit ~produit.images.first.url }}" alt="Aperçu {{ produit.modelCommercial }}">
  251.                             <div class="img-bg"></div>
  252.                         </div>
  253.                     </div>
  254.                     <div class="row mt-3">
  255.                         <div class="col-12">
  256.                             <p class="h2 left-barre">
  257.                                 {{ produit.modelCommercial }}
  258.                             </p>
  259.                         </div>
  260.                     </div>
  261.                 </a>
  262.             </div>
  263.         {% endif %}
  264.     {% endfor %}
  265.     </div>
  268.     {% if sousFamille.descriptionFin %}
  269.         <div class="row">
  270.             <div class="col-12">
  271.                 {{ sousFamille.descriptionFin|raw }}
  272.             </div>
  273.         </div>
  274.     {% endif %}
  275. {% endblock %}
  276. {% block javascripts %}
  277.     <script src="{{ asset('js/imagesloaded.pkgd.min.js')}}"></script>
  278.     <script src="{{ asset('js/isotope.pkgd.min.js')}}"></script>
  279.     <script src="{{ asset('js/custom-isotope-sous-famille.js')}}"></script>
  280.     <script src="{{ asset('js/familleProduit.js')}}"></script>
  281. {% endblock %}