You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You can include some HTML parts in different sections of the layout application.
6
-
These templates can be translated by using the language code as a suffix (e.g. `homeTop-en.html` will be rendered only for the English interface). The application tries to find the localized template first, otherwise it tries the non-localized template, otherwise it displays nothing.
5
+
You can include some HTML parts in different sections of the layout application.
6
+
These templates can be translated by using the language code as a suffix (e.g. `homeTop-en.html` will be rendered only for the English interface). The application tries to find the localized template first, otherwise it tries the non-localized template, otherwise it displays nothing.
7
7
8
8
!!! note
9
9
@@ -27,11 +27,11 @@ See examples in [customization file](https://github.com/GeotrekCE/Geotrek-rando-
27
27
28
28
You can create your own templates to display practical information or widgets in different parts of the details page. There are 3 steps to follow:
29
29
30
-
1. Create a new file suffixed with `.html` in `customization/html/details/` (e.g. `example.html`) and fill the the content with html tags
30
+
**Step 1:** Create a new file suffixed with `.html` in `customization/html/details/` (e.g. `example.html`) and fill the the content with html tags
31
31
32
-
```html
33
-
<div>The id of this {{ type }} is {{ id }}</div>
34
-
```
32
+
```html
33
+
<div>The id of this {{ type }} is {{ id }}</div>
34
+
```
35
35
36
36
You can define variables in "mustache templates" (meaning between brackets `{{ variable }}`) that will be converted once rendered. For the moment, there are 4 variables available:
37
37
@@ -40,47 +40,68 @@ You can define variables in "mustache templates" (meaning between brackets `{{ v
40
40
- The code of the (departure) city `{{ cityCode }}`: useful for widgets such as forecast.
41
41
- The language code `{{ language }}` The current language of the page.
42
42
43
-
When choosing a template name, care must be taken not to select a reserved name used by sections defined by the application (e.g `presentation`, see [example](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/details.json)).
44
-
If you do, the customized template will not be displayed.
45
-
46
-
2. Copy the template name without the `.html` suffix into the `customization/html/details.json` file.
47
-
For example I want to display it in treks and outdoor sites details page:
48
-
49
-
```json
50
-
{
51
-
"sections": {
52
-
"trek": [
53
-
{
54
-
"name": "example",
55
-
"display": true,
56
-
"anchor": true,
57
-
"order": 11
58
-
}
59
-
],
60
-
"outdoorSite": [
61
-
{
62
-
"name": "example",
63
-
"display": true,
64
-
"anchor": true,
65
-
"order": 11
66
-
}
67
-
]
68
-
}
69
-
}
70
-
```
71
-
72
-
3. Copy the section title/anchor into the translations files.
73
-
For example in `customization/translations/en.json`:
74
-
```json
75
-
{
76
-
"details": {
77
-
"example": "My example"
78
-
}
79
-
}
80
-
```
81
-
82
-
You can take a look at `customization/html/details/forecastWidget.html` which shows the implementation.
83
-
By default the "forecast widget" is enabled for all content types; if you want to remove it, you need to write it explicitly in the `customization/html/details.json` file.
43
+
When choosing a template name, care must be taken not to select a reserved name used by sections defined by the application (e.g `presentation`, see [example](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/details.json)).
44
+
If you do, the customized template will not be displayed.
45
+
46
+
**Step 2:** Copy the template name without the `.html` suffix into the `customization/html/details.json` file.
47
+
For example I want to display it in treks and outdoor sites details page:
48
+
49
+
```json
50
+
{
51
+
"sections": {
52
+
"trek": [
53
+
{
54
+
"name": "example",
55
+
"display": true,
56
+
"anchor": true,
57
+
"order": 11
58
+
}
59
+
],
60
+
"outdoorSite": [
61
+
{
62
+
"name": "example",
63
+
"display": true,
64
+
"anchor": true,
65
+
"order": 11
66
+
}
67
+
]
68
+
}
69
+
}
70
+
```
71
+
72
+
**Step 3:**. Copy the section title/anchor into the translations files.
73
+
For example in `customization/translations/en.json`:
74
+
75
+
```json
76
+
{
77
+
"details": {
78
+
"example": "My example"
79
+
}
80
+
}
81
+
```
82
+
83
+
#### Widgets examples
84
+
85
+
You can embed third-party widgets into Geotrek-rando detail pages by adding their HTML code in the appropriate **`customization.html/details/`** subfolder.
86
+
87
+
The widget can exploit data from the geotrek page to customize the displayed information (departure city, trek geometry, trek name, etc.).
88
+
89
+
Here is some examples but there is a lot more that can be done, your imagination is your limit !
90
+
91
+
##### **Weather Forecast (Météo-France)**
92
+
93
+
!!! tip "This widget exists by default in Geotrek-rando"
By default the **forecast widget** is enabled for all content types; if you want to remove it, you need to write it explicitly in the `customization/html/details.json` file.
84
105
85
106
```json
86
107
{
@@ -119,14 +140,41 @@ By default the "forecast widget" is enabled for all content types; if you want t
119
140
}
120
141
```
121
142
143
+
##### **Air Quality (Atmo)**
144
+
145
+
146
+
147
+
**Configuration**[Check this comment](https://github.com/GeotrekCE/Geotrek-rando-v3/issues/914#issuecomment-1779758757)
148
+
149
+
##### **Sustainable transport route planner**
150
+
151
+
Multiple widgets can be added to help citizens plan their trip using sustainable transports. Here is some examples but we advise you to look for local solutions, there is a good chance your country / state / city may have an existing widget that you can integrate on your website.
To retrieve data from another website, the well-known feeds are RSS or Atom, but the best format for communicating remains JSON, so we decided to develop a script that uses them all: [JSON Feed](https://www.jsonfeed.org/).
168
-
216
+
169
217
So, if you wish to copy/paste the following codes into your customization but with your own feed, it must be formatted in JSON Feed or you must edit the following script to adapt it.
170
218
171
219
**Template**
172
-
220
+
173
221
<ins>Common<ins>
174
-
222
+
175
223
Let's try the following code and copy it into a template file like `customization/html/homeTop.html`:
- `data-widget="feed"` (mandatory): all HTML tags with this data attribute and the value “feed” will be parsed by the corresponding script.
186
234
- `data-url` (mandatory): this is the feed source. If left blank, nothing happens.
187
235
- `data-limit` (optional - default `Infinity`): is the number of elements to be displayed.
188
-
- `data-title` (optional): allows to add a title to the section
236
+
- `data-title` (optional): allows to add a title to the section
189
237
190
238
191
239
<ins>Internationalization<ins>
@@ -199,7 +247,7 @@ If you need to execute the script on every page change you need to attach an eve
199
247
data-widget="feed"
200
248
data-url="https://www.ecrins-parcnational.fr/{{ language }}/flux_actus.json"
201
249
></div>
202
-
```
250
+
```
203
251
204
252
<ins>Widget in details page<ins>
205
253
@@ -213,7 +261,7 @@ If you need to execute the script on every page change you need to attach an eve
213
261
></div>
214
262
215
263
```
216
-
Don't forget to call the `feedWidget` in the desired details page in `customization/config/details.json`.
264
+
Don't forget to call the `feedWidget` in the desired details page in `customization/config/details.json`.
217
265
```json
218
266
{
219
267
"sections": {
@@ -363,5 +411,3 @@ If you need to execute the script on every page change you need to attach an eve
363
411
- If there is no `data-url` defined, or if there is an error when retrieving the data, or if the data returns 0 elements, the script stops execution and nothing is displayed.
364
412
- The source URL must provide a JSON feed format, otherwise it will try to loop inside as if the response were the contents of the `items` key of the JSON feed. **No other checks are made**, so if your JSON is not properly formatted, errors may occur.
365
413
- For the card content, it tries to get the value of `summary`, if this key has no value, it tries the value of `content_text`. And if this key also has no value, it finally tries with `content_html`. Be careful with the last property: you have to trust the source because it executes a `innerHTML`.
0 commit comments