Skip to content

Commit f22a16f

Browse files
committed
Moving 'Secondary Content' section to more appropriate location
1 parent 1fcc4e8 commit f22a16f

File tree

1 file changed

+33
-33
lines changed

1 file changed

+33
-33
lines changed

source/includes/_locations.md

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -161,16 +161,16 @@ This element is positioned below the vehicle pricing area on vehicle search and
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.
163163

164-
## Secondary Content
164+
## Primary Banner
165165

166166
> Usage:
167167
168168
```javascript
169169
(WIAPI => {
170170
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
171-
API.insert('secondary-content', (elem, meta) => {
172-
// This element is the a secondary content container on vehicle details pages roughly 2/3 of the way down.
173-
// It may also be added custom to one or more standalone pages on the website.
171+
API.insert('primary-banner', (elem, meta) => {
172+
// This element is typically positioned in a prominent location above the vehicle listings on the Search Results Page.
173+
// On the Details page, it is near the top of the vehicle information, below the media gallery.
174174
});
175175
})(window.DDC.API);
176176
```
@@ -181,32 +181,41 @@ This element is the media gallery container on vehicle details pages. Injecting
181181
(WIAPI => {
182182
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
183183
API.subscribe('page-load-v1', ev => {
184-
if (ev.payload.detailPage) {
185-
API.insert('secondary-content', (elem, meta) => {
186-
const containerEl = document.createElement('div');
187-
containerEl.style = 'background-color: #ff0000; font-size: 30px; width: 100%; height: 540px; margin: 0 auto; padding: 100px; text-align: center;';
188-
containerEl.innerHTML = 'Your secondary content container goes here.';
189-
API.append(elem, containerEl);
184+
if (ev.payload.searchPage || ev.payload.detailPage) {
185+
API.insert('primary-banner', (elem, meta) => {
186+
const img = document.createElement('img'),
187+
a = document.createElement('a');
188+
189+
img.src = 'https://pictures.dealer.com/d/ddcdemohonda/0217/15bd9bd8ecf0b2a292a91cecb08c595bx.jpg';
190+
img.alt = 'New 2015 Honda Pilot';
191+
img.title = 'New 2015 Honda Pilot';
192+
193+
a.href = '/specials/new.htm';
194+
a.innerHTML = img.outerHTML;
195+
196+
API.append(elem, a);
190197
});
191198
}
192199
});
193200
})(window.DDC.API);
194201
```
195202

196-
By default, this element is roughly 2/3 of the way down on vehicle details pages.
203+
This element is positioned in a prominent location above the vehicle listings on the Search Results Page.
197204

198-
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 <a href="#page-load-v1">`page-load-v1`</a> event, then using the <a href="#page-event">event</a> value of `payload.detailPage` to check the page type.
205+
On the Details page, it is positioned at the top of the vehicle information, below the media gallery.
199206

200-
## Primary Banner
207+
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.
208+
209+
## Secondary Content
201210

202211
> Usage:
203212
204213
```javascript
205214
(WIAPI => {
206215
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
207-
API.insert('primary-banner', (elem, meta) => {
208-
// This element is typically positioned in a prominent location above the vehicle listings on the Search Results Page.
209-
// On the Details page, it is near the top of the vehicle information, below the media gallery.
216+
API.insert('secondary-content', (elem, meta) => {
217+
// This element is the a secondary content container on vehicle details pages roughly 2/3 of the way down.
218+
// It may also be added custom to one or more standalone pages on the website.
210219
});
211220
})(window.DDC.API);
212221
```
@@ -217,30 +226,21 @@ Since this may also be present on one or two standalone pages as custom addition
217226
(WIAPI => {
218227
const API = new WIAPI('test-integration'); // Note: Replace 'test-integration' with your actual integration identifier.
219228
API.subscribe('page-load-v1', ev => {
220-
if (ev.payload.searchPage || ev.payload.detailPage) {
221-
API.insert('primary-banner', (elem, meta) => {
222-
const img = document.createElement('img'),
223-
a = document.createElement('a');
224-
225-
img.src = 'https://pictures.dealer.com/d/ddcdemohonda/0217/15bd9bd8ecf0b2a292a91cecb08c595bx.jpg';
226-
img.alt = 'New 2015 Honda Pilot';
227-
img.title = 'New 2015 Honda Pilot';
228-
229-
a.href = '/specials/new.htm';
230-
a.innerHTML = img.outerHTML;
231-
232-
API.append(elem, a);
229+
if (ev.payload.detailPage) {
230+
API.insert('secondary-content', (elem, meta) => {
231+
const containerEl = document.createElement('div');
232+
containerEl.style = 'background-color: #ff0000; font-size: 30px; width: 100%; height: 540px; margin: 0 auto; padding: 100px; text-align: center;';
233+
containerEl.innerHTML = 'Your secondary content container goes here.';
234+
API.append(elem, containerEl);
233235
});
234236
}
235237
});
236238
})(window.DDC.API);
237239
```
238240

239-
This element is positioned in a prominent location above the vehicle listings on the Search Results Page.
240-
241-
On the Details page, it is positioned at the top of the vehicle information, below the media gallery.
241+
By default, this element is roughly 2/3 of the way down on vehicle details pages.
242242

243-
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.
243+
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 <a href="#page-load-v1">`page-load-v1`</a> event, then using the <a href="#page-event">event</a> value of `payload.detailPage` to check the page type.
244244

245245
## Content
246246

0 commit comments

Comments
 (0)