Skip to content

Commit e120f66

Browse files
jschultejschulte
committed
Move a couple of new insert locations to the internal docs.
1 parent 9426211 commit e120f66

File tree

2 files changed

+90
-92
lines changed

2 files changed

+90
-92
lines changed

‎source/includes/_internal-locations.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,93 @@ The desired itemlist configuration for the site in question may differ from this
6060
`<item componentName='wiapi'/>`
6161

6262
Once that is in place, the `header-toolbar` insert functionality will be available on the mobile site.
63+
64+
## Listings Page Search Facets - Pricing Facet
65+
66+
> Usage:
67+
68+
```javascript
69+
(async APILoader => {
70+
const API = await APILoader.create();
71+
API.insert('search-facet-pricing', async (elem) => {
72+
const markup = document.createElement('div');
73+
markup.setAttribute('style', 'background: #f00;')
74+
markup.innerHTML = 'Your content goes here.';
75+
API.append(elem, markup);
76+
});
77+
})(window.DDC.APILoader);
78+
```
79+
80+
> Example Implementation:
81+
82+
```javascript
83+
(async APILoader => {
84+
const API = await APILoader.create();
85+
API.subscribe('page-load-v1', ev => {
86+
if (!ev.payload.searchPage) {
87+
return;
88+
}
89+
90+
API.insert('search-facet-pricing', async (elem) => {
91+
const markup = document.createElement('div');
92+
markup.setAttribute('style', 'background: #f00;')
93+
markup.innerHTML = 'Your content goes here.';
94+
API.append(elem, markup);
95+
});
96+
});
97+
})(window.DDC.APILoader);
98+
```
99+
100+
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.
101+
102+
On the Details page, it is positioned at the top of the vehicle information, below the media gallery.
103+
104+
You can target either the listings or details page by first subscribing to the <a href="#page-load-v1">`page-load-v1`</a> event, then using the <a href="#page-event">event</a> values of `payload.searchPage` and `payload.detailPage` to check the page type.
105+
106+
## Vehicle Banners
107+
108+
> Usage:
109+
110+
```javascript
111+
(async APILoader => {
112+
const API = await APILoader.create();
113+
API.insert('listings-placeholder-2', async (elem) => {
114+
const markup = document.createElement('div');
115+
markup.setAttribute('style', 'background: #f00;')
116+
markup.innerHTML = 'Your content goes here.';
117+
API.append(elem, markup);
118+
});
119+
})(window.DDC.APILoader);
120+
```
121+
122+
> Example Implementation:
123+
124+
```javascript
125+
(async APILoader => {
126+
const API = await APILoader.create();
127+
API.subscribe('page-load-v1', ev => {
128+
if (!ev.payload.searchPage) {
129+
return;
130+
}
131+
132+
API.insert('listings-placeholder-2', async (elem, meta) => {
133+
const markup = document.createElement('div');
134+
markup.setAttribute('style', 'background: #f00;')
135+
markup.innerHTML = 'Your device type is ' + meta.layoutType;
136+
API.append(elem, markup);
137+
});
138+
});
139+
})(window.DDC.APILoader);
140+
```
141+
142+
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.
143+
144+
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.
145+
146+
Available Listings Placeholder location names:
147+
148+
- listings-placeholder-1
149+
- listings-placeholder-2
150+
- listings-placeholder-3
151+
- listings-placeholder-4
152+

‎source/includes/_locations.md

Lines changed: 0 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -218,98 +218,6 @@ This element is positioned after the vehicle-payments insert location, and is pl
218218

219219
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.
220220

221-
222-
## Listings Page Search Facets - Pricing Facet
223-
224-
> Usage:
225-
226-
```javascript
227-
(async APILoader => {
228-
const API = await APILoader.create();
229-
API.insert('search-facet-pricing', async (elem) => {
230-
const markup = document.createElement('div');
231-
markup.setAttribute('style', 'background: #f00;')
232-
markup.innerHTML = 'Your content goes here.';
233-
API.append(elem, markup);
234-
});
235-
})(window.DDC.APILoader);
236-
```
237-
238-
> Example Implementation:
239-
240-
```javascript
241-
(async APILoader => {
242-
const API = await APILoader.create();
243-
API.subscribe('page-load-v1', ev => {
244-
if (!ev.payload.searchPage) {
245-
return;
246-
}
247-
248-
API.insert('search-facet-pricing', async (elem) => {
249-
const markup = document.createElement('div');
250-
markup.setAttribute('style', 'background: #f00;')
251-
markup.innerHTML = 'Your content goes here.';
252-
API.append(elem, markup);
253-
});
254-
});
255-
})(window.DDC.APILoader);
256-
```
257-
258-
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 <a href="#page-load-v1">`page-load-v1`</a> event, then using the <a href="#page-event">event</a> values of `payload.searchPage` and `payload.detailPage` to check the page type.
263-
264-
265-
## Vehicle Banners
266-
267-
> Usage:
268-
269-
```javascript
270-
(async APILoader => {
271-
const API = await APILoader.create();
272-
API.insert('listings-placeholder-2', async (elem) => {
273-
const markup = document.createElement('div');
274-
markup.setAttribute('style', 'background: #f00;')
275-
markup.innerHTML = 'Your content goes here.';
276-
API.append(elem, markup);
277-
});
278-
})(window.DDC.APILoader);
279-
```
280-
281-
> Example Implementation:
282-
283-
```javascript
284-
(async APILoader => {
285-
const API = await APILoader.create();
286-
API.subscribe('page-load-v1', ev => {
287-
if (!ev.payload.searchPage) {
288-
return;
289-
}
290-
291-
API.insert('listings-placeholder-2', async (elem, meta) => {
292-
const markup = document.createElement('div');
293-
markup.setAttribute('style', 'background: #f00;')
294-
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-
313221
## Primary Banner
314222

315223
> Usage:

0 commit comments

Comments
 (0)