From 1674d9eb1afa775feb0a479540b5e3dc83b69207 Mon Sep 17 00:00:00 2001
From: "vishalsingh.qlo325"
Date: Wed, 27 Mar 2024 10:32:17 +0530
Subject: [PATCH 01/30] Updated: Design for the our room block
---
.../views/css/WkHotelRoomBlockFront.css | 71 +++++++++-----
.../views/js/WkHotelRoomBlockFront.js | 93 +++++++++++++++++++
.../templates/hook/hotelRoomDisplayBlock.tpl | 13 ++-
modules/wkhotelroom/wkhotelroom.php | 10 +-
4 files changed, 161 insertions(+), 26 deletions(-)
create mode 100644 modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css
index 2dede0a9e..4319dbb72 100644
--- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css
+++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css
@@ -17,18 +17,50 @@
* @license https://store.webkul.com/license.html
*/
-.hotelRoomDescContainer{
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: rgba(255, 255, 255, 0.85);
- margin-left: 15px;
- margin-right: 15px;
- padding: 20px;
- z-index: 10;
+.htlRoomTypeDescTextContainer {
+ overflow: hidden;
+ max-height: 65px;
}
+.read-extra-text{
+ cursor: pointer;
+ font-weight: 400;
+}
+.htlRoomTypeDescTextContainer p{
+ margin: 0px;
+}
+@media (min-width: 530px) {
+ .hotelRoomDescContainer{
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba(255, 255, 255, 0.8);
+ margin-left: 10px;
+ margin-right: 10px;
+ padding: 20px;
+ z-index: 10;
+ }
+ .htlRoomTypePriceText{
+ float :right;
+ }
+}
+@media (max-width: 530px) {
+ .hotelRoomDescContainer{
+ padding: 10px;
+ }
+ .wk_roomType_price_type{
+ font-size: 16px;
+ font-weight: 400;
+ }
+ .htlRoomTypeNameText {
+ width: 100%;
+ }
+ .room_type_old_price {
+ width: 100%;
+ display: block;
+ }
+}
.htlRoomTypeNameText, .htlRoomTypePriceText {
font-size: 18px;
color: #222222;
@@ -40,14 +72,15 @@
color: #555555;
font-weight: 300;
line-height: 21px;
+ margin-bottom: 9px;
}
-.htlRoomTypeBookNow {
- font-size: 15px!important;
- color: #333333!important;
- font-weight: 400!important;
- background: transparent!important;
- border: 1px solid #333333!important;
- padding: 10px 30px!important;
+a.htlRoomTypeBookNow {
+ font-size: 15px;
+ color: #333333;
+ font-weight: 400;
+ background: transparent;
+ border: 1px solid #333333;
+ padding: 10px 30px;
text-transform: capitalize;
}
@@ -55,10 +88,6 @@
border: 1px solid #333333;
}
-.htlRoomTypeDescText {
- padding-bottom: 9px;
-}
-
.room_type_old_price {
text-decoration: line-through;
color:#555555;
diff --git a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
new file mode 100644
index 000000000..4aba4b360
--- /dev/null
+++ b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
@@ -0,0 +1,93 @@
+/**
+* Since 2010 Webkul.
+*
+* NOTICE OF LICENSE
+*
+* All right is reserved,
+* Please go through this link for complete license : https://store.webkul.com/license.html
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade this module to newer
+* versions in the future. If you wish to customize this module for your
+* needs please refer to https://store.webkul.com/customisation-guidelines/ for more information.
+*
+* @author Webkul IN
+* @copyright Since 2010 Webkul IN
+* @license https://store.webkul.com/license.html
+*/
+
+$(document).ready(function() {
+ toggleRoomDescriptionExtras();
+ $(window).on('resize', function() {
+ removePreviousChanges();
+ toggleRoomDescriptionExtras();
+ });
+
+ $(document).on('click', '.read-extra-text', function(e) {
+ e.preventDefault();
+ $(e.target).closest(".htlRoomTypeDescText").find(".read-extra-text").toggle();
+ $(e.target).closest(".htlRoomTypeDescText").find(".truncated").toggle();
+ if ($(e.target).closest(".htlRoomTypeDescText").hasClass('htlRoomTypeDescTextContainer')){
+ $(e.target).closest(".htlRoomTypeDescText").removeClass('htlRoomTypeDescTextContainer');
+ } else {
+ $(e.target).closest(".htlRoomTypeDescText").addClass('htlRoomTypeDescTextContainer');
+ }
+ });
+});
+
+// Function is called to revert the changes made to the description on the window size change.
+function removePreviousChanges()
+{
+ $(document).find('.htlRoomTypeDescText').each(function() {
+ //Reverting the changes so we can reapply them according the new screen size.
+ $(this).html($(this).parent().find('.htlRoomTypeDescTextOriginal').html());
+ if (!$(this).hasClass('htlRoomTypeDescTextContainer')){
+ $(this).addClass('htlRoomTypeDescTextContainer');
+ }
+ });
+}
+function addExtraTextToDescription(target)
+{
+ // Getting the number of displayed characters
+ var show_char = getChars(target);
+ var ellipses = "... ";
+ var content = $(target).html();
+ if (content.trim().length > show_char) {
+ var a = content.trim().substr(0, show_char).replace('
' , ''); // getting the text that we want to show to the user, removed the first
tag.
+ if (content.trim().substr(content.trim().length - 4, content.trim().length) == '
') {
+ content = content.trim().substr(0, content.trim().length - 4);// removed the last closing
tag.
+ }
+ var b = content.trim().substr(show_char - content.trim().length) // getting the text that will be toggled
+ // Adding the read more and read less text with the ellipses to the original text.
+ var html = a + "" + ellipses + ""+ readMoreText +"" + b + " "+ readLessText +"";
+ $(target).html('
' + html+ '
');
+ }
+}
+function toggleRoomDescriptionExtras()
+{
+ $(document).find('.htlRoomTypeDescText').each(function() {
+ // checking if the display:overFlow has been applied to the description.
+ if ($(this).prop('scrollHeight') - $(this).prop('clientHeight') > 15) {
+ // Only show read more and read less text if the text is wrapped.
+ addExtraTextToDescription($(this)[0]);
+ }
+ });
+}
+// Getting the number of characters displayed to the user.
+function getChars(target) {
+ var style = window.getComputedStyle(target, null);
+ // Getting the size of the container displayed to the user, this will ignore the overflow: hidden text.
+ var line_height = parseInt(style.getPropertyValue("line-height"));
+ var font_size = parseInt(style.getPropertyValue("font-size"));
+ var height = parseInt(style.getPropertyValue("height"));
+ var width = parseInt(style.getPropertyValue("width"));
+
+ if(isNaN(line_height)) line_height = font_size * 1.2;
+ // Counting the number of the lines displayed to the user by the display:overFlow property, since this can vary depending the screen size.
+ var lines = Math.ceil(height / line_height) + 1;
+ // Counting the number of the characters in the lines
+ var displayedCharacters = $(target).text().split('').slice(0, lines * (width / parseInt(font_size))).join('').length;
+
+ return displayedCharacters + 20;
+}
diff --git a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
index d65fb9763..2ad22920a 100644
--- a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
+++ b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
@@ -45,22 +45,27 @@
{$discount.name|escape:'html':'UTF-8'}
From dc3fee3ece0c716778db27cc905d45dc563eb4d2 Mon Sep 17 00:00:00 2001
From: "vishalsingh.qlo325"
Date: Thu, 25 Jul 2024 15:43:56 +0530
Subject: [PATCH 05/30] removed the tinymce from the room type short
description, and updated the read more and read less toggle buttons
---
.../controllers/products/informations.tpl | 3 +-
classes/Product.php | 2 +-
.../views/css/WkHotelRoomBlockFront.css | 5 +-
.../views/js/WkHotelRoomBlockFront.js | 46 ++++++-------------
.../templates/hook/hotelRoomDisplayBlock.tpl | 7 +--
modules/wkhotelroom/wkhotelroom.php | 2 +-
6 files changed, 19 insertions(+), 46 deletions(-)
diff --git a/admin/themes/default/template/controllers/products/informations.tpl b/admin/themes/default/template/controllers/products/informations.tpl
index 68a6d2d18..201cbc41d 100644
--- a/admin/themes/default/template/controllers/products/informations.tpl
+++ b/admin/themes/default/template/controllers/products/informations.tpl
@@ -356,9 +356,8 @@
file="controllers/products/textarea_lang.tpl"
languages=$languages
input_name='description_short'
- class="autoload_rte"
input_value=$product->description_short
- max=$PS_PRODUCT_SHORT_DESC_LIMIT}
+ maxlength=$PS_PRODUCT_SHORT_DESC_LIMIT}
diff --git a/classes/Product.php b/classes/Product.php
index c47bb1f04..9569df37a 100644
--- a/classes/Product.php
+++ b/classes/Product.php
@@ -357,7 +357,7 @@ class ProductCore extends ObjectModel
),
'name' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isCatalogName', 'required' => true, 'size' => 128),
'description' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'),
- 'description_short' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'),
+ 'description_short' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isCleanHtml'),
'available_now' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'size' => 255),
'available_later' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'IsGenericName', 'size' => 255),
),
diff --git a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css
index 4319dbb72..4e8590cfa 100644
--- a/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css
+++ b/modules/wkhotelroom/views/css/WkHotelRoomBlockFront.css
@@ -25,9 +25,6 @@
cursor: pointer;
font-weight: 400;
}
-.htlRoomTypeDescTextContainer p{
- margin: 0px;
-}
@media (min-width: 530px) {
.hotelRoomDescContainer{
position: absolute;
@@ -72,7 +69,7 @@
color: #555555;
font-weight: 300;
line-height: 21px;
- margin-bottom: 9px;
+ margin-bottom: 10px;
}
a.htlRoomTypeBookNow {
font-size: 15px;
diff --git a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
index 4aba4b360..afd2304b4 100644
--- a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
+++ b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
@@ -18,10 +18,12 @@
*/
$(document).ready(function() {
- toggleRoomDescriptionExtras();
- $(window).on('resize', function() {
- removePreviousChanges();
- toggleRoomDescriptionExtras();
+ $(document).find('.htlRoomTypeDescText').each(function() {
+ // checking if the display:overFlow has been applied to the description.
+ if ($(this).prop('scrollHeight') - $(this).prop('clientHeight') > 15) {
+ // Only show read more and read less text if the text is wrapped.
+ initToogleOtions($(this)[0]);
+ }
});
$(document).on('click', '.read-extra-text', function(e) {
@@ -36,44 +38,22 @@ $(document).ready(function() {
});
});
-// Function is called to revert the changes made to the description on the window size change.
-function removePreviousChanges()
-{
- $(document).find('.htlRoomTypeDescText').each(function() {
- //Reverting the changes so we can reapply them according the new screen size.
- $(this).html($(this).parent().find('.htlRoomTypeDescTextOriginal').html());
- if (!$(this).hasClass('htlRoomTypeDescTextContainer')){
- $(this).addClass('htlRoomTypeDescTextContainer');
- }
- });
-}
-function addExtraTextToDescription(target)
+function initToogleOtions(target)
{
// Getting the number of displayed characters
var show_char = getChars(target);
var ellipses = "... ";
var content = $(target).html();
if (content.trim().length > show_char) {
- var a = content.trim().substr(0, show_char).replace('
' , ''); // getting the text that we want to show to the user, removed the first
tag.
- if (content.trim().substr(content.trim().length - 4, content.trim().length) == '
') {
- content = content.trim().substr(0, content.trim().length - 4);// removed the last closing tag.
- }
- var b = content.trim().substr(show_char - content.trim().length) // getting the text that will be toggled
+ // Dividing the text into two parts so that we are able to diffrentiate the displayed text from hidden text.
+ var a = content.trim().substr(0, show_char);
+ var b = content.trim().substr(show_char - content.trim().length);
// Adding the read more and read less text with the ellipses to the original text.
var html = a + "" + ellipses + ""+ readMoreText +"" + b + " "+ readLessText +"";
- $(target).html('
' + html+ '
');
+ $(target).html(html);
}
}
-function toggleRoomDescriptionExtras()
-{
- $(document).find('.htlRoomTypeDescText').each(function() {
- // checking if the display:overFlow has been applied to the description.
- if ($(this).prop('scrollHeight') - $(this).prop('clientHeight') > 15) {
- // Only show read more and read less text if the text is wrapped.
- addExtraTextToDescription($(this)[0]);
- }
- });
-}
+
// Getting the number of characters displayed to the user.
function getChars(target) {
var style = window.getComputedStyle(target, null);
@@ -90,4 +70,4 @@ function getChars(target) {
var displayedCharacters = $(target).text().split('').slice(0, lines * (width / parseInt(font_size))).join('').length;
return displayedCharacters + 20;
-}
+}
\ No newline at end of file
diff --git a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
index 2ad22920a..38cdd5f63 100644
--- a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
+++ b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
@@ -59,13 +59,10 @@
{/if}
diff --git a/modules/wkhotelroom/wkhotelroom.php b/modules/wkhotelroom/wkhotelroom.php
index 2fc1d0ab8..0ae240929 100644
--- a/modules/wkhotelroom/wkhotelroom.php
+++ b/modules/wkhotelroom/wkhotelroom.php
@@ -104,8 +104,8 @@ class WkHotelRoom extends Module
)
);
- $this->context->controller->addCSS($this->_path.'/views/css/WkHotelRoomBlockFront.css');
$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');
}
From d71c631522413f05faa8ad25abfa08988d2874c3 Mon Sep 17 00:00:00 2001
From: "vishalsingh.qlo325"
Date: Mon, 29 Jul 2024 17:51:58 +0530
Subject: [PATCH 06/30] Added function to handle the window resize and
optimized the getChars function to count the displayed characters
---
.../views/js/WkHotelRoomBlockFront.js | 45 ++++++++++++++-----
.../templates/hook/hotelRoomDisplayBlock.tpl | 3 ++
2 files changed, 38 insertions(+), 10 deletions(-)
diff --git a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
index afd2304b4..1eebe5a76 100644
--- a/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
+++ b/modules/wkhotelroom/views/js/WkHotelRoomBlockFront.js
@@ -18,12 +18,10 @@
*/
$(document).ready(function() {
- $(document).find('.htlRoomTypeDescText').each(function() {
- // checking if the display:overFlow has been applied to the description.
- if ($(this).prop('scrollHeight') - $(this).prop('clientHeight') > 15) {
- // Only show read more and read less text if the text is wrapped.
- initToogleOtions($(this)[0]);
- }
+ applyChangesToDescription();
+ $(window).on('resize', function() {
+ cleanDescriptions();
+ applyChangesToDescription();
});
$(document).on('click', '.read-extra-text', function(e) {
@@ -37,15 +35,30 @@ $(document).ready(function() {
}
});
});
+function cleanDescriptions() {
+ $(document).find('.htlRoomTypeDescText').each(function() {
+ $(this).addClass('htlRoomTypeDescTextContainer');
+ $(this).html($(this).parent().find('.htlRoomTypeDescOriginal').html());
+ });
+}
-function initToogleOtions(target)
-{
+function applyChangesToDescription() {
+ $(document).find('.htlRoomTypeDescText').each(function() {
+ // checking if the display:overFlow has been applied to the description.
+ if ($(this).prop('scrollHeight') - $(this).prop('clientHeight') > 15) {
+ // Only show read more and read less text if the text is wrapped.
+ initToggleOptions($(this)[0]);
+ }
+ });
+}
+
+function initToggleOptions(target) {
// Getting the number of displayed characters
var show_char = getChars(target);
var ellipses = "... ";
var content = $(target).html();
if (content.trim().length > show_char) {
- // Dividing the text into two parts so that we are able to diffrentiate the displayed text from hidden text.
+ // Dividing the text into two parts so that we are able to differentiate the displayed text from hidden text.
var a = content.trim().substr(0, show_char);
var b = content.trim().substr(show_char - content.trim().length);
// Adding the read more and read less text with the ellipses to the original text.
@@ -69,5 +82,17 @@ function getChars(target) {
// Counting the number of the characters in the lines
var displayedCharacters = $(target).text().split('').slice(0, lines * (width / parseInt(font_size))).join('').length;
- return displayedCharacters + 20;
+ if ($(document).width() > 991) {
+ displayedCharacters += 30;
+ } else if ($(document).width() > 768) {
+ displayedCharacters += 34;
+ } else if ($(document).width() > 570) {
+ displayedCharacters += 25;
+ } else if ($(document).width() > 444) {
+ displayedCharacters += 20;
+ } else {
+ displayedCharacters += 15;
+ }
+
+ return displayedCharacters;
}
\ No newline at end of file
diff --git a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
index 38cdd5f63..0daebcc80 100644
--- a/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
+++ b/modules/wkhotelroom/views/templates/hook/hotelRoomDisplayBlock.tpl
@@ -61,6 +61,9 @@