This is a GTM config for Easy Ask implemented for TNF to improve type ahead searching functionality on the website.
<link type='text/css' rel="stylesheet" charset='utf-8' href='//{{Page Hostname}}/ns/thenorthface/easyask/sayt/{{eav}}/ea-sayt-{{eav}}.min.css'> | |
<script type = "text/javascript" > | |
window.eaPath = window.eaPath || {}; | |
window.eaPath.ns = "//{{url hostname}}/ns/thenorthface/easyask/sayt/{{eav}}/"; | |
window.eaPath.sayt = window.eaPath.ns + "ea-sayt-{{eav}}.min.js"; | |
window.eaPath.hbs = window.eaPath.ns + "ea-sayt-{{eav}}.hbs"; | |
require(["jquery", "pubsub","shared.main.screen",window.eaPath.sayt],function($, pubsub, ms, eaDef){ | |
window.$ea = $; | |
var $eaSearch = $(".topnav-search-input"); | |
var $eaSearchParent = $eaSearch.parent(); | |
$eaSearch.attr("id","search"); | |
require(["ea-sayt","domReady"],function(ea_sayt,domReady){ | |
$.pubsub("subscribe", "vfdp.topnav.sticky.minimized",function(){ $("body").addClass("topnav-sticky-min").removeClass("topnav-sticky-max"); }); | |
$.pubsub("subscribe", "vfdp.topnav.sticky.maximized",function(){ $("body").addClass("topnav-sticky-max").removeClass("topnav-sticky-min"); }); | |
domReady(function() { | |
try{ | |
var $searchIcon = $('.topnav-search-button[type="submit"]'); | |
var options = { | |
id: 'search', | |
container: 'body', | |
dict: 'v14northface', | |
zIndex: '100', | |
minLength: 2, | |
server: '//v14northface.prod.easyaskondemand.com', | |
serverSearch: '//v14northface.prod.easyaskondemand.com', | |
prompt: 'Search', | |
submitFctn: function(type,val){ | |
// emulate search button click. Hope this helps. | |
$searchIcon.click(); | |
}, | |
horizAlign:'right', | |
products: { | |
size: 6, | |
value: function(item,field){ | |
if (field == 'URL_Path'){ | |
return "https://" + {{url hostname}} + "/shop/" + item[field] + "?variationId=" + item['Color_Code']; | |
} | |
return item[field]; | |
}, | |
fields : { | |
id: 'Partnumber', | |
colorCount: 'Color_Count', | |
rating: 'Average_Rating', | |
reviewCount: 'Review_Count', | |
thumbnail: 'Item_Thumbnail', | |
name: 'Style_Name', | |
price: 'MinPrice', | |
link: 'URL_Path', | |
headingOne: 'categories', | |
headingTwo: 'suggestions', | |
personalityCopy: "Here's what we found for:", | |
visualProductsTitle: 'top suggestions' | |
}, | |
sizes : { | |
description : 115 | |
} | |
}, | |
template: window.eaPath.hbs, | |
userSuggestions: true | |
}; | |
var mobileOptions = { | |
fixedWidth: function() { return window.innerWidth }, | |
yOffset: 20, | |
leftWidth:'100%', | |
search:{ | |
size: 5, | |
heading:{ display: 0 } | |
}, | |
numCols: 1, | |
}; | |
var desktopOptions = { | |
yOffset: 8, //16, | |
xOffset: 30 //47 | |
// fixedWidth: 500, | |
// leftWidth:'60%', | |
}; | |
options = ( main.screen.size() === "small" ) ? $.extend({}, options, mobileOptions) : $.extend({}, options, desktopOptions); | |
$eaSearchParent.eaAutoComplete(options); | |
//get elements from top navigation queries | |
var topNavMenuItems = document.querySelectorAll('.topnav-accordion-item'); | |
var $topNavSearchButton = $('.topnav-searchbutton'); | |
var $topNavSearchInput = $('.topnav-search-input'); | |
var $topNavSearchContainer = $('.topnav-search-container'); | |
var inputItems = document.querySelectorAll('input'); | |
//////////////////////////CHRIS WEACHOCK'S SEARCH CODE IMPLEMENTATION BEGINS HERE//////////////////////// | |
//begin custom TNF function for search implementation. Set timeout to wait to check for when the vendor Easy ask is loaded on to the page | |
setTimeout(function(){ | |
if ($eaSearchParent.data("ea_sayt").$suggestionContainer.length > 0){ | |
$('<div class="ea-background">').insertAfter( $eaSearchParent.data("ea_sayt").$suggestionContainer ); | |
} | |
},250); | |
/************ | |
MOBILE FUNCTNS | |
*************/ | |
//create a matchMedia query for mobile functions | |
if (window.matchMedia("(max-width: 667px)").matches) { | |
//create functions for showing the search results on mobile when the sarch icon is clicked, and replace the placeholder text | |
var showEAMobileSearch = function(){ | |
//console.log("search button clicked!"); | |
$('body').addClass('ea-active'); | |
$topNavSearchInput.focus(); | |
$topNavSearchInput.attr('placeholder', 'Search The North Face'); | |
} | |
//create a close function for closing the search. and clear the suggestions that were returned from the Easy ask search vendor | |
var closeEASearch = function(){ | |
$eaSearchParent.data("ea_sayt").close(); | |
$eaSearchParent.data("ea_sayt").clearUserSuggestions(); | |
$topNavSearchInput.val(""); | |
$('body').removeClass('ea-active'); | |
$('body').trigger('click');//triggers click only on body to reset the search icon back to normal | |
} | |
//create 2 event listeners, one for the search icon to show the search container and one that fires once | |
//to insert the close icon and on click of the close icon or focus of the input box close the search | |
$topNavSearchButton.on("click", showEAMobileSearch); | |
$topNavSearchButton.one("click", function(){ | |
$('<div class="icon-close"></div>').insertAfter('.search'); | |
$('body.ea-active div.icon-close').on("click", closeEASearch); | |
$('input, select').not($topNavSearchInput).on("focus", closeEASearch); | |
}); | |
} | |
/************** | |
DESKTOP FUNCTNS | |
***************/ | |
//in these functions I handled looping through the navigation items and when you mouse over them close the search container | |
if (window.matchMedia("(min-width: 640px)").matches) { | |
for (var i=0; i< topNavMenuItems.length; i++){ | |
// this handler will be executed every time the cursor is moved over the top level menu item | |
topNavMenuItems[i].addEventListener('mouseover', function(){ | |
//testing log for function | |
//console.log('menu item hovered over'); | |
$eaSearchParent.data("ea_sayt").close(); | |
}, false); | |
}// end for each top nav menu items | |
//click event for search input box, if the input has a value and has content show the container | |
$eaSearch[0].addEventListener('click', function(){ | |
if ($('.ea-autocomplete-wrapper>div').contents().length > 0){ | |
//testing log for function click | |
//console.log('search results are showing'); | |
$eaSearchParent.data("ea_sayt").$suggestionContainer.show(); | |
} | |
//if the search input doesnt have any value in it clear the suggestions and close the container | |
if ($eaSearch[0].value.length == 0){ | |
//testing log for if search box is empty hide the search and clear it's user suggestions | |
//console.log('search input is empty!'); | |
$eaSearchParent.data("ea_sayt").clearUserSuggestions(); | |
$eaSearchParent.data("ea_sayt").close(); | |
} | |
}, false); | |
} | |
///////////////////////END CHRIS WEACHOCK'S SEARCH CODE IMPLEMENTATION BEGINS HERE/////////////////////////////// | |
//end custom TNF search implementation | |
} catch (err) { | |
var e = "Custom HTML - SAYT EasyAsk - " + err; | |
dataLayer.push({'event':'tagError','tagName': e }); | |
console.error(e); | |
} | |
}); // domReady | |
}); // require ea-sayt | |
}); // require jquery | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment