Bap Share Widget
Bap Vpf React Widget
Key Features
Frequently Asked Questions
Asset Publisher
Back to Previous Page Grow with Bosch
Niravkumar Thakar
Modified 2 Years ago.
An error occurred while processing the template.
The following has evaluated to null or missing:
==> item.descImg [in template "20097#20123#15271672" at line 47, column 86]
----
Tip: It's the step after the last dot that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #if item.descImg.getData()?has_content [in template "20097#20123#15271672" at line 47, column 81]
----
1<section aria-label="What we do" class="what-we-do">
2 <div class="accordion-grid-wrapper">
3 <div class="show-desktop">
4 <#if gridItemTitle.getSiblings()?has_content>
5 <#assign tabId=0 />
6 <#assign tabId1 = 0 />
7 <#list gridItemTitle.getSiblings()?chunk(4) as cur_gridItemTitle>
8 <div class="container">
9 <div class="row grid-row">
10 <#list cur_gridItemTitle as item>
11 <div class="col-md-3">
12 <div>
13 <a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse">
14 <h5 class="mb-0">
15 <button class="btn btn-link collapsed" type="button" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}">
16 <div>
17 <#if item.gridItemImage.getData()?has_content>
18 <div class="grid-section-image">
19 <img alt="${item.getData()}" src="${item.gridItemImage.getData()}">
20 </div>
21 </#if>
22 <div class="grid-section-heading">
23 <span class="plus-icon">
24 <i class="bap-icon bap-plus"> </i>
25 </span>
26 <span class="grid-section-heading-text">
27 ${item.getData()}
28 </span>
29 </div>
30 <div class="triangle-up"></div>
31 </div>
32 </button>
33 </h5>
34 </a>
35 </div>
36 </div>
37 <#assign tabId = tabId + 1/>
38 </#list>
39 </div>
40 </div>
41
42 <div class="desc-wrapper">
43 <#list cur_gridItemTitle as item>
44 <div class="col-12 order-md-last collapse fade show" id="heading_${tabId1}">
45 <div class="container">
46 <div class="row">
47 <#if item.descImg.getData()?has_content>
48 <div class="col-md-5">
49 <img alt="${item.getData()}" src="${item.descImg.getData()}">
50 </div>
51 <div class="col-md-7">
52 <h4>${item.getData()}</h4>
53 ${item.gridItemDescription.getData()}
54 </div>
55 <#elseif item.gridItemImage.getData()?has_content>
56 <div class="col-md-5">
57 <img alt="${item.getData()}" src="${item.gridItemImage.getData()}">
58 </div>
59 <div class="col-md-7">
60 <h4>${item.getData()}</h4>
61
62 ${item.gridItemDescription.getData()}
63 </div>
64 <#else>
65 <div class="col-md-12">
66 <h4>${item.getData()}</h4>
67
68 ${item.gridItemDescription.getData()}
69 </div>
70 </#if>
71 </div>
72 </div>
73 </div>
74 <#if cur_gridItemTitle?counter <= 4>
75 <#assign tabId1 = tabId1 +1 />
76 <#elseif cur_gridItemTitle?counter == 4>
77 <#assign tabId1 = tabId +4 />
78 <#elseif cur_gridItemTitle?counter gte 8>
79 <#assign tabId1 = tabId1 +8 />
80 </#if>
81 </#list>
82 </div>
83 </#list>
84 </#if>
85 </div>
86
87
88
89 <div class="show-desktop-medium">
90 <div>
91 <#if gridItemTitle.getSiblings()?has_content>
92 <#assign tabId=0 />
93 <#assign tabId1 = 0 />
94 <#list gridItemTitle.getSiblings()?chunk(3) as cur_gridItemTitle>
95 <div>
96 <div class="row grid-row">
97 <#list cur_gridItemTitle as item>
98 <div class="col-md-4">
99 <div>
100 <a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse">
101 <h5 class="mb-0">
102 <button class="btn btn-link collapsed" type="button" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}">
103 <div>
104 <#if item.gridItemImage.getData()?has_content>
105 <div class="grid-section-image">
106 <img alt="${item.getData()}" src="${item.gridItemImage.getData()}">
107 </div>
108 </#if>
109 <div class="grid-section-heading">
110 <span class="plus-icon">
111 <i class="bap-icon bap-plus"> </i>
112 </span>
113 <span class="grid-section-heading-text">
114 ${item.getData()}
115 </span>
116
117 </div>
118 <div class="triangle-up"></div>
119 </div>
120 </button>
121 </h5>
122 </a>
123 </div>
124 </div>
125 <#assign tabId = tabId + 1/>
126 </#list>
127 </div>
128 </div>
129
130 <div class="desc-wrapper">
131 <#list cur_gridItemTitle as item>
132
133 <div class="col-12 order-md-last collapse fade show" id="heading_${tabId1}">
134 <div class="row">
135 <#if item.descImg.getData()?has_content>
136 <div class="col-md-6">
137 <img alt="${item.getData()}" src="${item.descImg.getData()}">
138 </div>
139 <div class="col-md-6">
140 <h4>${item.getData()}</h4>
141
142 ${item.gridItemDescription.getData()}
143 </div>
144 <#elseif item.gridItemImage.getData()?has_content>
145 <div class="col-md-6">
146 <img alt="${item.getData()}" src="${item.gridItemImage.getData()}">
147 </div>
148 <div class="col-md-6">
149 <h4>${item.getData()}</h4>
150
151 ${item.gridItemDescription.getData()}
152 </div>
153 <#else>
154 <div class="col-md-12">
155 <h4>${item.getData()}</h4>
156 ${item.gridItemDescription.getData()}
157 </div>
158 </#if>
159 </div>
160 </div>
161
162 <#if cur_gridItemTitle?counter <= 3>
163 <#assign tabId1 = tabId1 +1 />
164 <#elseif cur_gridItemTitle?counter == 3>
165 <#assign tabId1 = tabId +3 />
166 <#elseif cur_gridItemTitle?counter gt 6>
167 <#assign tabId1 = tabId1 +6 />
168 <#else>
169 <#assign tabId1 = tabId1 +1 />
170 </#if>
171 </#list>
172 </div>
173 </#list>
174 </#if>
175 </div>
176 </div>
177 <div class="show-mobile">
178 <div>
179 <#if gridItemTitle.getSiblings()?has_content>
180 <#assign tabId=0 />
181 <#list gridItemTitle.getSiblings() as cur_gridItemTitle>
182 <#if tabId == 0 || tabId%4 == 0>
183 <div class="grid-row">
184 </#if>
185 <div class="grid-column">
186 <div>
187 <a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse">
188 <h5 class="mb-0">
189 <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}">
190 <div>
191 <#if cur_gridItemTitle.gridItemImage.getData()?has_content>
192 <div class="grid-section-image">
193 <img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.gridItemImage.getData()}">
194 </div>
195 </#if>
196 <div class="grid-section-heading">
197 <span class="plus-icon">
198 <i class="bap-icon bap-plus"> </i>
199 </span>
200 <span class="grid-section-heading-text">
201 ${cur_gridItemTitle.getData()}
202 </span>
203
204 </div>
205 <div class="triangle-up"></div>
206 </div>
207 </button>
208 </h5>
209 </a>
210 </div>
211 </div>
212 <div class="desc-wrapper">
213 <div class="col-12 order-md-last collapse show" id="heading_${tabId}">
214 <div class="row">
215 <#if cur_gridItemTitle.descImg.getData()?has_content>
216 <div class="col-md-6">
217 <h4>${cur_gridItemTitle.getData()}</h4>
218 ${cur_gridItemTitle.gridItemDescription.getData()}
219 </div>
220 <div class="col-md-6">
221 <img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.descImg.getData()}">
222 </div>
223 <#elseif cur_gridItemTitle.gridItemImage.getData()?has_content>
224 <div class="col-md-6">
225 <h4>${cur_gridItemTitle.getData()}</h4>
226 ${cur_gridItemTitle.gridItemDescription.getData()}
227 </div>
228 <div class="col-md-6">
229 <img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.gridItemImage.getData()}">
230 </div>
231 <#else>
232 <div class="col-md-6">
233 <h4>${cur_gridItemTitle.getData()}</h4>
234 ${cur_gridItemTitle.gridItemDescription.getData()}
235 </div>
236 </#if>
237 </div>
238 </div>
239 </div>
240 <#assign tabId = tabId +1 />
241 <#if tabId == 0 || tabId%4 == 0>
242 </div>
243 </#if>
244 </#list>
245 </#if>
246 </div>
247 </div>
248 </div>
249
250
251</section>
252
253<script>
254//enable accordion behavior to show only 1 detail at a time
255$(".what-we-do .card-body a").addClass("collapsed");
256$(".what-we-do .col-12").removeClass("show");
257$(document).on("click", '.what-we-do [data-toggle="collapse"]', function() {
258 $(".what-we-do .plus-icon").removeClass("active");
259 $('.what-we-do .collapse.show').collapse('hide');
260 if(!$(this).hasClass("collapsed")){
261 $(this).find(".plus-icon").addClass("active");
262 } else{
263 $(this).find(".plus-icon").removeClass("active");
264 }
265});
266</script>
267
268<style>
269
270.what-we-do .grid-item .triangle-up {
271 width: 0;
272 height: 0;
273 border-left: 35px solid transparent;
274 border-right: 35px solid transparent;
275 border-bottom: 25px solid #eff1f2;
276 position: absolute;
277 bottom: -40px;
278 left: 5px;
279}
280
281.what-we-do .grid-item.collapsed .triangle-up {
282 display:none;
283}
284.what-we-do .grid-section-heading {
285 color: rgb(0, 0, 0);
286 cursor: pointer;
287 display: block;
288 font-size: 20px;
289 font-weight: 700;
290 margin-top: 15px;
291 display: flex;
292 text-align: left;
293 align-items: center;
294}
295
296.what-we-do .grid-section-heading .plus-icon.active .bap-plus {
297 transform: rotate(45deg);
298 transition: all 0.5s;
299}
300
301.what-we-do .grid-row {
302 padding: 20px 0 20px 0;
303 margin-bottom: 20px;
304 position: relative;
305}
306
307.what-we-do .grid-row button.btn.btn-link {
308 box-shadow: none;
309}
310
311.what-we-do .grid-row .btn-link:hover{
312 text-decoration: none;
313}
314
315.what-we-do .grid-row .btn {
316 padding: 0;
317}
318
319.what-we-do .plus-icon {
320 position: relative;
321 -webkit-flex: none;
322 -ms-flex: none;
323 width: 44px;
324 height: 44px;
325 margin-right: 15px;
326 border: 1px solid #e0e2e5;
327 border-radius: 50%;
328 background-color: #fff;
329 line-height: 40px;
330 font-size: 16px;
331 color: #007bc0;
332 text-align: center;
333 font-weight: 700;
334}
335
336.what-we-do .plus-icon .bap-icon {
337 font-weight: 700;
338 font-size: 16px;
339}
340
341.what-we-do .desc-wrapper {
342 background: #eff1f2;
343}
344
345.what-we-do .desc-wrapper .col-12 {
346 padding: 90px 60px 40px 90px;
347 padding-top: 40px;
348}
349
350.what-we-do .desc-wrapper img {
351 width: 100%;
352}
353
354.what-we-do .desc-wrapper h4 {
355 font-size: 36px;
356 color: #000;
357 margin-bottom: 25px;
358}
359
360.what-we-do .desc-wrapper p {
361 color: #000;
362}
363
364@media(min-width: 991px) {
365 .what-we-do .show-desktop-medium {
366 display: none;
367 }
368 .what-we-do .show-mobile {
369 display: none;
370 }
371}
372
373@media(min-width: 768px) and (max-width: 991px) {
374 .what-we-do .show-desktop {
375 display: none;
376 }
377
378 .what-we-do .show-mobile {
379 display: none;
380 }
381
382 .what-we-do .show-desktop-medium {
383 display: block;
384 }
385
386 .what-we-do .show-desktop-medium .grid-row {
387 padding: 20px;
388 }
389
390 .what-we-do .container {
391 padding-left: 0;
392 margin-left: 18px;
393 }
394
395 .what-we-do .show-desktop-medium .desc-wrapper .col-12 {
396 padding: 55px 30px 40px 30px;
397 }
398}
399
400@media(max-width: 767px) {
401 .what-we-do .show-desktop {
402 display: none;
403 }
404
405 .what-we-do .show-desktop-medium {
406 display: none;
407 }
408
409 .what-we-do .show-mobile {
410 display: block;
411 }
412
413 .what-we-do .show-mobile .grid-row {
414 padding: 0;
415 }
416
417 .what-we-do .show-mobile .grid-column {
418 padding: 20px;
419 position: relative;
420 margin-bottom: 20px;
421 }
422
423 .what-we-do .desc-wrapper .col-12 {
424 padding: 40px;
425 }
426
427 .what-we-do .grid-section-heading-text {
428 font-size: 16px;
429 }
430 .what-we-do .grid-item .triangle-up {
431 bottom: -20px;
432 }
433}
434
435@media(min-width: 768px) {
436 .what-we-do .show-mobile {
437 display: none;
438 }
439}
440</style>
Video
Sales Assets
Note: WIP - We are using hard-coded values for now.