templates/front/hotel/hotel_detail.html.twig line 1

Open in your IDE?
  1. {% extends 'front/base_front.html.twig' %}
  2. {% block title %}
  3.     {{ hotel_data.name }}
  4. {% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     {{ encore_entry_link_tags('app') }}
  8. {% endblock %}
  9. {% block javascripts %}
  10.     {{ parent() }}
  11.     {{ encore_entry_script_tags('app') }}
  12. {% endblock %}
  13. {% block SEO %}
  14.     <!-- title -->
  15.     {% if hotel_data.seo is not null and hotel_data.seo.title is not empty %}
  16.         <meta name="title" content="{{ hotel_data.seo.title }}">
  17.         <meta property="og:title" content="{{ hotel_data.seo.title }}">
  18.         {% else %}
  19.         <meta name="title" content="{{ hotel_data.name }}">
  20.         <meta property="og:title" content="{{ hotel_data.name  }}">
  21.     {% endif %}
  22.     <!-- description -->
  23.     {% if hotel_data.seo is not null and hotel_data.seo.description is not empty %}
  24.         <meta name="description" content="{{ hotel_data.seo.description }}">
  25.         <meta property="og:description" content="{{ hotel_data.seo.description }}">
  26.     {% endif %}
  27.     <meta property="og:type" content="website" />
  28.     <meta property="og:url" content="{{ app.request.getUri() }}">
  29.     <meta property="og:image" content="{{ hotel_data.thumbImage }}">
  30.     <!-- social media specification -->
  31.     {% for social_media in social_networks %}
  32.         {% if social_media.name == "Facebook" %}
  33.             <meta property="fb:{{ social_media.pageId }}" content="{{ social_media.pageId }}">
  34.         {% endif %}
  35.         {% if social_media.name == "X" %}
  36.             <meta name="twitter:card" content="{{ hotel_data.seo.description }}"/>
  37.             <meta name="twitter:site" content="{{ social_media.pageId }}"/>
  38.         {% endif %}
  39.     {% endfor %}
  40. {% endblock %}
  41. {% block container %}
  42.     <section id="hotel_details_main" class="section_padding">
  43.         <div class="container">
  44.             <div class="row">
  45.                 {% if(hotel_data) %}
  46.                     <div class="col-lg-9">
  47.                         <div class="hotel_details_leftside_wrapper">
  48.                             <div class="hotel_details_heading_wrapper">
  49.                                 <div class="hotel_details_top_heading">
  50.                                     <h2 class="hoteldetail-name">{{ hotel_data.name }}
  51.                                     </h2>
  52.                                     <h5 class="hoteldetail-address"><i
  53.                                                 class="fas fa-map-marker-alt"></i> {{ hotel_data.city }}
  54.                                         , {{ hotel_data.country }}
  55.                                     <span class="form-check-label hoteldetail-stars">
  56.                                         {% for i in 1..hotel_data.starRating %}
  57.                                             <i class="fas fa-star"></i>
  58.                                         {% endfor %}
  59.                                     </span>
  60.                                     </h5>
  61.                                 </div>
  62.                                 <div class="hotel_content_reviews" id="tripInfos">
  63.                                     {% if hotel_data.tripadvisorId %}
  64.                                         <script>
  65.                                             $(document).ready(function () {
  66.                                                 function publishTripadvisor(data) {
  67.                                                     var htmlview = '<div class="g-rate-price">' +
  68.                                                         '<img alt="' + data.rating + 'étoiles " src="' + data.rating_image_url + '"' + '/><br> ' +
  69.                                                         '<a href="' + data.web_url + '" style="color: #292f37; font-size: 12px;" target="_blank"> ' + data.num_reviews + ' Reviews on TripAdvisor ' +
  70.                                                         '</div>';
  71.                                                     $("#tripInfos").html(htmlview);
  72.                                                 }
  73.                                                 try {
  74.                                                     $.ajax({
  75.                                                         url: 'https://api.tripadvisor.com/api/partner/2.0/location/{{ hotel_data.tripadvisorId }}?key=c1603974aae14de9b91f3156bc107e6c',
  76.                                                         type: "POST",
  77.                                                         dataType: "json",
  78.                                                         success: function (data) {
  79.                                                             publishTripadvisor(data);
  80.                                                         },
  81.                                                         error: function (xhr, status, error) {
  82.                                                             console.log("Error!" + xhr.status);
  83.                                                         },
  84.                                                     });
  85.                                                 } catch (e) {
  86.                                                     console.log("You messed something up!");
  87.                                                 }
  88.                                             });
  89.                                         </script>
  90.                                     {% endif %}
  91.                                     <h5 class="hotelcard-rating-total">9.5</h5>
  92.                                 </div>
  93.                             </div>
  94.                             <div class="package-details-area pt-3 mb-4 position-relative">
  95.                                 <div class="row">
  96.                                     <div class="co-lg-12">
  97.                                         {{ include ('front/gallery/index.html.twig', {
  98.                                             'main_picture_path' :  hotel_data.thumbImage,
  99.                                             'main_picture_name' :  hotel_data.name,
  100.                                             'images_collection' :  hotel_data.images,
  101.                                         } ) }}
  102.                                     </div>
  103.                                 </div>
  104.                             </div>
  105.                             <div data-controller="reload-content"
  106.                                  data-action="modal-form:success@window->reload-content#refreshContent">
  107.                                 <div data-controller="modal-form"
  108.                                      data-action="hidden.bs.modal->modal-form#modalHidden">
  109.                                     <div id="myDivExampleModal">
  110.                                         {{ include('front/_modal_show.html.twig', {
  111.                                             modalTitle: 'Title...',
  112.                                             modalContent : 'Loading ...',
  113.                                         }) }}
  114.                                     </div>
  115.                                     <div class="searchresult-form-dates">
  116.                                         <p class="searchresult-form-title">{{ 'Pages.HotelOfferDetail.Messages.VotreRecherche'|trans({}, 'messages_front') }}</p>
  117.                                         <div class="searchresult-form-date-wrapper">
  118.                                             <div class="searchresult-form-date-from">
  119.                                                 <p class="searchresult-from-title">{{ 'Pages.HotelOfferDetail.Messages.CheckIn'|trans({}, 'messages_front') }}</p>
  120.                                                 <div class="searchresult-to-date-wrapper">
  121.                                                    {#  <p class="searchresult-from-date">{{ arrivalDate|date('d F Y, D') }}</p>#}
  122.                                                     <p class="searchresult-from-date">{{ arrivalDate | format_datetime('full', 'none', locale=app.request.locale) }}</p>
  123.                                                     <time class="searchresult-from-time">{{ 'Pages.Common.Messages.After'|trans({}, 'messages_front') }} 14:00</time>
  124.                                                 </div>
  125.                                             </div>
  126.                                             <div class="searchresult-form-date-to">
  127.                                                 <p class="searchresult-to-title">{{ 'Pages.HotelOfferDetail.Messages.CheckOut'|trans({}, 'messages_front') }}</p>
  128.                                                 <div class="searchresult-to-date-wrapper">
  129.                                                     <p class="searchresult-from-date">{{ departureDate | format_datetime('full', 'none', locale=app.request.locale) }}</p>
  130.                                                     <time class="searchresult-to-time">{{ 'Pages.Common.Messages.Before'|trans({}, 'messages_front') }} 12:00</time>
  131.                                                 </div>
  132.                                             </div>
  133.                                         </div>
  134.                                         <button
  135.                                                 class="searchresult-form-info-button button-view-light button-size-xs"
  136.                                                 data-action="modal-form#openModal"
  137.                                                 data-form-url-value="{{ path('hotel_form_search', {'city_label' : city_label, 'hotel_label' : hotel_label} ) }}"
  138.                                                 data-url-value="{{ path('hotel_search_json', { ajax: 1 } ) }}"
  139.                                                 data-modal-title-value="{{ 'Pages.HotelOfferDetail.Messages.ModifierRecherche'|trans({}, 'messages_front') }}"
  140.                                                 data-refresh-key-value="refresh-html"
  141.                                         >
  142.                                             {{ 'Pages.HotelOfferDetail.Messages.ModifierRecherche'|trans({}, 'messages_front') }}
  143.                                         </button>
  144.                                     </div>
  145.                                 </div>
  146.                             </div>
  147.                             <div class="hotel_details_boxed">
  148.                                 <div class="alert alert-warning">
  149.                                     {{ 'Pages.HotelOfferDetail.Messages.ConfirmBooking'|trans({}, 'messages_front') }}
  150.                                 </div>
  151.                                 <div class="alert alert-success">
  152.                                     {{ 'Pages.HotelOfferDetail.Messages.FreeCancellation'|trans({}, 'messages_front') }}
  153.                                 </div>
  154.                             </div>
  155.                             {% if (hotel_data.description is not empty) %}
  156.                                 <div class="hotel_details_boxed">
  157.                                     <h3 class="heading_theme">{{ 'Pages.HotelOfferDetail.Messages.DescriptionHotel'|trans({}, 'messages_front') }}</h3>
  158.                                     <div class="hotel_details_boxed_inner">
  159.                                         <div id="hotel-detail-description">
  160.                                             <div class="text show-more-height">
  161.                                                 {{ hotel_data.description | raw }}
  162.                                             </div>
  163.                                             <div class="show-more">  {{ 'Pages.HotelOfferDetail.Messages.ExpandDescription'|trans({}, 'messages_front') }}
  164.                                                 <i class="fas fa-chevron-down"></i></div>
  165.                                         </div>
  166.                                     </div>
  167.                                 </div>
  168.                             {% endif %}
  169.                             {% if (hotel_data.facilities | length > 0) %}
  170.                                 <div class="hotel_details_boxed">
  171.                                     <h3 class="heading_theme">{{ 'Pages.HotelOfferDetail.Messages.HotelEquipments'|trans({}, 'messages_front') }} </h3>
  172.                                     <div class="hotel-amenities-details">
  173.                                         <ul class="hotel-amenities-list">
  174.                                             {% for facilitiy in hotel_data.facilities %}
  175.                                                 <li class="hotel-amenities-details-icon"><i
  176.                                                             class="{{ facilitiy.icon }}"></i> {{ facilitiy.name }}</li>
  177.                                             {% endfor %}
  178.                                         </ul>
  179.                                     </div>
  180.                                 </div>
  181.                             {% endif %}
  182.                             <div class="hotel_details_boxed">
  183.                                 <h3 class="heading_theme">{{ 'Pages.HotelOfferDetail.Messages.HotelEmplacement'|trans({}, 'messages_front') }}</h3>
  184.                                 <div class="map_area">
  185.                                     {% set latitude =  ( hotel_data.latitude) ?? 0 %}
  186.                                     {% set longitude =  ( hotel_data.longitude) ?? 0 %}
  187.                                     <div class="mapouter">
  188.                                         <div class="gmap_canvas">
  189.                                             <iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no"
  190.                                                     marginheight="0" marginwidth="0"
  191.                                                     src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q={{ latitude ~","~ longitude }}&amp;t=&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
  192.                                         </div>
  193.                                     </div>
  194.                                 </div>
  195.                             </div>
  196.                         </div>
  197.                     </div>
  198.                     <div class="col-lg-3">
  199.                         <div class="hotel_details_right_sidebar_wrapper">
  200.                             <div class="hotel_detail_right_sidebar">
  201.                                 <div class="hotel_details_right_boxed">
  202.                                     <div class="hotel_details_right_box_heading">
  203.                                         <h3>{{ 'Pages.HotelOfferDetail.Messages.Share'|trans({}, 'messages_front') }}</h3>
  204.                                     </div>
  205.                                     <div class="hotel_package_share">
  206.                                         {{ include ('front/social-media/index.html.twig' ) }}
  207.                                     </div>
  208.                                 </div>
  209.                             </div>
  210. {#                            <div data-controller="reload-content"#}
  211. {#                                 data-action="modal-form:success@window->reload-content#refreshContent">#}
  212. {#                                <div data-controller="modal-form"#}
  213. {#                                     data-action="hidden.bs.modal->modal-form#modalHidden">#}
  214. {#                                    <div id="myDivExampleModal">#}
  215. {#                                        {{ include('front/_modal_show.html.twig', {#}
  216. {#                                            modalTitle: 'Title...',#}
  217. {#                                            modalContent : 'Loading ...',#}
  218. {#                                        }) }}#}
  219. {#                                    </div>#}
  220. {#                                        <div class="hotel_detail_right_sidebar">#}
  221. {#                                            <button#}
  222. {#                                                    class="searchresult-form-info-button button-view-light button-size-xs"#}
  223. {#                                                    data-action="modal-form#openModal"#}
  224. {#                                                    data-form-url-value="{{ path('hotel_form_search', {'city_label' : city_label, 'hotel_label' : hotel_label} ) }}"#}
  225. {#                                                    data-url-value="{{ path('hotel_search_json', { ajax: 1 } ) }}"#}
  226. {#                                                    data-modal-title-value="{{ 'Pages.HotelOfferDetail.Messages.ModifierRecherche'|trans({}, 'messages_front') }}"#}
  227. {#                                                    data-refresh-key-value="refresh-html"#}
  228. {#                                            >#}
  229. {#                                                Voir Disponibilité#}
  230. {#                                            </button>#}
  231. {#                                        </div>#}
  232. {#                                </div>#}
  233. {#                            </div>#}
  234.                             <div class="hotel_detail_right_sidebar">
  235.                                 <div class="hotel_details_right_boxed">
  236.                                     <div class="hotel_details_right_box_heading">
  237.                                         <h3>{{ 'Pages.RecommendedHotel.Title'|trans({} ,'messages_front') }}</h3>
  238.                                     </div>
  239.                                     {% for recommendedHotel in recommendedHotels %}
  240.                                         <div class="hotel_package_similar">
  241.                                             <div class="recent_hotel_item">
  242.                                                 <div class="recent_hotel_img">
  243.                                                     <a class="hover-effect"
  244.                                                        href="{{ path('hotel_detail',
  245.                                                            {
  246.                                                                'country_label': recommendedHotel.country,
  247.                                                                'city_label': recommendedHotel.city,
  248.                                                                'hotel_label':recommendedHotel.name,
  249.                                                                'id': recommendedHotel.code}) }}"
  250.                                                     >
  251.                                                         <img src="{{ (recommendedHotel.imageUrl|last != '/' and recommendedHotel.imageUrl != '') ? recommendedHotel.imageUrl : asset('uploads/image_not_available.png') }}"
  252.                                                              alt="thumb">
  253.                                                     </a>
  254.                                                 </div>
  255.                                                 <div class="recent_hotel_text">
  256.                                                     <h5><a
  257.                                                             href="{{ path('hotel_detail',{
  258.                                                                     'country_label': recommendedHotel.country,
  259.                                                                     'city_label': recommendedHotel.city,
  260.                                                                     'hotel_label':recommendedHotel.name,
  261.                                                                     'id': recommendedHotel.code}) }}"
  262.                                                         >{{ recommendedHotel.name }}</a>
  263.                                                     </h5>
  264.                                                     <span class="form-check-label similarhotel-stars">
  265.                                                         {% for i in 1..recommendedHotel.starRating %}
  266.                                                             <i class="fas fa-star"></i>
  267.                                                         {% endfor %}
  268.                                                 </span>
  269.                                                 </div>
  270.                                             </div>
  271.                                         </div>
  272.                                     {% endfor %}
  273.                                 </div>
  274.                             </div>
  275.                         </div>
  276.                     </div>
  277.                 {% else %}
  278.                     <div class="col-md-12">{{ 'Pages.Hotel.Messages.HotelNotFound'|trans({}, 'messages_front') }}</div>
  279.                 {% endif %}
  280.             </div>
  281.         </div>
  282.     </section>
  283.     <script>
  284.         $(".show-more").click(function () {
  285.             if ($(".text").hasClass("show-more-height")) {
  286.                 $(this).html('{{ 'Pages.HotelOfferDetail.Messages.CollapseDescription'|trans({}, 'messages_front') }} <i class="fas fa-chevron-up"></i> ');
  287.             } else {
  288.                 $(this).html('{{ 'Pages.HotelOfferDetail.Messages.ExpandDescription'|trans({}, 'messages_front') }} <i class="fas fa-chevron-down"></i> ');
  289.             }
  290.             $(".text").toggleClass("show-more-height");
  291.         });
  292.     </script>
  293. {% endblock %}