Skip to content

Commit 6f74381

Browse files
tbshag2tbshag2
committed
[update] cardtemplate, infortemplate added, cardshape,infoshape,configuration updated
1 parent 8bf303d commit 6f74381

7 files changed

Lines changed: 343 additions & 17 deletions

File tree

‎docs/api/config/booking-cardshape.md‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ description: You can learn about the cardShape config in the documentation of th
88

99
### Description
1010

11-
@short: Optional. An object with settings for managing information displayed on the left side of cards
11+
@short: Optional. An object with settings for managing information displayed on the left side of each card
1212

1313
### Usage
1414

@@ -26,7 +26,7 @@ cardShape?: {
2626

2727
### Parameters
2828

29-
To configure the card appearance, in the **cardShape** object you can specify the following parameters (fields):
29+
In the **cardShape** object you can specify the following parameters (fields):
3030

3131
- `category` - (optional) shows/hides a card's name
3232
- `details` - (optional) shows/hides details
@@ -65,6 +65,15 @@ new booking.Booking("#root", {
6565
});
6666
~~~
6767

68-
The snippet below demonstrates how to configure what to display on the left side of cards:
68+
The snippet below demonstrates how to configure what fields to display on the left side of cards:
6969

7070
<iframe src="https://snippet.dhtmlx.com/6mxd7918?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
71+
72+
:::info
73+
You can also configure the appearance of a card using the [`cardTemplate`](/api/config/booking-cardTemplate) property. If both `cardTemplate` and `cardShape` are applied, `cardTemplate` will override the `cardShape` settings.
74+
:::
75+
76+
**Related articles:**
77+
78+
- [Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
79+
- [`cardTemplate`](/api/config/booking-cardtemplate)

‎docs/api/config/booking-cardtemplate.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
sidebar_label: cardTemplate
3+
title: cardTemplate
4+
description: You can learn about the cardTemplate config in the documentation of the DHTMLX JavaScript Booking library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Booking.
5+
---
6+
7+
# cardTemplate
8+
9+
### Description
10+
11+
@short: Optional. Allows applying a template to a card's left block
12+
13+
The property specifies the HTML structure and layout of each card's block (the left side of each card). It means you can manage which fields are displayed, how they are arranged, and how they look.
14+
15+
:::info
16+
You can also specify which fields to display using the [`cardShape`](/api/config/booking-cardshape) property
17+
:::
18+
19+
### Usage
20+
21+
~~~jsx {}
22+
cardTemplate?: (item: obj) => string;
23+
~~~
24+
25+
### Parameters
26+
27+
`cardTemplate` expects a function that takes a `card` object as input and returns a string of HTML that defines how the card should look.
28+
29+
### Example
30+
31+
In the example below we create a function that takes the card object and returns HTML for a card (that includes a preview image (card.preview), category (card.category), title (card.title), and price (card.price)). You need to create your own HTML template to be applied to a card. Pass the function into the Booking configuration by assigning the function to the `cardTemplate` property.
32+
33+
~~~jsx {}
34+
function cardPreviewTemplate({ card }) {
35+
return `
36+
<div class="custom-preview" data-action="preview-click">
37+
<div class="preview-left">
38+
<div
39+
style="background-image: url(${card.preview})"
40+
class="card-photo"
41+
></div>
42+
<!-- <div class="card-photo-empty" /> -->
43+
</div>
44+
45+
<div class="preview-right">
46+
<div class="category">${card.category}</div>
47+
<div class="title">${card.title}</div>
48+
<div class="price">${card.price}</div>
49+
</div>
50+
</div>
51+
`;
52+
}
53+
54+
const widget = new Booking("#root", {
55+
data,
56+
cardTemplate: template(card => cardPreviewTemplate(card)),
57+
});
58+
// other parameters
59+
~~~
60+
61+
If you want to modify default styles, add styles to your CSS:
62+
63+
~~~css
64+
.custom-preview {
65+
display: flex;
66+
width: 100%;
67+
height: 100%;
68+
gap: 30px;
69+
}
70+
71+
.preview-left {
72+
width: auto;
73+
display: flex;
74+
flex-direction: column;
75+
gap: 4px;
76+
}
77+
78+
.preview-right {
79+
flex-grow: 1;
80+
align-self: center;
81+
overflow: hidden;
82+
font-family: 'Maven Pro', sans-serif;
83+
line-height: var(--wx-line-height-md);
84+
position: relative;
85+
background-color: rgb(233, 235, 236);
86+
color: rgb(75, 74, 74);
87+
padding: 20px;
88+
border-radius: 10px;
89+
transition: all 1s;
90+
}
91+
//other styles
92+
~~~
93+
94+
TBD!!!
95+
The snippet below demonstrates how to apply a template to a card:
96+
97+
<iframe src="https://snippet.dhtmlx.com" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
98+
99+
**Related articles:**
100+
101+
- [Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
102+
- [`cardShape`](/api/config/booking-cardshape)
103+

‎docs/api/config/booking-infoshape.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,12 @@ new booking.Booking("#root", {
6262
The snippet below shows how to configure what to display on the left side of the Booking dialog:
6363

6464
<iframe src="https://snippet.dhtmlx.com/pd6wp1xc?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
65+
66+
:::info
67+
You can also control which fields to display in the information block of the Booking dialog using the [`infoTemplate`](/api/config/booking-infotemplate) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
68+
:::
69+
70+
**Related articles:**
71+
72+
- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
73+
- [`infoTemplate`](/api/config/booking-infotemplate)

‎docs/api/config/booking-infotemplate.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
sidebar_label: infoTemplate
3+
title: infoTemplate
4+
description: You can learn about the infoTemplate config in the documentation of the DHTMLX JavaScript Booking library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Booking.
5+
---
6+
7+
# infoTemplate
8+
9+
### Description
10+
11+
@short: Optional. Allows applying a template to the information block in the Booking dialog
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
infoTemplate?: (item: obj, slot: obj) => string;
17+
~~~
18+
19+
### Parameters
20+
21+
`infoTemplate` takes the `card` item object and selected `slot` object as input and returns a string of HTML.
22+
23+
24+
### Example
25+
26+
In the example below, we define the `customInfoTemplate` function that will generate the custom HTML for the information block. This function will receive the `selectedItem` (card) and the `formattedDate` (slot) as input parameters. The function returns div containers representing the information block for a selected booking item, including an image, price, category, title, and formatted date. We also assign our custom function to `infoTemplate`.
27+
28+
~~~jsx {}
29+
function customInfoTemplate({ selectedItem, formattedDate, _ }) {
30+
return `
31+
<div class="custom-info">
32+
${
33+
selectedItem.preview
34+
? `<div style="background-image: url(${selectedItem.preview})" class="photo"></div>`
35+
: `<div class="photo-empty"></div>`
36+
}
37+
38+
<div class="price">
39+
<i class="icon wxi-cash"></i>
40+
<span>${selectedItem.price}</span>
41+
</div>
42+
<span class="category">${_(selectedItem.category)}</span>
43+
<span class="title">${selectedItem.title}</span>
44+
<div class="date" data-action="reset-slot">
45+
<i class="icon wxi-calendar"></i>
46+
<span>${formattedDate}</span>
47+
</div>
48+
</div>
49+
`;
50+
}
51+
const widget = new Booking("#root", {
52+
data,
53+
infoTemplate: template(selectedItem => customInfoTemplate(selectedItem)),
54+
// other settings
55+
});
56+
57+
~~~
58+
59+
The snippet below shows how to apply a template to the information block of the Booking dialog: !!!tbd
60+
61+
<iframe src="https://snippet.dhtmlx.com" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
62+
63+
:::info
64+
You can also control which fields to display in the information block of the Booking dialog using the [`infoShape`](/api/config/booking-infoshape) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
65+
:::
66+
67+
**Related articles:**
68+
69+
- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
70+
- [`infoShape`](/api/config/booking-infoshape)

‎docs/guides/configuration.md‎

Lines changed: 146 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,13 @@ To load data, add data to the [`data`](/api/config/booking-data) array. See all
1212

1313
## Defining the structure of cards
1414

15-
You can configure what information all cards will display on their left side using the [`cardShape`](/api/config/booking-cardshape) property.
15+
You can configure what information all cards will display on their left side using the [`cardShape`](/api/config/booking-cardshape) property or the [`cardTemplate`](/api/config/booking-cardtemplate) property, which also allows customizing the appearance of each card's block.
1616

17-
On the left side of a card the following data fields are displayed by default:
17+
:::info
18+
Both properties allow you to control which fields to display in a card's left-hand block. But `cardTemplate` also helps tailor the appearance of each card and control how the fields are arranged. If both are applied, `cardTemplate` will override the `cardShape` settings.
19+
:::
20+
21+
On the left side of each card the following data fields are displayed by default:
1822
- preview: card image
1923
- review: rating information with the number of rating stars (out of five) and the number of reviews
2024
- category: the subtitle of a card
@@ -65,6 +69,66 @@ new booking.Booking("#root", {
6569
Please, see an example in the [snippet tool](https://snippet.dhtmlx.com/6mxd7918)
6670
:::
6771

72+
To apply a template to each card (the left-hand block), use the [`cardTemplate`](/api/config/booking-cardtemplate) property.
73+
74+
First, create a function that takes a card object and returns a string of HTML. In the example, `cardPreviewTemplate` returns HTML for a card that includes a preview image (card.preview), category (card.category), title (card.title), and price (card.price). To add new fields to a card, modify the template string. In the example below, we add `<div class="">` blocks inside the `cardPreviewTemplate` function.
75+
76+
~~~jsx {}
77+
function cardPreviewTemplate({ card }) {
78+
return `
79+
<div class="custom-preview" data-action="preview-click">
80+
<div class="preview-left">
81+
<div
82+
style="background-image: url(${card.preview})"
83+
class="card-photo"
84+
></div>
85+
<!-- <div class="card-photo-empty" /> -->
86+
</div>
87+
88+
<div class="preview-right">
89+
<div class="category">${card.category}</div>
90+
<div class="title">${card.title}</div>
91+
<div class="price">${card.price}</div>
92+
</div>
93+
</div>
94+
`;
95+
}
96+
~~~
97+
98+
Then you need to assign the`cardTemplate` property to your custom template function.
99+
100+
~~~jsx
101+
const widget = new Booking("#root", {
102+
data,
103+
cardTemplate: template(card => cardPreviewTemplate(card)),
104+
});
105+
// other parameters
106+
~~~
107+
108+
If you want add some look and feel to your card, you should add styles to your CSS:
109+
110+
~~~css
111+
.custom-preview {
112+
display: flex;
113+
width: 100%;
114+
height: 100%;
115+
gap: 30px;
116+
}
117+
118+
.preview-left {
119+
width: auto;
120+
display: flex;
121+
flex-direction: column;
122+
gap: 4px;
123+
}
124+
// other styles
125+
~~~
126+
127+
TBD!!!
128+
:::info
129+
Please, see an example in the [snippet tool](https://snippet.dhtmlx.com)
130+
:::
131+
68132
## Filling cards with slots
69133

70134
A slot is a time unit available for booking. Available slots for cards are displayed for the next five days starting from the current day or from the start date from the filter.
@@ -364,6 +428,86 @@ new booking.Booking("#root", {
364428
Please, see an example in the [snippet tool](https://snippet.dhtmlx.com/pd6wp1xc)
365429
:::
366430

431+
You can also apply a template using the [`infoTemplate`](/config/booking-infotemplate) property that allows managing the fields in the information block of the Booking dialog. Both [`infoTemplate`](/config/booking-infotemplate) and [`infoShape`](/api/config/booking-infoshape) properties allow you to define which fields to display. But `infoTemplate` also helps tailor the appearance of the information block. If both are applied, `infoTemplate` will override the `infoShape` settings.
432+
433+
To apply a template, first, you need to define the function that will generate the custom HTML for the information block. This function will receive the card and slot objects as input parameters, which are `selectedItem` (card) and `formattedDate` (slot) in the example below. To add more fields, add `<div class="">` blocks inside the `customInfoTemplate` function:
434+
435+
~~~jsx
436+
function customInfoTemplate({ selectedItem, formattedDate, _ }) {
437+
return `
438+
<div class="custom-info">
439+
${
440+
selectedItem.preview
441+
? `<div style="background-image: url(${selectedItem.preview})" class="photo"></div>`
442+
: `<div class="photo-empty"></div>`
443+
}
444+
445+
<div class="price">
446+
<i class="icon wxi-cash"></i>
447+
<span>${selectedItem.price}</span>
448+
</div>
449+
<span class="category">${_(selectedItem.category)}</span>
450+
<span class="title">${selectedItem.title}</span>
451+
<div class="date" data-action="reset-slot">
452+
<i class="icon wxi-calendar"></i>
453+
<span>${formattedDate}</span>
454+
</div>
455+
</div>
456+
`;
457+
}
458+
~~~
459+
460+
Then pass the `infoTemplate` function into the Booking configuration as follows:
461+
462+
~~~jsx
463+
const widget = new Booking("#root", {
464+
data,
465+
infoTemplate: template(selectedItem => customInfoTemplate(selectedItem)),
466+
});
467+
~~~
468+
469+
Optionally, you can apply custom styles to the information block in your CSS:
470+
471+
~~~css
472+
.custom-info {
473+
display: flex;
474+
flex-direction: column;
475+
align-items: center;
476+
width: 100%;
477+
gap: 20px;
478+
}
479+
480+
.price {
481+
font-weight: bold;
482+
}
483+
484+
.photo {
485+
height: 200px;
486+
width: 200px;
487+
border-radius: 5px;
488+
background-size: cover;
489+
background-position: center;
490+
}
491+
492+
.photo-empty {
493+
width: 200px;
494+
height: 200px;
495+
background-color: #e0e0e0;
496+
text-align: center;
497+
line-height: 200px;
498+
}
499+
500+
.date {
501+
color: #3a8dff;
502+
cursor: pointer;
503+
}
504+
~~~
505+
506+
:::info
507+
Please, see an example in the [snippet tool](https://snippet.dhtmlx.com) !!!!TBD
508+
:::
509+
510+
367511
## Configuring the filter
368512

369513
You can configure filter settings via the [`filterShape`](/api/config/booking-filtershape) property. Default configuration is the following:

0 commit comments

Comments
 (0)