https://www.merrell.com/on/demandware.static/Sites-merrell_eu-Site…/lib/header/sessionPageUpdate.js

1/*
2  JavaScript file used in the rendering of session (aka customer) unique data to the page.
3  This was created to update the customer name (your account details) and microcart in the header.
4  This was needed after server-side remote-includes were removed from multiple .isml files to 
5  increase performance of many pages templates typically used on every page render to render
6  non-critical information to the page.
7
8  Note this code is called very early in the browser-side page rendering process purposefully and unavoidably
9  to circumvent the flash of content/UI that would occur above the fold.
10*/
11
12// Polyfill for IE 11: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
13if (window.NodeList && !NodeList.prototype.forEach) {
14  NodeList.prototype.forEach = Array.prototype.forEach;
15}
16
17/* 
18  Avoiding jQuery since it probably won't be loaded yet. Note that Chris originally wrote this in jQuery, 
19  but the ':data' selector wasn't available until later in the
20  render so we switched it to vanilla.
21*/
22function toggleCssClass(selector, cls, add) {
23  document.querySelectorAll(selector).forEach(function(el) {
24    if (add) {
25      el.classList.add(cls);
26    } else {
27      el.classList.remove(cls);
28    }
29  })
30}
31
32// Handles the updating of the microcart display. HTML housed in microcart.isml
33function initializeMicroCartDomElements(cartDetails) {
34  var isCartEmpty = (cartDetails.cartQty + cartDetails.bonusProductQty) == 0;
35  var isShowCartQty = cartDetails.isShowCartQty;
36
37  //There is a site preference which can toggle the little pill/badge overlying the cart icon on mobile. This toggles it.
38  if(isShowCartQty) {
39    var el = document.querySelectorAll(".mini-cart-quantity-bag");
40    if(el) {
41      el.forEach(function(_el) {
42        _el.setAttribute('data-bonusqty',cartDetails.bonusProductQty);
43        _el.innerHTML = cartDetails.cartQty;
44      });
45      toggleCssClass('.mini-cart-quantity-bag', 'invisible', false); //class hide impacts the display: block attribute of the bag
46    }
47  } else {
48    toggleCssClass('.mini-cart-quantity-bag', 'invisible', true);
49  }
50
51  if (!window.app.resources.ENABLE_RESPONSIVE_MINI_CART) {
52    //shows the right flavor of HTML depending on the cart status, we render both because it's cached and small
53    toggleCssClass('.displayWhenCartIsEmpty', 'hide', !isCartEmpty);
54    toggleCssClass('.displayWhenCartIsNotEmpty', 'hide', isCartEmpty);
55  }
56}
57
58// Handles the updating of the customer name / account display logic. HTML housed in headercustomerinfo.isml
59function initializeCustomerDomElements(customerDetails) {
60  if (customerDetails.isRegistered && customerDetails.firstname) {
61    document.querySelectorAll('[data-named-message]')
62      .forEach(function(el) {
63        var namedMessage = el.getAttribute('data-named-message');
64        if (namedMessage) {
65          el.innerHTML = namedMessage
66            .replace(/#FIRSTNAME#/g, customerDetails.firstname)
67            .replace(/#LASTNAME#/g, customerDetails.lastname)
68        }
69      });
70  }
71  toggleCssClass('.showAnonymous', 'hide', customerDetails.isRegistered);
72  toggleCssClass('.showRegistered', 'hide', !customerDetails.isRegistered);
73  toggleCssClass('.showUnauthenticated', 'hide', !customerDetails.isRegistered || customerDetails.isAuthenticated);
74  toggleCssClass('[data-addwelcomeback]', 'welcomeback', customerDetails.isRegistered && !customerDetails.isAuthenticated);
75}
76
77/*
78  Main method called during the page assembly to urgently update the DOM. 
79  Called twice during page render at time when this documentation was written.
80  
81  1) Called inline in an .isml. Initialize the DOM with last-known values (to avoid flicker before the page is shown).
82  2) Called after page render when JS finishes loading new remote resources. Remote resources may have retrieved new values ( customer detail, logged in or out, cart count changes, etc) so this is called again.
83*/
84function initializeSessionDomElements(sessionInfo, noSave) {
85  try { if (!noSave) sessionStorage.setItem('sessionInfo', JSON.stringify(sessionInfo)); }
86  catch(ex) { }
87  initializeCustomerDomElements(sessionInfo.customerDetails);
88  initializeMicroCartDomElements(sessionInfo.cartDetails);
89}
90
91
92
93