Squashed 'template/pages/' changes from a930b56..a293c38

a293c38 Update with @ecomplus/storefront-template v2.0.0-beta.176

git-subtree-dir: template/pages
git-subtree-split: a293c381891ff22e3b37d0671bb6954aa52798bf

Author: actions-user

@/layout/header.ejs

@@ -255,12 +255,13 @@ const hasMegamenu = header.desktop_megamenu
       <% if (categories && categories.length) { %>
         <div class="d-none d-lg-block <%= isCategoriesNavFull ? 'col-12 order-lg-last' : 'col' %>">
           <nav class="header__nav<%= isCategoriesNavFull ? ' header__nav--full' : '' %>">
-            <% categories.forEach(({ slug, name}) => { %>
+            <% categories.forEach(({ slug, name, _id}) => { %>
               <% let $categoryLink %>
               <div class="d-inline-block">
                 <a
                   href="javascript:;"
                   class="header__category"
+                  id="cd-<%= _id %>"
                   <%- hasMegamenu
                     ? `onmouseover="toggleSubmenu('${slug}', this)" onclick="toggleSubmenu('${slug}', this, true)"`
                     : `onclick="toggleSidenav('${slug}')"` %>
@@ -274,10 +275,10 @@ const hasMegamenu = header.desktop_megamenu
                     <nav class="header__submenu" id="<%= `s-${slug.replace(/\//g, '_')}` %>">
                       <% subcategories.forEach(subcategory => { %>
                         <div>               
-                          <a href="/<%= subcategory.slug %>"><%= subcategory.name %></a>
+                          <a id="sd-<%= subcategory._id %>" href="/<%= subcategory.slug %>"><%= subcategory.name %></a>
                           <% const thirdCategories = _.categories.filter(({ parent }) => parent && parent.slug === subcategory.slug) %>
                           <% thirdCategories.forEach(thirdCategory => { %>
-                            <a class="header__submenu-subcategory" href="/<%= thirdCategory.slug %>">
+                            <a id="td-<%= thirdCategory._id %>" class="header__submenu-subcategory" href="/<%= thirdCategory.slug %>">
                               <%= thirdCategory.name %>
                             </a>
                           <% }) %>

@/sections/info-bar.ejs

@@ -8,8 +8,8 @@ const barCols = []
   ['promo', 'percent']
 ].forEach(([prop, icon]) => {
   if (info[prop] && info[prop].show) {
-    const { link, text } = info[prop]
-    barCols.push({ link, text, icon })
+    const { link, title, text } = info[prop]
+    barCols.push({ link, title, text, icon })
   }
 })
 %>
@@ -18,14 +18,21 @@ const barCols = []
   <section class="info-bar">
     <div class="container">
       <div class="info-bar__nav row">
-        <% barCols.forEach(({ link, icon, text }) => { %>
+        <% barCols.forEach(({ link, icon, title, text }) => { %>
           <div class="col-auto col-sm-6 col-lg">
             <a class="info-bar__item" href="<%= link || 'javascript:;' %>">
               <span class="rounded-icon">
                 <i class="i-<%= icon %>"></i>
               </span>
               <div class="ml-2 ml-md-3">
-                <%= text %>
+                <% if(title) { %>
+                  <div class="info-bar__title">
+                    <%= title %>
+                  </div>
+                <% } %>
+                <div class="info-bar__text">
+                  <%= text %>
+                </div>
               </div>
             </a>
           </div>