Skip to content

Commit 8bb3b8c

Browse files
tbshag2tbshag2
committed
[update] rendertype, configuration, infotemplate,cardtemplate updated
1 parent 2cc45c8 commit 8bb3b8c

4 files changed

Lines changed: 183 additions & 192 deletions

File tree

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

Lines changed: 40 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -28,67 +28,53 @@ cardTemplate?: (item: obj) => string;
2828

2929
### Example
3030

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" /> -->
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+
~~~html {}
34+
<style>
35+
.custom-preview {
36+
display: flex;
37+
width: 100%;
38+
height: 100%;
39+
gap: 30px;
40+
}
41+
42+
.preview-left {
43+
width: auto;
44+
display: flex;
45+
flex-direction: column;
46+
gap: 4px;
47+
}
48+
// other styles
49+
</style>
50+
51+
<script>
52+
function cardPreviewTemplate({ card }) {
53+
return `
54+
<div class="custom-preview" data-action="preview-click">
55+
<div class="preview-left">
56+
<div
57+
style="background-image: url(${card.preview})"
58+
class="card-photo"
59+
></div>
60+
<!-- <div class="card-photo-empty" /> -->
61+
</div>
62+
63+
<div class="preview-right">
64+
<div class="category">${card.category}</div>
65+
<div class="title">${card.title}</div>
66+
<div class="price">${card.price}</div>
4367
</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-
}
68+
</div>
69+
`;
70+
}
5371
5472
const widget = new Booking("#root", {
5573
data,
5674
cardTemplate: template(card => cardPreviewTemplate(card)),
5775
});
5876
// 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
77+
</script>
9278
~~~
9379
9480
TBD!!!

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

Lines changed: 47 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -23,37 +23,53 @@ infoTemplate?: (item: obj, slot: obj) => string;
2323

2424
### Example
2525

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-
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 `item` (card object) and `slot` (slot timestamp) as input parameters. The function returns div containers representing the information block for a selected booking item, including an image, category, title, and formatted date. We also assign our custom function to `infoTemplate`.
27+
28+
~~~html
29+
<style>
30+
/* custom info */
31+
.custom-info {
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
width: 100%;
36+
height: 100%;
37+
}
38+
39+
.info-wrapper {
40+
display: flex;
41+
flex-direction: column;
42+
align-items: center;
43+
gap: 20px;
44+
padding: 34px;
45+
background: rgba(128, 128, 155, 0.12);
46+
border-radius: 8px;
47+
}
48+
// other styles
49+
</style>
50+
51+
<script>
52+
function cardInfoTemplate({
53+
item,
54+
slot,
55+
}) {
56+
return `
57+
<div class="custom-info">
58+
<div class="info-wrapper">
59+
<div class="photo-wrapper">
60+
${getPhotoElement(item.preview, "info")}
61+
</div>
62+
<span class="info-title">${item.title}</span>
63+
<span class="info-category">${item.category}</span>
64+
<div class="date" data-action="reset-slot">
65+
<i class="icon wxi-calendar"></i>
66+
<span>${formatDate(slot, { dateFormat, timeFormat })}</span>
67+
</div>
68+
</div>
69+
</div>
70+
`;
71+
}
72+
</script>
5773
~~~
5874
5975
The snippet below shows how to apply a template to the information block of the Booking dialog: !!!tbd

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

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

99
### Description
1010

11-
@short: Optional. Defines a type of rendering cards
11+
@short: Optional. Defines how types are rendered
1212

1313
The property helps optimize performance when working with a large number of cards.
1414

@@ -20,8 +20,8 @@ renderType?: "default" | "lazy";
2020

2121
### Parameters
2222

23-
- `default` - renders all cards that should be displayed (set by default)
24-
- `lazy` - renders only the visual part of cards
23+
- `default` - renders all cards loaded to the widget (set by default)
24+
- `lazy` - renders only visible cards
2525

2626
### Example
2727

0 commit comments

Comments
 (0)