|
| 1 | +# Internal Insert Locations |
| 2 | + |
| 3 | +These insert locations work the same as all of the public locations, however they are restricted for internal DDC use only. |
| 4 | + |
| 5 | +See the <a href="#api-insert-name-callback-elem-meta">insert documentation</a> for more details on the insert method. |
| 6 | + |
| 7 | +## Header Toolbar |
| 8 | + |
| 9 | +> Usage: |
| 10 | +
|
| 11 | +```javascript |
| 12 | +(async APILoader => { |
| 13 | + const API = await APILoader.create(); |
| 14 | + |
| 15 | + API.subscribe('page-load-v1', (ev) => { |
| 16 | + const callback = (e) => { |
| 17 | + alert('In callback function!'); |
| 18 | + console.log('Event Details:', e); |
| 19 | + }; |
| 20 | + |
| 21 | + if (ev.payload.layoutType === 'mobile') { |
| 22 | + API.insert('header-toolbar', (elem, meta) => { |
| 23 | + const node = document.createElement('div'); |
| 24 | + node.innerHTML = '<i class="ddc-icon ddc-icon-star ddc-icon-size-xlarge"></i>'; |
| 25 | + node.addEventListener('click', callback); |
| 26 | + API.append(elem, node); |
| 27 | + }); |
| 28 | + } |
| 29 | + }); |
| 30 | +})(window.DDC.APILoader); |
| 31 | + |
| 32 | +``` |
| 33 | + |
| 34 | +This element is positioned in the _mobile_ header toolbar, typically next to the MyCars icon. The placement can be controlled with the use of an itemlist. This is configured for the site in DVS, in this way: |
| 35 | + |
| 36 | +```xml |
| 37 | +<window-preferences-override id='default-mobile:template-navbar1'> |
| 38 | + <preference name='itemlist.id' value='mobile-header-icons'/> |
| 39 | +</window-preferences-override> |
| 40 | +<window-preferences-override id='landing-mobile:template-navbar1'> |
| 41 | + <preference name='itemlist.id' value='mobile-header-icons'/> |
| 42 | +</window-preferences-override> |
| 43 | +``` |
| 44 | + |
| 45 | +And then in the itemlist folder, add a file called `mobile-header-icons.xml` with content similar to this: |
| 46 | + |
| 47 | +```xml |
| 48 | +<?xml version='1.0' encoding='UTF-8'?> |
| 49 | +<item-list id='mobile-header-icons' itemClassName='com.dealer.modules.cms.navigation.NavButtonImpl'> |
| 50 | + <item componentName='menu' iconClass='ddc-icon-menu'/> |
| 51 | + <item iconClass='ddc-icon-tool-wrench-screwdriver' url='/schedule-service.htm'/> |
| 52 | + <item componentName='call' iconClass='ddc-icon-call' /> |
| 53 | + <item componentName='wiapi'/> |
| 54 | + <item componentName='mycars' iconClass='ddc-icon-mycars-viewed'/> |
| 55 | +</item-list> |
| 56 | +``` |
| 57 | + |
| 58 | +The desired itemlist configuration for the site in question may differ from this example. The key is to add this item to the list where you want the `mobile-header-icons` location to be placed: |
| 59 | + |
| 60 | +`<item componentName='wiapi'/>` |
| 61 | + |
| 62 | +Once that is in place, the `header-toolbar` insert functionality will be available on the mobile site. |
0 commit comments