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