Skip to content

Commit b60bcd5

Browse files
committed
[update] config, info and cardTemplates updated
1 parent fa2b610 commit b60bcd5

3 files changed

Lines changed: 6 additions & 5 deletions

File tree

docs/api/config/booking-cardtemplate.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ 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.
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 and import the **template** helper. Then pass the function into the Booking configuration by assigning the function to the `cardTemplate` property.
3232

3333
~~~html {}
3434
<style>

docs/api/config/booking-infotemplate.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ infoTemplate?: ({item: obj, slot: number}) => string;
2323

2424
### Example
2525

26-
In the example below, we define the `cardInfoTemplate` 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`.
26+
In the example below, we define the `cardInfoTemplate` 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. You should also import the **template** helper and assign your custom function to `infoTemplate`.
2727

2828
~~~html
2929
<style>

docs/guides/configuration.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,16 +118,16 @@ First, create a function that takes a card object and returns a string of HTML.
118118
</script>
119119
~~~
120120

121-
Then you also need to import the template helper and assign the`cardTemplate` property to your custom template function.
121+
Then you also need to import the **template** helper and assign the`cardTemplate` property to your custom template function.
122122

123123
~~~jsx
124124
const { Booking, template } = booking;
125125

126126
const widget = new Booking("#root", {
127127
data,
128128
cardTemplate: template(card => cardPreviewTemplate(card)),
129+
// other parameters
129130
});
130-
// other parameters
131131
~~~
132132

133133
TBD!!!
@@ -486,14 +486,15 @@ To apply a template, you need to define the function that will generate the cust
486486
</script>
487487
~~~
488488

489-
Then you also need to import the template helper and pass the `infoTemplate` function into the Booking configuration as follows:
489+
Then you also need to import the **template** helper and pass the `infoTemplate` function into the Booking configuration as follows:
490490

491491
~~~jsx
492492
const { Booking, template } = booking;
493493

494494
const widget = new Booking("#root", {
495495
data,
496496
infoTemplate: template(item => cardInfoTemplate(item)),
497+
// other parameters
497498
});
498499
~~~
499500

0 commit comments

Comments
 (0)