Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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();
$.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() {
var $searchIcon = $('.topnav-search-button[type="submit"]');
var options = {
id: 'search',
container: 'body',
dict: 'v14northface',
zIndex: '100',
minLength: 2,
server: '//',
serverSearch: '//',
prompt: 'Search',
submitFctn: function(type,val){
// emulate search button click. Hope this helps.
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,
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);
//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
if ($"ea_sayt").$suggestionContainer.length > 0){
$('<div class="ea-background">').insertAfter( $"ea_sayt").$suggestionContainer );
//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!");
$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(){
$('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);
$"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);
//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');
}, 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');
//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!');
}, 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 });
}); // domReady
}); // require ea-sayt
}); // require jquery
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.