IW-1483 | Removing LI from search trending, replacing it with top fandom articles

app/components/global-navigation/content-recommendation-card.js

@@ -8,18 +8,33 @@ export default Component.extend({
 	href: readOnly('model.url'),
 
 	click(event) {
-		let label;
+		const eventsToTrack = [
+			{
+				action: 'click',
+				label: 'search'
+			},
+			{
+				action: 'select',
+				label: this.model.url
+			}
+		];
+
+		const clickedItemSpecificEvent = {
+			action: 'click'
+		};
 
 		if (event.target.classList.contains('wds-content-recommendations__card-thumbnail')) {
-			label = 'search-trending-thumbnail';
+			clickedItemSpecificEvent.label = 'search-trending-thumbnail';
 		} else {
-			label = 'search-trending-card';
+			clickedItemSpecificEvent.label = 'search-trending-card';
 		}
 
-		this.track && this.track({
-			label,
-			action: 'click',
-			category: 'recirculation'
+		this.track && eventsToTrack.forEach(({ action, label }) => {
+			this.track({
+				action,
+				label,
+				category: 'recirculation'
+			});
 		});
 	}
 });

app/components/global-navigation/content-recommendations.js

@@ -1,27 +1,20 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { run } from '@ember/runloop';
 import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+import { reads } from '@ember/object/computed';
+import fetch from 'fetch';
 
 const recircItemsCount = 50;
 const thumbDimension = 60;
-const config = {
-	// we load twice as many items as we want to display because we need to filter out those without thumbnail
-	max: recircItemsCount * 2,
-	widget: 'wikia-impactfooter',
-	source: 'fandom',
-	opts: {
-		resultType: 'cross-domain',
-		domainType: 'fandom.wikia.com'
-	}
-};
 
 export default Component.extend({
-	wdsLiftigniter: service(),
+	sponsoredContent: service(),
+
 	classNames: ['wds-content-recommendations'],
 	tagName: 'div',
 	displayedItemsCount: 10,
-	displayedItems: computed('model', 'displayedItemsCount', function () {
+	sponsoredItem: reads('sponsoredContent.item'),
+	displayedItems: computed('model', 'displayedItemsCount', 'sponsoredItem', function () {
 		return this.model ? this.model.slice(0, this.displayedItemsCount) : [];
 	}),
 
@@ -31,8 +24,8 @@ export default Component.extend({
 	},
 
 	didInsertElement() {
-		this.wdsLiftigniter.initLiftigniter({});
-		this.fetchLiftIgniterData();
+		this.fetchData();
+		this.sponsoredContent.fetchData();
 		this.element.addEventListener('scroll', this.onScroll);
 	},
 
@@ -50,16 +43,17 @@ export default Component.extend({
 		}
 	},
 
-	fetchLiftIgniterData() {
-		const wdsLiftigniter = this.wdsLiftigniter;
-
-		wdsLiftigniter
-			.getData(config)
-			.then(({ items }) => {
+	fetchData() {
+		fetch(`${this.url}&limit=${recircItemsCount}`)
+			.then(response => {
+				if (response.ok) {
+					return response.json();
+				}
+			})
+			.then(items => {
 				this.set('model',
 					items
 						.filter(item => item.thumbnail)
-						.slice(0, recircItemsCount)
 						.map(item => {
 							if (window.Vignette) {
 								item.thumbnail = window.Vignette.getThumbURL(item.thumbnail, {
@@ -73,21 +67,11 @@ export default Component.extend({
 						})
 				);
 
-				run.scheduleOnce('afterRender', () => {
-					if (!this.isDestroyed) {
-						wdsLiftigniter.setupTracking(
-							this.element.querySelectorAll('.wds-content-recommendations__card'),
-							config.widget,
-							'LI'
-						);
-					}
+				this.track && this.track({
+					action: 'impression',
+					category: 'recirculation',
+					label: 'search'
 				});
 			});
-
-		this.track && this.track({
-			action: 'impression',
-			category: 'recirculation',
-			label: 'search'
-		});
 	},
 });

app/components/global-navigation/sponsored-content-card.js

@@ -0,0 +1,44 @@
+import Component from '@ember/component';
+import { readOnly } from '@ember/object/computed';
+
+export default Component.extend({
+	tagName: 'a',
+	classNames: ['wds-content-recommendations__card'],
+	attributeBindings: ['href'],
+	href: readOnly('model.url'),
+
+	click(event) {
+		const eventsToTrack = [
+			{
+				action: 'click',
+				label: 'search'
+			},
+			{
+				action: 'click',
+				label: 'sponsored-item'
+			},
+			{
+				action: 'select',
+				label: this.model.url
+			}
+		];
+
+		const clickedItemSpecificEvent = {
+			action: 'click'
+		};
+
+		if (event.target.classList.contains('wds-content-recommendations__card-thumbnail')) {
+			clickedItemSpecificEvent.label = 'search-trending-thumbnail';
+		} else {
+			clickedItemSpecificEvent.label = 'search-trending-card';
+		}
+
+		this.track && eventsToTrack.forEach(({ action, label }) => {
+			this.track({
+				action,
+				label,
+				category: 'recirculation'
+			});
+		});
+	}
+});

app/templates/components/global-navigation.hbs

@@ -71,6 +71,7 @@
         navigationModel=model.main-navigation
         isOpen=isSearchModalOpen
         canShowContentRecommendations=canShowContentRecommendations
+        contentRecommendationsUrl=model.content-recommendations.url
         openModal=(action openModal)
         onSearchToggleClicked=(action "onSearchToggleClicked")
         onSearchSuggestionChosen=(action "onSearchSuggestionChosen")

app/templates/components/global-navigation/content-recommendations.hbs

@@ -1,4 +1,9 @@
 <h1 class="wds-content-recommendations__header">TRENDING on fandom</h1>
+{{#if sponsoredItem}}
+	{{global-navigation/sponsored-content-card
+		model=sponsoredItem
+	}}
+{{/if}}
 {{#each displayedItems as |item|}}
   {{global-navigation/content-recommendation-card
     model=item

app/templates/components/global-navigation/search-modal.hbs

@@ -19,7 +19,10 @@
       {{global-navigation/main-navigation model=navigationModel}}
     </div>
     {{#if canShowContentRecommendations}}
-      {{global-navigation/content-recommendations track=(action track)}}
+      {{global-navigation/content-recommendations
+        track=(action track)
+        url=contentRecommendationsUrl
+      }}
     {{/if}}
   </div>
 {{/if}}

app/templates/components/global-navigation/sponsored-content-card.hbs

@@ -0,0 +1,16 @@
+<img
+  src={{model.thumbnailUrl}}
+  alt={{model.title}}
+  class="wds-content-recommendations__card-thumbnail"
+>
+
+<div class="wds-content-recommendations__card-info">
+  <span class="wds-content-recommendations__card-title">
+    {{model.title}}
+  </span>
+  {{#if model.attribution}}
+  	<span class="wds-content-recommendations__card-time">
+		{{model.attributionLabel}} {{model.attribution}}
+  	</span>
+  {{/if}}
+</div>