Bap Share Widget
Bosch Gallery
Bap Vpf React Widget
Key Features
Frequently Asked Questions
Video
Sales Assets
Bap Product Carousel
Bap Product Carousel
Product Details
Product Details is temporarily unavailable.
- Contact us
- Search
-
Bosch Global
Language Selector
Bosch AutoParts Search
Navigation Menu
An error occurred while processing the template.
The following has evaluated to null or missing:
==> childAssetCategory.getUrl() [in template "20097#20123#649649" at line 231, column 110]
----
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: ${childAssetCategory.getUrl()} [in template "20097#20123#649649" at line 231, column 108]
----
1<#assign BapProductNavService = serviceLocator.findService("com.bosch.autoparts.product.nav.service.BapProductNavService")>
2<#assign countryCode = locale.getCountry()?lower_case>
3<#assign storedVehicles = []>
4<#assign selctedVehicle = "">
5<#if countryCode == "mx">
6<#assign listAssetCategory = BapProductNavService.getNavigationCategory(themeDisplay, "product categories mx")>
7
8<#else>
9
10<#assign listAssetCategory = BapProductNavService.getNavigationCategory(themeDisplay, "product categories")>
11</#if>
12
13
14<#assign siteUrl = themeDisplay.getScopeGroup().getFriendlyURL()>
15<#assign pageURL = themeDisplay.getLayout().getFriendlyURL()>
16<#assign categoryBaseUrl = propsUtil.get("category-page-base-url")>
17<#assign productsPageUrl = propsUtil.get("products-page-url-"+themeDisplay.getLanguageId())>
18
19<div id="bap-navigation" role="navigation">
20 <#if entries?has_content>
21 <div id="main-nav-container">
22 <div id="parent-nav-container" class="container">
23
24 <div class="navbar-expand-md navbar-light ">
25 <div class="navbar-toggler-container">
26 <button class="navbar-toggler" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
27 <i class="bap-icon bap-list-view-mobile"> </i>
28 </button>
29
30 <button type="button" id="close" class="close" aria-label="Close">
31 <i class="bap-icon bap-close" aria-hidden="true"> </i>
32 </button>
33 </div>
34 <a
35 href="${themeDisplay.getPortalURL()}"
36 class="auto-parts"
37 >
38 <@liferay.language key="label-auto-parts" />
39 </a>
40 </div>
41 <div class="border-bottom-mob" id="nav-mob-line" style="display:none" ></div>
42
43 <ul class="nav nav-tabs d-none d-lg-block" id="myTab" role="list">
44 <li class="nav-item" onClick="openSecondLevel('Products')">
45 <a
46 class="nav-link"
47 id="products-tab"
48 data-toggle="tab"
49 href="#bap-products"
50 >
51 <span><@liferay.language key="label-products" /></span>
52 <i class="bap-icon bap-right"> </i>
53 </a>
54 </li>
55
56 <#list entries as entry>
57 <#if entry.hasChildren()>
58 <li class="nav-item" onClick="openSecondLevel('${entry.getName()}')" >
59 <a
60
61 class="nav-link"
62 id="${entry.getName()?replace(' ', '')?lower_case}-tab"
63 data-toggle="tab"
64 href="#${entry.getName()?replace(' ', '')?lower_case}"
65 >
66
67 <span>${entry.getName()}</span>
68 <i class="bap-icon bap-right"> </i>
69 </a>
70 </li>
71 <#else>
72 <#assign
73 active_class = ""
74 />
75
76 <#if pageURL?replace('/', '')?lower_case == entry.getName()?lower_case >
77 <#assign
78 active_class = "active"
79 />
80 </#if>
81
82 <li class="nav-item">
83 <a
84 onClick="performAnalyticsNavigation('${entry.getName()}','')"
85 class="nav-link ${active_class}"
86 ${entry.getTarget()}
87 id="${entry.getName()?replace(' ', '')?lower_case}-tab"
88 href="${entry.getURL()}"
89 >${entry.getName()}</a>
90 </li>
91 </#if>
92 </#list>
93 <li class="auto-parts-lg">
94 <a
95 href="${themeDisplay.getPortalURL()}"
96 class="auto-parts"
97 >
98 <@liferay.language key="label-auto-parts" />
99 </a>
100 </li>
101 </ul>
102 </div>
103 </div>
104 </#if>
105 <div id="child-nav-container" class="container">
106 <div class="tab-content">
107 <#if entries?has_content>
108
109 <#list entries as entry>
110 <div class="tab-pane fade" id="${entry.getName()?replace(' ', '')?lower_case}" role="tabpanel" aria-labelledby="${entry.getName()?replace(' ', '')?lower_case}">
111 <#list entry.getChildren()?chunk(4) as row>
112 <div class="row col-md-12">
113 <#list row as page>
114 <div class="col-md-3">
115 <#if page.hasChildren()>
116 <a id="${page.getName()?replace(' ', '')?lower_case}-tab"
117 href="#${page.getName()?replace(' ', '')?lower_case}-pane"
118 data-toggle="tab"
119 onClick="performAnalyticsNavigation('${entry.getName()}','${page.getName()}')"
120 >
121 <span>${page.getName()}</span>
122 <i class="bap-icon bap-right"> </i>
123 </a>
124 <#else>
125 <a
126 onClick="performAnalyticsNavigation('${entry.getName()}','${page.getName()}')"
127 id="${page.getName()?replace(' ', '')?lower_case}-tab" ${page.getTarget()}
128 href="${page.getURL()}"
129 >${page.getName()}</a>
130 </#if>
131 </div>
132 </#list>
133 </div>
134 </#list>
135 </div>
136 </#list>
137
138 <#list entries as entry>
139 <#list entry.getChildren() as child>
140 <div class="tab-pane fade" id="${child.getName()?replace(' ', '')?lower_case}-pane" role="tabpanel" aria-labelledby="${child.getName()?replace(' ', '')?lower_case}">
141 <div class="row col-md-12">
142 <div class="col-md-3">
143 <a href="#${entry.getName()?replace(' ', '')?lower_case}"
144 data-toggle="tab"
145 >${child.getName()}</a>
146 </div>
147 </div>
148 <#list child.getChildren()?chunk(4) as row>
149 <div class="row col-md-12">
150 <#list row as grandchild>
151 <div class="col-md-3">
152 <a href="${grandchild.getURL()}" ${grandchild.getTarget()}>${grandchild.getName()}</a>
153 </div>
154 </#list>
155 </div>
156 </#list>
157 </div>
158 </#list>
159 </#list>
160
161 </#if>
162
163 <#-- TOP LEVEL PRODUCT NAV -->
164
165 <div class="tab-pane fade" id="bap-products" role="tabpanel" aria-labelledby="products">
166 <div class="row">
167 <div class="col-md-12 back-icon-mobile">
168 <a id="back-close">
169 <i class="bap-icon bap-arrow-left"> </i>
170 </a>
171 </div>
172 <#list listAssetCategory as assetCategory>
173 <#if assetCategory.getParentCategoryId() == 0 >
174 <div class="col-md-3">
175 <#if assetCategory.isLeafNode()>
176 <a onClick="performAnalyticsNavigation('Products','${assetCategory.getName()}')" href="${categoryBaseUrl}${assetCategory.getUrl()}"
177 >${assetCategory.getName()}</a>
178 <#else>
179 <a onClick="performAnalyticsNavigation('Products','${assetCategory.getName()}')" href="#${assetCategory.getName()?replace(' ', '')?lower_case}-pane"
180 data-toggle="tab"
181 >
182 <span>${assetCategory.getName()}</span>
183 <i class="bap-icon bap-right"> </i>
184 </a>
185 </#if>
186
187 </div>
188 </#if>
189 </#list>
190 <div class="col-md-12 view-all-link">
191 <a class="catalog-url" href="${productsPageUrl}">
192 <span><@liferay.language key="label-view-all" /></span> <i class="bap-icon bap-right"> </i>
193 </a>
194 </div>
195 </div>
196 </div>
197
198 <#-- SECONDARY LEVEL PRODUCT NAV -->
199
200 <#list listAssetCategory as assetCategory>
201 <#if assetCategory.getParentCategoryId() == 0 >
202 <div class="tab-pane fade" id="${assetCategory.getName()?replace(' ', '')?lower_case}-pane" role="tabpanel" aria-labelledby="${assetCategory.getName()?replace(' ', '')?lower_case}">
203 <div class="row">
204 <div class="back-icon">
205 <a class="tertiary-back-arrow"
206 href="#bap-products"
207 data-toggle="tab"
208 > <i class="bap-icon bap-left"> </i> </a>
209 <a class="tertiary-back-data"
210 href="${categoryBaseUrl}${assetCategory.getUrl()}"
211 > ${assetCategory.getName()}</a>
212 </div>
213 </div>
214 <div class="back-icon-mobile">
215 <div class="row">
216 <a
217 href="#bap-products"
218 data-toggle="tab"
219 >
220 <i class="bap-icon bap-arrow-left"> </i>
221 </a>
222 <a class="tertiary-back-data"
223 href="${categoryBaseUrl}${assetCategory.getUrl()}"
224 > ${assetCategory.getName()}</a>
225 </div>
226 </div>
227 <div class="row">
228 <#list listAssetCategory as childAssetCategory>
229 <#if childAssetCategory.getParentCategoryId() == assetCategory.getCategoryId() >
230 <div class="col-md-3">
231 <a href="${categoryBaseUrl}${childAssetCategory.getUrl()}">${childAssetCategory.getName()}</a>
232 </div>
233 </#if>
234 </#list>
235 </div>
236 </div>
237 </#if>
238 </#list>
239 </div>
240 </div>
241</div>
242
243<script>
244 $(function() {
245
246
247
248 $('.tab-pane a').on('click', function(){
249 $('.tab-pane a').removeClass('active');
250 });
251
252
253 $('#navbar-toggler').on('click', function(){
254 handleHamburgerButton();
255 });
256
257
258 $('.nav-item').on('click', function(){
259 if ( $('#myTab').css('display') == 'none' || $('#myTab').css("visibility") == "hidden"){
260 $('#myTab').removeClass("d-none d-lg-block");
261 }else{
262 $('#myTab').addClass("d-none d-lg-block");
263 }
264
265 $('.tab-content').show();
266 $('#navbar-toggler').hide();
267 $('#close').show();
268 $("#nav-mob-line").hide();
269
270 //Priti
271 if($('#bap-products.active').length > 0){
272 $("#main-nav-container").removeClass("bottom-border");
273 }
274 else{
275 $("#main-nav-container").addClass("bottom-border");
276 }
277 });
278
279
280 $('#close').on('click', function(){
281 handleCloseButton();
282 });
283
284 $('#back-close').on('click', function(){
285 handleBackButton();
286 });
287
288 $('#bap-navigation a').on('click', function() {
289 if (window.matchMedia('screen and (max-width: 768px)').matches) {
290 $(window).scrollTop($('#bap-navigation').offset().top - 50);
291 }
292 });
293 });
294
295 function getSelectedVehicle(){
296
297 var countryCode = "${countryCode}" ;
298 var storedVehicles = [];
299 var selctedVehicleName = '';
300 if(countryCode == 'mx'){
301 if( window.localStorage.getItem("bap.vehicles_mx") !== null){
302 storedVehicles = window.localStorage.getItem("bap.vehicles_mx");
303 }
304 }
305 else{
306 if( window.localStorage.getItem("bap.vehicles") !== null){
307 storedVehicles = window.localStorage.getItem("bap.vehicles")
308 }
309 }
310
311 if(storedVehicles.length > 0){
312
313 let selectedVehicle = JSON.parse(storedVehicles).filter(function (e) {
314 return e.active == true;
315 });
316 if(selectedVehicle.length > 0){
317 selctedVehicleName = selectedVehicle[0].vehicleName;
318 }
319
320 }
321 //alert("selctedVehicle=="+selctedVehicleName)
322 return selctedVehicleName;
323 //priti
324 }
325
326 function performAnalyticsNavigation(category,subCategory){
327 //debugger;
328 var selectedVehicalName = getSelectedVehicle();
329 //alert("selectedVehicalName=="+selectedVehicalName +" category=="+category+" subCategory=="+subCategory);
330 window.dataLayer = window.dataLayer || [];
331 dataLayer.push({
332 'event': 'navigation',
333 'navi_category': category, //e.g.:products
334 'navi_subcategory': subCategory, //e.g.:brakes
335 'vehicle': selectedVehicalName //e.g.:2020 Ford EcoSport 1.0L L3 GAS
336 });
337 }
338
339 function handleHamburgerButton(){
340 if ( $('#myTab').css('display') == 'none' || $('#myTab').css("visibility") == "hidden"){
341 $('#myTab').removeClass("d-none d-lg-block");
342 $("#nav-mob-line").show();
343 }else{
344 $('#myTab').addClass("d-none d-lg-block");
345 $("#nav-mob-line").hide();
346 }
347 $('.tab-content').hide();
348 }
349
350 function handleCloseButton(){
351 if($(window).width() < 767){
352 $('.nav-link.active').removeClass("active");
353 $('.tab-pane.fade.active.show').removeClass("active show");
354 $('#navbar-toggler').show();
355 $('#close').hide();
356 $("#main-nav-container").removeClass("bottom-border");
357 }
358 }
359
360 function handleBackButton(){
361 if($(window).width() < 767){
362 $('.nav-link.active').removeClass("active");
363 $('.tab-pane.fade.active.show').removeClass("active show");
364 $('#myTab').removeClass("d-none d-md-block");
365 $('#navbar-toggler').show();
366 $('#close').hide();
367 $("#nav-mob-line").show();
368 $("#main-nav-container").removeClass("bottom-border");
369 }
370 }
371
372 function openSecondLevel(category){
373 performAnalyticsNavigation(category,'')
374 $('#navbar-toggler').hide();
375 $('#close').show();
376 }
377
378 $(document).on('click', '#bap-navigation .nav-link.active', function() {
379 var href = $(this).attr('href').substring(1);
380 $(this).toggleClass('active');
381 $('.tab-pane[id="' + href + '"]').removeClass('active');
382 $(".tab-content").find(".tab-pane.fade.active").removeClass('active');
383 if($(window).width() > 767){
384 $("#main-nav-container").removeClass("bottom-border");
385 }
386 });
387
388 $(document).mouseup(function(e)
389 {
390 var parentNavContainer = $("#parent-nav-container");
391 var childNavContainer = $("#child-nav-container");
392
393 if (!parentNavContainer.is(e.target) && parentNavContainer.has(e.target).length === 0
394 && !childNavContainer.is(e.target) && childNavContainer.has(e.target).length === 0
395 )
396 {
397 $("#products-tab").removeClass('active');
398 $("#main-nav-container").removeClass("bottom-border");
399 $('#myTab').addClass("d-none d-lg-block");
400 $("#nav-mob-line").hide();
401 $("#bap-navigation .tab-content").find(".tab-pane.fade.active").removeClass('active');
402 }
403 });
404
405</script>