Skip to content

Commit 47489a0

Browse files
Danny-SundaresanDanny-Sundaresan
Danny-Sundaresan
authored and
Danny-Sundaresan
committed
Using the APILoader to instantiate the API
1 parent 1efb3a5 commit 47489a0

File tree

7 files changed

+126
-126
lines changed

7 files changed

+126
-126
lines changed

‎source/includes/_debugging.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
> Example Implementation:
44
55
```javascript
6-
(WIAPI => {
7-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
6+
(async APILoader => {
7+
const API = await APILoader.create();
88
API.subscribe('page-load-v1', ev => {
99
if (ev.payload.searchPage) {
1010
API.log('My integration has loaded and this is a search results page.');
1111
}
1212
});
13-
})(window.DDC.API);
13+
})(window.DDC.APILoader);
1414
```
1515

1616
When developing an integration, it's helpful to know if the API is doing what you expect and if your code is running successfully. The API intentionally suppresses most errors in regular use cases, however you can opt to view the error messages and API events by adding the following URL parameter to any page of any Dealer.com web site:

‎source/includes/_events.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -210,12 +210,12 @@ To receive data for events, you must opt-in to event subscriptions. Each event i
210210
> Usage
211211
212212
```javascript
213-
(WIAPI => {
214-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
213+
(async APILoader => {
214+
const API = await APILoader.create();
215215
API.subscribe('page-load-v1', ev => {
216216
API.log(ev);
217217
});
218-
})(window.DDC.API);
218+
})(window.DDC.APILoader);
219219

220220
```
221221

@@ -233,12 +233,12 @@ The page load event is useful to determine the context of the current page. By m
233233
> Usage
234234
235235
```javascript
236-
(WIAPI => {
237-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
236+
(async APILoader => {
237+
const API = await APILoader.create();
238238
API.subscribe('dealership-info-v1', ev => {
239239
API.log(ev);
240240
});
241-
})(window.DDC.API);
241+
})(window.DDC.APILoader);
242242

243243
```
244244

@@ -256,12 +256,12 @@ The dealership info event is useful if you need to know the name and address of
256256
> Usage
257257
258258
```javascript
259-
(WIAPI => {
260-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
259+
(async APILoader => {
260+
const API = await APILoader.create();
261261
API.subscribe('vehicle-shown-v1', ev => {
262262
API.log(ev);
263263
});
264-
})(window.DDC.API);
264+
})(window.DDC.APILoader);
265265
```
266266

267267
Parameter Name | Example Value | Parameter Type
@@ -280,13 +280,13 @@ On a vehicle deals page, a single event is fired because you are viewing a singl
280280
> Usage
281281
282282
```javascript
283-
(WIAPI => {
284-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
283+
(async APILoader => {
284+
const API = await APILoader.create();
285285
API.subscribe('vehicle-data-updated-v1', data => {
286286
API.log(data.payload.pageData); // Outputs the Page Data object to the console.
287287
API.log(data.payload.vehicleData); // Outputs the updated Vehicle Data object to the console.
288288
});
289-
})(window.DDC.API);
289+
})(window.DDC.APILoader);
290290
```
291291

292292
Parameter Name | Example Value | Parameter Type

‎source/includes/_locations.md

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@ See the <a href="#api-insert-name-callback-elem-meta">insert documentation</a> f
99
> Usage:
1010
1111
```javascript
12-
(WIAPI => {
13-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
12+
(async APILoader => {
13+
const API = await APILoader.create();
1414
API.insert('vehicle-media', (elem, meta) => {
1515
// This element is positioned below the vehicle image area on vehicle search pages.
1616
});
17-
})(window.DDC.API);
17+
})(window.DDC.APILoader);
1818
```
1919

2020
> Example Implementation:
2121
2222
```javascript
23-
(WIAPI => {
24-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
23+
(async APILoader => {
24+
const API = await APILoader.create();
2525
API.subscribe('page-load-v1', ev => {
2626
if (ev.payload.searchPage) {
2727
API.insert('vehicle-media', (elem, meta) => {
@@ -38,7 +38,7 @@ See the <a href="#api-insert-name-callback-elem-meta">insert documentation</a> f
3838
});
3939
}
4040
});
41-
})(window.DDC.API);
41+
})(window.DDC.APILoader);
4242
```
4343

4444
This element is positioned below the vehicle image area on vehicle search pages.
@@ -48,19 +48,19 @@ This element is positioned below the vehicle image area on vehicle search pages.
4848
> Usage:
4949
5050
```javascript
51-
(WIAPI => {
52-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
51+
(async APILoader => {
52+
const API = await APILoader.create();
5353
API.insert('vehicle-badge', (elem, meta) => {
5454
// This element is positioned below the vehicle tech specs area on vehicle search and detail pages.
5555
});
56-
})(window.DDC.API);
56+
})(window.DDC.APILoader);
5757
```
5858

5959
> Example Implementation:
6060
6161
```javascript
62-
(WIAPI => {
63-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
62+
(async APILoader => {
63+
const API = await APILoader.create();
6464
API.subscribe('page-load-v1', ev => {
6565
if (ev.payload.searchPage || ev.payload.detailPage) {
6666
API.insert('vehicle-badge', (elem, meta) => {
@@ -82,7 +82,7 @@ This element is positioned below the vehicle image area on vehicle search pages.
8282
});
8383
}
8484
});
85-
})(window.DDC.API);
85+
})(window.DDC.APILoader);
8686
```
8787

8888
This element is positioned below the vehicle tech specs area on vehicle search and detail pages.
@@ -93,19 +93,19 @@ This element is positioned below the vehicle tech specs area on vehicle search a
9393
> Usage:
9494
9595
```javascript
96-
(WIAPI => {
97-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
96+
(async APILoader => {
97+
const API = await APILoader.create();
9898
API.insert('vehicle-pricing', (elem, meta) => {
9999
// This element is positioned below the vehicle pricing area on vehicle search and detail pages.
100100
});
101-
})(window.DDC.API);
101+
})(window.DDC.APILoader);
102102
```
103103

104104
> Example Implementation:
105105
106106
```javascript
107-
(WIAPI => {
108-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
107+
(async APILoader => {
108+
const API = await APILoader.create();
109109
API.subscribe('page-load-v1', ev => {
110110
// Only execute the code on search results and vehicle details pages.
111111
if (ev.payload.searchPage || ev.payload.detailPage) {
@@ -122,7 +122,7 @@ This element is positioned below the vehicle tech specs area on vehicle search a
122122
});
123123
}
124124
});
125-
})(window.DDC.API);
125+
})(window.DDC.APILoader);
126126
```
127127

128128
This element is positioned below the vehicle pricing area on vehicle search and detail pages.
@@ -132,20 +132,20 @@ This element is positioned below the vehicle pricing area on vehicle search and
132132
> Usage:
133133
134134
```javascript
135-
(WIAPI => {
136-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
135+
(async APILoader => {
136+
const API = await APILoader.create();
137137
API.insert('vehicle-media-container', (elem, meta) => {
138138
// This element is the media gallery container on vehicle details pages.
139139
// Injecting into this location will replace the media gallery with the elements you insert.
140140
});
141-
})(window.DDC.API);
141+
})(window.DDC.APILoader);
142142
```
143143

144144
> Example Implementation:
145145
146146
```javascript
147-
(WIAPI => {
148-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
147+
(async APILoader => {
148+
const API = await APILoader.create();
149149
API.subscribe('page-load-v1', ev => {
150150
if (ev.payload.detailPage) {
151151
API.insert('vehicle-media-container', (elem, meta) => {
@@ -156,7 +156,7 @@ This element is positioned below the vehicle pricing area on vehicle search and
156156
});
157157
}
158158
});
159-
})(window.DDC.API);
159+
})(window.DDC.APILoader);
160160
```
161161

162162
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.
@@ -166,20 +166,20 @@ This element is the media gallery container on vehicle details pages. Injecting
166166
> Usage:
167167
168168
```javascript
169-
(WIAPI => {
170-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
169+
(async APILoader => {
170+
const API = await APILoader.create();
171171
API.insert('primary-banner', (elem, meta) => {
172172
// This element is typically positioned in a prominent location above the vehicle listings on the Search Results Page.
173173
// On the Details page, it is near the top of the vehicle information, below the media gallery.
174174
});
175-
})(window.DDC.API);
175+
})(window.DDC.APILoader);
176176
```
177177

178178
> Example Implementation:
179179
180180
```javascript
181-
(WIAPI => {
182-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
181+
(async APILoader => {
182+
const API = await APILoader.create();
183183
API.subscribe('page-load-v1', ev => {
184184
if (ev.payload.searchPage || ev.payload.detailPage) {
185185
API.insert('primary-banner', (elem, meta) => {
@@ -197,7 +197,7 @@ This element is the media gallery container on vehicle details pages. Injecting
197197
});
198198
}
199199
});
200-
})(window.DDC.API);
200+
})(window.DDC.APILoader);
201201
```
202202

203203
This element is positioned in a prominent location above the vehicle listings on the Search Results Page.
@@ -211,20 +211,20 @@ You can target either the listings or details page by first subscribing to the <
211211
> Usage:
212212
213213
```javascript
214-
(WIAPI => {
215-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
214+
(async APILoader => {
215+
const API = await APILoader.create();
216216
API.insert('secondary-content', (elem, meta) => {
217217
// This element is the a secondary content container on vehicle details pages roughly 2/3 of the way down.
218218
// It may also be added custom to one or more standalone pages on the website.
219219
});
220-
})(window.DDC.API);
220+
})(window.DDC.APILoader);
221221
```
222222

223223
> Example Implementation:
224224
225225
```javascript
226-
(WIAPI => {
227-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
226+
(async APILoader => {
227+
const API = await APILoader.create();
228228
API.subscribe('page-load-v1', ev => {
229229
if (ev.payload.detailPage) {
230230
API.insert('secondary-content', (elem, meta) => {
@@ -235,7 +235,7 @@ You can target either the listings or details page by first subscribing to the <
235235
});
236236
}
237237
});
238-
})(window.DDC.API);
238+
})(window.DDC.APILoader);
239239
```
240240

241241
By default, this element is roughly 2/3 of the way down on vehicle details pages.
@@ -247,20 +247,20 @@ Since this may also be present on one or two standalone pages as custom addition
247247
> Usage:
248248
249249
```javascript
250-
(WIAPI => {
251-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
250+
(async APILoader => {
251+
const API = await APILoader.create();
252252
API.insert('content', (elem, meta) => {
253253
// This element is will only insert on pages created by us for your purposes.
254254
// It may also be present on pages created for another integration.
255255
});
256-
})(window.DDC.API);
256+
})(window.DDC.APILoader);
257257
```
258258

259259
> Example Implementation:
260260
261261
```javascript
262-
(WIAPI => {
263-
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
262+
(async APILoader => {
263+
const API = await APILoader.create();
264264
API.subscribe('page-load-v1', ev => {
265265
if (ev.payload.pageName === 'YOUR_LANDING_PAGE') { // Note: Replace 'pageName' with the one we provide at page creation.
266266
API.insert('content', (elem, meta) => {
@@ -272,7 +272,7 @@ Since this may also be present on one or two standalone pages as custom addition
272272
});
273273
}
274274
});
275-
})(window.DDC.API);
275+
})(window.DDC.APILoader);
276276
```
277277

278278
This element will represent the entirety of the empty space between the header and footer on a custom landing page.

0 commit comments

Comments
 (0)