Daniel/hotel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1948 from amitsharma322/gli-3118

Browse Source 
Fixed: QloApps frontend responsiveness to ensure proper layout and compatibility across mobile devices.
This commit is contained in:
Rohit Jain
2026-10-28 20:00:16 +05:30
committed by GitHub
parent 6d652f4710 6eafde0702
commit ef3dc5ea91
35 changed files with 1568 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
controllers/front/CategoryController.php
View File

@@ -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();

2
install-dev/models/install.php
View File

@@ -673,9 +673,9 @@ class InstallModelInstall extends InstallAbstractModel
'blocksocial',
'wkfooterblock',
'wkhotelfilterblock',
'wkhotelroom',
'wkabouthotelblock',
'wkhotelfeaturesblock',
'wkhotelroom',
'wktestimonialblock',
'bankwire',
'cheque',

19
modules/hotelreservationsystem/classes/HotelBookingDetail.php
View File

@@ -1833,9 +1833,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(
@@ -1843,9 +1840,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)) {
@@ -1893,18 +1887,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;

2
modules/hotelreservationsystem/classes/HotelCartBookingData.php
View File

@@ -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) {

50
modules/hotelreservationsystem/classes/HotelHelper.php
View File

@@ -1181,9 +1181,10 @@ 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_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, 11),
'featured' => array(10, 25, 48, 12, 24, 55, 38, 14),
),
'Delux Rooms' => array(
// + 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, 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, 69, 99),
),
);
}
/**
* Return the features (and their values) of each demo room type, keyed by the room type name.
*

20
modules/hotelreservationsystem/controllers/admin/AdminHotelGeneralSettingsController.php
View File

@@ -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',
@@ -183,9 +183,18 @@ class AdminHotelGeneralSettingsController extends ModuleAdminController
'class' => 'fixed-width-xl',
'default' => '0',
),
'WK_MAX_FEATURES_CHECKOUT' => array(
'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',
'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.'),
'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',
@@ -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.');
}

1
modules/hotelreservationsystem/hotelreservationsystem.php
View File

@@ -610,6 +610,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',

129
modules/wkabouthotelblock/views/css/WkAboutHotelBlockFront.css
View File

@@ -20,8 +20,11 @@
* @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%;
margin: 0;
}
}
.interiorImgWrapper {
width: 100%;
@@ -46,32 +49,24 @@
height: 100%;
object-fit: cover;
}
.htlInterior-owlCarousel .owl-prev, .htlInterior-owlCarousel .owl-next{
font-size: 40px;
font-weight: 200;
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
}
.htlInterior-owlCarousel .owl-prev {
left: 0;
}
.htlInterior-owlCarousel .owl-next {
right: 0;
}
.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;
@@ -79,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;
}
@@ -94,4 +89,88 @@
font-size: 50px;
text-align: center;
vertical-align: middle;
}
}
/* 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(2, 1fr);
gap: 8px;
height: auto;
}
.interiorbox {
padding-bottom: 100%;
}
.interiorboxInner {
border: 0;
border-radius: 3px;
}
.htlInterior-owlCarousel .owl-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 24px;
}
.htlInterior-owlCarousel .owl-dots .owl-dot span {
display: block;
width: 7px;
height: 7px;
margin: 0;
border-radius: 50%;
background: #C4C4C4;
}
.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, 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-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; }
.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; 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; }
@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; }
/* 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;
}

156
modules/wkabouthotelblock/views/js/WkAboutHotelBlockFront.js
View File

@@ -23,26 +23,19 @@
$(document).ready(function(){
$('.htlInterior-owlCarousel .owl-carousel').owlCarousel({
loop:true,
nav:true,
navSpeed:1000,
navText:['<div class="nav-direction-wrapper"><div class="nav-direction-primary"><div class="nav-direction-secondary"><i class="icon-angle-left"></i></div></div></div>','<div class="nav-direction-wrapper"><div class="nav-direction-primary"><div class="nav-direction-secondary"><i class="icon-angle-right"></i></div></div></div>'],
dots:false,
nav:false,
dots:true,
items: 1,
margin: 8,
slideBy: 'page',
responsive: {576: {items: 2}},
autoHeight:true,
autoplay:true,
autoplaySpeed:1000,
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 +45,123 @@ $(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
}
}
});
});
// 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 = $('<div class="htl-gal-thumbs"><button type="button" class="htl-gal-thumbs__nav htl-gal-thumbs__prev" aria-label="Previous"><i class="icon-angle-left" aria-hidden="true"></i></button><div class="htl-gal-thumbs__track"></div><button type="button" class="htl-gal-thumbs__nav htl-gal-thumbs__next" aria-label="Next"><i class="icon-angle-right" aria-hidden="true"></i></button></div>');
var $track = $thumbs.find('.htl-gal-thumbs__track');
$.each(group, function(i, item) {
$('<button type="button" class="htl-gal-thumbs__item" tabindex="-1"></button>')
.attr('aria-label', (i + 1) + ' / ' + group.length)
.append($('<img alt="">').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;
}
}
// 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;
}
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).not('.interiorbox-filler').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});
});

19
modules/wkabouthotelblock/views/templates/hook/hotelInteriorBlock.tpl
View File

@@ -44,12 +44,11 @@
<div class="row home_block_content htlInterior-owlCarousel">
<div class="col-sm-12 col-xs-12">
<div class="owl-carousel owl-theme">
{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%4 == 1}
<div class="interiorImgWrapper">
{/if}
<div class="interiorbox" data-fancybox-group="interiorGallery" rel="interiorGallery" href="{$link->getMediaLink("`$module_dir|escape:'htmlall':'UTF-8'`views/img/hotel_interior/`$img_name['name']|escape:'htmlall':'UTF-8'`.jpg")}" title="{$img_name['display_name']|escape:'htmlall':'UTF-8'}">
<div class="interiorbox{if !empty($img_name['is_filler'])} interiorbox-filler{/if}" data-fancybox-group="interiorGallery" rel="interiorGallery" href="{$link->getMediaLink("`$module_dir|escape:'htmlall':'UTF-8'`views/img/hotel_interior/`$img_name['name']|escape:'htmlall':'UTF-8'`.jpg")}" title="{$img_name['display_name']|escape:'htmlall':'UTF-8'}">
<div class="interiorboxInner">
<img src="{$link->getMediaLink("`$module_dir|escape:'htmlall':'UTF-8'`views/img/hotel_interior/`$img_name['name']|escape:'htmlall':'UTF-8'`.jpg")}" class="interiorImg" alt="{$img_name['display_name']|escape:'htmlall':'UTF-8'}">
</div>
@@ -61,22 +60,10 @@
</div>
</div>
</div>
{if $smarty.foreach.intImg.iteration%3 == 0}
{if $smarty.foreach.intImg.iteration%4 == 0 || $smarty.foreach.intImg.last}
</div>
{/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}
<div class="interiorbox">
<div class="interiorboxInner">
<img src="{$link->getMediaLink("`$module_dir|escape:'htmlall':'UTF-8'`views/img/Default-Image.png")}" class="interiorImg" alt="Default Image">
</div>
</div>
{/for}
</div>
{/if}
</div>
</div>
</div>

8
modules/wkabouthotelblock/wkabouthotelblock.php
View File

@@ -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');
@@ -58,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(

8
modules/wkhotelfeaturesblock/views/css/wkHotelFeaturesBlockFront.css
View File

@@ -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;
}
}

6
modules/wkhotelfeaturesblock/views/js/wkHotelFeaturesBlockFront.js
View File

@@ -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);
});

11
modules/wkhotelfilterblock/views/css/wkhotelfilterblock.css
View File

@@ -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;
}
}
.layered_filt_label {
display: block;
margin: 0;
font-weight: normal;
cursor: pointer;
}

44
modules/wkhotelfilterblock/views/js/wkhotelfilterblock.js
View File

@@ -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 = $('<div class="mf_nav"></div>');
$conts.each(function () {
$nav.append($('<button type="button" class="mf_tab"></button>').text($(this).find('.lf_headingmain_wrapper span').first().text()).append('<b></b>'));
});
$('#filter_results > .col-sm-12').prepend($nav);
var $sheet = $('<div class="mf_sheet"><div class="mf_sheet_box"><div class="mf_sheet_head"><span>' + mfSortByTxt + '</span><button type="button">&times;</button></div><ul></ul></div></div>');
$('.sort_result').each(function () {
$sheet.find('ul').append($('<li></li>').text($(this).text()).data('source', $(this)));
});
var $bar = $('<div class="mf_bar"><button type="button" class="mf_sort"><i class="icon-sort"></i> ' + mfSortTxt + '</button><button type="button" class="mf_filter"><i class="icon-filter"></i> ' + mfFilterTxt + ' <b></b></button></div>');
$('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');
}
});

24
modules/wkhotelfilterblock/views/templates/hook/htlfilterblock.tpl
View File

@@ -22,6 +22,12 @@
{block name='room_types_filters_block'}
<div id="filter_results" class="row block">
{* mobile only: header of the full screen filters panel *}
<div class="mf_header">
<button type="button" class="mf_back">&larr;</button>
<span class="mf_title">{l s='Filters' mod='wkhotelfilterblock'}</span>
<button type="button" class="mf_clear_all">{l s='Clear all' mod='wkhotelfilterblock'}</button>
</div>
<div class="col-sm-12">
{block name='room_types_price_filter'}
{if isset($config) && $config['SHOW_PRICE_FILTER']}
@@ -61,8 +67,10 @@
<div class="col-sm-12 lf_sub_cont">
{foreach $all_amenities as $amenity}
<div class="layered_filt">
<input type="checkbox" class="filter" data-type="amenities" value="{$amenity.id_amenity}">
<span class="filters_name">{$amenity.name}</span>
<label class="layered_filt_label">
<div class="checker"><span><input type="checkbox" class="filter not_uniform" data-type="amenities" value="{$amenity.id_amenity}"></span></div>
<span class="filters_name">{$amenity.name}</span>
</label>
</div>
{/foreach}
</div>
@@ -86,8 +94,10 @@
<div class="col-sm-12 lf_sub_cont">
{foreach $feature.values as $featureValue}
<div class="layered_filt">
<input type="checkbox" class="filter" data-type="features" data-feature-group="{$feature.id_feature|intval}" value="{$featureValue.id_feature_value|intval}">
<span class="filters_name">{$featureValue.value|escape:'html':'UTF-8'}</span>
<label class="layered_filt_label">
<div class="checker"><span><input type="checkbox" class="filter not_uniform" data-type="features" data-feature-group="{$feature.id_feature|intval}" value="{$featureValue.id_feature_value|intval}"></span></div>
<span class="filters_name">{$featureValue.value|escape:'html':'UTF-8'}</span>
</label>
</div>
{/foreach}
</div>
@@ -96,6 +106,9 @@
{/if}
{/block}
</div>
{block name='room_types_filters_mobile_apply'}
<div class="mf_footer"><a href="javascript:void(0);" class="btn btn-default button button-medium pull-right mf_apply"><span>{l s='Apply' mod='wkhotelfilterblock'}</span></a></div>
{/block}
</div>
{block name='room_types_filters_js_vars'}
{strip}
@@ -108,6 +121,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}

242
modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css
View File

@@ -50,17 +50,24 @@
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%;
margin: 0;
}
.hotelRoomDescContainer{
padding: 10px;
padding: 15px 0px;
}
.wk_roomType_price_type{
font-size: 16px;
font-weight: 400;
}
.htlRoomTypeNameText {
width: 100%;
}
.room_type_old_price {
width: 100%;
@@ -91,12 +98,231 @@ 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;
}
}
/* room type cards slider */
.htlRoom-owlCarousel .owl-carousel {
padding: 0 0 6px;
}
.htlRoomCard {
background: #fff;
border: 1px solid #E5E5E5;
border-radius: 4px;
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 {
padding: 12px 0;
overflow: hidden;
white-space: nowrap;
color: #555;
font-size: 14px;
}
.htlRoomCardFeatured img.htlRoomFeatureImg {
display: inline-block;
width: 16px;
height: 16px;
max-width: 16px;
margin-right: 4px;
object-fit: contain;
vertical-align: -3px;
}
.htlRoomCardAmen > span img.htlRoomAmenityImg {
width: 18px;
height: 18px;
max-width: 18px;
object-fit: contain;
}
/* 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;
}
.htlRoomCardFeatured i {
margin-right: 4px;
color: #777;
}
.htlRoomCardMeta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 0;
border-top: 1px solid #E5E5E5;
color: #555;
font-size: 15px;
}
.htlRoomCardGuests i {
margin-right: 4px;
color: #777;
}
.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;
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;
border-top: 1px solid #E5E5E5;
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: -15px;
}
.htlRoom-owlCarousel .owl-nav .owl-next {
right: -12px;
}
.htlRoom-owlCarousel .owl-nav .disabled {
display: none;
}
@media (max-width: 767px) {
.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;
}
.htlRoom-owlCarousel .owl-nav > div i {
position: relative;
left: 1px;
}
/* no line right under the room name */
.htlRoomTypeNameText + .htlRoomCardMeta {
border-top: 0;
padding-top: 12px;
}
.htlRoomCardFeatured .htlRoomFeatureMore {
margin-left: 5px;
}

82
modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
View File

@@ -20,7 +20,89 @@
* @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 = $('<span class="' + row.more + '"></span>').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 '&hellip;'; },
partial: true
});
fitRoomCardRow($slider, {
selector: '.htlRoomCardAmen',
more: 'htlRoomAmenMore',
moreText: function(hidden) { return '+' + hidden; }
});
}
$(document).ready(function() {
$('.htlRoom-owlCarousel .owl-carousel').on('initialized.owl.carousel refreshed.owl.carousel resized.owl.carousel', function() {
fitRoomCards($(this));
}).owlCarousel({
loop: true,
nav: true,
navText: ['<i class="icon-angle-left"></i>', '<i class="icon-angle-right"></i>'],
dots: false,
autoplay: true,
autoplaySpeed: 1000,
margin: 24,
items: 1,
rtl: typeof language_is_rtl != 'undefined' && language_is_rtl,
responsive: {
768: { items: 2 },
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();

100
modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
View File

@@ -38,64 +38,72 @@
</div>
{/if}
{block name='hotel_room_block_content'}
<div class="row home_block_content">
<div class="row home_block_content htlRoom-owlCarousel">
<div class="col-sm-12 col-xs-12">
{assign var='htlRoomBlockIteration' value=0}
{foreach from=$hotelRoomDisplay item=roomDisplay name=htlRoom}
{if $smarty.foreach.htlRoom.iteration%2}
<div class="row">
{/if}
<div class="col-sm-12 col-md-6 margin-btm-30">
{block name='hotel_room_block_room_type_image'}
<a href="{$link->getProductLink($roomDisplay.id_product)|escape:'html':'UTF-8'}">
<img src="{$roomDisplay.image|escape:'htmlall':'UTF-8'}" alt="{$roomDisplay.name|escape:'htmlall':'UTF-8'}" class="img-responsive width-100">
</a>
<div class="owl-carousel owl-theme">
{foreach from=$hotelRoomDisplay item=roomDisplay name=htlRoom}
<div class="htlRoomCard">
{block name='hotel_room_block_room_type_image'}
<a class="htlRoomCardImg" href="{$link->getProductLink($roomDisplay.id_product)|escape:'html':'UTF-8'}">
<img src="{$roomDisplay.image|escape:'htmlall':'UTF-8'}" alt="{$roomDisplay.name|escape:'htmlall':'UTF-8'}">
</a>
{/block}
{block name='displayHotelRoomsBlockImageAfter'}
{hook h='displayHotelRoomsBlockImageAfter' room_type=$roomDisplay}
{/block}
<div class="htlRoomCardBody">
{block name='hotel_room_block_room_type_description'}
<p class="htlRoomTypeNameText">{$roomDisplay.name|escape:'htmlall':'UTF-8'}</p>
{if $roomDisplay.feature}
<div class="htlRoomCardFeatured">
{* 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}
<span title="{$feat.name|escape:'htmlall':'UTF-8'}">
{if $feat.logo_type == 'icon'}<i class="{$feat.logo|escape:'htmlall':'UTF-8'}"></i>{else}<img class="htlRoomFeatureImg" src="{$smarty.const._PS_IMG_}rf/{$feat.logo_image|escape:'htmlall':'UTF-8'}" alt="{$feat.name|escape:'htmlall':'UTF-8'}" onerror="this.style.display='none'">{/if}
{$feat.value|escape:'htmlall':'UTF-8'}
</span>
{/foreach}
</div>
{/if}
{if $roomDisplay.amenities}
<div class="htlRoomCardMeta">
<span class="htlRoomCardAmen">
{foreach from=$roomDisplay.amenities item=amenity}
{if $amenity.logo}
<span title="{$amenity.name|escape:'htmlall':'UTF-8'}">
{if $amenity.logo_type == 'icon'}<i class="{$amenity.logo|escape:'htmlall':'UTF-8'}"></i>{else}<img class="htlRoomAmenityImg" src="{$amenity_img_dir|escape:'htmlall':'UTF-8'}{$amenity.logo|escape:'htmlall':'UTF-8'}" alt="{$amenity.name|escape:'htmlall':'UTF-8'}">{/if}
</span>
{/if}
{/foreach}
</span>
</div>
{/if}
{/block}
{block name='displayHotelRoomsBlockImageAfter'}
{hook h='displayHotelRoomsBlockImageAfter' room_type=$roomDisplay}
{/block}
<div class="hotelRoomDescContainer">
{block name='hotel_room_block_room_type_description'}
<div class="row margin-lr-0">
<p class="htlRoomTypeNameText pull-left">{$roomDisplay.name|escape:'htmlall':'UTF-8'}</p>
{if $roomDisplay.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
<p class="htlRoomTypePriceText pull-right">
{if $roomDisplay.feature_price_diff >= 0}
<span class="wk_roomType_price {if $roomDisplay.feature_price_diff>0}room_type_old_price{/if}">{convertPrice price = $roomDisplay.price_without_reduction}</span>
{/if}
{if $roomDisplay.feature_price_diff}
<span class="wk_roomType_price">{convertPrice price = $roomDisplay.feature_price}</span>
{/if}
<span class="wk_roomType_price_type">
/&nbsp;{l s='Per Night' mod='wkhotelroom'}
</span>
</p>
<div class="htlRoomCardFoot">
{if $roomDisplay.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
<p class="htlRoomTypePriceText">
{if $roomDisplay.feature_price_diff >= 0}
<span class="wk_roomType_price {if $roomDisplay.feature_price_diff>0}room_type_old_price{/if}">{convertPrice price = $roomDisplay.price_without_reduction}</span>
{/if}
</div>
<div class="row margin-lr-0 htlRoomTypeDescText htlRoomTypeDescTextContainer">{$roomDisplay.description|escape:'html':'UTF-8'}</div>
<div class="row htlRoomTypeDescOriginal" hidden>{$roomDisplay.description|escape:'html':'UTF-8'}</div>
<div class="htlRoomTypeDescExtras"><span class='htlRoomTypeDescReadmore'>...{l s='Read More.' mod='wkhotelroom'}</span><span class='htlRoomTypeDescReadless'>...{l s='Read Less.' mod='wkhotelroom'}</span></div>
{/block}
{if $roomDisplay.feature_price_diff}
<span class="wk_roomType_price">{convertPrice price = $roomDisplay.feature_price}</span>
{/if}
<span class="wk_roomType_price_type">/&nbsp;{l s='night' mod='wkhotelroom'}</span>
</p>
{/if}
{block name='hotel_room_block_action'}
<div class="row margin-lr-0">
<a class="btn htlRoomTypeBookNow" href="{$link->getProductLink($roomDisplay.id_product)|escape:'html':'UTF-8'}"><span>{if !isset($restricted_country_mode) && !$PS_CATALOG_MODE}{l s='book now' mod='wkhotelroom'}{else}{l s='View' mod='wkhotelroom'}{/if}</span></a>
</div>
<a class="btn htlRoomTypeBookNow" href="{$link->getProductLink($roomDisplay.id_product)|escape:'html':'UTF-8'}"><span>{if !isset($restricted_country_mode) && !$PS_CATALOG_MODE}{l s='Book now' mod='wkhotelroom'}{else}{l s='View' mod='wkhotelroom'}{/if}</span></a>
{/block}
</div>
</div>
{if !($smarty.foreach.htlRoom.iteration%2)}
</div>
{/if}
{assign var='htlRoomBlockIteration' value=$smarty.foreach.htlRoom.iteration}
{/foreach}
{if $htlRoomBlockIteration%2}
</div>
{/if}
{/foreach}
</div>
</div>
</div>
{/block}
</div>
<hr class="home_block_seperator"/>
<hr class="home_block_seperator"/>
</div>
{/if}
{/block}

23
modules/wkhotelroom/wkhotelroom.php
View File

@@ -51,6 +51,8 @@ class WkHotelRoom extends Module
$dateFrom = date('Y-m-d');
$dateTo = date('Y-m-d', strtotime($dateFrom) + 86400);
$useTax = HotelBookingDetail::useTax();
$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);
@@ -109,6 +111,23 @@ 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;
$features = array();
foreach (Product::getFrontFeaturesStatic($idLang, $idProduct) as $feature) {
if ($feature['is_featured'] && $feature['logo']) {
$features[$feature['id_feature']] = $features[$feature['id_feature']] ?? $feature;
$features[$feature['id_feature']]['values'][] = $feature['value'];
}
}
$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'] = HotelRoomTypeAmenities::getAmenities($idProduct, $idLang, true);
$htlRoom['feature_price'] = $featurePrice;
$htlRoom['feature_price_diff'] = (float)($priceWithoutReduction - $featurePrice);
}
@@ -123,10 +142,14 @@ 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');

50
modules/wkroomsearchblock/views/css/wk-category-search.css
View File

@@ -60,4 +60,54 @@
.header-rmsearch-wrapper {
padding: 10px 5px;}
}
/* 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;}
}

8
modules/wkroomsearchblock/views/css/wk-landing-page-search.css
View File

@@ -60,8 +60,14 @@
column-gap: 0px;
}
.header-rmsearch-wrapper {
height: calc(100vw - 60px);
height: auto;
width: calc(100vw - 60px);
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 {

16
modules/wkroomsearchblock/views/templates/hook/categoryPageSearch.tpl
View File

@@ -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}
<div class="header-rmsearch-details-wrapper">
<div class="filter_header">
<p>{l s='Searched results for' mod='wkroomsearchblock'}:
<button class="btn btn-default modify_roomtype_search_btn pull-right"><i class="icon-pencil"></i></button>
</p>
</div>
<div class="search_result_info">
{$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']}<img src="{$module_dir}views/img/icon-arrow-left.svg"> {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}<span class="faded-txt"> ({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})</span> {/if}
</div>
</div>
{/if}
{/block}
<div class="header-rmsearch-wrapper">
<a href="#" class="close_room_serach_wrapper"><img src="{$module_dir}views/img/icon-close.svg"></a>
<div class="filter_header clearfix">
<p>{l s='Search Rooms' mod='wkroomsearchblock'}</p>
<hr class="header-bottom-hr">

4
modules/wkroomsearchblock/wkroomsearchblock.php
View File

@@ -102,9 +102,13 @@ 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');
// 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');

418
themes/hotel-reservation-theme/css/category.css
View File

@@ -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;
@@ -95,7 +146,7 @@
font-weight: 400;
}
.room_featured_features, .room_features_cont{
margin-top: 10px;
margin-top: 13px;
}
.rm_desc p
{
@@ -163,20 +214,38 @@ 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;
flex-wrap: wrap;
gap: 6px 8px;
}
.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{
@@ -308,6 +377,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:not(.occupancy_count_block) {
width: 100%;
}
}
@media (min-width: 1200px) {
.booking_guest_occupancy_conatiner .form-group {
margin-bottom: 0;
@@ -359,4 +445,318 @@ p.capa_txt {
.rm_desc .view_more {
display: inline-block;
}
}
.layered_filter_cont:has(#filter_price_silder) {
padding-bottom: 15px;
margin-bottom: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
#category #left_column,
#category #center_column {
width: 100%;
}
.catSortBlock .col-sm-3 {
width: auto;
}
.catSortBlock .filter_dw_cont .btn {
white-space: nowrap;
}
.catSortBlock .filter_dw_cont .sort_btn_span {
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 8px;
border: 1px solid #379BF0;
border-radius: 16px;
font-size: 12px;
line-height: 30px;
color: #379BF0;
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;
}
}
/* 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;
}
#category_data_cont .room_cont:first-child {
border-top: 0;
padding-top: 0;
}
.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 span {
font-size: 14px;
padding: 11px;
font-weight: 600;
color: #FFFFFF;
text-transform: uppercase;
text-align: center;
}
#filter_results .mf_footer .mf_apply {
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;
}
}

12
themes/hotel-reservation-theme/css/daterangepicker.css
View File

@@ -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;
}
}

69
themes/hotel-reservation-theme/css/global.css
View File

@@ -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,
@@ -5974,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;
@@ -7553,6 +7561,9 @@ div.star a:hover {
.ie8 .breadcrumb .navigation-pipe {
width: 20px; }
.copyRightWrapper {
text-align: center; }
.footer-container {
background-color: #333333;
padding-top: 30px; }
@@ -8243,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;
@@ -8920,11 +8945,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 +9057,29 @@ 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_wrapper {
padding: 0 15px;
margin-bottom: 30px;
}
.home_block_container{
padding-top: 30px;
padding-bottom: 30px;
}
#hotelAmenitiesBlock{
padding-bottom: 1px;
}
.margin-btm-50 {
margin-bottom: 0px;
}
}
.home_block_desc_line {
border-color: #333333;
width: 100px;
@@ -9391,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; }
}
.ui-tooltip-trigger {
cursor: pointer;
display: inline-block;

46
themes/hotel-reservation-theme/css/modules/blockcart/blockcart.css
View File

@@ -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%; } }*/
@@ -317,6 +329,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 {
@@ -334,6 +349,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; } }
@@ -357,13 +375,17 @@
#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;
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 {
@@ -378,6 +400,28 @@
#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; } }
@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;

4
themes/hotel-reservation-theme/css/modules/blocknewsletter/blocknewsletter.css
View File

@@ -178,6 +178,10 @@
position: relative;
padding: 0px 20px;
}
.button.button-medium.newsletter-btn:hover, .button.button-medium.newsletter-btn:focus {
background: #0f7fe0;
background-image: none;
}
#newsletter-input
{
background-color: #3a3a3a;

9
themes/hotel-reservation-theme/css/occupancy.css
View File

@@ -128,9 +128,16 @@
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 {
width: 80%;}
/* 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-form .booking_occupancy_wrapper .occupancy_info_block .occupancy_count {
width: auto;}
}

12
themes/hotel-reservation-theme/css/order-confirmation.css
View File

@@ -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;
@@ -254,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;
}

26
themes/hotel-reservation-theme/css/order-detail.css
View File

@@ -288,22 +288,48 @@
}
@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;
}
.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;

46
themes/hotel-reservation-theme/css/order-opc.css
View File

@@ -575,6 +575,52 @@
width: 50%;
}
}
@media (max-width: 991px) {
#order-opc .cart_voucher_detail_block span.cart_discount_name {
width: 50%;
}
}
/* 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;
width: 100%;
}
#order-opc #content > .row > .col-md-8 > #oprder-opc-accordion > #order-payment-block {
order: 2;
}
}
@media (max-width: 480px) {
#order-opc .proceed_btn_block .button-medium,
#order-opc .proceed_btn_block .btn-edit-guest-info,
#order-opc #login_form_content #SubmitLogin {
float: none !important;
display: block;
width: 100%;
padding: 0 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%;

55
themes/hotel-reservation-theme/css/product.css
View File

@@ -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 */
@@ -1621,6 +1621,28 @@ 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 {
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 > * {
@@ -1805,3 +1827,32 @@ 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 .booking-form {
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;
}
}

2
themes/hotel-reservation-theme/order-opc.tpl
View File

@@ -227,7 +227,7 @@
{include file="$tpl_dir./order-carrier.tpl"}
<!-- END Carrier -->
</div> *}
<div class="card">
<div class="card" id="order-payment-block">
<div class="card-header" id="order-payment-head">
{block name='order_opc_payment_heading'}
<h5 class="accordion-header" data-toggle="collapse" data-target="#collapse-order-payment" aria-expanded="true" aria-controls="collapse-order-payment">