Merge pull request #119 from Voog/118_add_ecommerce_layouts

Add ecommerce layouts

Gruntfile.js

@@ -27,12 +27,18 @@ module.exports = function(grunt) {
 
     // Concatenates the javascript source files to the javascripts folder.
     concat: {
-      build: {
-        src: [
-          'sources/javascripts/concat/*.js'
-        ],
-        dest: 'javascripts/application.js'
-      }
+      global: {
+       src: [
+        'sources/javascripts/concat/global/*.js'
+       ],
+       dest: 'javascripts/application.js'
+      },
+      editmode: {
+       src: [
+         'sources/javascripts/concat/editmode/*.js'
+       ],
+       dest: 'javascripts/editmode.js'
+      },
     },
 
     // Minifies the javascript files.
@@ -228,8 +234,8 @@ module.exports = function(grunt) {
       },
 
       js_concat: {
-        files: 'sources/javascripts/concat/*.js',
-        tasks: ['concat:build', 'uglify:build', 'exec:kitmanifest', 'exec:kit:javascripts/*.js']
+        files: 'sources/javascripts/concat/**/*.js',
+        tasks: ['concat', 'uglify:build', 'exec:kitmanifest', 'exec:kit:javascripts/*.js']
       },
 
       css_main: {
@@ -276,7 +282,7 @@ module.exports = function(grunt) {
 
   require('load-grunt-tasks')(grunt);
 
-  grunt.registerTask('default', ['clean:reset', 'modernizr_builder', 'concat', 'uglify', 'sass', 'postcss:main_styles', 'cssmin', 'imagemin', 'postcss:custom_styles', 'copy', 'clean:remove']);
+  grunt.registerTask('default', ['clean:reset', 'modernizr_builder', 'concat', 'copy:javascripts', 'uglify', 'sass', 'postcss:main_styles', 'cssmin', 'imagemin', 'postcss:custom_styles', 'copy', 'clean:remove']);
 
   grunt.event.on('watch', function(action, filepath, target) {
     if (target == 'voog') {

components/content-item.tpl

@@ -0,0 +1,72 @@
+{% if _imageData == blank %}
+  {% assign item_image_state = "without-image" %}
+{% else %}
+  {% assign item_image_state = "with-image" %}
+{% endif %}
+
+{% if _entityData.data.image_crop_state %}
+  {% assign image_crop_state = _entityData.data.image_crop_state %}
+{% else %}
+  {% assign image_crop_state = "not-cropped" %}
+{% endif %}
+
+{% if editmode %}
+  <div class="content-item-box p-rel {{ item_image_state }} js-content-item-box not-loaded"
+    data-item-type="{{ _itemType }}"
+    data-item-id="{{ _id }}"
+  >
+    <div class="image_settings js-prevent-sideclick"{% if _imageData == blank %} style="display: none;"{% endif %}>
+      <div class="image_settings-buttons">
+        <div class="image_settings-button--title mar_r-8">{{ "image" | lce | escape_once }}</div>
+          <button class="bg_img-contain image_settings-button mar_r-8 btn-no-style js-toggle-image-settings">
+          </button>
+        <button class="bg_img-contain image_settings-expand mar_r-8 btn-no-style js-toggle-crop-state">
+        </button>
+        <button class="bg_img-contain image_settings-remove btn-no-style js-remove-image" {%- if _isProductImage == true %} style="display: none;"{% endif %}>
+        </button>
+      </div>
+
+      <div class="settings_popover js-image-settings-popover">
+        <div class="settings_popover-arrow--up"></div>
+        <div class="product_alt-attr {{ item_image_state }}">
+          <div class="form_field-cms">
+            <input
+              id="item-image-alt-{{ _id }}"
+              class="form_field_textfield js-data-item image_settings-remove--input"
+              value="{{ _entityData.data.image_alt_attr | escape_once }}"
+              data-name="image_alt_attr"
+              data-entity="{{ _itemType }}"
+              data-id="{{ _id }}"
+            >
+            <label for="item-image-alt-{{ _id }}" class="form_field_label">{{ "alt_text" | lce | escape_once }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    {% include "image-src-variable", _data: _imageData, _targetWidth: _targetWidth %}
+
+    <div class="item-top">
+      <div class="top-inner aspect-ratio-inner image-drop-area {{ image_crop_state }} js-content-item-img-drop-area js-lazyload"
+        data-image="{{ _src }}"
+        {% if _isProductImage == true and _src != blank -%}
+            style="background-image: url({{_src}});"
+        {%- endif -%}
+      ></div>
+    </div>
+  </div>
+{% else %}
+  <a class="content-item-box {{ item_image_state }} js-content-item-box not-loaded" href="{{ _entityData.url }}">
+    <div class="item-top">
+      <div class="top-inner of-hidden">
+        {% if _imageData != blank %}
+          <div class="loader js-loader"></div>
+          {%- assign imageClass = "item-image " | append: image_crop_state -%}
+          {% include "lazy-image", _altAttr: _entityData.data.image_alt_attr, _data: _imageData, _targetWidth: _targetWidth, _className: imageClass %}
+        {% else %}
+          <div class="item-image-placeholder"></div>
+        {% endif %}
+      </div>
+    </div>
+  </a>
+{% endif %}

components/edicy-tools-variables.tpl

@@ -7,6 +7,13 @@
     {% assign flags_state = site.data.flags_state %}
   {% endif %}
 
+  {%- comment -%}Assign variables for ecommerce layouts{%- endcomment -%}
+  {% assign product_list_layout = "Product list" %}
+  {% assign product_layout = "Product" %}
+
+  {%- comment -%}Sets product related pages in main menu{%- endcomment -%}
+  {% assign show_product_related_pages_in_main_menu = site.data.settings_root_item.show_product_related_pages_in_main_menu %}
+
   {% comment %}Assign variables based on page type.{% endcomment %}
   {% assign fallback_cover_image = page.data.cover_image %}
   {% assign fallback_cover_color = page.data.cover_color %}
@@ -267,4 +274,29 @@
   {% capture edy_intro_add_lang %}{% if editmode %}data-edy-intro-popover="edy-add-lang"{% endif %}{% endcapture %}
   {% capture edy_intro_edit_text %}{% if editmode %}data-edy-intro-popover="edy-edit-text"{% endif %}{% endcapture %}
 
+  {% capture base_number_of_columns_set %}
+    [
+      {
+        "title": "2",
+        "value": "50%"
+      },
+      {
+        "title": "3",
+        "value": "33.3%"
+      },
+      {
+        "title": "4",
+        "value": "25%"
+      },
+      {
+        "title": "5",
+        "value": "20%"
+      },
+      {
+        "title": "6",
+        "value": "16.6%"
+      }
+    ]
+  {% endcapture %}
+
 {% endcapture %}

components/edicy-tools.tpl

@@ -30,5 +30,23 @@
     });
 
     site.bindCustomTexteditorStyles('{{ "button" | lc: editor_locale }}');
+
+    {%- if page.layout_title == product_layout -%}
+      {%- assign dropAreaPlaceholder = "drag_picture_for_product_here" | lce | escape -%}
+      site.bindProductListeners("{{ dropAreaPlaceholder }}", {{ page.id }});
+    {%- else -%}
+      {%- assign dropAreaPlaceholder = "drag_picture_here" | lce | escape -%}
+
+      {% if site.data.settings_root_item %}
+        rootItemValuesObj = {{ site.data.settings_root_item | json }};
+      {% else %}
+        rootItemValuesObj = {};
+      {% endif %}
+
+      template.bindRootItemSettings(rootItemValuesObj);
+    {%- endif -%}
+
+    site.bindContentItemImgDropAreas('{{ dropAreaPlaceholder }}', "item_image", "image_crop_state");
+    site.bindContentItemImageCropToggle("image_crop_state");
   </script>
  {% endeditorjsblock %}

components/html-head.tpl

@@ -42,11 +42,13 @@
     {% include "template-cs-content-content" %}
     {% include "template-cs-button-content" %}
     {% include "template-cs-table-content" %}
+    {%- if page.layout_title == product_list_layout -%}
+      {% include "template-cs-product-list" %}
+    {%- endif -%}
     {% include "template-cs-form-content" %}
     {% include "template-cs-footer-content" %}
   {% endif %}
 
-
   {% include "template-cs-style-rules" %}
 {% endcustomstyle %}
 
@@ -60,7 +62,11 @@
 {% include "template-meta" %}
 
 {% comment %}BREADCRUMBS{% endcomment %}
-{% sd_breadcrumbs %}
+{%- capture breadcrumbsScript -%}
+  {%- sd_breadcrumbs -%}
+{%- endcapture -%}
+
+{{ breadcrumbsScript }}
 
 {% if blog %}{{ blog.rss_link }}{% endif %}
 {{ site.stats_header }}

components/image-src-variable.tpl

@@ -0,0 +1,18 @@
+{%- if _data.content_type != blank -%}
+  {%- assign imageSizes = "sizes" -%}
+  {%- assign urlKey = "schemeless_url" -%}
+{%- else -%}
+  {%- assign imageSizes = "imageSizes" -%}
+  {%- assign urlKey = "url" -%}
+{%- endif -%}
+
+{%- assign _src = _data[imageSizes].first[urlKey] -%}
+
+{%- assign _maxWidth = _targetWidth | to_num -%}
+
+{%- for image in _data[imageSizes] -%}
+  {%- if image.width <= _maxWidth -%}
+    {% break %}
+  {%- endif -%}
+    {%- assign _src = image[urlKey] -%}
+{%- endfor -%}

components/javascripts.tpl

@@ -1,8 +1,15 @@
 {% comment %}SITE WIDE JAVASCRIPTS{% endcomment %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
-<script src="{{ javascripts_path }}/application.min.js?v=1"></script>
+<script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.11.0/intersection-observer.js" integrity="sha256-LkCt8+MalJg9nIGzDMmSEJzqyssPhY1VCvqaGNBNng8=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.1.3/lazyload.min.js" integrity="sha512-V3DZ9ZAJrv8ZYY5Zarlfjusec9J6S8htRT3bJDKTdEgq0g9OhbHQUjK+vsBkE6CH0J5VJtBCzPSXJ0ZCVpjPdQ==" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js" integrity="sha512-7taFZYSf0eAWyi1UvMzNrBoPVuvLU7KX6h10e4AzyHVnPjzuxeGWbXYX+ED9zXVVq+r9Xox5WqvABACBSCevmg==" crossorigin="anonymous"></script>
+<script src="{{ javascripts_path }}/application.min.js"></script>
 {% sitejs_include %}
 
+{%- if editmode -%}
+  <script src="{{ javascripts_path }}/editmode.min.js"></script>
+{%- endif -%}
+
 {% comment %}Site search related javascript components.{% endcomment %}
 {% if site.search.enabled %}
   <script src="{{ site.static_asset_host }}/libs/edicy-search/latest/edicy-search.js"></script>

components/lazy-image.tpl

@@ -0,0 +1,30 @@
+{%- comment -%}
+  Product image & background picker image object have different keys
+{%- endcomment -%}
+
+{%- if _targetWidth != blank -%}
+  {%- assign _maxWidth = _targetWidth | to_num -%}
+  {%- assign sizes = "(min-width: " | append: _targetWidth | append: "px) " | append: _targetWidth | append: "px" -%}
+{%- else -%}
+  {%- assign _maxWidth = _data.width -%}
+  {%- assign sizes = "100vw" -%}
+{%- endif -%}
+
+{% include "image-src-variable", _data: _data, _targetWidth: _maxWidth %}
+
+<img class="js-lazyload {{ _className }}"
+  data-src="{{ _src }}" data-sizes="{{ sizes }}" {% if _altAttr != blank %}title="{{ _altAttr | escape_once }}" alt="{{ _altAttr  | escape_once }}"{% endif %}
+  {% if _src == blank %}style="display: none;"{%- endif -%}
+  {% if _data[imageSizes] != blank -%}
+    {%- if _data[imageSizes].size >= 1 %}
+      data-srcset="
+        {%- for image in _data[imageSizes] -%}
+          {{ image[urlKey] }} {{ image.width }}w
+          {%- unless forloop.last -%}
+          ,
+          {%- endunless -%}
+        {%- endfor -%}
+      "
+    {%- endif -%}
+  {%- endif -%}
+/>

components/menu-breadcrumbs.tpl

@@ -0,0 +1,42 @@
+{%- assign breadcrumbsString = breadcrumbsScript | replace: '<script type="application/ld+json">', "" | replace: "</script>", "" | replace: site.url, "" | replace: "@", "" -%}
+{%- assign breadcrumbsObj = breadcrumbsString | json_parse -%}
+
+<ul class="menu menu-horizontal menu-public menu-breadcrumbs">
+  {%- if breadcrumbsObj.itemListElement.size > 2 or site.root_item.layout_title == product_list_layout and breadcrumbsObj.itemListElement.size > 1 -%}
+    {% for listItem in breadcrumbsObj.itemListElement %}
+      {%- if forloop.index != 1 or site.root_item.layout_title == product_list_layout -%}
+        {%- assign pageUrl = page.url | remove_first: "/" -%}
+
+        {%- if pageUrl == listItem.item.id -%}
+          {%- assign breadcrumbTag = "div" -%}
+          {%- assign isCurrentPage = true -%}
+        {%- else -%}
+          {%- assign breadcrumbTag = "a" -%}
+          {%- assign isCurrentPage = false -%}
+        {%- endif -%}
+
+        <li class="menu-item">
+          <{{ breadcrumbTag }} class="{% if isCurrentPage == false %}menu-link" href="/{{ listItem.item.id }}{% endif %}">
+            {{ listItem.item.name }}
+          </{{ breadcrumbTag }}>
+        </li>
+        {%- if forloop.rindex > 1 -%}
+          <span class="menu-separator">/</span>
+        {%- endif -%}
+      {% endif -%}
+    {% endfor %}
+  {%- endif -%}
+
+  {%- if editmode and page.layout_title != product_layout -%}
+    {%- assign add_product_label = "add_product" | lce | escape_once -%}
+    {%- assign add_product_title = "add_product_page" | lce | escape_once -%}
+    <li class="menu-item menu-item-cms">
+      {% menuadd parent=page label=add_product_label title=add_product_title layout_title=product_layout %}
+    </li>
+    {% if site.root_item.selected? and site.root_item.layout_title == product_list_layout %}
+      <li class="menu-item menu-item-cms float-right">
+        <a class="js-root-item-settings-toggle"></a>
+      </li>
+    {% endif %}
+  {%- endif -%}
+</ul>

components/menu-level-1-link.tpl

@@ -0,0 +1,3 @@
+<li class="menu-item js-prevent-link-click{% if render_hidden_categories == true and item.layout_title == product_list_layout or item.layout_title == product_layout %}{% unless show_product_related_pages_in_main_menu %} is-hidden{% endunless %} js-menu-item-products{% endif %}">
+  <a class="menu-link{% if item.selected? %} active{% endif %}{% unless item.translated? %} fci-editor-menuadd untranslated{% endunless %}" href="{{ item.url }}">{{ item.title }}</a>
+</li>

components/menu-level-1.tpl

@@ -6,9 +6,21 @@
   {% endunless %}
 
   {% for item in site.visible_menuitems %}
-    <li class="menu-item">
-      <a class="menu-link{% if item.selected? %} active{% endif %}{% unless item.translated? %} untranslated fci-editor-menuadd{% endunless %}" href="{{ item.url }}">{{ item.title }}</a>
-    </li>
+    {% if site.root_item.layout_title == product_list_layout %}
+      {% if editmode %}
+        {% include "menu-level-1-link" render_hidden_categories: true %}
+      {% else %}
+        {% unless show_product_related_pages_in_main_menu %}
+          {% unless item.layout_title == product_list_layout or item.layout_title == product_layout %}
+            {% include "menu-level-1-link" %}
+          {% endunless %}
+        {% else %}
+          {% include "menu-level-1-link" %}
+        {% endunless %}
+      {% endif %}
+    {% else %}
+      {% include "menu-level-1-link" %}
+    {% endif %}
   {% endfor %}
 
   {% if editmode %}

components/menu-level-2.tpl

@@ -6,7 +6,9 @@
         <ul class="menu">
           {% if editmode or item.children? %}
             {% for subitem in item.visible_children %}
-              <li class="menu-item"><a class="menu-link{% if subitem.selected? %} active{% endif %}{% unless subitem.translated? %} untranslated fci-editor-menuadd{% endunless %}" href="{{ subitem.url }}">{{ subitem.title }}</a></li>
+              {% if subitem.layout_title != product_layout and subitem.layout_title != product_list_layout %}
+                <li class="menu-item"><a class="menu-link{% if subitem.selected? %} active{% endif %}{% unless subitem.translated? %} untranslated fci-editor-menuadd{% endunless %}" href="{{ subitem.url }}">{{ subitem.title }}</a></li>
+              {% endif %}
             {% endfor %}
           {% endif %}
           {% if item.hidden_children.size > 0 %}<li>{% menubtn item.hidden_children %}</li>{% endif %}