chore(ejs): minor style fixes and update sections

[skip ci]

@ecomplus/storefront-template/template/pages/@/sections/collection-shelf.ejs

@@ -1,29 +1,24 @@
-<div class="collection-shelf my-lg-5">
-  <%
-  if (opt.collection_id) {
-    const res = await _.ecomClient.store({
-      url: `/collections/${opt.collection_id}.json`
-    })
-    const collection = res.data
-    let items = []
-    if (Array.isArray(collection.products) && collection.products.length) {
-      const search = new _.EcomSearch()
-      await search.setProductIds(collection.products).fetch()
-      items = search.getItems()
-    }
-    const { title, link } = opt
-
-    %>
-    <%- await include('/@/sections/inc/products-carousel', {
-      _, opt: { items, collection, title, link }
-    }) %>
-    <%
-  } else {
-    %>
-    <%- await include('/@/sections/inc/products-carousel', {
-      _, opt: { items: _.items }
-    }) %>
-    <%
+<%
+const { title, link, shuffle } = opt
+let items, collection
+if (opt.collection_id) {
+  const res = await _.ecomClient.store({
+    url: `/collections/${opt.collection_id}.json`
+  })
+  collection = res.data
+  items = []
+  if (Array.isArray(collection.products) && collection.products.length) {
+    const search = new _.EcomSearch()
+    await search.setProductIds(collection.products).fetch()
+    items = search.getItems()
   }
-  %>
+} else {
+  items = _.items
+}
+%>
+
+<div class="collection-shelf my-lg-5">
+  <%- await include('/@/sections/inc/products-carousel', {
+    _, opt: { items, collection, title, link, shuffle }
+  }) %>
 </div>

@ecomplus/storefront-template/template/pages/@/sections/custom-content.ejs

@@ -0,0 +1,3 @@
+<div class="custom-content">
+  <%- await include('/@/sections/inc/md-content') %>
+</div>

@ecomplus/storefront-template/template/pages/@/sections/custom-html.ejs

@@ -0,0 +1,9 @@
+<% if (typeof opt.html === 'string') { %>
+  <section class="custom-html my-4 my-lg-5">
+    <div class="container">
+      <div class="html-clearfix">
+        <%- opt.html %>
+      </div>
+    </div>
+  </section>
+<% } %>

@ecomplus/storefront-template/template/pages/@/sections/inc/banner.ejs

@@ -1,7 +1,22 @@
+<%
+let dimensions
+if (opt.img.startsWith('/')) {
+  try {
+    dimensions = _.imageSize(`template/public${opt.img}`)
+  } catch (e) {
+    dimensions = null
+  }
+}
+%>
+
 <div class="banner">
   <a href="<%= opt.link || 'javascript:;' %>">
     <img
       class="lozad fade img-fluid"
+      <% if (dimensions) { %>
+        data-width="<%= dimensions.width %>"
+        data-height="<%= dimensions.height %>"
+      <% } %>
       data-src="<%= opt.img %>"
       alt="<%= opt.alt %>"
     >

@ecomplus/storefront-template/template/pages/@/sections/inc/md-content.ejs

@@ -1,6 +1,4 @@
-<%
-if (_.state.body) {
-  %>
+<% if (_.state.body) { %>
   <section class="md-content mb-5 pt-1 pt-sm-2 pt-lg-3">
     <div class="container">
       <%- _.md.render(_.state.body) %>

@ecomplus/storefront-template/template/pages/@/sections/inc/products-carousel.ejs

@@ -1,9 +1,18 @@
-<% if (Array.isArray(opt.items) && opt.items.length) { %>
-  <%
+<% if (Array.isArray(opt.items) && opt.items.length) {
   const title = opt.title ||
     (opt.collection && opt.collection.name) ||
     _.dictionary('popularProducts')
   const link = opt.link || (opt.collection && opt.collection.slug)
+
+  if (opt.shuffle) {
+    let m = opt.items.length, t, i
+    while (m) {
+      i = Math.floor(Math.random() * m--)
+      t = opt.items[m]
+      opt.items[m] = opt.items[i]
+      opt.items[i] = t
+    }
+  }
   %>
 
   <section

@ecomplus/storefront-template/template/pages/@/sections/search-engine.ejs

@@ -1,5 +1,5 @@
-<section id="search" class="container">
-  <div id="search-engine">
+<section id="search">
+  <div id="search-engine" class="container my-4 my-md-5">
     <!--
       No prerender for search, `SearchEngine` should be rendered here:
       https://developers.e-com.plus/storefront/@ecomplus/storefront-components/docs/SearchEngine.html