From 2435f261260973342894456888aabe25f0e20906 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Fri, 18 Sep 2026 14:48:27 +0530 Subject: [PATCH 01/20] Fixed: Fix Mobile Responsiveness Issues on the Theme Home Page --- .../views/css/wk-landing-page-search.css | 4 ++- .../wkroomsearchblock/wkroomsearchblock.php | 3 +++ .../hotel-reservation-theme/css/category.css | 17 ++++++++++++ .../css/daterangepicker.css | 12 +++++++++ themes/hotel-reservation-theme/css/global.css | 26 +++++++++++++++--- .../css/modules/blockcart/blockcart.css | 9 +++++++ .../hotel-reservation-theme/css/occupancy.css | 2 +- .../css/order-confirmation.css | 6 +++++ .../hotel-reservation-theme/css/order-opc.css | 27 +++++++++++++++++++ 9 files changed, 100 insertions(+), 6 deletions(-) diff --git a/modules/wkroomsearchblock/views/css/wk-landing-page-search.css b/modules/wkroomsearchblock/views/css/wk-landing-page-search.css index 63c48a472..b624668c2 100644 --- a/modules/wkroomsearchblock/views/css/wk-landing-page-search.css +++ b/modules/wkroomsearchblock/views/css/wk-landing-page-search.css @@ -60,8 +60,10 @@ column-gap: 0px; } .header-rmsearch-wrapper { - height: calc(100vw - 60px); + height: auto; width: calc(100vw - 60px); + max-height: 80vh; + overflow-y: auto; } } .fancy_search_header_xs { diff --git a/modules/wkroomsearchblock/wkroomsearchblock.php b/modules/wkroomsearchblock/wkroomsearchblock.php index 42c7ce929..834845e14 100644 --- a/modules/wkroomsearchblock/wkroomsearchblock.php +++ b/modules/wkroomsearchblock/wkroomsearchblock.php @@ -105,6 +105,9 @@ class WkRoomSearchBlock extends Module } if ('index' == $controller) { $this->context->controller->addCSS($this->_path.'views/css/wk-landing-page-search.css'); + // the mobile "Make Booking" modal opens via fancybox regardless of the + // unrelated PS_QUICK_VIEW setting that core normally gates it behind + $this->context->controller->addJqueryPlugin('fancybox'); } if ('product' == $controller) { $this->context->controller->addCSS($this->_path.'views/css/wk-roomtype-search.css'); diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index 93ac147ef..ffd798ece 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -280,6 +280,23 @@ p.capa_txt { margin-bottom: 0; } } +@media (max-width: 991px) { + .room_features_cont > div { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 0; + margin-bottom: 10px; + } + .booking_room_fields { + display: flex; + flex-wrap: wrap; + gap: 10px; + } + .booking_room_fields .form-group { + width: 100%; + } +} @media (min-width: 1200px) { .booking_guest_occupancy_conatiner .form-group { margin-bottom: 0; diff --git a/themes/hotel-reservation-theme/css/daterangepicker.css b/themes/hotel-reservation-theme/css/daterangepicker.css index 4d4e8cea9..1f39d04b3 100644 --- a/themes/hotel-reservation-theme/css/daterangepicker.css +++ b/themes/hotel-reservation-theme/css/daterangepicker.css @@ -89,3 +89,15 @@ .date-picker-wrapper .first-date-selected, .date-picker-wrapper .last-date-selected { background-color: #1292ff !important; } +@media (max-width: 400px) { + .date-picker-wrapper { + max-width: calc(100vw - 20px); + } + .date-picker-wrapper .month-wrapper table tr td .day { + width: 28px; + padding: 8px 6px; + } + .date-picker-wrapper .month-wrapper table .week-name { + height: 32px; + } +} diff --git a/themes/hotel-reservation-theme/css/global.css b/themes/hotel-reservation-theme/css/global.css index 3432c2e24..6755ff059 100644 --- a/themes/hotel-reservation-theme/css/global.css +++ b/themes/hotel-reservation-theme/css/global.css @@ -235,7 +235,8 @@ table { html { font-size: 62.5%; - -webkit-tap-highlight-color: transparent; } + -webkit-tap-highlight-color: transparent; + overflow-x: hidden; } body { @@ -243,7 +244,8 @@ body { font-size: 13px; line-height: 1.42857; color: #777777; - background-color: #fff; } + background-color: #fff; + overflow-x: hidden; } input, button, @@ -8920,11 +8922,18 @@ body .ui-tooltip { .payment_option_logo { height: 50px; - max-height: 50px; } + max-height: 50px; + max-width: 100%; } .payment_module_adv { height: 120px; - max-height: 120px; } + max-height: 120px; + max-width: 100%; } + +@media (max-width: 480px) { + .payment_module_adv { + height: 80px; + max-height: 80px; } } .payment_option_selected { display: none; @@ -9025,6 +9034,15 @@ body .ui-tooltip { font-weight: 400; line-height: 23px; } +@media (max-width: 767px) { + .home_block_heading { + font-size: 28px; + line-height: 32px; + margin-bottom: 15px; } + .home_block_description { + font-size: 15px; + line-height: 20px; } +} .home_block_desc_line { border-color: #333333; width: 100px; diff --git a/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css b/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css index fbc3166f9..ae78ae71a 100644 --- a/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css +++ b/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css @@ -316,6 +316,9 @@ float: none; margin-right: 0; margin-bottom: 10px; } } + @media (max-width: 480px) { + #layer_cart .layer_cart_product { + padding: 15px; } } #layer_cart .layer_cart_product .layer_cart_product_info { padding: 38px 0 0 0; } #layer_cart .layer_cart_product .layer_cart_product_info #layer_cart_product_title { @@ -333,6 +336,9 @@ -webkit-border-radius: 0px; border-radius: 0px 4px 4px 0px; position: relative; } + @media (max-width: 480px) { + #layer_cart .layer_cart_cart { + padding: 15px 15px 150px 15px; } } @media (min-width: 1200px) { #layer_cart .layer_cart_cart { min-height: 318px; } } @@ -363,6 +369,9 @@ left: 0; width: 100%; padding: 0px 30px 20px 30px; } + @media (max-width: 480px) { + #layer_cart .layer_cart_cart .button-container { + padding: 0px 15px 20px 15px; } } #layer_cart .layer_cart_cart .button-container .btn { margin-bottom: 10px; } #layer_cart .layer_cart_cart .button-container a.button.button-medium { diff --git a/themes/hotel-reservation-theme/css/occupancy.css b/themes/hotel-reservation-theme/css/occupancy.css index aebf0494e..1f8828905 100644 --- a/themes/hotel-reservation-theme/css/occupancy.css +++ b/themes/hotel-reservation-theme/css/occupancy.css @@ -128,7 +128,7 @@ width: 100%;} - @media (max-width: 450) { + @media (max-width: 450px) { .booking_occupancy_wrapper .occupancy_info_block .occupancy_count_block { width: 100%;} .booking_occupancy_wrapper .occupancy_info_block .occupancy_count { diff --git a/themes/hotel-reservation-theme/css/order-confirmation.css b/themes/hotel-reservation-theme/css/order-confirmation.css index 9ea9c3785..7ffb35365 100644 --- a/themes/hotel-reservation-theme/css/order-confirmation.css +++ b/themes/hotel-reservation-theme/css/order-confirmation.css @@ -30,6 +30,12 @@ margin-bottom: 0; } +@media (max-width: 767px) { + .fancybox-wrap.fancybox-extra-services .card { + width: calc(100vw - 40px); + } +} + .fancybox-wrap.fancybox-extra-services .fancybox-close { background: none; top: 12px; diff --git a/themes/hotel-reservation-theme/css/order-opc.css b/themes/hotel-reservation-theme/css/order-opc.css index 573f07c24..af1d28968 100644 --- a/themes/hotel-reservation-theme/css/order-opc.css +++ b/themes/hotel-reservation-theme/css/order-opc.css @@ -552,6 +552,33 @@ width: 50%; } } +@media (max-width: 991px) { + #order-opc .cart_voucher_detail_block span.cart_discount_name { + width: 50%; + } +} +@media (max-width: 767px) { + #order-opc #content > .row { + display: flex; + flex-direction: column; + } + #order-opc #content > .row > .col-md-4 { + order: -1; + } +} +@media (max-width: 480px) { + #order-opc .proceed_btn_block .button-medium, + #order-opc .proceed_btn_block .btn-edit-guest-info { + float: none !important; + display: block; + width: 100%; + padding: 12px 20px; + margin-right: 0; + margin-bottom: 10px; + text-align: center; + box-sizing: border-box; + } +} @media (max-width: 480px) { #order-opc .cart_voucher_detail_block span.cart_discount_name { width: 50%; From fc10f81f6a690c0da9d33a45a79e75a59257bab0 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Mon, 21 Sep 2026 14:42:30 +0530 Subject: [PATCH 02/20] Fixed: fix home page UI --- .../views/templates/hook/copyRight.tpl | 2 +- .../views/templates/hook/displayCopyRight.tpl | 2 +- .../views/css/WkAboutHotelBlockFront.css | 36 ++++++++++++------- .../templates/hook/hotelInteriorBlock.tpl | 1 - .../views/css/wkHotelFeaturesBlockFront.css | 8 +++++ .../views/js/wkHotelFeaturesBlockFront.js | 6 ++++ .../templates/hook/hotelfeaturescontent.tpl | 1 - .../views/css/WkHotelRoomBlockFront.css | 9 ++--- .../templates/hook/hotelRoomDisplayBlock.tpl | 2 +- .../views/css/wk-landing-page-search.css | 9 +++++ themes/hotel-reservation-theme/css/global.css | 16 ++++++++- .../blocknewsletter/blocknewsletter.css | 9 +++++ 12 files changed, 78 insertions(+), 23 deletions(-) diff --git a/modules/hotelreservationsystem/views/templates/hook/copyRight.tpl b/modules/hotelreservationsystem/views/templates/hook/copyRight.tpl index eb3541799..87a990ed1 100644 --- a/modules/hotelreservationsystem/views/templates/hook/copyRight.tpl +++ b/modules/hotelreservationsystem/views/templates/hook/copyRight.tpl @@ -1,4 +1,4 @@ -
+

©{if isset($WK_HTL_ESTABLISHMENT_YEAR) && $WK_HTL_ESTABLISHMENT_YEAR} {$WK_HTL_ESTABLISHMENT_YEAR}-{'Y'|date} {/if} {$WK_HTL_CHAIN_NAME}. {l s=' All rights reserved. | Powered by' mod='hotelreservationsystem'} QloApps

diff --git a/modules/hotelreservationsystem/views/templates/hook/displayCopyRight.tpl b/modules/hotelreservationsystem/views/templates/hook/displayCopyRight.tpl index 6ece6dedb..47ddf641d 100644 --- a/modules/hotelreservationsystem/views/templates/hook/displayCopyRight.tpl +++ b/modules/hotelreservationsystem/views/templates/hook/displayCopyRight.tpl @@ -1,3 +1,3 @@ -
+

© {$WK_HTL_ESTABLISHMENT_YEAR} - {$currentYear} , {l s='All rights reserved' mod='hotelreservationsystem'}.

\ No newline at end of file diff --git a/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css b/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css index bfe15adaa..c826c850f 100644 --- a/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css +++ b/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css @@ -23,6 +23,12 @@ .htlInterior-owlCarousel .owl-stage-outer { border: 1px solid #ccc; } +@media (max-width: 767px) { + .htlInterior-owlCarousel .owl-carousel { + width: calc(100% - 30px); + margin: 0 15px; + } +} .interiorImgWrapper { width: 100%; height: 100%; @@ -47,31 +53,35 @@ object-fit: cover; } .htlInterior-owlCarousel .owl-prev, .htlInterior-owlCarousel .owl-next{ - font-size: 40px; - font-weight: 200; position: absolute; - top: 0; - bottom: 0; + top: 50%; + transform: translateY(-50%); z-index: 10; } .htlInterior-owlCarousel .owl-prev { - left: 0; + left: 15px; } .htlInterior-owlCarousel .owl-next { - right: 0; + right: 15px; } .nav-direction-wrapper{ - display: table; - height: 100%; + display: block; } .nav-direction-primary { - display: table-cell; - vertical-align: middle; + display: block; } .nav-direction-secondary { - padding: 40px 18px; - opacity: 0.85; - background-color: #ffffff; + background: rgba(0, 0, 0, 0.4); + color: #fff; + border-radius: 2px; + padding: 8px 14px; + font-size: 20px; + line-height: 1; + transition: background 0.2s; +} +.htlInterior-owlCarousel .owl-prev:hover .nav-direction-secondary, +.htlInterior-owlCarousel .owl-next:hover .nav-direction-secondary { + background: rgba(0, 0, 0, 0.65); } .interiorHoverBlockWrapper { position: absolute; diff --git a/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl b/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl index 71ae109f1..80ffe6f25 100644 --- a/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl +++ b/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl @@ -82,7 +82,6 @@
{/block}
-
{/if} {/block} diff --git a/modules/wkhotelfeaturesblock/views/css/wkHotelFeaturesBlockFront.css b/modules/wkhotelfeaturesblock/views/css/wkHotelFeaturesBlockFront.css index 7e80c83b4..05cafee55 100644 --- a/modules/wkhotelfeaturesblock/views/css/wkHotelFeaturesBlockFront.css +++ b/modules/wkhotelfeaturesblock/views/css/wkHotelFeaturesBlockFront.css @@ -62,4 +62,12 @@ .amenity_desc_hr { border-top: 1px solid #333333; width: 60px; +} +@media (max-width: 767px) { + #hotelAmenitiesBlock .visible-xs .amenity_img_secondary { + margin: 0 15px; + } + #hotelAmenitiesBlock .visible-xs .amenity_desc_secondary { + padding: 30px 15px; + } } \ No newline at end of file diff --git a/modules/wkhotelfeaturesblock/views/js/wkHotelFeaturesBlockFront.js b/modules/wkhotelfeaturesblock/views/js/wkHotelFeaturesBlockFront.js index 6be596818..6557ea3d7 100644 --- a/modules/wkhotelfeaturesblock/views/js/wkHotelFeaturesBlockFront.js +++ b/modules/wkhotelfeaturesblock/views/js/wkHotelFeaturesBlockFront.js @@ -37,6 +37,12 @@ function setAmenitiesWrapperHeight() { function setAmenitiesDescContHeight() { $('.amenity_desc_cont').each(function () { + // on mobile the image and text stack instead of sitting side by side, + // so matching the text box's height to the combined row height leaves a large blank gap + if ($(this).closest('.visible-xs').length) { + $(this).css('height', 'auto'); + return; + } var amenityDescParentHeight = $(this).parent('div.amenity_content').height(); $(this).css('height', amenityDescParentHeight); }); diff --git a/modules/wkhotelfeaturesblock/views/templates/hook/hotelfeaturescontent.tpl b/modules/wkhotelfeaturesblock/views/templates/hook/hotelfeaturescontent.tpl index ef809372f..6161fe715 100644 --- a/modules/wkhotelfeaturesblock/views/templates/hook/hotelfeaturescontent.tpl +++ b/modules/wkhotelfeaturesblock/views/templates/hook/hotelfeaturescontent.tpl @@ -156,7 +156,6 @@ {/block} -
{/if} {/block} diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css index d3776d0e5..f4f7e069d 100644 --- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css +++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css @@ -51,16 +51,17 @@ } } @media (max-width: 530px) { + #hotelRoomsBlock .col-md-6 > a img.width-100 { + width: calc(100% - 30px); + margin: 0 15px; + } .hotelRoomDescContainer{ - padding: 10px; + padding: 15px; } .wk_roomType_price_type{ font-size: 16px; font-weight: 400; } - .htlRoomTypeNameText { - width: 100%; - } .room_type_old_price { width: 100%; diff --git a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl index 872d29a25..09d0cf9cd 100644 --- a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl +++ b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl @@ -95,7 +95,7 @@ {/block} -
+ {/if} {/block} diff --git a/modules/wkroomsearchblock/views/css/wk-landing-page-search.css b/modules/wkroomsearchblock/views/css/wk-landing-page-search.css index b624668c2..9d66d9ac6 100644 --- a/modules/wkroomsearchblock/views/css/wk-landing-page-search.css +++ b/modules/wkroomsearchblock/views/css/wk-landing-page-search.css @@ -77,6 +77,15 @@ float: left; margin-top: 5px; width: 125px;} +#xs_room_search { + background: #1292FF; + background-image: none; + border-radius: 4px; + font-weight: 600; + text-transform: uppercase;} +#xs_room_search:hover, #xs_room_search:focus { + background: #0f7fe0; + background-image: none;} /* .fancybox-inner #search_hotel_block_form { grid-template-columns: 1fr; } */ \ No newline at end of file diff --git a/themes/hotel-reservation-theme/css/global.css b/themes/hotel-reservation-theme/css/global.css index 6755ff059..7bcf03fa2 100644 --- a/themes/hotel-reservation-theme/css/global.css +++ b/themes/hotel-reservation-theme/css/global.css @@ -7555,6 +7555,9 @@ div.star a:hover { .ie8 .breadcrumb .navigation-pipe { width: 20px; } +.copyRightWrapper { + text-align: center; } + .footer-container { background-color: #333333; padding-top: 30px; } @@ -9013,7 +9016,7 @@ body .ui-tooltip { .home_block_container { padding-top: 45px; - padding-bottom: 60px; + padding-bottom: 15px; position: relative; } .home_block_desc_wrapper { @@ -9042,6 +9045,17 @@ body .ui-tooltip { .home_block_description { font-size: 15px; line-height: 20px; } + .home_block_desc_wrapper { + padding: 0 15px; + margin-bottom: 30px; + } + .home_block_seperator { + display: none; + } + .home_block_container{ + padding-top: 30px; + padding-bottom: 30px; + } } .home_block_desc_line { border-color: #333333; diff --git a/themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css b/themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css index 46b2e74c1..cc2fbbf9c 100644 --- a/themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css +++ b/themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css @@ -177,6 +177,15 @@ .button.button-medium.newsletter-btn { position: relative; padding: 0px 20px; + background: #1292FF; + background-image: none; + border-radius: 4px; + font-weight: 600; + text-transform: uppercase; +} +.button.button-medium.newsletter-btn:hover, .button.button-medium.newsletter-btn:focus { + background: #0f7fe0; + background-image: none; } #newsletter-input { From 702f1c134ee25de192c6dda701e8c4191d3d89c4 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Wed, 14 Oct 2026 15:18:12 +0530 Subject: [PATCH 03/20] Fixed: Made the home, category, product, checkout, order confirmation, and order detail pages mobile- and tablet-compatible. --- .../hotel-reservation-theme/css/category.css | 59 ++++++++++++++++++- themes/hotel-reservation-theme/css/global.css | 20 +++++++ .../css/modules/blockcart/blockcart.css | 34 ++++++++++- .../hotel-reservation-theme/css/occupancy.css | 5 ++ .../css/order-detail.css | 2 + .../hotel-reservation-theme/css/order-opc.css | 5 +- .../hotel-reservation-theme/css/product.css | 21 +++++++ 7 files changed, 141 insertions(+), 5 deletions(-) diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index ffd798ece..2b9648d0e 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -68,6 +68,57 @@ margin-bottom: 15px; } +@media (max-width: 767px) { + .cat_cont > .col-sm-12 { + padding-left: 0; + padding-right: 0; + } + + .room_features_cont > .row { + flex-wrap: wrap; + } + + .room_features_cont > .row > [class*="col-"] { + width: 100%; + } + + .room-type-image { + width: 100%; + } + + .room_info_cont > .row:first-child { + display: flex; + flex-wrap: wrap; + align-items: baseline; + } + + .room_info_cont > .row:first-child:before, + .room_info_cont > .row:first-child:after { + display: none; + } + + .room_info_cont > .row:first-child { + justify-content: space-between; + } + + .room_info_cont .rm_heading { + font-size: 22px; + line-height: 28px; + } + + .room_info_cont .rm_left { + font-size: 14px; + } + + .room_info_cont .rm_price_val { + font-size: 26px; + } + + .room_info_cont .rm_price_txt { + font-size: 14px; + } +} + .rm_heading { color: #333333; @@ -293,7 +344,7 @@ p.capa_txt { flex-wrap: wrap; gap: 10px; } - .booking_room_fields .form-group { + .booking_room_fields .form-group:not(.occupancy_count_block) { width: 100%; } } @@ -348,4 +399,8 @@ p.capa_txt { .rm_desc .view_more { display: inline-block; -} \ No newline at end of file +} + +.layered_filter_cont:has(#filter_price_silder) { + padding-bottom: 15px; +} diff --git a/themes/hotel-reservation-theme/css/global.css b/themes/hotel-reservation-theme/css/global.css index 7bcf03fa2..539752b50 100644 --- a/themes/hotel-reservation-theme/css/global.css +++ b/themes/hotel-reservation-theme/css/global.css @@ -5976,6 +5976,12 @@ textarea { #columns { padding: 0; } +@media (max-width: 767px) { + #columns { + padding-left: 15px; + padding-right: 15px; + } +} #columns:has(#center_column > *) { position: relative; padding-bottom: 50px; @@ -8248,6 +8254,20 @@ p.p.payment_module { p.cheque-indent { margin-bottom: 9px; } +@media (max-width: 767px) { + .cheque-box .form-group > .col-xs-4 { + width: 100%; } } + +@media (max-width: 480px) { + .cheque-box + .cart_navigation .button-exclusive { + display: block; + margin-bottom: 15px; } + .cheque-box + .cart_navigation .button-medium { + float: none; + display: block; + width: 100%; + text-align: center; } } + @media (max-width: 480px) { p.payment_module a { background-position: 12px 8px!important; diff --git a/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css b/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css index ade12480a..31ee8504d 100644 --- a/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css +++ b/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css @@ -185,6 +185,18 @@ @media (max-width: 355px) { #header .cart_block { width: 270px; } } +@media (max-width: 480px) { + /* anchor the dropdown to the full-width header column so it stays inside the viewport */ + #header .header-top-item:has(> .shopping_cart) { + position: static; } + #header .shopping_cart > a:first-child { + position: relative; + overflow: visible; } + #header .cart_block { + top: 70px; + right: 15px; + width: calc(100vw - 30px); + max-width: 355px; } } /* @media (max-width: 1200px) { #header .cart_block { width: 100%; } }*/ @@ -363,7 +375,8 @@ #layer_cart .layer_cart_cart h2 { font-size: 18px; } } #layer_cart .layer_cart_cart .layer_cart_row { - padding: 0 0 7px 0; } + padding: 0 0 7px 0; + overflow: hidden; } #layer_cart .layer_cart_cart .button-container { position: absolute; bottom: 0; @@ -387,6 +400,25 @@ #layer_cart .layer_cart_cart .button-container span.exclusive-medium i { padding-right: 5px; color: #777777; } + @media (max-width: 575px) { + #layer_cart .layer_cart_product .product-image-container { + float: none; + margin-right: 0; + margin-bottom: 10px; } + #layer_cart { + left: 0; + width: 92%; + margin-left: 4%; + margin-right: 4%; } + #layer_cart .layer_cart_product .layer_cart_product_info { + padding-top: 5px; } + #layer_cart .layer_cart_cart .button-container .btn { + display: block; + width: 100%; + margin-right: 0; + text-align: center; } + #layer_cart .layer_cart_cart .button-container span.exclusive-medium { + margin-right: 0; } } #layer_cart .cross { position: absolute; right: 7px; diff --git a/themes/hotel-reservation-theme/css/occupancy.css b/themes/hotel-reservation-theme/css/occupancy.css index 1f8828905..7adb772b7 100644 --- a/themes/hotel-reservation-theme/css/occupancy.css +++ b/themes/hotel-reservation-theme/css/occupancy.css @@ -133,4 +133,9 @@ width: 100%;} .booking_occupancy_wrapper .occupancy_info_block .occupancy_count { width: 80%;} + /* room list: keep adults and children side by side, same as desktop */ + .booking_guest_occupancy_conatiner .booking_occupancy_wrapper .occupancy_info_block .occupancy_count_block { + width: 50%;} + .booking_guest_occupancy_conatiner .booking_occupancy_wrapper .occupancy_info_block .occupancy_count { + width: auto;} } \ No newline at end of file diff --git a/themes/hotel-reservation-theme/css/order-detail.css b/themes/hotel-reservation-theme/css/order-detail.css index 1a39b7e47..d0d5dcc34 100644 --- a/themes/hotel-reservation-theme/css/order-detail.css +++ b/themes/hotel-reservation-theme/css/order-detail.css @@ -288,11 +288,13 @@ } @media (max-width: 576px) { + .hotel-details .card-header, .refund_element_details .card-header { flex-direction: column; align-items: flex-start; } + .hotel-details .card-header .booking-actions-wrap, .refund_element_details .card-header .booking-actions-wrap { margin-top: 10px; margin-left: -10px; diff --git a/themes/hotel-reservation-theme/css/order-opc.css b/themes/hotel-reservation-theme/css/order-opc.css index af1d28968..89abe4acf 100644 --- a/themes/hotel-reservation-theme/css/order-opc.css +++ b/themes/hotel-reservation-theme/css/order-opc.css @@ -568,11 +568,12 @@ } @media (max-width: 480px) { #order-opc .proceed_btn_block .button-medium, - #order-opc .proceed_btn_block .btn-edit-guest-info { + #order-opc .proceed_btn_block .btn-edit-guest-info, + #order-opc #login_form_content #SubmitLogin { float: none !important; display: block; width: 100%; - padding: 12px 20px; + padding: 0 20px; margin-right: 0; margin-bottom: 10px; text-align: center; diff --git a/themes/hotel-reservation-theme/css/product.css b/themes/hotel-reservation-theme/css/product.css index 378962222..f45fa0d33 100644 --- a/themes/hotel-reservation-theme/css/product.css +++ b/themes/hotel-reservation-theme/css/product.css @@ -1604,6 +1604,27 @@ ul.service-product-nav > li:hover { .service-product-element .service-product-actions { display: flex; } +@media (max-width: 575px) { + .service-product-element .service-product-actions { + width: 100%; + margin-top: 8px; + flex-wrap: wrap; + justify-content: flex-end; + row-gap: 8px; + } + .service-product-element .service-product-actions .qty_container { + flex: 0 0 auto; + } +} +@media (max-width: 370px) { + .service-product-element .service-product-actions .qty_container { + margin-right: 4px; + } + .service-product-element .service-product-actions .qty_container .qty_count { + padding-left: 10px; + padding-right: 10px; + } +} .service-product-element .qty_container > * { float: left; From 365e22702e2e582804d466b9ee11185fd4fcd9e8 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Wed, 14 Oct 2026 19:52:05 +0530 Subject: [PATCH 04/20] Fixed: design related issue on home page, order page and search page --- .../views/templates/hook/copyRight.tpl | 2 +- .../views/templates/hook/displayCopyRight.tpl | 2 +- .../views/css/WkAboutHotelBlockFront.css | 43 +++++++++++++++++-- .../views/css/WkHotelRoomBlockFront.css | 6 +-- .../views/css/wk-landing-page-search.css | 13 ++---- themes/hotel-reservation-theme/css/global.css | 3 ++ .../blocknewsletter/blocknewsletter.css | 5 --- .../css/order-detail.css | 24 +++++++++++ .../hotel-reservation-theme/css/order-opc.css | 22 +++++++++- themes/hotel-reservation-theme/order-opc.tpl | 2 +- 10 files changed, 97 insertions(+), 25 deletions(-) diff --git a/modules/hotelreservationsystem/views/templates/hook/copyRight.tpl b/modules/hotelreservationsystem/views/templates/hook/copyRight.tpl index 87a990ed1..eb3541799 100644 --- a/modules/hotelreservationsystem/views/templates/hook/copyRight.tpl +++ b/modules/hotelreservationsystem/views/templates/hook/copyRight.tpl @@ -1,4 +1,4 @@ -
+

©{if isset($WK_HTL_ESTABLISHMENT_YEAR) && $WK_HTL_ESTABLISHMENT_YEAR} {$WK_HTL_ESTABLISHMENT_YEAR}-{'Y'|date} {/if} {$WK_HTL_CHAIN_NAME}. {l s=' All rights reserved. | Powered by' mod='hotelreservationsystem'} QloApps

diff --git a/modules/hotelreservationsystem/views/templates/hook/displayCopyRight.tpl b/modules/hotelreservationsystem/views/templates/hook/displayCopyRight.tpl index 47ddf641d..6ece6dedb 100644 --- a/modules/hotelreservationsystem/views/templates/hook/displayCopyRight.tpl +++ b/modules/hotelreservationsystem/views/templates/hook/displayCopyRight.tpl @@ -1,3 +1,3 @@ -
+

© {$WK_HTL_ESTABLISHMENT_YEAR} - {$currentYear} , {l s='All rights reserved' mod='hotelreservationsystem'}.

\ No newline at end of file diff --git a/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css b/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css index c826c850f..d99418976 100644 --- a/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css +++ b/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css @@ -25,8 +25,8 @@ } @media (max-width: 767px) { .htlInterior-owlCarousel .owl-carousel { - width: calc(100% - 30px); - margin: 0 15px; + width: 100%; + margin: 0; } } .interiorImgWrapper { @@ -104,4 +104,41 @@ font-size: 50px; text-align: center; vertical-align: middle; -} \ No newline at end of file +} + +/* Interior gallery below desktop: one wide image over two smaller ones */ +@media (max-width: 1199px) { + #hotelInteriorBlock .interiorImgWrapper { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px; + } + #hotelInteriorBlock .interiorbox { + padding-bottom: 75%; + } + #hotelInteriorBlock .interiorbox:first-child { + grid-column: 1 / -1; + padding-bottom: 56.25%; + } + #hotelInteriorBlock .interiorboxInner { + border: 0; + } + .htlInterior-owlCarousel .owl-stage-outer { + border: 0; + } +} +.htlInterior-owlCarousel .nav-direction-secondary { + width: 36px; + height: 36px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; +} +.htlInterior-owlCarousel .owl-prev { + left: 8px; +} +.htlInterior-owlCarousel .owl-next { + right: 8px; +} + diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css index f4f7e069d..12d20c2b7 100644 --- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css +++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css @@ -52,11 +52,11 @@ } @media (max-width: 530px) { #hotelRoomsBlock .col-md-6 > a img.width-100 { - width: calc(100% - 30px); - margin: 0 15px; + width: 100%; + margin: 0; } .hotelRoomDescContainer{ - padding: 15px; + padding: 15px 0px; } .wk_roomType_price_type{ font-size: 16px; diff --git a/modules/wkroomsearchblock/views/css/wk-landing-page-search.css b/modules/wkroomsearchblock/views/css/wk-landing-page-search.css index 9d66d9ac6..d4ebcab33 100644 --- a/modules/wkroomsearchblock/views/css/wk-landing-page-search.css +++ b/modules/wkroomsearchblock/views/css/wk-landing-page-search.css @@ -65,6 +65,10 @@ max-height: 80vh; overflow-y: auto; } + /* the date picker opens inside this popup, so don't clip it */ + .fancybox-inner:has(#xs_room_search_form) { + overflow: visible !important; + } } .fancy_search_header_xs { margin-top: 25px; @@ -77,15 +81,6 @@ float: left; margin-top: 5px; width: 125px;} -#xs_room_search { - background: #1292FF; - background-image: none; - border-radius: 4px; - font-weight: 600; - text-transform: uppercase;} -#xs_room_search:hover, #xs_room_search:focus { - background: #0f7fe0; - background-image: none;} /* .fancybox-inner #search_hotel_block_form { grid-template-columns: 1fr; } */ \ No newline at end of file diff --git a/themes/hotel-reservation-theme/css/global.css b/themes/hotel-reservation-theme/css/global.css index 539752b50..edce6cae6 100644 --- a/themes/hotel-reservation-theme/css/global.css +++ b/themes/hotel-reservation-theme/css/global.css @@ -9076,6 +9076,9 @@ body .ui-tooltip { padding-top: 30px; padding-bottom: 30px; } + .margin-btm-50 { + margin-bottom: 0px; + } } .home_block_desc_line { border-color: #333333; diff --git a/themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css b/themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css index cc2fbbf9c..e194ac1ca 100644 --- a/themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css +++ b/themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css @@ -177,11 +177,6 @@ .button.button-medium.newsletter-btn { position: relative; padding: 0px 20px; - background: #1292FF; - background-image: none; - border-radius: 4px; - font-weight: 600; - text-transform: uppercase; } .button.button-medium.newsletter-btn:hover, .button.button-medium.newsletter-btn:focus { background: #0f7fe0; diff --git a/themes/hotel-reservation-theme/css/order-detail.css b/themes/hotel-reservation-theme/css/order-detail.css index d0d5dcc34..c3797ffa8 100644 --- a/themes/hotel-reservation-theme/css/order-detail.css +++ b/themes/hotel-reservation-theme/css/order-detail.css @@ -300,12 +300,36 @@ margin-left: -10px; } + .hotel-details .card-header .booking-actions-wrap { + margin-left: -6px; + } + + .hotel-details .card-header .booking-actions-wrap .btn { + margin-left: 6px; + padding-left: 10px; + padding-right: 10px; + font-size: 13px; + } + .product-detail .num-refunded-rooms { display: block; float: none; } } +@media (max-width: 360px) { + .hotel-details .card-header .booking-actions-wrap { + margin-left: -5px; + } + + .hotel-details .card-header .booking-actions-wrap .btn { + margin-left: 5px; + padding-left: 8px; + padding-right: 8px; + font-size: 12px; + } +} + @media (min-width: 768px) and (max-width: 1200px) { .refund_element_details .card-header .booking-actions-wrap .col-xs-12, .service-product-details .card-header .booking-actions-wrap .col-xs-12 { flex-wrap: nowrap; diff --git a/themes/hotel-reservation-theme/css/order-opc.css b/themes/hotel-reservation-theme/css/order-opc.css index 89abe4acf..55ee95e38 100644 --- a/themes/hotel-reservation-theme/css/order-opc.css +++ b/themes/hotel-reservation-theme/css/order-opc.css @@ -557,13 +557,31 @@ width: 50%; } } -@media (max-width: 767px) { +/* Mobile & tablet: show cart total + voucher blocks before the payment block */ +@media (max-width: 991px) { #order-opc #content > .row { display: flex; flex-direction: column; } + #order-opc #content > .row:before, + #order-opc #content > .row:after { + display: none; + } + #order-opc #content > .row > .col-md-8, + #order-opc #content > .row > .col-md-8 > #oprder-opc-accordion { + display: contents; + } + #order-opc #content > .row > .col-md-8 > #oprder-opc-accordion > .card { + order: 0; + margin-left: 15px; + margin-right: 15px; + } #order-opc #content > .row > .col-md-4 { - order: -1; + order: 1; + width: 100%; + } + #order-opc #content > .row > .col-md-8 > #oprder-opc-accordion > #order-payment-block { + order: 2; } } @media (max-width: 480px) { diff --git a/themes/hotel-reservation-theme/order-opc.tpl b/themes/hotel-reservation-theme/order-opc.tpl index 03bc35fd6..5d16a2f55 100644 --- a/themes/hotel-reservation-theme/order-opc.tpl +++ b/themes/hotel-reservation-theme/order-opc.tpl @@ -226,7 +226,7 @@ {include file="$tpl_dir./order-carrier.tpl"}
*} -
+
{block name='order_opc_payment_heading'}
From 33a6caba2fc8c7bfd23785b69d4199befe9b314d Mon Sep 17 00:00:00 2001 From: amit sharma Date: Thu, 15 Oct 2026 11:58:47 +0530 Subject: [PATCH 05/20] Fixed: add search option on category page --- .../views/css/wk-category-search.css | 58 ++++++++++++++++++- .../templates/hook/categoryPageSearch.tpl | 16 +++++ .../wkroomsearchblock/wkroomsearchblock.php | 1 + .../hotel-reservation-theme/css/category.css | 15 +++++ .../css/order-confirmation.css | 6 ++ .../hotel-reservation-theme/css/product.css | 1 + 6 files changed, 96 insertions(+), 1 deletion(-) diff --git a/modules/wkroomsearchblock/views/css/wk-category-search.css b/modules/wkroomsearchblock/views/css/wk-category-search.css index 37889ddd2..d0d81c043 100644 --- a/modules/wkroomsearchblock/views/css/wk-category-search.css +++ b/modules/wkroomsearchblock/views/css/wk-category-search.css @@ -60,4 +60,60 @@ .header-rmsearch-wrapper { padding: 10px 5px;} -} \ No newline at end of file +} + +/* searched details and the close icon are for mobile and tablet only */ +.header-rmsearch-details-wrapper, +.header-rmsearch-wrapper .close_room_serach_wrapper { + display: none;} +/* mobile and tablet: show the searched details, the search form opens with the edit button */ +@media (max-width: 991px) { + .header-rmsearch-wrapper { + display: none; + position: relative;} + .header-rmsearch-details-wrapper { + display: block;} + .header-rmsearch-wrapper .close_room_serach_wrapper { + display: block; + position: absolute; + top: 8px; + right: 15px; + z-index: 1;} + .close_room_serach_wrapper img { + width: 18px;} + .header-rmsearch-details-wrapper { + padding: 0 0 15px;} + .header-rmsearch-details-wrapper .filter_header { + font-size: 12px; + color: #333; + line-height: 25px;} + .header-rmsearch-details-wrapper .filter_header p { + margin: 0;} + .header-rmsearch-details-wrapper .search_result_info { + font-size: 15px; + font-weight: bold; + line-height: 30px; + color: #333333;} + .header-rmsearch-details-wrapper .modify_roomtype_search_btn { + border: 1px solid #777777; + font-weight: bold; + border-radius: 4px; + font-size: 13px; + padding: 6px 12px; + color: #333333; + text-align: center; + text-transform: uppercase;} + .header-rmsearch-details-wrapper .faded-txt { + color: #777777;} +} +/* desktop always shows the search form, even if it was closed on a smaller screen */ +@media (min-width: 992px) { + .header-rmsearch-wrapper { + display: block !important;} +} +/* the sidebar is narrow on tablets, so keep the searched details compact */ +@media (min-width: 768px) and (max-width: 991px) { + .header-rmsearch-details-wrapper .search_result_info { + font-size: 13px; + line-height: 20px;} +} diff --git a/modules/wkroomsearchblock/views/templates/hook/categoryPageSearch.tpl b/modules/wkroomsearchblock/views/templates/hook/categoryPageSearch.tpl index e0a1037a5..59cedeb92 100644 --- a/modules/wkroomsearchblock/views/templates/hook/categoryPageSearch.tpl +++ b/modules/wkroomsearchblock/views/templates/hook/categoryPageSearch.tpl @@ -22,7 +22,23 @@ {block name='category_page_search_panel'} {if isset($hotels_info) && count($hotels_info)} + {* searched information, shown on mobile and tablet only *} + {block name='category_page_search_info'} + {if isset($search_data) && $search_data} +
+
+

{l s='Searched results for' mod='wkroomsearchblock'}: + +

+
+
+ {$search_data['htl_dtl']['hotel_name']|escape:'htmlall':'UTF-8'}, {$search_data['htl_dtl']['city']|escape:'htmlall':'UTF-8'} {if !$search_data['order_date_restrict']} {if (isset($search_data['date_from']))}{$search_data['date_from']|escape:'htmlall':'UTF-8'|date_format:"%d %b %Y"}{/if} - {if isset($search_data['date_to'])}{$search_data['date_to']|escape:'htmlall':'UTF-8'|date_format:"%d %b %Y"}{/if} ({1+$search_data['num_days']|escape:'htmlall':'UTF-8'} {l s='Days' mod='wkroomsearchblock'} {$search_data['num_days']|escape:'htmlall':'UTF-8'} {if $search_data['num_days'] > 1}{l s='Nights' mod='wkroomsearchblock'}{else}{l s='Night' mod='wkroomsearchblock'}{/if}) {/if} +
+
+ {/if} + {/block}
+

{l s='Search Rooms' mod='wkroomsearchblock'}

diff --git a/modules/wkroomsearchblock/wkroomsearchblock.php b/modules/wkroomsearchblock/wkroomsearchblock.php index 834845e14..4e0db50d8 100644 --- a/modules/wkroomsearchblock/wkroomsearchblock.php +++ b/modules/wkroomsearchblock/wkroomsearchblock.php @@ -102,6 +102,7 @@ class WkRoomSearchBlock extends Module // apply assets as per pages if ('category' == $controller) { $this->context->controller->addCSS($this->_path.'views/css/wk-category-search.css'); + $this->context->controller->addJS($this->_path.'views/js/wk-roomtype-search.js'); } if ('index' == $controller) { $this->context->controller->addCSS($this->_path.'views/css/wk-landing-page-search.css'); diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index 2b9648d0e..7bac089dc 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -403,4 +403,19 @@ p.capa_txt { .layered_filter_cont:has(#filter_price_silder) { padding-bottom: 15px; + margin-bottom: 20px; +} + +@media (min-width: 768px) and (max-width: 991px) { + .catSortBlock .col-sm-3 { + width: auto; + } + + .catSortBlock .filter_dw_cont .btn { + white-space: nowrap; + } + + .catSortBlock .filter_dw_cont .sort_btn_span { + margin-right: 8px; + } } diff --git a/themes/hotel-reservation-theme/css/order-confirmation.css b/themes/hotel-reservation-theme/css/order-confirmation.css index 7ffb35365..d24f7e8cb 100644 --- a/themes/hotel-reservation-theme/css/order-confirmation.css +++ b/themes/hotel-reservation-theme/css/order-confirmation.css @@ -260,6 +260,12 @@ margin: 0; } +@media (max-width: 768px) { + .table.table-summary { + margin-bottom: 0; + border: none; + } +} .table.table-summary.table-sm td { padding: 8px 0; } diff --git a/themes/hotel-reservation-theme/css/product.css b/themes/hotel-reservation-theme/css/product.css index f45fa0d33..4128852c6 100644 --- a/themes/hotel-reservation-theme/css/product.css +++ b/themes/hotel-reservation-theme/css/product.css @@ -1603,6 +1603,7 @@ ul.service-product-nav > li:hover { .service-product-element .service-product-actions { display: flex; + margin-left: auto; } @media (max-width: 575px) { .service-product-element .service-product-actions { From 79de0276057aeda3a9736bb082f5848fde546fde Mon Sep 17 00:00:00 2001 From: amit sharma Date: Thu, 15 Oct 2026 16:50:42 +0530 Subject: [PATCH 06/20] Fixed: product page and category page mobile responsive issue --- .../views/css/WkHotelRoomBlockFront.css | 6 ++++ .../views/css/wk-category-search.css | 8 +---- .../hotel-reservation-theme/css/category.css | 32 +++++++++++++++++++ 3 files changed, 39 insertions(+), 7 deletions(-) diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css index 12d20c2b7..35c0a41cb 100644 --- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css +++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css @@ -50,6 +50,12 @@ float :right; } } +@media (min-width: 768px) and (max-width: 991px) { + #hotelRoomsBlock .col-md-6 { + width: 50%; + float: left; + } +} @media (max-width: 530px) { #hotelRoomsBlock .col-md-6 > a img.width-100 { width: 100%; diff --git a/modules/wkroomsearchblock/views/css/wk-category-search.css b/modules/wkroomsearchblock/views/css/wk-category-search.css index d0d81c043..b974b57c0 100644 --- a/modules/wkroomsearchblock/views/css/wk-category-search.css +++ b/modules/wkroomsearchblock/views/css/wk-category-search.css @@ -110,10 +110,4 @@ @media (min-width: 992px) { .header-rmsearch-wrapper { display: block !important;} -} -/* the sidebar is narrow on tablets, so keep the searched details compact */ -@media (min-width: 768px) and (max-width: 991px) { - .header-rmsearch-details-wrapper .search_result_info { - font-size: 13px; - line-height: 20px;} -} +} \ No newline at end of file diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index 7bac089dc..454c5050a 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -407,6 +407,11 @@ p.capa_txt { } @media (min-width: 768px) and (max-width: 991px) { + #category #left_column, + #category #center_column { + width: 100%; + } + .catSortBlock .col-sm-3 { width: auto; } @@ -419,3 +424,30 @@ p.capa_txt { margin-right: 8px; } } + +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md .capa_txt { + padding-left: 0; + } +} + +.rm_amen_more { + display: none; +} +@media (max-width: 1199px) { + .rm_amen_extra { + display: none; + } + + .rm_amen_more { + display: inline-block; + margin-bottom: 5px; + padding: 0 6px; + border: 1px solid #379BF0; + border-radius: 10px; + font-size: 12px; + line-height: 18px; + color: #379BF0; + vertical-align: top; + } +} From e9abedcedffb60f7a61cce9f10f9157811f1d571 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Wed, 21 Oct 2026 11:51:33 +0530 Subject: [PATCH 07/20] =?UTF-8?q?Fixed:=20Hide=20the=20=E2=80=9COur=20Prop?= =?UTF-8?q?erty=E2=80=9D=20option=20on=20mobile=20screens.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/hotel-reservation-theme/css/global.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/themes/hotel-reservation-theme/css/global.css b/themes/hotel-reservation-theme/css/global.css index edce6cae6..166c669f0 100644 --- a/themes/hotel-reservation-theme/css/global.css +++ b/themes/hotel-reservation-theme/css/global.css @@ -9446,6 +9446,12 @@ div a.our_properties_link{ font-size: 17px; font-weight: 400;} +/* the menu panel already has a link to the properties page on mobile */ +@media (max-width: 767px) { + div a.our_properties_link { + display: none; } +} + .htl-tooltip { cursor: pointer; display: inline-block; From d7731ebb3dbb15dd519def93fc46b6b0a8cc3cb1 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Fri, 23 Oct 2026 15:27:35 +0530 Subject: [PATCH 08/20] Fixed: added home page room type slider --- .../views/css/WkHotelRoomBlockFront.css | 202 +++++++++++++++++- .../views/js/WkHotelRoomBlockFront.js | 13 ++ .../templates/hook/hotelRoomDisplayBlock.tpl | 98 +++++---- modules/wkhotelroom/wkhotelroom.php | 35 +++ .../hotel-reservation-theme/css/category.css | 39 +++- .../css/modules/blockcart/blockcart.css | 3 + .../hotel-reservation-theme/css/occupancy.css | 8 +- .../hotel-reservation-theme/css/product.css | 41 +++- 8 files changed, 383 insertions(+), 56 deletions(-) diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css index 35c0a41cb..c8a0d6286 100644 --- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css +++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css @@ -98,12 +98,206 @@ a.htlRoomTypeBookNow { text-transform: capitalize; } -.btn.htlRoomTypeBookNow:hover{ - border: 1px solid #333333; -} .room_type_old_price { text-decoration: line-through; color:#555555; font-size:14px; -} \ No newline at end of file +} + +/* room type cards slider */ +.htlRoom-owlCarousel .owl-carousel { + padding: 0 0 6px; +} +.htlRoomCard { + background: #fff; + border: 1px solid #E5E5E5; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 4px rgba(0, 0, 0, .06); +} +.htlRoomCardImg { + display: block; + aspect-ratio: 4 / 3; + overflow: hidden; +} +.htlRoomCardImg img { + width: 100%; + height: 100%; + object-fit: cover; +} +.htlRoomCardBody { + padding: 16px; +} +.htlRoomCardBody .htlRoomTypeNameText { + float: none; + margin: 0 0 12px; + font-size: 22px; +} +.htlRoomCardFeatured { + display: flex; + flex-wrap: wrap; + gap: 6px 16px; + padding: 0 0 12px; + color: #555; + font-size: 15px; +} +.htlRoomCardFeatured img.htlRoomFeatureImg { + width: 16px; + height: 16px; + max-width: 16px; + flex: 0 0 16px; + margin-right: 0; + object-fit: contain; +} +.htlRoomCardAmen > span img.htlRoomAmenityImg { + width: 18px; + height: 18px; + max-width: 18px; + object-fit: contain; +} +.htlRoomCardFeatured > span { + display: inline-flex; + align-items: center; + gap: 4px; + white-space: nowrap; +} +.htlRoomCardFeatured i { + margin-right: 0; + color: #777; +} +.htlRoomCardMeta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 12px 0; + border-top: 1px solid #E5E5E5; + border-bottom: 1px solid #E5E5E5; + color: #555; + font-size: 15px; +} +.htlRoomCardGuests i { + margin-right: 4px; + color: #777; +} +.htlRoomCardAmen { + display: flex; + gap: 6px; +} +.htlRoomCardAmen > span { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: 1px solid #D6D6D6; + border-radius: 50%; + font-size: 14px; + color: #666; +} +.htlRoomCardFoot { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding-top: 14px; +} +.htlRoomCardFoot .htlRoomTypePriceText { + float: none; + margin: 0; + font-size: 22px; + font-weight: 700; + line-height: 1.2; +} +.htlRoomCardFoot .wk_roomType_price_type { + font-size: 14px; + font-weight: 400; + color: #777; +} +.htlRoomCardFoot .room_type_old_price { + display: block; + width: auto; + font-size: 14px; + font-weight: 400; +} +a.htlRoomTypeBookNow { + padding: 10px 20px; + border: 0; + border-radius: 3px; + background: #379BF0; + color: #fff; + font-weight: 700; + white-space: nowrap; +} +a.htlRoomTypeBookNow:hover { + background: #2d86d3; + color: #fff; +} +.htlRoom-owlCarousel .owl-nav .owl-prev, +.htlRoom-owlCarousel .owl-nav .owl-next { + position: absolute; + top: 38%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + width: 44px; + height: 44px; + border-radius: 50%; + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, .2); + font-size: 22px; + line-height: 1; +} +.htlRoom-owlCarousel .owl-nav .owl-prev { + left: -12px; +} +.htlRoom-owlCarousel .owl-nav .owl-next { + right: -12px; +} +.htlRoom-owlCarousel .owl-nav .disabled { + display: none; +} +@media (max-width: 767px) { + .htlRoom-owlCarousel .owl-nav .owl-prev { + left: 4px; + } + .htlRoom-owlCarousel .owl-nav .owl-next { + right: 4px; + } + .htlRoomCardBody .htlRoomTypeNameText { + font-size: 20px; + } +} + +/* equal height cards: price row sits at the bottom, occupancy row keeps the same height with or without amenities */ +.htlRoom-owlCarousel .owl-stage { + display: flex; +} +.htlRoom-owlCarousel .owl-item { + display: flex; +} +.htlRoomCard { + display: flex; + flex-direction: column; + width: 100%; +} +.htlRoomCardBody { + display: flex; + flex: 1; + flex-direction: column; +} +.htlRoomCardFoot { + margin-top: auto; +} +.htlRoomCardGuests { + display: inline-flex; + align-items: center; + min-height: 32px; +} + +.htlRoomCard { + width: calc(100% - 4px); + margin: 2px; +} diff --git a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js index 216c2be8c..815afb812 100644 --- a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js +++ b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js @@ -21,6 +21,19 @@ */ $(document).ready(function() { + $('.htlRoom-owlCarousel .owl-carousel').owlCarousel({ + loop: true, + nav: true, + navText: ['', ''], + dots: false, + margin: 24, + items: 1, + rtl: typeof language_is_rtl != 'undefined' && language_is_rtl, + responsive: { + 768: { items: 2 }, + 992: { items: 3 } + } + }); applyChangesToDescription(); $(window).on('resize', function() { resetDescriptionChanges(); diff --git a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl index 09d0cf9cd..a8a286ffb 100644 --- a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl +++ b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl @@ -38,59 +38,67 @@
{/if} {block name='hotel_room_block_content'} -
+
- {assign var='htlRoomBlockIteration' value=0} - {foreach from=$hotelRoomDisplay item=roomDisplay name=htlRoom} - {if $smarty.foreach.htlRoom.iteration%2} -
- {/if} -
- {block name='hotel_room_block_room_type_image'} - - {$roomDisplay.name|escape:'htmlall':'UTF-8'} - - {/block} - {block name='displayHotelRoomsBlockImageAfter'} - {hook h='displayHotelRoomsBlockImageAfter' room_type=$roomDisplay} - {/block} -
- {block name='hotel_room_block_room_type_description'} -
-

{$roomDisplay.name|escape:'htmlall':'UTF-8'}

- {if $roomDisplay.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE} -

- {if $roomDisplay.feature_price_diff >= 0} - {convertPrice price = $roomDisplay.price_without_reduction} - {/if} - {if $roomDisplay.feature_price_diff} - {convertPrice price = $roomDisplay.feature_price} - {/if} - - / {l s='Per Night' mod='wkhotelroom'} +

+ {foreach from=$hotelRoomDisplay item=roomDisplay name=htlRoom} +
+ {block name='hotel_room_block_room_type_image'} + + {$roomDisplay.name|escape:'htmlall':'UTF-8'} + + {/block} + {block name='displayHotelRoomsBlockImageAfter'} + {hook h='displayHotelRoomsBlockImageAfter' room_type=$roomDisplay} + {/block} +
+ {block name='hotel_room_block_room_type_description'} +

{$roomDisplay.name|escape:'htmlall':'UTF-8'}

+ {if $roomDisplay.feature} +
+ {foreach from=$roomDisplay.feature item=feat} + + {if $feat.logo_type == 'icon'}{else}{$feat.name|escape:'htmlall':'UTF-8'}{/if} + {$feat.value|escape:'htmlall':'UTF-8'} -

+ {/foreach} +
+ {/if} +
+ {$roomDisplay.max_adults|intval} {l s='Adults' mod='wkhotelroom'}{if $roomDisplay.max_children}, {$roomDisplay.max_children|intval} {if $roomDisplay.max_children > 1}{l s='Children' mod='wkhotelroom'}{else}{l s='Child' mod='wkhotelroom'}{/if}{/if} + {if $roomDisplay.amenities} + + {foreach from=$roomDisplay.amenities item=amenity} + {if $amenity.logo} + + {if $amenity.logo_type == 'icon'}{else}{$amenity.name|escape:'htmlall':'UTF-8'}{/if} + + {/if} + {/foreach} + + {/if} +
+ {/block} +
+ {if $roomDisplay.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE} +

+ {if $roomDisplay.feature_price_diff >= 0} + {convertPrice price = $roomDisplay.price_without_reduction} {/if} -

-
{$roomDisplay.description|escape:'html':'UTF-8'}
- -
...{l s='Read More.' mod='wkhotelroom'}...{l s='Read Less.' mod='wkhotelroom'}
- {/block} + {if $roomDisplay.feature_price_diff} + {convertPrice price = $roomDisplay.feature_price} + {/if} + / {l s='night' mod='wkhotelroom'} +

+ {/if} {block name='hotel_room_block_action'} -
- {if !isset($restricted_country_mode) && !$PS_CATALOG_MODE}{l s='book now' mod='wkhotelroom'}{else}{l s='View' mod='wkhotelroom'}{/if} -
+ {if !isset($restricted_country_mode) && !$PS_CATALOG_MODE}{l s='Book now' mod='wkhotelroom'}{else}{l s='View' mod='wkhotelroom'}{/if} {/block}
- {if !($smarty.foreach.htlRoom.iteration%2)}
- {/if} - {assign var='htlRoomBlockIteration' value=$smarty.foreach.htlRoom.iteration} - {/foreach} - {if $htlRoomBlockIteration%2} -
- {/if} + {/foreach} +
{/block} diff --git a/modules/wkhotelroom/wkhotelroom.php b/modules/wkhotelroom/wkhotelroom.php index 190f3bcc9..6e5d872fd 100644 --- a/modules/wkhotelroom/wkhotelroom.php +++ b/modules/wkhotelroom/wkhotelroom.php @@ -51,6 +51,8 @@ class WkHotelRoom extends Module $dateFrom = date('Y-m-d'); $dateTo = date('Y-m-d', strtotime($dateFrom) + 86400); $useTax = HotelBookingDetail::useTax(); + $maxAmenities = $this->getRoomCardLimit('WK_MAX_AMENITIES_ROOM_SEARCH'); + $maxFeatures = $this->getRoomCardLimit('WK_MAX_ROOM_TYPE_FEATURE_VALUES'); foreach ($hotelRoomDisplay as &$htlRoom) { $idProduct = $htlRoom['id_product']; $product = new Product($idProduct, false, $idLang); @@ -109,6 +111,28 @@ class WkHotelRoom extends Module 1, array(array('adults' => 1, 'children' => 0, 'child_ages' => array())) ); + $objRoomType = new HotelRoomType(); + $roomTypeInfo = $objRoomType->getRoomTypeInfoByIdProduct($idProduct); + $htlRoom['max_adults'] = $roomTypeInfo ? (int) $roomTypeInfo['max_adults'] : 0; + $htlRoom['max_children'] = $roomTypeInfo ? (int) $roomTypeInfo['max_children'] : 0; + $htlRoom['feature'] = array(); + foreach (Product::getFrontFeaturesStatic($idLang, $idProduct) as $feature) { + if ($feature['is_featured'] && $feature['logo']) { + if (isset($htlRoom['feature'][$feature['id_feature']])) { + $htlRoom['feature'][$feature['id_feature']]['values'][] = $feature['value']; + } else { + $feature['values'] = array($feature['value']); + $htlRoom['feature'][$feature['id_feature']] = $feature; + } + } + } + $htlRoom['feature'] = array_values($htlRoom['feature']); + $htlRoom['feature'] = array_slice($htlRoom['feature'], 0, $maxFeatures); + $htlRoom['amenities'] = array_slice( + HotelRoomTypeAmenities::getAmenities($idProduct, $idLang, true), + 0, + $maxAmenities + ); $htlRoom['feature_price'] = $featurePrice; $htlRoom['feature_price_diff'] = (float)($priceWithoutReduction - $featurePrice); } @@ -123,16 +147,27 @@ class WkHotelRoom extends Module 'HOTEL_ROOM_DISPLAY_DESCRIPTION', $this->context->language->id ), + 'amenity_img_dir' => _MODULE_DIR_.'hotelreservationsystem/views/img/hotel_amenities/', 'hotelRoomDisplay' => $hotelRoomDisplay ) ); + $this->context->controller->addCSS(_PS_JS_DIR_.'owl-carousel/assets/owl.carousel.min.css'); + $this->context->controller->addCSS(_PS_JS_DIR_.'owl-carousel/assets/owl.theme.default.min.css'); + $this->context->controller->addJS(_PS_JS_DIR_.'owl-carousel/owl.carousel.min.js'); $this->context->controller->addJs($this->_path.'/views/js/WkHotelRoomBlockFront.js'); $this->context->controller->addCSS($this->_path.'/views/css/WkHotelRoomBlockFront.css'); return $this->display(__FILE__, 'hotelRoomDisplayBlock.tpl'); } + public function getRoomCardLimit($configKey) + { + $limit = (int) Configuration::get($configKey); + + return ($limit < 1 || $limit > 5) ? 3 : $limit; + } + public function hookActionProductSave($params) { if (isset($params['id_product']) && $params['id_product']) { diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index 472225e01..f06f2b686 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -213,11 +213,19 @@ p.capa_txt { color: #555555; } +.room_featured_features { + display: flex; + flex-wrap: wrap; + gap: 8px 18px; +} .room_featured_feature { - display: inline-block; - margin: 0 10px 10px 0; + display: inline-flex; + align-items: center; + gap: 6px; + margin: 0; color: #555; + white-space: nowrap; } .room_featured_feature i{ @@ -469,3 +477,30 @@ p.capa_txt { vertical-align: top; } } + +@media (max-width: 567px) { + .booking_room_fields > div, + .booking_room_fields .booking_guest_occupancy_conatiner, + .booking_room_fields .booking_guest_occupancy_conatiner > .form-group, + .booking_room_fields .booking_guest_occupancy_conatiner .booking_guest_occupancy, + .booking_room_fields .btn_book_now_with_occupancy { + width: 100%; + } +} + +@media (min-width: 568px) and (max-width: 767px) { + .booking_room_fields > div { + width: calc(50% - 5px); + } + .booking_room_fields .booking_guest_occupancy_conatiner > .form-group, + .booking_room_fields .booking_guest_occupancy_conatiner .booking_guest_occupancy, + .booking_room_fields .btn_book_now_with_occupancy { + width: 100%; + } +} + +@media (max-width: 767px) { + .booking_room_fields .btn_book_now_with_occupancy { + text-align: center; + } +} diff --git a/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css b/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css index 31ee8504d..1a38645c9 100644 --- a/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css +++ b/themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css @@ -419,6 +419,9 @@ text-align: center; } #layer_cart .layer_cart_cart .button-container span.exclusive-medium { margin-right: 0; } } + @media (min-width: 576px) and (max-width: 991px) { + #layer_cart .layer_cart_cart .button-container { + text-align: center; } } #layer_cart .cross { position: absolute; right: 7px; diff --git a/themes/hotel-reservation-theme/css/occupancy.css b/themes/hotel-reservation-theme/css/occupancy.css index 7adb772b7..8105bcdf3 100644 --- a/themes/hotel-reservation-theme/css/occupancy.css +++ b/themes/hotel-reservation-theme/css/occupancy.css @@ -133,9 +133,11 @@ width: 100%;} .booking_occupancy_wrapper .occupancy_info_block .occupancy_count { width: 80%;} - /* room list: keep adults and children side by side, same as desktop */ - .booking_guest_occupancy_conatiner .booking_occupancy_wrapper .occupancy_info_block .occupancy_count_block { + /* room list and product page booking form: keep adults and children side by side, same as desktop */ + .booking_guest_occupancy_conatiner .booking_occupancy_wrapper .occupancy_info_block .occupancy_count_block, + .booking-form .booking_occupancy_wrapper .occupancy_info_block .occupancy_count_block { width: 50%;} - .booking_guest_occupancy_conatiner .booking_occupancy_wrapper .occupancy_info_block .occupancy_count { + .booking_guest_occupancy_conatiner .booking_occupancy_wrapper .occupancy_info_block .occupancy_count, + .booking-form .booking_occupancy_wrapper .occupancy_info_block .occupancy_count { width: auto;} } \ No newline at end of file diff --git a/themes/hotel-reservation-theme/css/product.css b/themes/hotel-reservation-theme/css/product.css index 91b79305d..61ecddb2b 100644 --- a/themes/hotel-reservation-theme/css/product.css +++ b/themes/hotel-reservation-theme/css/product.css @@ -1336,12 +1336,12 @@ Quick View Styles @media (min-width: 768px) and (max-width: 1199px) { .num_avail_rooms_alert { float: left!important;} - .booking_room_fields .form-group { + .booking_room_fields .form-group:not(.occupancy_count_block) { width: 100%;}} @media (max-width: 450px) { .num_avail_rooms_alert { float: left!important;} - .booking_room_fields .form-group { + .booking_room_fields .form-group:not(.occupancy_count_block) { width: 100%;}} /* booking form loading */ @@ -1827,3 +1827,40 @@ ul.service-product-nav > li:hover { display: block; } } + +/* mobile and tablet: show the booking form right after the images, before the service products */ +@media (max-width: 991px) { + .primary_block { + display: flex; + flex-direction: column; + } + .primary_block:before, + .primary_block:after { + display: none; + } + .primary_block .pb-left-column, + .primary_block .pb-right-column { + display: contents; + } + .primary_block .room_type_img_containter { + order: 1; + } + .primary_block .booking-form { + order: 2; + margin-bottom: 20px; + } + /* the column wrappers are gone, so give the sections their side gutter back */ + .primary_block .room_type_img_containter, + .primary_block .booking-form, + .primary_block #service_products_cont, + .primary_block .product_info_containter { + margin-left: 15px; + margin-right: 15px; + } + .primary_block #service_products_cont { + order: 3; + } + .primary_block .product_info_containter { + order: 4; + } +} From 328302d8727bb4cbb3695df429b77ae1b8f31efc Mon Sep 17 00:00:00 2001 From: amit sharma Date: Mon, 26 Oct 2026 12:32:57 +0530 Subject: [PATCH 09/20] Fixed: add home page slider --- .../classes/HotelHelper.php | 6 +- .../views/css/WkAboutHotelBlockFront.css | 125 +++++---- .../views/js/WkAboutHotelBlockFront.js | 130 +++++++--- .../templates/hook/hotelInteriorBlock.tpl | 17 +- .../wkabouthotelblock/wkabouthotelblock.php | 1 + .../views/js/wkhotelfilterblock.js | 44 ++++ .../views/templates/hook/htlfilterblock.tpl | 16 +- .../views/css/WkHotelRoomBlockFront.css | 4 +- .../templates/hook/hotelRoomDisplayBlock.tpl | 21 +- modules/wkhotelroom/wkhotelroom.php | 31 +-- .../hotel-reservation-theme/css/category.css | 243 +++++++++++++++++- 11 files changed, 504 insertions(+), 134 deletions(-) diff --git a/modules/hotelreservationsystem/classes/HotelHelper.php b/modules/hotelreservationsystem/classes/HotelHelper.php index b247b7dce..e883d9aa8 100644 --- a/modules/hotelreservationsystem/classes/HotelHelper.php +++ b/modules/hotelreservationsystem/classes/HotelHelper.php @@ -1181,9 +1181,9 @@ class HotelHelper Configuration::updateValue('PS_MIN_BOOKING_OFFSET', 0); Configuration::updateValue('HTL_FEATURE_PRICING_PRIORITY', 'specific_date;special_day;date_range'); - Configuration::updateValue('WK_MAX_AMENITIES_ROOM_SEARCH', 0); - Configuration::updateValue('WK_MAX_FEATURES_ROOM_SEARCH', 0); - Configuration::updateValue('WK_MAX_ROOM_TYPE_FEATURE_VALUES', 0); + Configuration::updateValue('WK_MAX_AMENITIES_ROOM_SEARCH', 6); + Configuration::updateValue('WK_MAX_FEATURES_ROOM_SEARCH', 4); + Configuration::updateValue('WK_MAX_ROOM_TYPE_FEATURE_VALUES', 4); Configuration::updateValue('WK_GOOGLE_ACTIVE_MAP', 0); Configuration::updateValue('WK_MAP_HOTEL_ACTIVE_ONLY', 1); diff --git a/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css b/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css index d99418976..bfa9dbf7d 100644 --- a/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css +++ b/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css @@ -20,9 +20,6 @@ * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0 */ -.htlInterior-owlCarousel .owl-stage-outer { - border: 1px solid #ccc; -} @media (max-width: 767px) { .htlInterior-owlCarousel .owl-carousel { width: 100%; @@ -52,18 +49,6 @@ height: 100%; object-fit: cover; } -.htlInterior-owlCarousel .owl-prev, .htlInterior-owlCarousel .owl-next{ - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 10; -} -.htlInterior-owlCarousel .owl-prev { - left: 15px; -} -.htlInterior-owlCarousel .owl-next { - right: 15px; -} .nav-direction-wrapper{ display: block; } @@ -89,7 +74,7 @@ right: 0; top: 0; bottom: 0; - background-image: url("../img/black-opacity-5.png"); + background-color: rgba(0, 0, 0, 0.5); cursor: pointer; display: none; } @@ -106,39 +91,91 @@ vertical-align: middle; } -/* Interior gallery below desktop: one wide image over two smaller ones */ -@media (max-width: 1199px) { - #hotelInteriorBlock .interiorImgWrapper { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4px; - } - #hotelInteriorBlock .interiorbox { - padding-bottom: 75%; - } - #hotelInteriorBlock .interiorbox:first-child { - grid-column: 1 / -1; - padding-bottom: 56.25%; - } - #hotelInteriorBlock .interiorboxInner { - border: 0; - } - .htlInterior-owlCarousel .owl-stage-outer { - border: 0; +/* gallery: pages of 8 square photos (4 x 2) with dots below */ +.htlInterior-owlCarousel .owl-stage-outer { + border: 0; +} +.interiorImgWrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; + height: auto; +} +.interiorbox { + padding-bottom: 100%; +} +.interiorboxInner { + border: 0; + border-radius: 3px; +} +@media (max-width: 575px) { + .interiorImgWrapper { + grid-template-columns: repeat(2, 1fr); } } -.htlInterior-owlCarousel .nav-direction-secondary { - width: 36px; - height: 36px; - padding: 0; +.htlInterior-owlCarousel .owl-dots { display: flex; - align-items: center; justify-content: center; + gap: 6px; + margin-top: 24px; } -.htlInterior-owlCarousel .owl-prev { - left: 8px; +.htlInterior-owlCarousel .owl-dots .owl-dot span { + display: block; + width: 7px; + height: 7px; + margin: 0; + border-radius: 50%; + background: #C4C4C4; } -.htlInterior-owlCarousel .owl-next { - right: 8px; +.htlInterior-owlCarousel .owl-dots .owl-dot.active span { + background: #333; +} +/* touch screens have no hover, so always show the zoom badge */ +@media (hover: none) { + #hotelInteriorBlock .interiorbox::after { + content: "\f00e"; + font-family: "FontAwesome"; + position: absolute; + right: 8px; + top: 8px; + width: 28px; + height: 28px; + border-radius: 50%; + background: rgba(0, 0, 0, .45); + color: #fff; + font-size: 14px; + line-height: 28px; + text-align: center; + pointer-events: none; + } } +/* gallery lightbox: square photo, dark overlay, thumbnail strip with round prev/next at the bottom */ +html body .htl-gallery-fancybox .fancybox-skin { padding: 0 !important; background: transparent; border-radius: 5px; box-shadow: none; } +html body .htl-gallery-fancybox .fancybox-outer, html body .htl-gallery-fancybox .fancybox-inner { border-radius: 5px; overflow: hidden; } +html body .htl-gallery-fancybox .fancybox-image { border-radius: 5px; } +html body .htl-gallery-fancybox .fancybox-title { display: none !important; } +.htl-gal-thumbs { position: fixed; left: 0; right: 0; bottom: 49px; z-index: 8040; display: flex; align-items: center; gap: 16px; padding: 0 28px; } +.htl-gal-thumbs__track { flex: 1 1 auto; display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0; } +.htl-gal-thumbs__track::-webkit-scrollbar { display: none; } +.htl-gal-thumbs__item { flex: 0 0 auto; width: 96px; height: 96px; padding: 0; border: 2px solid transparent; border-radius: 2px; background: #000; overflow: hidden; opacity: .6; cursor: pointer; transition: opacity .2s ease, border-color .2s ease; } +.htl-gal-thumbs__item img { display: block; width: 100%; height: 100%; object-fit: cover; } +.htl-gal-thumbs__item:hover, .htl-gal-thumbs__item.is-active { opacity: 1; } +.htl-gal-thumbs__item.is-active { border-color: #fff; } +.htl-gal-thumbs__nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #333; font-size: 26px; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); cursor: pointer; transition: transform .2s ease; } +.htl-gal-thumbs__nav i { display: block; line-height: 1; } +.htl-gal-thumbs__nav:hover { transform: scale(1.08); } +@media (max-width: 767px) { + .htl-gal-thumbs { bottom: 20px; padding: 0 12px; gap: 8px; } + .htl-gal-thumbs__item { width: 60px; height: 60px; } + .htl-gal-thumbs__nav { width: 36px; height: 36px; font-size: 20px; } + html body .htl-gallery-fancybox .fancybox-close { top: 8px; right: 8px; } +} +html body .fancybox-overlay.htl-gallery-overlay { opacity: 1 !important; background: rgba(43, 43, 43, 0.95) !important; } +/* short landscape screens (phones turned sideways): compact thumbnail strip */ +@media (max-height: 499px) { + .htl-gal-thumbs { bottom: 10px; padding: 0 12px; gap: 8px; } + .htl-gal-thumbs__item { width: 56px; height: 56px; } + .htl-gal-thumbs__nav { width: 36px; height: 36px; font-size: 20px; } + html body .htl-gallery-fancybox .fancybox-close { top: 8px; right: 8px; } +} diff --git a/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js b/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js index 331cd5051..471873b77 100644 --- a/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js +++ b/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js @@ -23,10 +23,8 @@ $(document).ready(function(){ $('.htlInterior-owlCarousel .owl-carousel').owlCarousel({ loop:true, - nav:true, - navSpeed:1000, - navText:['
','
'], - dots:false, + nav:false, + dots:true, items: 1, autoHeight:true, autoplay:true, @@ -34,15 +32,7 @@ $(document).ready(function(){ autoplayTimeout:5000, autoplayHoverPause:true, responsiveClass:true, - rtl: language_is_rtl, - responsive:{ - 1200:{ - items:3 - }, - 480:{ - items:2 - }, - } + rtl: language_is_rtl }); $('.interiorbox').on('mouseenter', function(){ @@ -52,20 +42,100 @@ $(document).ready(function(){ $(this).find('div.interiorHoverBlockWrapper').hide(); }); - $("div.interiorbox").fancybox({ - autoDimensions: true, - autoScale: true, - autoSize: true, - centerOnScroll: true, - height: 'auto', - scrolling: 'auto', - width: 'auto', - maxWidth: 700, - 'hideOnContentClick': false, - helpers: { - overlay: { - locked: false - } - } - }); -}); \ No newline at end of file + // gallery lightbox: fancybox with a thumbnail strip and round prev/next buttons at the bottom + var $thumbs = null; + + function buildThumbs() { + var group = $.fancybox.group || []; + if (group.length < 2) { + return; + } + $thumbs = $('
'); + var $track = $thumbs.find('.htl-gal-thumbs__track'); + $.each(group, function(i, item) { + $('') + .attr('aria-label', (i + 1) + ' / ' + group.length) + .append($('').attr('src', item.href)) + .on('click', function() { this.blur(); $.fancybox.jumpto(i); }) + .appendTo($track); + }); + $thumbs.find('.htl-gal-thumbs__prev').on('click', function() { this.blur(); $.fancybox.prev(); }); + $thumbs.find('.htl-gal-thumbs__next').on('click', function() { this.blur(); $.fancybox.next(); }); + $thumbs.appendTo('body'); + } + + function markActiveThumb() { + if (!$thumbs) { + return; + } + var $items = $thumbs.find('.htl-gal-thumbs__item').removeClass('is-active'); + var $active = $items.eq($.fancybox.current.index).addClass('is-active'); + var track = $thumbs.find('.htl-gal-thumbs__track').get(0); + if ($active.length && track) { + track.scrollLeft = $active.get(0).offsetLeft - (track.clientWidth - $active.outerWidth()) / 2; + } + } + + // photos are listed once, the slider also holds cloned copies when it loops + $(document).on('click', '.htlInterior-owlCarousel .interiorbox[href]', function(e) { + e.preventDefault(); + var items = []; + var index = 0; + var clicked = $(e.currentTarget).attr('href'); + $('.htlInterior-owlCarousel .owl-item:not(.cloned) .interiorbox[href]').each(function(i) { + items.push({href: $(this).attr('href'), title: $(this).attr('title') || ''}); + if ($(this).attr('href') === clicked) { + index = i; + } + }); + $.fancybox.open(items, { + index: index, + type: 'image', + padding: 0, + margin: [48, 48, 190, 48], + wrapCSS: 'htl-gallery-fancybox', + arrows: false, + openEffect: 'fade', + closeEffect: 'fade', + helpers: { + overlay: { + locked: false, + css: {background: 'rgba(43, 43, 43, 0.9)'} + } + }, + beforeLoad: function() { + var compact = window.innerWidth < 768 || window.innerHeight < 500; + this.margin = window.innerHeight < 500 ? [36, 12, 84, 12] : (compact ? [48, 12, 110, 12] : [48, 48, 190, 48]); + }, + afterLoad: function() { + // photos are shown as large as the screen allows (up to 589px), not at their natural size + var smallW = window.innerWidth < 768; + var shortH = window.innerHeight < 500; + var maxH = Math.min(window.innerHeight - (shortH ? 120 : (smallW ? 158 : 238)), 589); + var maxW = window.innerWidth - (shortH || smallW ? 24 : 96); + var ratio = this.width / this.height; + var height = maxH; + var width = height * ratio; + if (width > maxW) { + width = maxW; + height = width / ratio; + } + this.width = Math.round(width); + this.height = Math.round(height); + }, + beforeShow: function() { + $('.fancybox-overlay').addClass('htl-gallery-overlay'); + if (!$thumbs) { + buildThumbs(); + } + }, + afterShow: markActiveThumb, + afterClose: function() { + if ($thumbs) { + $thumbs.remove(); + $thumbs = null; + } + } + }); + }); +}); diff --git a/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl b/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl index 80ffe6f25..abfc3308a 100644 --- a/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl +++ b/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl @@ -44,9 +44,8 @@
- {assign var='intImgIteration' value=0} {foreach from=$InteriorImg item=img_name name=intImg} - {if $smarty.foreach.intImg.iteration%3 == 1} + {if $smarty.foreach.intImg.iteration%8 == 1}
{/if}
@@ -61,22 +60,10 @@
- {if $smarty.foreach.intImg.iteration%3 == 0} + {if $smarty.foreach.intImg.iteration%8 == 0 || $smarty.foreach.intImg.last}
{/if} - {assign var='intImgIteration' value=$smarty.foreach.intImg.iteration} {/foreach} - {if $intImgIteration%3} - {assign var='intImgLeft' value=3-($intImgIteration%3)} - {for $foo=1 to $intImgLeft} -
-
- Default Image -
-
- {/for} -
- {/if}
diff --git a/modules/wkabouthotelblock/wkabouthotelblock.php b/modules/wkabouthotelblock/wkabouthotelblock.php index 18dd7ac13..422c46239 100644 --- a/modules/wkabouthotelblock/wkabouthotelblock.php +++ b/modules/wkabouthotelblock/wkabouthotelblock.php @@ -47,6 +47,7 @@ class WkAboutHotelBlock extends Module public function hookDisplayHome() { + $this->context->controller->addJqueryPlugin('fancybox'); $this->context->controller->addCSS(_PS_JS_DIR_.'owl-carousel/assets/owl.carousel.min.css'); $this->context->controller->addCSS(_PS_JS_DIR_.'owl-carousel/assets/owl.theme.default.min.css'); $this->context->controller->addJS(_PS_JS_DIR_.'owl-carousel/owl.carousel.min.js'); diff --git a/modules/wkhotelfilterblock/views/js/wkhotelfilterblock.js b/modules/wkhotelfilterblock/views/js/wkhotelfilterblock.js index bfa546c65..4c1dd5f6b 100644 --- a/modules/wkhotelfilterblock/views/js/wkhotelfilterblock.js +++ b/modules/wkhotelfilterblock/views/js/wkhotelfilterblock.js @@ -132,6 +132,7 @@ $(document).ready(function() triggerFilter(1, 0, 0, 0); $('.filter').on('click', function() { + $(this).parent().toggleClass('checked', this.checked); triggerFilter(); }); @@ -202,4 +203,47 @@ $(document).ready(function() }); return 1; } + var $conts = $('#filter_results > .col-sm-12 > .layered_filter_cont'); + if ($conts.length) { + var $nav = $('
'); + $conts.each(function () { + $nav.append($('').text($(this).find('.lf_headingmain_wrapper span').first().text()).append('')); + }); + $('#filter_results > .col-sm-12').prepend($nav); + + var $sheet = $('
' + mfSortByTxt + '
    '); + $('.sort_result').each(function () { + $sheet.find('ul').append($('
  • ').text($(this).text()).data('source', $(this))); + }); + var $bar = $('
    '); + $('body').append($sheet, $bar); + + function selectTab(i) { + $nav.children().removeClass('mf_active').eq(i).addClass('mf_active'); + $conts.removeClass('mf_active').eq(i).addClass('mf_active'); + } + selectTab(0); + + function updateCounts() { + var total = 0; + $conts.each(function (i) { + var n = $(this).find('input.filter:checked').length; + var v = $(this).find('#filter_price_silder').length ? $('#filter_price_silder').slider('values') : 0; + n += v && (v[0] != min_price || v[1] != max_price) ? 1 : 0; + total += n; + $nav.children().eq(i).children('b').text(n || ''); + }); + $bar.find('.mf_filter b').text(total || ''); + } + $(document).on('click change slidechange', '#filter_results', function () { setTimeout(updateCounts, 50); }); + + $nav.on('click', '.mf_tab', function () { selectTab($(this).index()); }); + $bar.find('.mf_filter').on('click', function () { $('body').addClass('mf_filter_open'); }); + $bar.find('.mf_sort').on('click', function () { $sheet.addClass('mf_open'); }); + $('.mf_back, .mf_apply').on('click', function () { $('body').removeClass('mf_filter_open'); }); + $('.mf_clear_all').on('click', function () { $('.clear_filter').trigger('click'); }); + $sheet.on('click', function (e) { if (e.target === this || $(e.target).is('button')) $sheet.removeClass('mf_open'); }); + $sheet.on('click', 'li', function () { $(this).addClass('mf_selected').siblings().removeClass('mf_selected').end().data('source').trigger('click'); $sheet.removeClass('mf_open'); }); + $sheet.find('li').first().addClass('mf_selected'); + } }); \ No newline at end of file diff --git a/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl b/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl index 0fab3ecf3..807b7c23e 100644 --- a/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl +++ b/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl @@ -22,6 +22,12 @@ {block name='room_types_filters_block'}
    + {* mobile only: header of the full screen filters panel *} +
    + + {l s='Filters' mod='wkhotelfilterblock'} + +
    {block name='room_types_price_filter'} {if isset($config) && $config['SHOW_PRICE_FILTER']} @@ -61,7 +67,7 @@
    {foreach $all_amenities as $amenity}
    - +
    {$amenity.name}
    {/foreach} @@ -86,7 +92,7 @@
    {foreach $feature.values as $featureValue}
    - +
    {$featureValue.value|escape:'html':'UTF-8'}
    {/foreach} @@ -96,6 +102,9 @@ {/if} {/block}
    + {block name='room_types_filters_mobile_apply'} +
    + {/block}
    {block name='room_types_filters_js_vars'} {strip} @@ -108,6 +117,9 @@ {addJsDef max_price = $max_price} {addJsDef warning_num = $warning_num} + {addJsDefL name=mfSortTxt}{l s='Sort' js=1 mod='wkhotelfilterblock'}{/addJsDefL} + {addJsDefL name=mfSortByTxt}{l s='Sort by' js=1 mod='wkhotelfilterblock'}{/addJsDefL} + {addJsDefL name=mfFilterTxt}{l s='Filter' js=1 mod='wkhotelfilterblock'}{/addJsDefL} {addJsDefL name=viewMoreTxt}{l s='View More' js=1 mod='wkhotelfilterblock'}{/addJsDefL} {addJsDefL name=bookNowTxt}{l s='Book Now' js=1 mod='wkhotelfilterblock'}{/addJsDefL} {/strip} diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css index c8a0d6286..88645f271 100644 --- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css +++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css @@ -138,7 +138,8 @@ a.htlRoomTypeBookNow { display: flex; flex-wrap: wrap; gap: 6px 16px; - padding: 0 0 12px; + padding: 16px 0; + border-bottom: 1px solid #E5E5E5; color: #555; font-size: 15px; } @@ -172,7 +173,6 @@ a.htlRoomTypeBookNow { justify-content: space-between; gap: 10px; padding: 12px 0; - border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; color: #555; font-size: 15px; diff --git a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl index a8a286ffb..e7abd0767 100644 --- a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl +++ b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl @@ -54,18 +54,7 @@
    {block name='hotel_room_block_room_type_description'}

    {$roomDisplay.name|escape:'htmlall':'UTF-8'}

    - {if $roomDisplay.feature} -
    - {foreach from=$roomDisplay.feature item=feat} - - {if $feat.logo_type == 'icon'}{else}{$feat.name|escape:'htmlall':'UTF-8'}{/if} - {$feat.value|escape:'htmlall':'UTF-8'} - - {/foreach} -
    - {/if}
    - {$roomDisplay.max_adults|intval} {l s='Adults' mod='wkhotelroom'}{if $roomDisplay.max_children}, {$roomDisplay.max_children|intval} {if $roomDisplay.max_children > 1}{l s='Children' mod='wkhotelroom'}{else}{l s='Child' mod='wkhotelroom'}{/if}{/if} {if $roomDisplay.amenities} {foreach from=$roomDisplay.amenities item=amenity} @@ -78,6 +67,16 @@ {/if}
    + {if $roomDisplay.feature} +
    + {foreach from=$roomDisplay.feature item=feat} + + {if $feat.logo_type == 'icon'}{else}{$feat.name|escape:'htmlall':'UTF-8'}{/if} + {$feat.value|escape:'htmlall':'UTF-8'} + + {/foreach} +
    + {/if} {/block}
    {if $roomDisplay.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE} diff --git a/modules/wkhotelroom/wkhotelroom.php b/modules/wkhotelroom/wkhotelroom.php index 6e5d872fd..8f561160a 100644 --- a/modules/wkhotelroom/wkhotelroom.php +++ b/modules/wkhotelroom/wkhotelroom.php @@ -51,8 +51,9 @@ class WkHotelRoom extends Module $dateFrom = date('Y-m-d'); $dateTo = date('Y-m-d', strtotime($dateFrom) + 86400); $useTax = HotelBookingDetail::useTax(); - $maxAmenities = $this->getRoomCardLimit('WK_MAX_AMENITIES_ROOM_SEARCH'); - $maxFeatures = $this->getRoomCardLimit('WK_MAX_ROOM_TYPE_FEATURE_VALUES'); + $maxAmenities = (int) Configuration::get('WK_MAX_AMENITIES_ROOM_SEARCH'); + $maxFeatures = (int) Configuration::get('WK_MAX_FEATURES_ROOM_SEARCH'); + $maxFeatureValues = (int) Configuration::get('WK_MAX_ROOM_TYPE_FEATURE_VALUES'); foreach ($hotelRoomDisplay as &$htlRoom) { $idProduct = $htlRoom['id_product']; $product = new Product($idProduct, false, $idLang); @@ -115,23 +116,22 @@ class WkHotelRoom extends Module $roomTypeInfo = $objRoomType->getRoomTypeInfoByIdProduct($idProduct); $htlRoom['max_adults'] = $roomTypeInfo ? (int) $roomTypeInfo['max_adults'] : 0; $htlRoom['max_children'] = $roomTypeInfo ? (int) $roomTypeInfo['max_children'] : 0; - $htlRoom['feature'] = array(); + $features = array(); foreach (Product::getFrontFeaturesStatic($idLang, $idProduct) as $feature) { if ($feature['is_featured'] && $feature['logo']) { - if (isset($htlRoom['feature'][$feature['id_feature']])) { - $htlRoom['feature'][$feature['id_feature']]['values'][] = $feature['value']; - } else { - $feature['values'] = array($feature['value']); - $htlRoom['feature'][$feature['id_feature']] = $feature; - } + $features[$feature['id_feature']] = $features[$feature['id_feature']] ?? $feature; + $features[$feature['id_feature']]['values'][] = $feature['value']; } } - $htlRoom['feature'] = array_values($htlRoom['feature']); - $htlRoom['feature'] = array_slice($htlRoom['feature'], 0, $maxFeatures); + $htlRoom['feature'] = array_slice($features, 0, $maxFeatures ?: null); + foreach ($htlRoom['feature'] as &$roomFeature) { + $roomFeature['value'] = implode(', ', array_slice($roomFeature['values'], 0, $maxFeatureValues ?: null)); + } + unset($roomFeature); $htlRoom['amenities'] = array_slice( HotelRoomTypeAmenities::getAmenities($idProduct, $idLang, true), 0, - $maxAmenities + $maxAmenities ?: null ); $htlRoom['feature_price'] = $featurePrice; $htlRoom['feature_price_diff'] = (float)($priceWithoutReduction - $featurePrice); @@ -161,13 +161,6 @@ class WkHotelRoom extends Module return $this->display(__FILE__, 'hotelRoomDisplayBlock.tpl'); } - public function getRoomCardLimit($configKey) - { - $limit = (int) Configuration::get($configKey); - - return ($limit < 1 || $limit > 5) ? 3 : $limit; - } - public function hookActionProductSave($params) { if (isset($params['id_product']) && $params['id_product']) { diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index f06f2b686..37175f9e5 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -204,14 +204,24 @@ p.capa_txt { .rm_amen { - color: #555555; - width: 18px; - display: inline-block; - margin-right: 10px; + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + margin-right: 6px; margin-bottom: 5px; - font-size: 16px; + border: 1px solid #D6D6D6; + border-radius: 50%; + font-size: 14px; color: #555555; } +img.rm_amen +{ + padding: 7px; + object-fit: contain; +} .room_featured_features { display: flex; @@ -468,11 +478,11 @@ p.capa_txt { .rm_amen_more { display: inline-block; margin-bottom: 5px; - padding: 0 6px; + padding: 0 8px; border: 1px solid #379BF0; - border-radius: 10px; + border-radius: 16px; font-size: 12px; - line-height: 18px; + line-height: 30px; color: #379BF0; vertical-align: top; } @@ -504,3 +514,220 @@ p.capa_txt { text-align: center; } } + +/* mobile filters: bottom Sort / Filter bar, sort sheet and full screen filters panel */ +.mf_header, .mf_footer, .mf_nav, .mf_bar, .mf_sheet { + display: none; +} +@media (max-width: 993px) { + body.category { + padding-bottom: 64px; + } + .catSortBlock { + display: none; + } + .mf_bar { + display: flex; + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 90; + background: #fff; + border-top: 1px solid #E5E5E5; + box-shadow: 0 -2px 8px rgba(0, 0, 0, .08); + } + .mf_bar button { + flex: 1; + padding: 16px 8px; + border: 0; + background: none; + font-size: 16px; + font-weight: 700; + color: #333; + } + .mf_bar button i { + margin-right: 4px; + color: #379BF0; + } + .mf_bar button b { + display: inline-block; + min-width: 20px; + padding: 0 5px; + border-radius: 10px; + background: #379BF0; + font-size: 12px; + line-height: 20px; + color: #fff; + } + .mf_bar button b:empty { + display: none; + } + .mf_bar button + button { + border-left: 1px solid #E5E5E5; + } + .mf_sheet { + position: fixed; + inset: 0; + z-index: 9000; + background: rgba(0, 0, 0, .45); + align-items: flex-end; + } + .mf_sheet.mf_open { + display: flex; + } + .mf_sheet_box { + width: 100%; + max-height: 80vh; + overflow-y: auto; + background: #fff; + border-radius: 16px 16px 0 0; + } + .mf_sheet_head { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-bottom: 1px solid #E5E5E5; + font-size: 14px; + font-weight: 700; + letter-spacing: .5px; + text-transform: uppercase; + color: #777; + } + .mf_sheet_head button { + border: 0; + background: none; + font-size: 28px; + line-height: 1; + color: #333; + } + .mf_sheet ul { + margin: 0; + padding: 0; + list-style: none; + } + .mf_sheet li:after { + content: ""; + float: right; + width: 22px; + height: 22px; + border: 2px solid #777; + border-radius: 50%; + } + .mf_sheet li.mf_selected:after { + border-color: #379BF0; + box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px #379BF0; + } + .mf_sheet li { + padding: 16px; + font-size: 16px; + color: #333; + } + #filter_results { + display: none; + margin: 0; + } + body.mf_filter_open { + overflow: hidden; + } + body.mf_filter_open #filter_results { + display: flex; + flex-direction: column; + position: fixed; + inset: 0; + z-index: 9000; + background: #fff; + } + #filter_results .mf_header { + display: flex; + align-items: center; + gap: 12px; + padding: 14px 16px; + border-bottom: 1px solid #E5E5E5; + } + #filter_results .mf_header .mf_back { + padding: 0 4px; + border: 0; + background: none; + font-size: 24px; + line-height: 1; + transform: translateY(-5px); + } + #filter_results .mf_title { + flex: 1; + font-size: 18px; + } + #filter_results .mf_clear_all { + border: 0; + background: none; + font-size: 14px; + color: #999; + text-decoration: underline; + } + #filter_results > .col-sm-12 { + flex: 1; + display: flex; + padding: 0; + min-height: 0; + } + #filter_results .mf_nav { + display: block; + flex: 0 0 38%; + overflow-y: auto; + background: #F5F5F5; + } + #filter_results .mf_tab { + display: block; + width: 100%; + padding: 16px; + border: 0; + border-left: 3px solid transparent; + background: none; + text-align: left; + font-size: 15px; + color: #333; + } + #filter_results .mf_tab b { + float: right; + font-size: 13px; + color: #379BF0; + } + #filter_results .mf_tab.mf_active { + background: #fff; + border-left-color: #379BF0; + } + #filter_results .layered_filter_cont { + display: none; + flex: 1; + margin: 0; + border: 0; + overflow-y: auto; + padding: 8px 4px; + } + #filter_results .layered_filter_cont.mf_active { + display: block; + } + #filter_results .layered_filter_cont .clear_filter { + display: none; + } + #filter_results .lf_sub_cont { + max-height: none; + overflow: visible; + padding: 0 16px 10px 12px; + } + #filter_results .mf_footer { + display: block; + padding: 12px 16px; + border-top: 1px solid #E5E5E5; + background: #fff; + } + #filter_results .mf_footer .mf_apply { + width: 100%; + height: 48px; + font-size: 17px; + background: #379BF0; + color: #fff; + font-weight: 700; + } +} From 5c595e0bf5fa3e87817400917e8b27fc6f0c20e9 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Mon, 26 Oct 2026 18:27:17 +0530 Subject: [PATCH 10/20] Fixed: review changes --- .../classes/HotelBookingDetail.php | 2 +- .../classes/HotelHelper.php | 4 +- .../views/css/WkAboutHotelBlockFront.css | 25 ++- .../views/js/WkAboutHotelBlockFront.js | 144 +++++++++++------- .../templates/hook/hotelInteriorBlock.tpl | 5 +- .../templates/hook/hotelfeaturescontent.tpl | 1 + .../views/css/WkHotelRoomBlockFront.css | 39 +++-- .../templates/hook/hotelRoomDisplayBlock.tpl | 41 +++-- .../hotel-reservation-theme/css/category.css | 4 +- themes/hotel-reservation-theme/css/global.css | 3 - .../hotel-reservation-theme/css/product.css | 12 +- 11 files changed, 149 insertions(+), 131 deletions(-) diff --git a/modules/hotelreservationsystem/classes/HotelBookingDetail.php b/modules/hotelreservationsystem/classes/HotelBookingDetail.php index 4b850622b..055833d3c 100644 --- a/modules/hotelreservationsystem/classes/HotelBookingDetail.php +++ b/modules/hotelreservationsystem/classes/HotelBookingDetail.php @@ -1834,7 +1834,7 @@ class HotelBookingDetail extends ObjectModel if (!empty($bookingData)) { $maxAmenities = (int) Configuration::get('WK_MAX_AMENITIES_ROOM_SEARCH'); $maxFeatures = (int) Configuration::get('WK_MAX_FEATURES_ROOM_SEARCH'); - $maxFeatureValues = (int) Configuration::get('WK_MAX_FEATURE_VALUES_ROOM_SEARCH'); + $maxFeatureValues = (int) Configuration::get('WK_MAX_ROOM_TYPE_FEATURE_VALUES'); foreach ($bookingData['rm_data'] as $key => $value) { // featured amenities for display in room type list $featured_amenities = HotelRoomTypeAmenities::getAmenities( diff --git a/modules/hotelreservationsystem/classes/HotelHelper.php b/modules/hotelreservationsystem/classes/HotelHelper.php index e883d9aa8..ab0a5a284 100644 --- a/modules/hotelreservationsystem/classes/HotelHelper.php +++ b/modules/hotelreservationsystem/classes/HotelHelper.php @@ -1182,8 +1182,8 @@ class HotelHelper Configuration::updateValue('HTL_FEATURE_PRICING_PRIORITY', 'specific_date;special_day;date_range'); Configuration::updateValue('WK_MAX_AMENITIES_ROOM_SEARCH', 6); - Configuration::updateValue('WK_MAX_FEATURES_ROOM_SEARCH', 4); - Configuration::updateValue('WK_MAX_ROOM_TYPE_FEATURE_VALUES', 4); + Configuration::updateValue('WK_MAX_FEATURES_ROOM_SEARCH', 3); + Configuration::updateValue('WK_MAX_ROOM_TYPE_FEATURE_VALUES', 2); Configuration::updateValue('WK_GOOGLE_ACTIVE_MAP', 0); Configuration::updateValue('WK_MAP_HOTEL_ACTIVE_ONLY', 1); diff --git a/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css b/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css index bfa9dbf7d..332b27df1 100644 --- a/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css +++ b/modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css @@ -97,7 +97,7 @@ } .interiorImgWrapper { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 8px; height: auto; } @@ -108,11 +108,6 @@ border: 0; border-radius: 3px; } -@media (max-width: 575px) { - .interiorImgWrapper { - grid-template-columns: repeat(2, 1fr); - } -} .htlInterior-owlCarousel .owl-dots { display: flex; justify-content: center; @@ -151,10 +146,12 @@ } /* gallery lightbox: square photo, dark overlay, thumbnail strip with round prev/next at the bottom */ +html body .htl-gallery-fancybox .fancybox-skin, html body .htl-light-fancybox .fancybox-skin { border-radius: 5px; } html body .htl-gallery-fancybox .fancybox-skin { padding: 0 !important; background: transparent; border-radius: 5px; box-shadow: none; } html body .htl-gallery-fancybox .fancybox-outer, html body .htl-gallery-fancybox .fancybox-inner { border-radius: 5px; overflow: hidden; } html body .htl-gallery-fancybox .fancybox-image { border-radius: 5px; } -html body .htl-gallery-fancybox .fancybox-title { display: none !important; } +html body .htl-light-fancybox .fancybox-title-outside-wrap { position: static; display: table; width: auto; margin: 14px auto 0; padding: 6px 20px; border-radius: 16px; background: #2b2b2b; font-size: 13px; font-weight: 700; line-height: 1.4; color: #fff; text-align: center; } +html body .htl-gallery-fancybox .fancybox-title-outside-wrap { position: static; display: table; width: auto; margin: 14px auto 0; padding: 6px 20px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 16px; background: #111; font-size: 13px; font-weight: 700; line-height: 1.4; color: #fff; text-align: center; } .htl-gal-thumbs { position: fixed; left: 0; right: 0; bottom: 49px; z-index: 8040; display: flex; align-items: center; gap: 16px; padding: 0 28px; } .htl-gal-thumbs__track { flex: 1 1 auto; display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0; } .htl-gal-thumbs__track::-webkit-scrollbar { display: none; } @@ -162,9 +159,8 @@ html body .htl-gallery-fancybox .fancybox-title { display: none !important; } .htl-gal-thumbs__item img { display: block; width: 100%; height: 100%; object-fit: cover; } .htl-gal-thumbs__item:hover, .htl-gal-thumbs__item.is-active { opacity: 1; } .htl-gal-thumbs__item.is-active { border-color: #fff; } -.htl-gal-thumbs__nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #333; font-size: 26px; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); cursor: pointer; transition: transform .2s ease; } +.htl-gal-thumbs__nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 8px 15px; border: 0; border-radius: 50%; background: #fff; color: #333; font-size: 22px; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); cursor: pointer; transition: transform .2s ease; } .htl-gal-thumbs__nav i { display: block; line-height: 1; } -.htl-gal-thumbs__nav:hover { transform: scale(1.08); } @media (max-width: 767px) { .htl-gal-thumbs { bottom: 20px; padding: 0 12px; gap: 8px; } .htl-gal-thumbs__item { width: 60px; height: 60px; } @@ -172,10 +168,9 @@ html body .htl-gallery-fancybox .fancybox-title { display: none !important; } html body .htl-gallery-fancybox .fancybox-close { top: 8px; right: 8px; } } html body .fancybox-overlay.htl-gallery-overlay { opacity: 1 !important; background: rgba(43, 43, 43, 0.95) !important; } -/* short landscape screens (phones turned sideways): compact thumbnail strip */ -@media (max-height: 499px) { - .htl-gal-thumbs { bottom: 10px; padding: 0 12px; gap: 8px; } - .htl-gal-thumbs__item { width: 56px; height: 56px; } - .htl-gal-thumbs__nav { width: 36px; height: 36px; font-size: 20px; } - html body .htl-gallery-fancybox .fancybox-close { top: 8px; right: 8px; } + +/* the theme's a:focus outline would cover half of the photo after a click on next/prev, keep it for keyboard users only */ +html body .htl-light-fancybox .fancybox-nav:focus:not(:focus-visible), +html body .htl-gallery-fancybox .fancybox-nav:focus:not(:focus-visible) { + outline: 0; } diff --git a/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js b/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js index 471873b77..3c3fc1736 100644 --- a/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js +++ b/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js @@ -26,6 +26,9 @@ $(document).ready(function(){ nav:false, dots:true, items: 1, + margin: 8, + slideBy: 'page', + responsive: {576: {items: 2}}, autoHeight:true, autoplay:true, autoplaySpeed:1000, @@ -76,66 +79,89 @@ $(document).ready(function(){ } } - // photos are listed once, the slider also holds cloned copies when it loops - $(document).on('click', '.htlInterior-owlCarousel .interiorbox[href]', function(e) { - e.preventDefault(); - var items = []; - var index = 0; - var clicked = $(e.currentTarget).attr('href'); - $('.htlInterior-owlCarousel .owl-item:not(.cloned) .interiorbox[href]').each(function(i) { - items.push({href: $(this).attr('href'), title: $(this).attr('title') || ''}); - if ($(this).attr('href') === clicked) { - index = i; + // options of the dark gallery with a thumbnail strip + var thumbsGalleryOptions = { + padding: 0, + margin: [48, 48, 190, 48], + wrapCSS: 'htl-gallery-fancybox', + arrows: false, + helpers: {overlay: {locked: false, css: {background: 'rgba(43, 43, 43, 0.9)'}}}, + beforeLoad: function() { + var compact = window.innerWidth < 768 || window.innerHeight < 500; + this.margin = window.innerHeight < 500 ? [36, 12, 84, 12] : (compact ? [48, 12, 110, 12] : [48, 48, 190, 48]); + }, + afterLoad: function() { + // photos are shown as large as the screen allows (up to 589px), not at their natural size + var smallW = window.innerWidth < 768; + var shortH = window.innerHeight < 500; + var maxH = Math.min(window.innerHeight - (shortH ? 120 : (smallW ? 158 : 238)), 589); + var maxW = window.innerWidth - (shortH || smallW ? 24 : 96); + var ratio = this.width / this.height; + var height = maxH; + var width = height * ratio; + if (width > maxW) { + width = maxW; + height = width / ratio; } - }); - $.fancybox.open(items, { - index: index, - type: 'image', - padding: 0, - margin: [48, 48, 190, 48], - wrapCSS: 'htl-gallery-fancybox', - arrows: false, - openEffect: 'fade', - closeEffect: 'fade', - helpers: { - overlay: { - locked: false, - css: {background: 'rgba(43, 43, 43, 0.9)'} - } - }, - beforeLoad: function() { - var compact = window.innerWidth < 768 || window.innerHeight < 500; - this.margin = window.innerHeight < 500 ? [36, 12, 84, 12] : (compact ? [48, 12, 110, 12] : [48, 48, 190, 48]); - }, - afterLoad: function() { - // photos are shown as large as the screen allows (up to 589px), not at their natural size - var smallW = window.innerWidth < 768; - var shortH = window.innerHeight < 500; - var maxH = Math.min(window.innerHeight - (shortH ? 120 : (smallW ? 158 : 238)), 589); - var maxW = window.innerWidth - (shortH || smallW ? 24 : 96); - var ratio = this.width / this.height; - var height = maxH; - var width = height * ratio; - if (width > maxW) { - width = maxW; - height = width / ratio; - } - this.width = Math.round(width); - this.height = Math.round(height); - }, - beforeShow: function() { - $('.fancybox-overlay').addClass('htl-gallery-overlay'); - if (!$thumbs) { - buildThumbs(); - } - }, - afterShow: markActiveThumb, - afterClose: function() { - if ($thumbs) { - $thumbs.remove(); - $thumbs = null; - } + this.width = Math.round(width); + this.height = Math.round(height); + }, + beforeShow: function() { + $('.fancybox-overlay').addClass('htl-gallery-overlay'); + if (!$thumbs) { + buildThumbs(); } + }, + afterShow: markActiveThumb, + afterClose: function() { + if ($thumbs) { + $thumbs.remove(); + $thumbs = null; + } + } + }; + + // options of the light gallery with the next and previous arrows on the photo + var lightGalleryOptions = { + wrapCSS: 'htl-light-fancybox', + maxWidth: 700, + nextEffect: 'fade', + prevEffect: 'fade', + helpers: {overlay: {locked: false}} + }; + + /** + * Opens the photos of a slider in a lightbox when one is clicked. + * Usage: $('.owl-carousel').interiorBoxGallery({thumbs: true}); + * thumbs true: dark gallery with a thumbnail strip, false: light gallery with arrows. + */ + $.fn.interiorBoxGallery = function(options) { + var settings = $.extend({thumbs: true, itemSelector: '.interiorbox[href]'}, options); + + return this.each(function() { + var $slider = $(this); + // photos are listed once, the slider also holds cloned copies when it loops + $slider.on('click', settings.itemSelector, function(e) { + e.preventDefault(); + var items = []; + var index = 0; + var clicked = $(e.currentTarget).attr('href'); + $slider.find('.owl-item:not(.cloned) ' + settings.itemSelector).each(function(i) { + items.push({href: $(this).attr('href'), title: $(this).attr('title') || ''}); + if ($(this).attr('href') === clicked) { + index = i; + } + }); + $.fancybox.open(items, $.extend(true, { + index: index, + type: 'image', + openEffect: 'fade', + closeEffect: 'fade', + helpers: {title: {type: 'outside'}} + }, settings.thumbs ? thumbsGalleryOptions : lightGalleryOptions)); + }); }); - }); + }; + + $('.htlInterior-owlCarousel .owl-carousel').interiorBoxGallery({thumbs: true}); }); diff --git a/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl b/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl index abfc3308a..f1d576a42 100644 --- a/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl +++ b/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl @@ -45,7 +45,7 @@
    {foreach from=$InteriorImg item=img_name name=intImg} - {if $smarty.foreach.intImg.iteration%8 == 1} + {if $smarty.foreach.intImg.iteration%4 == 1}
    {/if}
    @@ -60,7 +60,7 @@
    - {if $smarty.foreach.intImg.iteration%8 == 0 || $smarty.foreach.intImg.last} + {if $smarty.foreach.intImg.iteration%4 == 0 || $smarty.foreach.intImg.last}
    {/if} {/foreach} @@ -69,6 +69,7 @@
    {/block}
    +
    {/if} {/block} diff --git a/modules/wkhotelfeaturesblock/views/templates/hook/hotelfeaturescontent.tpl b/modules/wkhotelfeaturesblock/views/templates/hook/hotelfeaturescontent.tpl index 6161fe715..ef809372f 100644 --- a/modules/wkhotelfeaturesblock/views/templates/hook/hotelfeaturescontent.tpl +++ b/modules/wkhotelfeaturesblock/views/templates/hook/hotelfeaturescontent.tpl @@ -156,6 +156,7 @@
    {/block}
    +
    {/if} {/block} diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css index 88645f271..d79c6a814 100644 --- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css +++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css @@ -112,7 +112,7 @@ a.htlRoomTypeBookNow { .htlRoomCard { background: #fff; border: 1px solid #E5E5E5; - border-radius: 8px; + border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); } @@ -135,21 +135,21 @@ a.htlRoomTypeBookNow { font-size: 22px; } .htlRoomCardFeatured { - display: flex; - flex-wrap: wrap; - gap: 6px 16px; padding: 16px 0; - border-bottom: 1px solid #E5E5E5; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; color: #555; font-size: 15px; } .htlRoomCardFeatured img.htlRoomFeatureImg { + display: inline-block; width: 16px; height: 16px; max-width: 16px; - flex: 0 0 16px; - margin-right: 0; + margin-right: 4px; object-fit: contain; + vertical-align: -3px; } .htlRoomCardAmen > span img.htlRoomAmenityImg { width: 18px; @@ -157,14 +157,12 @@ a.htlRoomTypeBookNow { max-width: 18px; object-fit: contain; } -.htlRoomCardFeatured > span { - display: inline-flex; - align-items: center; - gap: 4px; - white-space: nowrap; +.htlRoomCardFeatured .htlRoomFeatureSep { + margin: 0 5px; + color: #BBB; } .htlRoomCardFeatured i { - margin-right: 0; + margin-right: 4px; color: #777; } .htlRoomCardMeta { @@ -173,7 +171,7 @@ a.htlRoomTypeBookNow { justify-content: space-between; gap: 10px; padding: 12px 0; - border-bottom: 1px solid #E5E5E5; + border-top: 1px solid #E5E5E5; color: #555; font-size: 15px; } @@ -200,6 +198,7 @@ a.htlRoomTypeBookNow { display: flex; align-items: center; justify-content: space-between; + border-top: 1px solid #E5E5E5; gap: 10px; padding-top: 14px; } @@ -251,7 +250,7 @@ a.htlRoomTypeBookNow:hover { line-height: 1; } .htlRoom-owlCarousel .owl-nav .owl-prev { - left: -12px; + left: -15px; } .htlRoom-owlCarousel .owl-nav .owl-next { right: -12px; @@ -260,12 +259,6 @@ a.htlRoomTypeBookNow:hover { display: none; } @media (max-width: 767px) { - .htlRoom-owlCarousel .owl-nav .owl-prev { - left: 4px; - } - .htlRoom-owlCarousel .owl-nav .owl-next { - right: 4px; - } .htlRoomCardBody .htlRoomTypeNameText { font-size: 20px; } @@ -301,3 +294,7 @@ a.htlRoomTypeBookNow:hover { width: calc(100% - 4px); margin: 2px; } +.htlRoom-owlCarousel .owl-nav > div i { + position: relative; + left: 1px; +} diff --git a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl index e7abd0767..c6472e86b 100644 --- a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl +++ b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl @@ -54,29 +54,38 @@
    {block name='hotel_room_block_room_type_description'}

    {$roomDisplay.name|escape:'htmlall':'UTF-8'}

    -
    - {if $roomDisplay.amenities} - - {foreach from=$roomDisplay.amenities item=amenity} - {if $amenity.logo} - - {if $amenity.logo_type == 'icon'}{else}{$amenity.name|escape:'htmlall':'UTF-8'}{/if} - - {/if} - {/foreach} - - {/if} -
    {if $roomDisplay.feature}
    + {* the card shows one line, so features are added until the character budget is used and the last one is shortened *} + {assign var='maxFeatureChars' value=40} + {assign var='featChars' value=0} {foreach from=$roomDisplay.feature item=feat} - + {if $featChars < $maxFeatureChars} + {assign var='featLeft' value=$maxFeatureChars-$featChars} + {assign var='featText' value=$feat.value|truncate:$featLeft:'…':true} + {if $featChars}|{/if} + {if $feat.logo_type == 'icon'}{else}{$feat.name|escape:'htmlall':'UTF-8'}{/if} - {$feat.value|escape:'htmlall':'UTF-8'} + {$featText|escape:'htmlall':'UTF-8'} + {assign var='featChars' value=$featChars+$feat.value|count_characters:true+4} + {/if} {/foreach}
    {/if} + {if $roomDisplay.amenities} +
    + + {foreach from=$roomDisplay.amenities item=amenity} + {if $amenity.logo} + + {if $amenity.logo_type == 'icon'}{else}{$amenity.name|escape:'htmlall':'UTF-8'}{/if} + + {/if} + {/foreach} + +
    + {/if} {/block}
    {if $roomDisplay.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE} @@ -102,7 +111,7 @@
    {/block}
    - +
    {/if} {/block} diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index 37175f9e5..eb1492359 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -136,7 +136,7 @@ font-weight: 400; } .room_featured_features, .room_features_cont{ - margin-top: 10px; + margin-top: 13px; } .rm_desc p { @@ -226,7 +226,7 @@ img.rm_amen .room_featured_features { display: flex; flex-wrap: wrap; - gap: 8px 18px; + gap: 6px 8px; } .room_featured_feature { diff --git a/themes/hotel-reservation-theme/css/global.css b/themes/hotel-reservation-theme/css/global.css index ca0233798..e6b1cd91a 100644 --- a/themes/hotel-reservation-theme/css/global.css +++ b/themes/hotel-reservation-theme/css/global.css @@ -9069,9 +9069,6 @@ body .ui-tooltip { padding: 0 15px; margin-bottom: 30px; } - .home_block_seperator { - display: none; - } .home_block_container{ padding-top: 30px; padding-bottom: 30px; diff --git a/themes/hotel-reservation-theme/css/product.css b/themes/hotel-reservation-theme/css/product.css index 61ecddb2b..74f06c6a7 100644 --- a/themes/hotel-reservation-theme/css/product.css +++ b/themes/hotel-reservation-theme/css/product.css @@ -1842,11 +1842,8 @@ ul.service-product-nav > li:hover { .primary_block .pb-right-column { display: contents; } - .primary_block .room_type_img_containter { - order: 1; - } + .primary_block .booking-form { - order: 2; margin-bottom: 20px; } /* the column wrappers are gone, so give the sections their side gutter back */ @@ -1857,10 +1854,5 @@ ul.service-product-nav > li:hover { margin-left: 15px; margin-right: 15px; } - .primary_block #service_products_cont { - order: 3; - } - .primary_block .product_info_containter { - order: 4; - } + } From e09269e1f46a1d8dfb8828a2bd40c02d53a6033b Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 11:02:15 +0530 Subject: [PATCH 11/20] Fixed: add buttom margin of each section, add controller wise featured setting , add new setting to checkout page --- controllers/front/CategoryController.php | 22 ++++++ .../classes/HotelBookingDetail.php | 19 +---- .../classes/HotelCartBookingData.php | 2 +- .../classes/HotelHelper.php | 46 ++++++++++++- .../AdminHotelGeneralSettingsController.php | 12 ++++ .../hotelreservationsystem.php | 1 + .../views/js/WkAboutHotelBlockFront.js | 2 +- .../templates/hook/hotelInteriorBlock.tpl | 2 +- .../wkabouthotelblock/wkabouthotelblock.php | 7 ++ .../views/css/WkHotelRoomBlockFront.css | 36 ++++++++-- .../views/js/WkHotelRoomBlockFront.js | 69 ++++++++++++++++++- .../templates/hook/hotelRoomDisplayBlock.tpl | 18 ++--- themes/hotel-reservation-theme/css/global.css | 2 +- 13 files changed, 197 insertions(+), 41 deletions(-) diff --git a/controllers/front/CategoryController.php b/controllers/front/CategoryController.php index d98e78bbf..80ce4ded5 100644 --- a/controllers/front/CategoryController.php +++ b/controllers/front/CategoryController.php @@ -223,6 +223,28 @@ class CategoryControllerCore extends FrontController if ($booking_data = $objBookingDetail->dataForFrontSearch($bookingParams)) { $booking_data['rm_data'] = array_values($booking_data['rm_data']); + $maxAmenities = (int) Configuration::get('WK_MAX_AMENITIES_ROOM_SEARCH'); + $maxFeatures = (int) Configuration::get('WK_MAX_FEATURES_ROOM_SEARCH'); + $maxFeatureValues = (int) Configuration::get('WK_MAX_ROOM_TYPE_FEATURE_VALUES'); + foreach ($booking_data['rm_data'] as &$roomData) { + if ($maxAmenities && !empty($roomData['featured_amenities'])) { + $roomData['featured_amenities'] = array_slice($roomData['featured_amenities'], 0, $maxAmenities); + } + if (!empty($roomData['featured_features'])) { + if ($maxFeatures) { + $roomData['featured_features'] = array_slice($roomData['featured_features'], 0, $maxFeatures); + } + foreach ($roomData['featured_features'] as &$featuredFeature) { + if ($maxFeatureValues) { + $featuredFeature['values'] = array_slice($featuredFeature['values'], 0, $maxFeatureValues); + } + $featuredFeature['value'] = implode(', ', $featuredFeature['values']); + } + unset($featuredFeature); + } + } + unset($roomData); + if ($sort_by && $sort_value) { $indi_arr = array(); diff --git a/modules/hotelreservationsystem/classes/HotelBookingDetail.php b/modules/hotelreservationsystem/classes/HotelBookingDetail.php index 055833d3c..dbf05824b 100644 --- a/modules/hotelreservationsystem/classes/HotelBookingDetail.php +++ b/modules/hotelreservationsystem/classes/HotelBookingDetail.php @@ -1832,9 +1832,6 @@ class HotelBookingDetail extends ObjectModel if (!$only_search_data) { if (!empty($bookingData)) { - $maxAmenities = (int) Configuration::get('WK_MAX_AMENITIES_ROOM_SEARCH'); - $maxFeatures = (int) Configuration::get('WK_MAX_FEATURES_ROOM_SEARCH'); - $maxFeatureValues = (int) Configuration::get('WK_MAX_ROOM_TYPE_FEATURE_VALUES'); foreach ($bookingData['rm_data'] as $key => $value) { // featured amenities for display in room type list $featured_amenities = HotelRoomTypeAmenities::getAmenities( @@ -1842,9 +1839,6 @@ class HotelBookingDetail extends ObjectModel $context->language->id, true ); - if ($maxAmenities) { - $featured_amenities = array_slice($featured_amenities, 0, $maxAmenities); - } if (!empty($amenities) && $amenities) { $roomAmenityIds = array_column(HotelRoomTypeAmenities::getAmenities($value['id_product']), 'id'); if (array_diff($amenities, $roomAmenityIds)) { @@ -1892,18 +1886,7 @@ class HotelBookingDetail extends ObjectModel $featuredFeatures[$roomFeature['id_feature']]['values'][] = $roomFeature['value']; } } - $featuredFeatures = array_values($featuredFeatures); - if ($maxFeatures) { - $featuredFeatures = array_slice($featuredFeatures, 0, $maxFeatures); - } - foreach ($featuredFeatures as &$featuredFeature) { - if ($maxFeatureValues) { - $featuredFeature['values'] = array_slice($featuredFeature['values'], 0, $maxFeatureValues); - } - $featuredFeature['value'] = implode(', ', $featuredFeature['values']); - } - unset($featuredFeature); - $bookingData['rm_data'][$key]['featured_features'] = $featuredFeatures; + $bookingData['rm_data'][$key]['featured_features'] = array_values($featuredFeatures); $bookingData['rm_data'][$key]['price'] = $prod_price; $bookingData['rm_data'][$key]['feature_price'] = $productFeaturePrice; $bookingData['rm_data'][$key]['price_without_reduction'] = $productPriceWithoutReduction; diff --git a/modules/hotelreservationsystem/classes/HotelCartBookingData.php b/modules/hotelreservationsystem/classes/HotelCartBookingData.php index 43b282ee2..de9156635 100644 --- a/modules/hotelreservationsystem/classes/HotelCartBookingData.php +++ b/modules/hotelreservationsystem/classes/HotelCartBookingData.php @@ -1515,7 +1515,7 @@ class HotelCartBookingData extends ObjectModel $objCartBookingData = new HotelCartBookingData(); $objRoomTypeServiceProduct = new RoomTypeServiceProduct(); $objServiceProductCartDetail = new ServiceProductCartDetail(); - $maxFeatures = (int) Configuration::get('WK_MAX_FEATURES_ROOM_SEARCH'); + $maxFeatures = (int) Configuration::get('WK_MAX_FEATURES_CHECKOUT'); $maxFeatureValues = (int) Configuration::get('WK_MAX_ROOM_TYPE_FEATURE_VALUES'); foreach ($cartRoomTypes as $prodKey => $product) { diff --git a/modules/hotelreservationsystem/classes/HotelHelper.php b/modules/hotelreservationsystem/classes/HotelHelper.php index ab0a5a284..337f96e5c 100644 --- a/modules/hotelreservationsystem/classes/HotelHelper.php +++ b/modules/hotelreservationsystem/classes/HotelHelper.php @@ -1182,7 +1182,8 @@ class HotelHelper Configuration::updateValue('HTL_FEATURE_PRICING_PRIORITY', 'specific_date;special_day;date_range'); Configuration::updateValue('WK_MAX_AMENITIES_ROOM_SEARCH', 6); - Configuration::updateValue('WK_MAX_FEATURES_ROOM_SEARCH', 3); + Configuration::updateValue('WK_MAX_FEATURES_ROOM_SEARCH', 4); + Configuration::updateValue('WK_MAX_FEATURES_CHECKOUT', 0); Configuration::updateValue('WK_MAX_ROOM_TYPE_FEATURE_VALUES', 2); Configuration::updateValue('WK_GOOGLE_ACTIVE_MAP', 0); Configuration::updateValue('WK_MAP_HOTEL_ACTIVE_ONLY', 1); @@ -2297,9 +2298,52 @@ class HotelHelper if (isset($roomTypeFeatures[$roomTypeDataDefult['name']])) { $this->saveDummyRoomTypeFeatures($product, $roomTypeFeatures[$roomTypeDataDefult['name']]); } + + // assign amenities (with featured amenities) to the room type + $roomTypeAmenities = $this->getDefaultRoomTypeAmenities(); + if (isset($roomTypeAmenities[$roomTypeDataDefult['name']])) { + $objRoomTypeAmenities = new HotelRoomTypeAmenities(); + $objRoomTypeAmenities->saveRoomTypeAmenities( + $product_id, + $roomTypeAmenities[$roomTypeDataDefult['name']]['amenities'], + $roomTypeAmenities[$roomTypeDataDefult['name']]['featured'] + ); + } } } + /** + * Return the amenity ids (and the featured ones) of each demo room type, keyed by the room type name. + * Amenity ids are the ids of the default amenities created by insertHotelCommonAmenities(). + * + * @return array + */ + protected function getDefaultRoomTypeAmenities() + { + return array( + 'General Rooms' => array( + // Internet Access Free, Power Backup, Parking, NewsPaper In Lobby, Laundry Service, Gardens, Room Service, Welcome Drinks + 'amenities' => array(10, 25, 48, 12, 24, 55, 38, 14), + 'featured' => array(10, 25, 48, 12, 24, 55), + ), + 'Delux Rooms' => array( + // + Bar / Lounge + 'amenities' => array(10, 25, 48, 38, 14, 24, 55, 99, 12), + 'featured' => array(10, 25, 38, 14, 48, 24), + ), + 'Executive Rooms' => array( + // + Health Club / Gym, Multi Cuisine Restaurant + 'amenities' => array(10, 25, 48, 38, 14, 24, 12, 69, 99, 100), + 'featured' => array(10, 38, 14, 69, 100, 48), + ), + 'Luxury Rooms' => array( + // + Car Rental, Swimming Pool, Jacuzzi, Spa Services + 'amenities' => array(10, 25, 48, 38, 14, 24, 40, 69, 93, 94, 87, 99, 100), + 'featured' => array(10, 38, 93, 94, 87, 100), + ), + ); + } + /** * Return the features (and their values) of each demo room type, keyed by the room type name. * diff --git a/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php b/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php index f978ca93e..7b5d5221a 100644 --- a/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php +++ b/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php @@ -183,6 +183,15 @@ class AdminHotelGeneralSettingsController extends ModuleAdminController 'class' => 'fixed-width-xl', 'default' => '0', ), + 'WK_MAX_FEATURES_CHECKOUT' => array( + 'title' => $this->l('Maximum featured features in checkout'), + 'hint' => $this->l('Maximum number of featured features to display for each room type on the front office checkout page.'), + 'desc' => $this->l('Set to 0 to display all featured features.'), + 'type' => 'text', + 'cast' => 'intval', + 'class' => 'fixed-width-xl', + 'default' => '0', + ), 'WK_MAX_ROOM_TYPE_FEATURE_VALUES' => array( 'title' => $this->l('Maximum room type feature values per featured feature'), 'hint' => $this->l('Maximum number of room type feature values to display for each featured feature on the front office room search and order pages. For example, if the featured feature Bed Type has the values Single, Double and Queen and this is set to 2, only "Single, Double" is displayed.'), @@ -562,6 +571,9 @@ class AdminHotelGeneralSettingsController extends ModuleAdminController if (!Validate::isUnsignedInt(Tools::getValue('WK_MAX_FEATURES_ROOM_SEARCH'))) { $this->errors[] = $this->l('Maximum featured features in room search is invalid. Enter 0 or a positive number.'); } + if (!Validate::isUnsignedInt(Tools::getValue('WK_MAX_FEATURES_CHECKOUT'))) { + $this->errors[] = $this->l('Maximum featured features in checkout is invalid. Enter 0 or a positive number.'); + } if (!Validate::isUnsignedInt(Tools::getValue('WK_MAX_ROOM_TYPE_FEATURE_VALUES'))) { $this->errors[] = $this->l('Maximum room type feature values per featured feature is invalid. Enter 0 or a positive number.'); } diff --git a/modules/hotelreservationsystem/hotelreservationsystem.php b/modules/hotelreservationsystem/hotelreservationsystem.php index 0af5901fa..3c62d208d 100644 --- a/modules/hotelreservationsystem/hotelreservationsystem.php +++ b/modules/hotelreservationsystem/hotelreservationsystem.php @@ -609,6 +609,7 @@ class HotelReservationSystem extends Module 'WK_DISPLAY_CONTACT_PAGE_HOTEL_LIST', 'WK_MAX_AMENITIES_ROOM_SEARCH', 'WK_MAX_FEATURES_ROOM_SEARCH', + 'WK_MAX_FEATURES_CHECKOUT', 'WK_MAX_ROOM_TYPE_FEATURE_VALUES', 'QLO_HEADER_MEDIA_TYPE', 'QLO_HEADER_CONTENT_ALIGN', diff --git a/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js b/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js index 3c3fc1736..40c2a1af8 100644 --- a/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js +++ b/modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js @@ -146,7 +146,7 @@ $(document).ready(function(){ var items = []; var index = 0; var clicked = $(e.currentTarget).attr('href'); - $slider.find('.owl-item:not(.cloned) ' + settings.itemSelector).each(function(i) { + $slider.find('.owl-item:not(.cloned) ' + settings.itemSelector).not('.interiorbox-filler').each(function(i) { items.push({href: $(this).attr('href'), title: $(this).attr('title') || ''}); if ($(this).attr('href') === clicked) { index = i; diff --git a/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl b/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl index f1d576a42..646d5b7f8 100644 --- a/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl +++ b/modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl @@ -48,7 +48,7 @@ {if $smarty.foreach.intImg.iteration%4 == 1}
    {/if} -
    +
    {$img_name['display_name']|escape:'htmlall':'UTF-8'}
    diff --git a/modules/wkabouthotelblock/wkabouthotelblock.php b/modules/wkabouthotelblock/wkabouthotelblock.php index 422c46239..05fd71933 100644 --- a/modules/wkabouthotelblock/wkabouthotelblock.php +++ b/modules/wkabouthotelblock/wkabouthotelblock.php @@ -59,6 +59,13 @@ class WkAboutHotelBlock extends Module $objHtlInteriorImg = new WkHotelInteriorImage(); $InteriorImg = $objHtlInteriorImg->getHotelInteriorImg(1); + // every slide shows 4 photos, so the last slide is completed with photos from the start + if ($InteriorImg && ($missing = (4 - count($InteriorImg) % 4) % 4)) { + foreach (array_slice($InteriorImg, 0, $missing) as $filler) { + $filler['is_filler'] = 1; + $InteriorImg[] = $filler; + } + } $this->context->smarty->assign( array( diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css index d79c6a814..ad722b9af 100644 --- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css +++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css @@ -135,12 +135,11 @@ a.htlRoomTypeBookNow { font-size: 22px; } .htlRoomCardFeatured { - padding: 16px 0; + padding: 12px 0; overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; color: #555; - font-size: 15px; + font-size: 14px; } .htlRoomCardFeatured img.htlRoomFeatureImg { display: inline-block; @@ -157,7 +156,14 @@ a.htlRoomTypeBookNow { max-width: 18px; object-fit: contain; } -.htlRoomCardFeatured .htlRoomFeatureSep { +/* one line for all features. Each feature, with the | in front of it, is one block, so when the row is wider + than the card the whole feature is dropped and the ellipsis never follows a lonely | */ +.htlRoomCardFeatured > span { + display: inline-block; + vertical-align: top; +} +.htlRoomCardFeatured > span + span:not(.htlRoomFeatureMore):before { + content: "|"; margin: 0 5px; color: #BBB; } @@ -181,9 +187,21 @@ a.htlRoomTypeBookNow { } .htlRoomCardAmen { display: flex; + flex: 1 1 auto; gap: 6px; + min-width: 0; + overflow: hidden; +} +.htlRoomCardAmen > span.htlRoomAmenMore { + width: auto; + min-width: 32px; + padding: 0 8px; + border-radius: 16px; + font-size: 12px; + white-space: nowrap; } .htlRoomCardAmen > span { + flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; @@ -298,3 +316,13 @@ a.htlRoomTypeBookNow:hover { position: relative; left: 1px; } + +/* no line right under the room name */ +.htlRoomTypeNameText + .htlRoomCardMeta { + border-top: 0; + padding-top: 0; +} + +.htlRoomCardFeatured .htlRoomFeatureMore { + margin-left: 5px; +} diff --git a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js index 815afb812..231075091 100644 --- a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js +++ b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js @@ -20,8 +20,71 @@ * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0 */ +/** + * Keeps the items of a room card row (featured features, amenity icons) on one line. Items that do not fit are + * hidden whole, so a lone separator or icon is never left at the end, and a "more" marker is added at the end. + * + * @param {jQuery} $slider slider holding the room cards + * @param {Object} row + * @param {string} row.selector the row element + * @param {string} row.more class of the "more" marker + * @param {function(number): string} row.moreText text of the marker, gets the number of hidden items + * @param {boolean} [row.partial] show the first hidden item shortened with an ellipsis when enough room is left + */ +function fitRoomCardRow($slider, row) { + var MIN_PARTIAL_WIDTH = 100; // narrowest width a shortened item is shown in + + $slider.find(row.selector).each(function() { + var $row = $(this); + var $items = $row.children(':not(.' + row.more + ')').css({display: '', maxWidth: ''}); + var fits = function() { + return $row.prop('scrollWidth') <= $row.innerWidth(); + }; + + $row.children('.' + row.more).remove(); + if (fits()) { + return; + } + + // the marker takes room too, so it is added before the items are hidden + var $more = $('').appendTo($row); + var shown = $items.length; + + while (shown > 1 && !fits()) { + $items.eq(--shown).hide(); + $more.html(row.moreText($items.length - shown)); + } + + var $next = $items.eq(shown); + var $last = $items.eq(shown - 1); + var room = Math.floor($row.offset().left + $row.innerWidth() - ($last.offset().left + $last.outerWidth(true))); + + if (row.partial && $next.length && room >= MIN_PARTIAL_WIDTH) { + $more.remove(); + $next.css({display: 'inline-block', maxWidth: room - 4, overflow: 'hidden', textOverflow: 'ellipsis'}); + } + }); +} + +/** Fits the featured features and the amenity icons of every room card of the slider. */ +function fitRoomCards($slider) { + fitRoomCardRow($slider, { + selector: '.htlRoomCardFeatured', + more: 'htlRoomFeatureMore', + moreText: function() { return '…'; }, + partial: true + }); + fitRoomCardRow($slider, { + selector: '.htlRoomCardAmen', + more: 'htlRoomAmenMore', + moreText: function(hidden) { return '+' + hidden; } + }); +} + $(document).ready(function() { - $('.htlRoom-owlCarousel .owl-carousel').owlCarousel({ + $('.htlRoom-owlCarousel .owl-carousel').on('initialized.owl.carousel refreshed.owl.carousel resized.owl.carousel', function() { + fitRoomCards($(this)); + }).owlCarousel({ loop: true, nav: true, navText: ['', ''], @@ -34,6 +97,10 @@ $(document).ready(function() { 992: { items: 3 } } }); + // fonts and icons can change the widths after the page is shown + $(window).on('load', function() { + fitRoomCards($('.htlRoom-owlCarousel .owl-carousel')); + }); applyChangesToDescription(); $(window).on('resize', function() { resetDescriptionChanges(); diff --git a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl index c6472e86b..b63d3bcd1 100644 --- a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl +++ b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl @@ -56,20 +56,12 @@

    {$roomDisplay.name|escape:'htmlall':'UTF-8'}

    {if $roomDisplay.feature}
    - {* the card shows one line, so features are added until the character budget is used and the last one is shortened *} - {assign var='maxFeatureChars' value=40} - {assign var='featChars' value=0} + {* one line: the row is cut with an ellipsis by the css when it is wider than the card *} {foreach from=$roomDisplay.feature item=feat} - {if $featChars < $maxFeatureChars} - {assign var='featLeft' value=$maxFeatureChars-$featChars} - {assign var='featText' value=$feat.value|truncate:$featLeft:'…':true} - {if $featChars}|{/if} - - {if $feat.logo_type == 'icon'}{else}{$feat.name|escape:'htmlall':'UTF-8'}{/if} - {$featText|escape:'htmlall':'UTF-8'} - - {assign var='featChars' value=$featChars+$feat.value|count_characters:true+4} - {/if} + + {if $feat.logo_type == 'icon'}{else}{$feat.name|escape:'htmlall':'UTF-8'}{/if} + {$feat.value|escape:'htmlall':'UTF-8'} + {/foreach}
    {/if} diff --git a/themes/hotel-reservation-theme/css/global.css b/themes/hotel-reservation-theme/css/global.css index e6b1cd91a..5f800d5cf 100644 --- a/themes/hotel-reservation-theme/css/global.css +++ b/themes/hotel-reservation-theme/css/global.css @@ -9036,7 +9036,7 @@ body .ui-tooltip { .home_block_container { padding-top: 45px; - padding-bottom: 15px; + padding-bottom: 60px; position: relative; } .home_block_desc_wrapper { From 0c51fa79ff8e2498c4e8511f47a66ef1deddfcfa Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 11:13:25 +0530 Subject: [PATCH 12/20] Fied: add default data --- .../hotelreservationsystem/classes/HotelHelper.php | 14 +++++++------- modules/wkhotelroom/wkhotelroom.php | 7 +------ 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/modules/hotelreservationsystem/classes/HotelHelper.php b/modules/hotelreservationsystem/classes/HotelHelper.php index 337f96e5c..d8f9b10d2 100644 --- a/modules/hotelreservationsystem/classes/HotelHelper.php +++ b/modules/hotelreservationsystem/classes/HotelHelper.php @@ -2323,23 +2323,23 @@ class HotelHelper return array( 'General Rooms' => array( // Internet Access Free, Power Backup, Parking, NewsPaper In Lobby, Laundry Service, Gardens, Room Service, Welcome Drinks - 'amenities' => array(10, 25, 48, 12, 24, 55, 38, 14), - 'featured' => array(10, 25, 48, 12, 24, 55), + 'amenities' => array(10, 25, 48, 12, 24, 55, 38, 14, 11), + 'featured' => array(10, 25, 48, 12, 24, 55, 38, 14), ), 'Delux Rooms' => array( - // + Bar / Lounge - 'amenities' => array(10, 25, 48, 38, 14, 24, 55, 99, 12), - 'featured' => array(10, 25, 38, 14, 48, 24), + // + Bar / Lounge, Transfer Available + 'amenities' => array(10, 25, 48, 38, 14, 24, 55, 99, 12, 11), + 'featured' => array(10, 25, 38, 14, 48, 24, 55, 99), ), 'Executive Rooms' => array( // + Health Club / Gym, Multi Cuisine Restaurant 'amenities' => array(10, 25, 48, 38, 14, 24, 12, 69, 99, 100), - 'featured' => array(10, 38, 14, 69, 100, 48), + 'featured' => array(10, 38, 14, 69, 100, 48, 25, 24), ), 'Luxury Rooms' => array( // + Car Rental, Swimming Pool, Jacuzzi, Spa Services 'amenities' => array(10, 25, 48, 38, 14, 24, 40, 69, 93, 94, 87, 99, 100), - 'featured' => array(10, 38, 93, 94, 87, 100), + 'featured' => array(10, 38, 93, 94, 87, 100, 69, 99), ), ); } diff --git a/modules/wkhotelroom/wkhotelroom.php b/modules/wkhotelroom/wkhotelroom.php index 8f561160a..67425eb78 100644 --- a/modules/wkhotelroom/wkhotelroom.php +++ b/modules/wkhotelroom/wkhotelroom.php @@ -51,7 +51,6 @@ class WkHotelRoom extends Module $dateFrom = date('Y-m-d'); $dateTo = date('Y-m-d', strtotime($dateFrom) + 86400); $useTax = HotelBookingDetail::useTax(); - $maxAmenities = (int) Configuration::get('WK_MAX_AMENITIES_ROOM_SEARCH'); $maxFeatures = (int) Configuration::get('WK_MAX_FEATURES_ROOM_SEARCH'); $maxFeatureValues = (int) Configuration::get('WK_MAX_ROOM_TYPE_FEATURE_VALUES'); foreach ($hotelRoomDisplay as &$htlRoom) { @@ -128,11 +127,7 @@ class WkHotelRoom extends Module $roomFeature['value'] = implode(', ', array_slice($roomFeature['values'], 0, $maxFeatureValues ?: null)); } unset($roomFeature); - $htlRoom['amenities'] = array_slice( - HotelRoomTypeAmenities::getAmenities($idProduct, $idLang, true), - 0, - $maxAmenities ?: null - ); + $htlRoom['amenities'] = HotelRoomTypeAmenities::getAmenities($idProduct, $idLang, true); $htlRoom['feature_price'] = $featurePrice; $htlRoom['feature_price_diff'] = (float)($priceWithoutReduction - $featurePrice); } From 6ee2ff6f922282676a37a27af8ecd85ede182821 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 11:36:33 +0530 Subject: [PATCH 13/20] Fixed: margin buttom issue --- themes/hotel-reservation-theme/css/global.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/themes/hotel-reservation-theme/css/global.css b/themes/hotel-reservation-theme/css/global.css index 5f800d5cf..d70e202d5 100644 --- a/themes/hotel-reservation-theme/css/global.css +++ b/themes/hotel-reservation-theme/css/global.css @@ -9073,6 +9073,9 @@ body .ui-tooltip { padding-top: 30px; padding-bottom: 30px; } + #hotelAmenitiesBlock{ + padding-bottom: 1px; + } .margin-btm-50 { margin-bottom: 0px; } From 1f606d098f40eb7f6cd20dba538c3e0e4d9022b0 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 11:45:39 +0530 Subject: [PATCH 14/20] Fixed: search page top border issue --- themes/hotel-reservation-theme/css/category.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index eb1492359..f3358187a 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -526,6 +526,10 @@ img.rm_amen .catSortBlock { display: none; } + #category_data_cont .room_cont:first-child { + border-top: 0; + padding-top: 0; + } .mf_bar { display: flex; position: fixed; From b113c5192a55e4af3ac940c6edbcd404baf7dc82 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 13:03:23 +0530 Subject: [PATCH 15/20] Fixed: filter apply button position --- themes/hotel-reservation-theme/css/category.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index f3358187a..4a87c71b1 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -726,7 +726,13 @@ img.rm_amen border-top: 1px solid #E5E5E5; background: #fff; } + #filter_results .mf_footer .mf_apply span { + padding: 0; + } #filter_results .mf_footer .mf_apply { + display: flex; + align-items: center; + justify-content: center; width: 100%; height: 48px; font-size: 17px; From 15fcf57fd26f74953767c76dcbb471ae9a717ab9 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 13:05:56 +0530 Subject: [PATCH 16/20] Fixed: remove filter bg colour --- themes/hotel-reservation-theme/css/category.css | 1 - 1 file changed, 1 deletion(-) diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index 4a87c71b1..7b496d04a 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -736,7 +736,6 @@ img.rm_amen width: 100%; height: 48px; font-size: 17px; - background: #379BF0; color: #fff; font-weight: 700; } From dd8222ff4c24e661cc55f9cf59fcabf91c35f6d9 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 15:35:46 +0530 Subject: [PATCH 17/20] Fixed: home page our room slider autoplay --- modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js index 231075091..d921dcbac 100644 --- a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js +++ b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js @@ -89,6 +89,8 @@ $(document).ready(function() { nav: true, navText: ['', ''], dots: false, + autoplay: true, + autoplaySpeed: 1000, margin: 24, items: 1, rtl: typeof language_is_rtl != 'undefined' && language_is_rtl, From cdc2e24950f54c3d9a78c78bcb0959c867b5e121 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 18:09:00 +0530 Subject: [PATCH 18/20] Fixed: Setting Label Title, Slider Amenities Padding, and Filter Button Width --- .../AdminHotelGeneralSettingsController.php | 10 +++---- .../views/templates/hook/htlfilterblock.tpl | 2 +- .../views/css/WkHotelRoomBlockFront.css | 2 +- .../hotel-reservation-theme/css/category.css | 28 +++++++++++++------ 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php b/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php index 7b5d5221a..b0d12bd05 100644 --- a/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php +++ b/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php @@ -166,7 +166,7 @@ class AdminHotelGeneralSettingsController extends ModuleAdminController 'hint' => $this->l('Enable to display hotels list on the contact us page.'), ), 'WK_MAX_AMENITIES_ROOM_SEARCH' => array( - 'title' => $this->l('Maximum featured amenities in room search'), + 'title' => $this->l('Max featured amenities in room search'), 'hint' => $this->l('Maximum number of featured amenities to display for each room type on the front office room search page.'), 'desc' => $this->l('Set to 0 to display all featured amenities.'), 'type' => 'text', @@ -175,7 +175,7 @@ class AdminHotelGeneralSettingsController extends ModuleAdminController 'default' => '0', ), 'WK_MAX_FEATURES_ROOM_SEARCH' => array( - 'title' => $this->l('Maximum featured features in room search'), + 'title' => $this->l('Max Featured room type features on room search page'), 'hint' => $this->l('Maximum number of featured features to display for each room type on the front office room search page.'), 'desc' => $this->l('Set to 0 to display all featured features.'), 'type' => 'text', @@ -184,7 +184,7 @@ class AdminHotelGeneralSettingsController extends ModuleAdminController 'default' => '0', ), 'WK_MAX_FEATURES_CHECKOUT' => array( - 'title' => $this->l('Maximum featured features in checkout'), + 'title' => $this->l('Max Featured room type features on Checkout page'), 'hint' => $this->l('Maximum number of featured features to display for each room type on the front office checkout page.'), 'desc' => $this->l('Set to 0 to display all featured features.'), 'type' => 'text', @@ -193,8 +193,8 @@ class AdminHotelGeneralSettingsController extends ModuleAdminController 'default' => '0', ), 'WK_MAX_ROOM_TYPE_FEATURE_VALUES' => array( - 'title' => $this->l('Maximum room type feature values per featured feature'), - 'hint' => $this->l('Maximum number of room type feature values to display for each featured feature on the front office room search and order pages. For example, if the featured feature Bed Type has the values Single, Double and Queen and this is set to 2, only "Single, Double" is displayed.'), + 'title' => $this->l('Max. display values for room type Featured features'), + 'hint' => $this->l('Maximum number of room type feature values to display for each featured feature in room search results and orders. For example, if the featured feature Bed Type has the values Single, Double, and Queen, and this setting is set to 2, only Single, Double will be displayed.'), 'desc' => $this->l('Set to 0 to display all values of each featured feature.'), 'type' => 'text', 'cast' => 'intval', diff --git a/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl b/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl index 807b7c23e..3063ec7f9 100644 --- a/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl +++ b/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl @@ -103,7 +103,7 @@ {/block}
    {block name='room_types_filters_mobile_apply'} -
    +
    {l s='Apply' mod='wkhotelfilterblock'}
    {/block}
    {block name='room_types_filters_js_vars'} diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css index ad722b9af..3a8228f5d 100644 --- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css +++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css @@ -320,7 +320,7 @@ a.htlRoomTypeBookNow:hover { /* no line right under the room name */ .htlRoomTypeNameText + .htlRoomCardMeta { border-top: 0; - padding-top: 0; + padding-top: 12px; } .htlRoomCardFeatured .htlRoomFeatureMore { diff --git a/themes/hotel-reservation-theme/css/category.css b/themes/hotel-reservation-theme/css/category.css index 7b496d04a..030b1f488 100644 --- a/themes/hotel-reservation-theme/css/category.css +++ b/themes/hotel-reservation-theme/css/category.css @@ -727,16 +727,26 @@ img.rm_amen background: #fff; } #filter_results .mf_footer .mf_apply span { - padding: 0; + font-size: 14px; + padding: 11px; + font-weight: 600; + color: #FFFFFF; + text-transform: uppercase; + text-align: center; } #filter_results .mf_footer .mf_apply { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 48px; - font-size: 17px; - color: #fff; - font-weight: 700; + background-color: #1292FF; + box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.34); + border-radius: 2px; + padding: 0px 50px; + } +} +@media (max-width: 467px) { + #filter_results .mf_footer .mf_apply { + float: none !important; + display: block; + width: 100%; + padding: 0; + text-align: center; } } From a0d27a11f3321d04b5bd06fe3743448c4a8ab08a Mon Sep 17 00:00:00 2001 From: amit sharma Date: Tue, 27 Oct 2026 18:35:42 +0530 Subject: [PATCH 19/20] Fixed: remove dots from title --- .../controllers/admin/AdminHotelGeneralSettingsController.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php b/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php index b0d12bd05..f00149fbe 100644 --- a/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php +++ b/modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php @@ -193,7 +193,7 @@ class AdminHotelGeneralSettingsController extends ModuleAdminController 'default' => '0', ), 'WK_MAX_ROOM_TYPE_FEATURE_VALUES' => array( - 'title' => $this->l('Max. display values for room type Featured features'), + 'title' => $this->l('Max display values for room type Featured features'), 'hint' => $this->l('Maximum number of room type feature values to display for each featured feature in room search results and orders. For example, if the featured feature Bed Type has the values Single, Double, and Queen, and this setting is set to 2, only Single, Double will be displayed.'), 'desc' => $this->l('Set to 0 to display all values of each featured feature.'), 'type' => 'text', From 6eafde0702a81e82e1818cdff43e885d63d28848 Mon Sep 17 00:00:00 2001 From: amit sharma Date: Wed, 28 Oct 2026 19:27:19 +0530 Subject: [PATCH 20/20] Fixed: change the our room section position --- install-dev/models/install.php | 2 +- .../views/css/wkhotelfilterblock.css | 11 +++++++++-- .../views/templates/hook/htlfilterblock.tpl | 12 ++++++++---- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/install-dev/models/install.php b/install-dev/models/install.php index dfc4df2ea..d9dabfca6 100644 --- a/install-dev/models/install.php +++ b/install-dev/models/install.php @@ -673,9 +673,9 @@ class InstallModelInstall extends InstallAbstractModel 'blocksocial', 'wkfooterblock', 'wkhotelfilterblock', + 'wkhotelroom', 'wkabouthotelblock', 'wkhotelfeaturesblock', - 'wkhotelroom', 'wktestimonialblock', 'bankwire', 'cheque', diff --git a/modules/wkhotelfilterblock/views/css/wkhotelfilterblock.css b/modules/wkhotelfilterblock/views/css/wkhotelfilterblock.css index 5c2e5cdbd..292ca4cca 100644 --- a/modules/wkhotelfilterblock/views/css/wkhotelfilterblock.css +++ b/modules/wkhotelfilterblock/views/css/wkhotelfilterblock.css @@ -58,7 +58,7 @@ .layered_filt { - margin-bottom: 5px; + margin-bottom: 8px; } .layered_filt_category @@ -111,4 +111,11 @@ #filter_price_silder.ui-widget-content { border: none; -} \ No newline at end of file +} + +.layered_filt_label { + display: block; + margin: 0; + font-weight: normal; + cursor: pointer; +} diff --git a/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl b/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl index 3063ec7f9..007862b39 100644 --- a/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl +++ b/modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl @@ -67,8 +67,10 @@
    {foreach $all_amenities as $amenity}
    -
    - {$amenity.name} +
    {/foreach}
    @@ -92,8 +94,10 @@
    {foreach $feature.values as $featureValue}
    -
    - {$featureValue.value|escape:'html':'UTF-8'} +
    {/foreach}