maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Improve the way the service description renders in the booking page

Browse source
This commit is contained in:
Alex Tselegidis 2024-01-06 11:32:42 +01:00
parent fa6f685e13
commit acafb0da48
2 changed files with 33 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
application/views/components/booking_type_step.php
View file

@ -83,7 +83,9 @@
<select id="select-provider" class="form-control"></select>
</div>
<div id="service-description"></div>
<div id="service-description" class="small">
<!-- JS -->
</div>
</div>
</div>
</div>

54
assets/js/pages/booking.js
View file

@ -833,6 +833,8 @@ App.Pages.Booking = (function () {
}
/**
* Update the service description and information.
*
* This method updates the HTML content with a brief description of the
* user selected service (only if available in db). This is useful for the
* customers upon selecting the correct service.
@ -849,41 +851,45 @@ App.Pages.Booking = (function () {
);
if (!service) {
return;
return; // Service not found
}
$('<strong/>', {
'text': App.Utils.String.escapeHtml(service.name),
}).appendTo($serviceDescription);
// Render the additional service information
if (service.description) {
$('<br/>').appendTo($serviceDescription);
$('<span/>', {
'html': App.Utils.String.escapeHtml(service.description).replaceAll('\n', '<br/>'),
}).appendTo($serviceDescription);
}
if (service.duration || Number(service.price) > 0 || service.location) {
$('<br/>').appendTo($serviceDescription);
}
const additionalInfoParts = [];
if (service.duration) {
$('<span/>', {
'text': '[' + lang('duration') + ' ' + service.duration + ' ' + lang('minutes') + ']',
}).appendTo($serviceDescription);
additionalInfoParts.push(`${lang('duration')}: ${service.duration} ${lang('minutes')}`);
}
if (Number(service.price) > 0) {
$('<span/>', {
'text': '[' + lang('price') + ' ' + service.price + ' ' + service.currency + ']',
}).appendTo($serviceDescription);
additionalInfoParts.push(`${lang('price')}: ${service.price} ${service.currency}`);
}
if (service.location) {
$('<span/>', {
'text': '[' + lang('location') + ' ' + service.location + ']',
}).appendTo($serviceDescription);
additionalInfoParts.push(`${lang('location')}: ${service.location}`);
}
if (additionalInfoParts.length) {
$(`
<div class="mb-2 fst-italic">
${additionalInfoParts.join(', ')}
</div>
`).appendTo($serviceDescription);
}
// Render the service description
if (service.description.length) {
const escapedDescription = App.Utils.String.escapeHtml(service.description);
const multiLineDescription = escapedDescription.replaceAll('\n', '<br/>');
$(`
<div class="text-muted">
${multiLineDescription}
</div>
`).appendTo($serviceDescription);
}
}