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
alert('Would have gone to the Profile linked in `href`, but preventDefault stopped it.');
25
+
}
26
+
},
27
+
{
28
+
text:'Shopping Cart (1)',
29
+
href:'https://www.domain.com/cart/'
30
+
},
31
+
{
32
+
text:'Orders (0)',
33
+
href:'https://www.domain.com/orders/'
34
+
},
35
+
{
36
+
text:'Documents',
37
+
href:'https://www.domain.com/documents/'
38
+
},
39
+
],
40
+
callback: (elem, meta, data) => {
41
+
console.log(elem, meta, data);
42
+
}
43
+
},
44
+
{
45
+
position:'bottom',
46
+
primaryText:'Sign Out',
47
+
href:'https://www.domain.com/logout/',
48
+
onclick: (e) => {
49
+
e.preventDefault();
50
+
alert('Hello World!');
51
+
},
52
+
callback: (elem, meta, data) => {
53
+
console.log(elem, meta, data);
54
+
}
55
+
}]);
56
+
})(window.DDC.APILoader);
57
+
```
58
+
59
+
The `insertMenuContent` method allows you to add custom items to the primary navigation menu of Dealer.com sites. You can specify where the items should appear, the primary and secondary text for each item, and any sub-items that should be displayed when the main item is expanded.
60
+
61
+
The `target` parameter specifies the navigation menu to target. The only currently supported value is 'primary-menu'.
62
+
63
+
The `arrayOfObjects` parameter is an array of objects describing the menu items to be inserted. Each object can include the following properties:
64
+
65
+
Property | Description
66
+
-------------- | --------------
67
+
`position` | The location where the item should be inserted in the menu. The supported values are `top` and `bottom`.
68
+
`primaryText` | The main text for the menu item.
69
+
`secondaryText` | Additional text that appears beneath the primary text in the menu item.
70
+
`href` | The URL where the user should be directed when they click the menu item.
71
+
`subItems` | An array of sub-menu items that appear when the main item is expanded. Each sub-item can include the `text` and `href` properties, as well as an `onclick` property specifying a function to be executed when the sub-item is clicked.
72
+
`callback` | A function to be called after the menu item has been inserted. This function is passed three parameters: the newly-inserted HTML element (`elem`), the 'page event' object (`meta`), and the original data passed to the `insertMenuContent` function (`data`).
73
+
`expanded` | A boolean value indicating whether the menu item should be expanded to show any sub-items when the page loads. The default value is `false`.
74
+
`menuIcon` | A boolean value indicating whether an icon should be displayed next to the menu item. The default value is `false`.
75
+
76
+
The `callback` function you specify is called with three parameters:
77
+
78
+
Name | Description
79
+
-------------- | --------------
80
+
`elem` | `{HTMLElement}` The newly-inserted HTML element.
81
+
`meta` | `{object}` The 'page event' object. For more information, see the [page event documentation](https://dealerdotcom.github.io/web-integration-api-docs/#page-event).
82
+
`data` | `{object}` The original data you passed to the `insertMenuContent` function.
83
+
84
+
In addition to inserting static content, you can also add interactive functionality to the menu items by providing `onclick` functions. For example, you can prevent the default link behavior and display an alert message when a menu item is clicked, as demonstrated in the example code.
85
+
2
86
3
87
## API.updateLink(intent, setupFunction(meta))
4
88
The `updateLink` method is used to override links on the page where the integration is enabled.
@@ -95,9 +95,13 @@ This element is positioned below the vehicle tech specs area on vehicle search a
95
95
```javascript
96
96
(asyncAPILoader=> {
97
97
constAPI=awaitAPILoader.create();
98
-
API.insert('vehicle-payments', (elem, meta) => {
99
-
// This element is positioned directly below the vehicle pricing area on vehicle search and detail pages.
100
-
});
98
+
99
+
constcallback= (elem, meta) => {
100
+
// Insert your content here.
101
+
}
102
+
103
+
API.insert('vehicle-payments-primary', callback);
104
+
API.insert('vehicle-payments', callback);
101
105
})(window.DDC.APILoader);
102
106
```
103
107
@@ -107,16 +111,31 @@ This element is positioned below the vehicle tech specs area on vehicle search a
107
111
(asyncAPILoader=> {
108
112
constAPI=awaitAPILoader.create();
109
113
API.subscribe('page-load-v1', ev=> {
114
+
115
+
const { searchPage, detailPage } =ev.payload;
116
+
117
+
constcallback= (elem, meta) => {
118
+
constbutton=API.create('button', {
119
+
text:'Vehicle Payments',
120
+
href:'#',
121
+
classes:'btn btn-primary'
122
+
})
123
+
API.append(elem, button);
124
+
};
125
+
110
126
// Only execute the code on search results and vehicle details pages.
111
-
if (ev.payload.searchPage||ev.payload.detailPage) {
112
-
API.insert('vehicle-payments', (elem, meta) => {
113
-
constbutton=API.create('button', {
114
-
text:'Vehicle Payments',
115
-
href:'#',
116
-
classes:'btn btn-primary'
117
-
})
118
-
API.append(elem, button);
119
-
});
127
+
if (searchPage || detailPage) {
128
+
129
+
// This element exists only on the "Grid View" layout of the vehicle search page.
130
+
// The content appears below the primary price of the vehicle and above the "Info", "Specials" and "Pricing" tabs.
131
+
// Use this in addition to the `vehicle-payments` location if you want your content to be shown before the user clicks on the pricing tab.
132
+
if (searchPage) {
133
+
API.insert('vehicle-payments-primary', callback);
134
+
}
135
+
136
+
// This element is positioned directly below the vehicle pricing area on vehicle search and detail pages.
137
+
// On the "Grid View" layout of the vehicle search page, this content is placed inside the "Pricing" tab, below the vehicle price.
138
+
API.insert('vehicle-payments', callback);
120
139
}
121
140
});
122
141
})(window.DDC.APILoader);
@@ -164,6 +183,7 @@ This element is positioned directly below the vehicle pricing area on vehicle se
164
183
165
184
This element is positioned after the vehicle-payments insert location, and is placed below the pricing/incentives area on vehicle search and detail pages.
166
185
186
+
167
187
## Vehicle Media Container
168
188
169
189
> Usage:
@@ -198,6 +218,98 @@ This element is positioned after the vehicle-payments insert location, and is pl
198
218
199
219
This element is the media gallery container on vehicle details pages. Injecting into this location will replace the media gallery with the elements you insert.
This element is positioned on the Search Results Page, within the Search Facets area. It is placed below the first (and typically only) Pricing related facet.
259
+
260
+
On the Details page, it is positioned at the top of the vehicle information, below the media gallery.
261
+
262
+
You can target either the listings or details page by first subscribing to the <ahref="#page-load-v1">`page-load-v1`</a> event, then using the <ahref="#page-event">event</a> values of `payload.searchPage` and `payload.detailPage` to check the page type.
markup.innerHTML='Your device type is '+meta.layoutType;
295
+
API.append(elem, markup);
296
+
});
297
+
});
298
+
})(window.DDC.APILoader);
299
+
```
300
+
301
+
There are four "Listings Banners" locations on the Search Results Page, interspersed evenly between the vehicles displayed. These locations are useful for inserting relevant content that a user would expect to see in a list alongside vehicles.
302
+
303
+
As an example use case, `listings-placeholder-1` is used to place a widely adopted "My Wallet" integration on many websites. For this reason, it is preferable to use locations 2, 3 or 4 instead when possible.
304
+
305
+
Available Listings Placeholder location names:
306
+
307
+
- listings-placeholder-1
308
+
- listings-placeholder-2
309
+
- listings-placeholder-3
310
+
- listings-placeholder-4
311
+
312
+
201
313
## Primary Banner
202
314
203
315
> Usage:
@@ -262,22 +374,24 @@ You can target either the listings or details page by first subscribing to the <
By default, this element is roughly 2/3 of the way down on vehicle details pages.
279
393
280
-
Since this may also be present on one or two standalone pages as custom additions, it is likely you will want to target just details pages by first subscribing to the <ahref="#page-load-v1">`page-load-v1`</a> event, then using the <ahref="#page-event">event</a> value of `payload.detailPage` to check the page type.
394
+
Because this may also be present on one or two standalone pages as custom additions, it is likely you will want to exclusively target Vehicle Details pages by first subscribing to the <ahref="#page-load-v1">`page-load-v1`</a> event, then using the <ahref="#page-event">event</a> value of `payload.detailPage` to check the page type.
alert('Would have gone to the Profile linked in `href`, but preventDefault stopped it.');
320
+
}
321
+
},
322
+
{
323
+
text:'Shopping Cart (1)',
324
+
href:'https://www.domain.com/cart/'
325
+
},
326
+
{
327
+
text:'Orders (0)',
328
+
href:'https://www.domain.com/orders/'
329
+
},
330
+
{
331
+
text:'Documents',
332
+
href:'https://www.domain.com/documents/'
333
+
},
334
+
],
335
+
callback: (elem, meta, data) => {
336
+
console.log(elem, meta, data);
337
+
}
338
+
},
339
+
{
340
+
position:'bottom',
341
+
primaryText:'Sign Out',
342
+
href:'https://www.domain.com/logout/',
343
+
onclick: (e) => {
344
+
e.preventDefault();
345
+
alert('Hello World!');
346
+
},
347
+
callback: (elem, meta, data) => {
348
+
console.log(elem, meta, data);
349
+
}
350
+
}]);
351
+
})(window.DDC.APILoader);
352
+
```
353
+
354
+
The `insertMenuContent` method allows you to add custom items to the primary navigation menu of Dealer.com sites. You can specify where the items should appear, the primary and secondary text for each item, and any sub-items that should be displayed when the main item is expanded.
355
+
356
+
The `target` parameter specifies the navigation menu to target. The only currently supported value is 'primary-menu'.
357
+
358
+
The `arrayOfObjects` parameter is an array of objects describing the menu items to be inserted. Each object can include the following properties:
359
+
360
+
Property | Description
361
+
-------------- | --------------
362
+
`position` | The location where the item should be inserted in the menu. The supported values are `top` and `bottom`.
363
+
`primaryText` | The main text for the menu item.
364
+
`secondaryText` | Additional text that appears beneath the primary text in the menu item.
365
+
`href` | The URL where the user should be directed when they click the menu item.
366
+
`subItems` | An array of sub-menu items that appear when the main item is expanded. Each sub-item can include the `text` and `href` properties, as well as an `onclick` property specifying a function to be executed when the sub-item is clicked.
367
+
`callback` | A function to be called after the menu item has been inserted. This function is passed three parameters: the newly-inserted HTML element (`elem`), the 'page event' object (`meta`), and the original data passed to the `insertMenuContent` function (`data`).
368
+
`expanded` | A boolean value indicating whether the menu item should be expanded to show any sub-items when the page loads. The default value is `false`.
369
+
`menuIcon` | A boolean value indicating whether an icon should be displayed next to the menu item. The default value is `false`.
370
+
371
+
The `callback` function you specify is called with three parameters:
372
+
373
+
Name | Description
374
+
-------------- | --------------
375
+
`elem` | `{HTMLElement}` The newly-inserted HTML element.
376
+
`meta` | `{object}` The 'page event' object. For more information, see the [page event documentation](https://dealerdotcom.github.io/web-integration-api-docs/#page-event).
377
+
`data` | `{object}` The original data you passed to the `insertMenuContent` function.
378
+
379
+
In addition to inserting static content, you can also add interactive functionality to the menu items by providing `onclick` functions. For example, you can prevent the default link behavior and display an alert message when a menu item is clicked, as demonstrated in the example code.
0 commit comments