templates/default/croisiere-destination.html.twig line 1

Open in your IDE?
  1. {# templates/croisiere/show.html.twig #}
  2. {% extends 'base.html.twig' %}
  3. {% block title %}O’Croisière - {{offer.title}} | O Tropik – Agence de voyage en Guadeloupe{% endblock %}
  4. {% block seo %}
  5.  <meta name="description" content="{{offer.description}}" >
  7.     <meta property="og:title" content="{{offer.metaTitle}}" />
  8.     <meta property="og:type" content="Website" />
  9.     <meta property="og:description" content="{{offer.metaDescription}}" />
  10.     <meta property="og:url" content="{{absolute_url( app.request.uri)}}" />
  11.     <meta property="og:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}" />
  13.     <meta name ="twitter:card" content="summary_large_image" />
  14.     <meta name="twitter:title" content="{{offer.metaTitle}}">
  15.     <meta name="twitter:description" content="{{offer.metaDescription}}">
  16.     <meta name="twitter:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}">
  17. {% endblock %}
  18. {% block body %}
  19. {# HERO #}
  20. <section class="hero hero--offer hero--cruise is-animated position-relative text-white">
  21.   <div class="hero__media ratio ratio-21x9">
  22.     <img src="{{ asset('img/offer/' ~ offer.file ~ '/' ~ offer.slug ~ '/' ~ offer.img) }}"
  23.          alt="{{ offer.title }}"
  24.          class="hero__img w-100 h-100 object-fit-cover">
  25.   </div>
  27.   <div class="hero__overlay">
  28.     <div class="hero__card">
  29.       <h1 class="hero__title display-5 fw-bold mb-2">
  30.         {{ offer.title }}
  31.       </h1>
  32.       <p class="hero__subtitle lead mb-0">
  33.         {{ offer.subtitle }}
  34.       </p>
  35.     </div>
  36.   </div>
  37. </section>
  39. <section class="container py-5">
  40.   <div class="row g-4">
  41.     {# NAVIRE + META + BLOCS TEXTE #}
  42.     <div class="col-12 col-lg-5">
  43.       <div class="card border-0 shadow-sm rounded-4">
  44.         <div class="ratio ratio-4x3 rounded-top-4 overflow-hidden">
  45.           <div id="circuitCarousel"
  46.                class="carousel slide rounded-4 overflow-hidden shadow-sm w-100"
  47.                data-bs-ride="carousel"
  48.                data-bs-interval="5000"
  49.                data-bs-pause="hover"
  50.                data-bs-touch="true"
  51.                aria-label="Galerie circuit">
  53.             <div class="carousel-inner">
  54.               {% for p in photoItinerary %}
  55.                 <div class="carousel-item {% if loop.first %}active{% endif %}">
  56.                   <div class="ratio ratio-4x3">
  57.                     <img src="{{asset('img/' ~ p.offer.file  ~ '/' ~ p.offer.slug  ~ '/itinerary/' ~ p.img)}}" class="d-block w-100 h-100 object-fit-cover" alt="Photo circuit {{ loop.index }}">
  58.                   </div>
  59.                 </div>
  60.               {% endfor %}
  61.             </div>
  62.              <button class="carousel-control-prev" type="button" data-bs-target="#circuitCarousel" data-bs-slide="prev">
  63.               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  64.               <span class="visually-hidden">Précédent</span>
  65.             </button>
  66.             <button class="carousel-control-next" type="button" data-bs-target="#circuitCarousel" data-bs-slide="next">
  67.               <span class="carousel-control-next-icon" aria-hidden="true"></span>
  68.               <span class="visually-hidden">Suivant</span>
  69.             </button>
  71.             <div class="carousel-indicators">
  72.               {% for p in photoItinerary %}
  73.                 <button type="button"
  74.                         data-bs-target="#circuitCarousel"
  75.                         data-bs-slide-to="{{ loop.index0 }}"
  76.                         class="{% if loop.first %}active{% endif %}"
  77.                         aria-current="{{ loop.first ? 'true' : 'false' }}"
  78.                         aria-label="Slide {{ loop.index }}"></button>
  79.               {% endfor %}
  80.             </div>
  81.           </div>
  83.         </div>
  84.         <div class="card-body">
  85.           <h2 class="h4 txt-ot-blue fw-bold mb-1">Les atouts de la croisiere</h2>
  86.           <div class="d-flex flex-wrap gap-2 mb-2">
  87.           {% for h in highlight %}<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ h.title }}</span>{% endfor %} 
  88.           </div>
  89.          {# <ul class="small text-muted list-unstyled mb-0">
  90.            <li><strong>Opérateur :</strong> {{ program.operator }} fly</li>
  91.             <li><strong>Embarquement :</strong> {{ program.embark_port }} aéoport</li>
  92.             <li><strong>Débarquement :</strong> {{ program.disembark_port }} wesh</li>
  93.             <li><strong>Départ aéroport :</strong> {{ program.home_airport }} aeoport</li> 
  94.           </ul> #}
  95.         </div>
  96.       </div>
  98.       <div class="card border-0 shadow-sm rounded-4 mt-4">
  99.         <div class="card-body">
  100.           <h3 class="h6 txt-ot-blue fw-bold mb-2">Inclus</h3>
  101.           <ul class="list-unstyled small m-0">
  102.           {% for line in offer.included|split("\n") %}
  103.               <li class="mb-1">✔️ {{ line }}</li>
  104.             {% endfor %}
  105.           </ul>
  106.           <hr>
  107.           <h3 class="h6 txt-ot-blue fw-bold mb-2">Non inclus</h3>
  108.           <ul class="list-unstyled m-0">
  109.            {% for line in offer.notIncluded|split("\n") %}
  110.               <li class="mb-1">- {{ line }}</li>
  111.             {% endfor %}
  112.           </ul>
  113.         </div>
  114.       </div>
  116.       <div class="card border-0 shadow-sm rounded-4 mt-4">
  117.         <div class="card-body small">
  118.          <h3 class="h6 txt-ot-blue fw-bold mb-2">Formalités</h3>
  119.            <ul class="list-unstyled m-0">
  120.            {% for line in offer.formalities|split("\n") %}
  121.               <li class="mb-1">✔️ {{ line }}</li>
  122.             {% endfor %}
  123.           </ul>
  124.           <hr>
  125.            <h3 class="h6 txt-ot-blue fw-bold mb-2">Modalités de paiement</h3>
  126.             <ul class="list-unstyled m-0">
  127.          {% for line in offer.paymentMethod|split("\n") %}
  128.               <li class="mb-1">✔️ {{ line }}</li>
  129.             {% endfor %}
  130.           </ul>
  131.         </div>
  132.       </div>
  133.     </div>
  135.     {# ITINÉRAIRE + DATES/PRIX #}
  136.     <div class="col-12 col-lg-7">
  138.   <!-- Ligne 1 : Durée / Vols / Tarif -->
  139.   <div class="row g-3 mb-4">
  141.     <!-- Durée -->
  142.     <div class="col-12 col-md-4">
  143.       <div class="card rounded-4 shadow-sm h-100">
  144.         <div class="card-body">
  145.           <h6 class="fw-bold txt-ot-blue mb-1">Durée</h6>
  146.           <p class="mb-0 text-muted">{{ offer.summaryDuration }}</p>
  147.         </div>
  148.       </div>
  149.     </div>
  151.     <!-- Vols -->
  152.     <div class="col-12 col-md-4">
  153.       <div class="card rounded-4 shadow-sm h-100">
  154.         <div class="card-body">
  155.           <h6 class="fw-bold txt-ot-blue mb-1">Vols</h6>
  156.           <ul class="mb-0 ps-3">
  157.             {% for line in offer.summaryFlights|split("\n") %}
  158.               {% if line|trim != '' %}
  159.                 <li>{{ line }}</li>
  160.               {% endif %}
  161.             {% endfor %}
  162.           </ul>
  163.         </div>
  164.       </div>
  165.     </div>
  167.     <!-- Tarif -->
  168.     <div class="col-12 col-md-4">
  169.       <div class="card rounded-4 shadow-sm h-100">
  170.         <div class="card-body">
  171.           <h6 class="fw-bold txt-ot-blue mb-1">Tarif à partir de</h6>
  172.           <p class="mb-0 text-muted">{{ offer.priceFrom }} €</p>
  173.         </div>
  174.       </div>
  175.     </div>
  177.   </div>
  179.   <!-- Ligne 2 : Rythme -->
  180.   <div class="row g-3 mb-4">
  181.     <div class="col-12">
  182.       <div class="card rounded-4 shadow-sm h-100">
  183.         <div class="card-body">
  184.           <h6 class="fw-bold txt-ot-blue mb-1">Rythme</h6>
  185.           <ul class="mb-0 ps-3">
  186.             {% for line in offer.summaryPaceMeals|split("\n") %}
  187.               {% if line|trim != '' %}
  188.                 <li>{{ line }}</li>
  189.               {% endif %}
  190.             {% endfor %}
  191.           </ul>
  192.         </div>
  193.       </div>
  194.     </div>
  197. </div>
  198.       <div class="card border-0 shadow-sm rounded-4 mb-4">
  199.         <div class="card-body">
  200.          <h2 class="h5 txt-ot-blue fw-bold mb-3">Itinéraire — jour par jour</h2>
  201.           <div class="list-group list-group-flush">
  202.             {% for it in itinerary %}
  203.               <div class="list-group-item px-0">
  204.                 <button class="btn w-100 d-flex justify-content-between align-items-center text-start" data-bs-toggle="collapse" data-bs-target="#day{{ loop.index }}" aria-expanded="false">
  205.                   <span class="fw-bold">Jour {{loop.index}} - {{it.title }}{% if it.kmLabel %} <span class="text-muted fw-normal"> ({{ it.kmLabel }}) km</span>{% endif %}</span>
  206.                   <i class="bi bi-chevron-down"></i>
  207.                 </button>
  208.                 <div id="day{{ loop.index }}" class="collapse mt-2">
  209.                   <p class="small text-muted mb-0">{{ it.details }}</p>
  210.                 </div>
  211.               </div>
  212.             {% endfor %}
  213.           </div>
  214.          {# {% if program.map_image %}
  215.             <img src="{{ asset(program.map_image) }}" class="img-fluid rounded-3 mt-3" alt="Carte">
  216.           {% endif %} #}
  217.         </div>
  218.       </div>
  219.   {% if hebergementOffer %}
  220. {# =====================================================
  221.    5) HÔTELS — liste ou tableau simple
  222. ===================================================== #}
  223.     <h3 class="h5 txt-ot-blue fw-bold mt-3 mb-3">Hébergements prévus (ou similaires)</h3>
  224.     <ul class="list-group">
  225.       {% for h in hebergementOffer %}<li class="list-group-item">{{ h.name }}</li>{% endfor %}
  226.     </ul>
  227. {% endif %}
  229. {% if flight %}
  230. {# =====================================================
  231.    7) VOLS & HORAIRES — bloc détaillé
  232. ===================================================== #}
  233.     <h3 class="h5 txt-ot-blue fw-bold mt-3 mb-3">Vols & horaires (indicatifs)</h2>
  234.     <div class="row g-4">
  235.       <div class="col-12 col-lg-6">
  236.         <div class="card border-0 shadow-sm rounded-4 h-100">
  237.           <div class="card-body">
  238.             <h3 class="h6 fw-bold mb-2">Aller</h3>
  239.             <ul class="small mb-0">
  240.             {% for f in flight %}
  241.               {% if f.type == '1' %}
  242.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  243.               {% endif %}
  244.             {% endfor %}
  245.             </ul>
  246.           </div>
  247.         </div>
  248.       </div>
  249.       <div class="col-12 col-lg-6">
  250.         <div class="card border-0 shadow-sm rounded-4 h-100">
  251.           <div class="card-body">
  252.             <h3 class="h6 fw-bold mb-2">Retour</h3>
  253.             <ul class="small mb-0">
  254.             {% for f in flight %}
  255.               {% if f.type == '2' %}
  256.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  257.               {% endif %}
  258.             {% endfor %}
  259.             </ul>
  260.           </div>
  261.         </div>
  262.       </div>
  263.     </div>
  264.     <p class="small text-muted mt-3 mb-0">Horaires et compagnies susceptibles d’évolution. À confirmer à l’émission des billets.</p>
  265. {% endif %}
  266.     {#  <div class="card border-0 shadow-sm rounded-4">
  267.         <div class="card-body">
  268.           <h3 class="h5 fw-bold mb-3">Dates </h3>
  269.           <div class="table-responsive">
  270.             <table class="table table-striped table-sm">
  271.               <thead class="table-light">
  272.                 <tr><th>Période</th></tr>
  273.               </thead>
  274.               <tbody>
  275.                 {% for p in program.prices %}
  276.                   <tr>
  277.                     <td>{{ p.period_label }}</td>
  278.                     <td>{{ p.price_inside }}€</td>
  279.                     <td>{{ p.price_oceanview }}€</td>
  280.                     <td>{{ p.price_balcony }}€</td>
  281.                     <td>{{ p.price_3rd4th_adult ?? '—' }}</td>
  282.                     <td>{{ p.price_3rd4th_child ?? '—' }}</td>
  283.                   </tr>
  284.                 {% endfor %}
  285.               </tbody>
  286.             </table>
  287.           </div>
  288.         </div>
  289.       </div>
  291.       <div class="d-flex justify-content-end mt-4">
  292.         <a href="{#{ path('app_demander_devis') }}" class="btn btn-primary rounded-pill px-4">Demander un devis</a>
  293.       </div>#}
  294.     </div>
  295.   </div>
  296. </section>
  297. {% endblock %}