Merge pull request #133 from Voog/132_improve_autorendered_pages

Improve auto-rendered product pages

components/html-head.tpl

@@ -17,8 +17,10 @@
 
 {% comment %}STYLESHEETS{% endcomment %}
 {% if editmode %}<link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.css">{% endif %}
-{% stylesheet_link "main.min.css?v=zurich-2.4.1" %}
-{% if editmode %}{% stylesheet_link "editmode.min.css?v=zurich-2.4.1" %}{% endif %}
+<link href="{{ stylesheets_path }}/main.min.css?v={{ template_settings.version }}" media="screen" rel="stylesheet" type="text/css"/>
+{% if editmode %}
+  <link href="{{ stylesheets_path }}/editmode.min.css?v={{ template_settings.version }}" media="screen" rel="stylesheet" type="text/css"/>
+{% endif %}
 
 {% comment %}Google fonts for Design Editor{% endcomment %}
 <link href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i|Arvo:400,400i,700,700i|Cousine:400,400i,700,700i|Crimson+Text:400,400i,700,700i|Fira+Sans:400,400i,700,700i|Lato:400,400i,700,700i|Lora:400,400i,700,700i|Montserrat:400,400i,700,700i|Noto+Serif:400,400i,700,700i|Open+Sans:400,400i,700,700i|PT+Sans:400,400i,700,700i|PT+Serif:400,400i,700,700i|Playfair+Display:400,400i,700,700i|Raleway:400,400i,700,700i|Roboto+Mono:400,400i,700,700i|Roboto+Slab:400,700|Roboto:400,400i,700,700i|Source+Sans+Pro:400,400i,700,700i|Ubuntu+Mono:400,400i,700,700i|Ubuntu:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin-ext,vietnamese" rel="stylesheet">

components/javascripts.tpl

@@ -1,7 +1,7 @@
 {% 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="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js" integrity="sha256-gDUQmMJHiRi7gACNeDZJkwW/b01LKr90K4gjJVu7DY4=" crossorigin="anonymous"></script>
-<script src="{{ javascripts_path }}/application.min.js?v=zurich-2.4.1"></script>
+<script src="{{ javascripts_path }}/application.min.js?v={{ template_settings.version }}"></script>
 {% sitejs_include %}
 
 {% comment %}Site search related javascript components.{% endcomment %}

components/template-cs-style-rules.tpl

@@ -295,7 +295,7 @@ body {
   border-bottom-style: var(--table-border-style);
 }
 
-.content-formatted .custom-btn {
+.content-formatted .custom-btn, .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn {
   padding: calc(var(--content-button-padding) - 12px) var(--content-button-padding);
   font-size: var(--content-button-font-size);
   font-style: var(--content-button-font-style);
@@ -307,13 +307,15 @@ body {
 
 .common-page .content-formatted .custom-btn:not(.custom-btn-disabled),
 .blog-page .content-formatted .custom-btn:not(.custom-btn-disabled),
-.post-page .content-formatted .custom-btn:not(.custom-btn-disabled) {
+.post-page .content-formatted .custom-btn:not(.custom-btn-disabled), .common-page .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled),
+.blog-page .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled),
+.post-page .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled) {
   color: var(--content-button-color);
   background-color: var(--content-button-background-color);
   border-color: var(--content-button-color);
 }
 
-.content-formatted .custom-btn:hover {
+.content-formatted .custom-btn:hover, .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:hover {
   font-style: var(--content-button-hover-font-style);
   font-weight: var(--content-button-hover-font-weight);
   -webkit-text-decoration: var(--content-button-hover-text-decoration);
@@ -323,42 +325,48 @@ body {
 
 .common-page .content-formatted .custom-btn:hover:not(.custom-btn-disabled),
 .blog-page .content-formatted .custom-btn:hover:not(.custom-btn-disabled),
-.post-page .content-formatted .custom-btn:hover:not(.custom-btn-disabled) {
+.post-page .content-formatted .custom-btn:hover:not(.custom-btn-disabled), .common-page .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:hover:not(.custom-btn-disabled),
+.blog-page .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:hover:not(.custom-btn-disabled),
+.post-page .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:hover:not(.custom-btn-disabled) {
   color: var(--content-button-hover-color);
   background-color: var(--content-button-hover-background-color);
   border-color: var(--content-button-hover-color);
 }
 
-.front-page .dark-background .content-formatted .custom-btn:not(.custom-btn-disabled):hover {
+.front-page .dark-background .content-formatted .custom-btn:not(.custom-btn-disabled):hover, .front-page .dark-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled):hover {
   color: var(--main-color-front);
   border-color: var(--main-color-front);
 }
 
-.front-page .dark-background .content-formatted .custom-btn:not(.custom-btn-disabled):hover {
+.front-page .dark-background .content-formatted .custom-btn:not(.custom-btn-disabled):hover, .front-page .dark-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled):hover {
   color: var(--secondary-color-front);
   background-color: var(--main-color-front);
 }
 
 .common-page .dark-background .content-formatted .custom-btn:not(.custom-btn-disabled),
 .blog-page .dark-background .content-formatted .custom-btn:not(.custom-btn-disabled),
-.post-page .dark-background .content-formatted .custom-btn:not(.custom-btn-disabled) {
+.post-page .dark-background .content-formatted .custom-btn:not(.custom-btn-disabled), .common-page .dark-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled),
+.blog-page .dark-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled),
+.post-page .dark-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled) {
   border-color: var(--main-color-front);
   color: var(--main-color-front);
 }
 
-.front-page .light-background .content-formatted .custom-btn:not(.custom-btn-disabled) {
+.front-page .light-background .content-formatted .custom-btn:not(.custom-btn-disabled), .front-page .light-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled) {
   color: var(--secondary-color-front);
   border-color: var(--secondary-color-front);
 }
 
-.front-page .light-background .content-formatted .custom-btn:not(.custom-btn-disabled):hover {
+.front-page .light-background .content-formatted .custom-btn:not(.custom-btn-disabled):hover, .front-page .light-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled):hover {
   color: var(--main-color-front);
   background-color: var(--secondary-color-front);
 }
 
 .common-page .light-background .content-formatted .custom-btn:not(.custom-btn-disabled),
 .blog-page .light-background .content-formatted .custom-btn:not(.custom-btn-disabled),
-.post-page .light-background .content-formatted .custom-btn:not(.custom-btn-disabled) {
+.post-page .light-background .content-formatted .custom-btn:not(.custom-btn-disabled), .common-page .light-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled),
+.blog-page .light-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled),
+.post-page .light-background .content-formatted .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-btn-wrap .edy-product-widget-item-btn:not(.custom-btn-disabled) {
   border-color: var(--secondary-color-front);
   color: var(--secondary-color-front);
 }
@@ -454,3 +462,65 @@ body {
   -webkit-text-decoration: var(--product-price-font-text-decoration);
           text-decoration: var(--product-price-font-text-decoration);
 }
+
+.dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-title,
+.dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-link {
+  color: var(--main-color-front);
+}
+
+.dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-price,
+.dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-description {
+  color: var(--main-color-front);
+  opacity: .7;
+}
+
+.dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-top-outer .edy-product-widget-item-top.edy-product-widget-item-without-image {
+  border: 1px solid var(--main-color-front);
+  opacity: .5;
+}
+
+.dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-flex-wrap .edy-product-widget-item-out-of-stock,
+.dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-flex-wrap .edy-product-widget-item-btn {
+  color: var(--main-color-front);
+}
+
+.dark-background .edy-product-widget-grid .edy-product-widget-item:hover .edy-product-widget-item-price {
+  opacity: 0;
+}
+
+.dark-background .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-header .edy-product-widget-item-title .edy-product-widget-item-link {
+  color: var(--main-color-front);
+}
+
+.dark-background .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-header .edy-product-widget-item-price {
+  color: var(--main-color-front);
+  opacity: .7;
+}
+
+.dark-background .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-header .edy-product-widget-item-out-of-stock {
+  color: var(--main-color-front);
+}
+
+.dark-background .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-description {
+  color: var(--main-color-front);
+}
+
+.dark-background .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-without-image {
+  border: 1px solid var(--main-color-front);
+  opacity: .5;
+}
+
+.edy-product-widget-filter-sort option {
+  color: var(--secondary-color-content);
+}
+
+.front-page .edy-product-widget-filter-sort option {
+  color: var(--secondary-color-front);
+}
+
+.dark-background .edy-product-widget-filter-name,
+.dark-background .edy-product-widget-filter-sort,
+.dark-background .edy-product-widget-filter-label,
+.dark-background .edy-product-widget-filter-search-input {
+  color: var(--main-color-front);
+}

components/template-meta.tpl

@@ -1,14 +1,23 @@
 {% comment %}TEMPLATE META DATA{% endcomment %}
 {% comment %}https://developers.facebook.com/tools/debug - Debug after each modification{% endcomment %}
 {% if site.data.fb_admin %}<meta property="fb:admins" content="{{ site.data.fb_admin }}">{% endif %}
+
+{%- if article -%}
+  {%- assign og_obj = article -%}
+{%- elsif product -%}
+  {%- assign og_obj = product -%}
+{%- else -%}
+  {%- assign og_obj = page -%}
+{%- endif -%}
+
 <meta property="og:type" content="{% if article %}article{% else %}website{% endif %}">
-<meta property="og:url" content="{{ site.url }}{% if article %}{{ article.url | remove_first:'/' }}{% else %}{{ page.url | remove_first:'/' }}{% endif %}">
+<meta property="og:url" content="{{ site.url }}{{ og_obj.url | remove_first:'/' }}">
 <meta property="og:title" content="{% title %}">
 <meta property="og:site_name" content="{{ page.site_title | escape }}">
 
 {% comment %}Open Graph image{% endcomment %}
 {% if page.image == nil and front_page %}
-  {% if main_bg_image_sizes != nil and main_bg_image_sizes != '' %}
+  {% if main_bg_image_sizes != blank %}
     {% for size in main_bg_image_sizes reversed %}
       {% if size.width <= 1280 %}
         {% assign og_image = size %}
@@ -18,12 +27,8 @@
     {% endfor %}
   {% endif %}
 {% else %}
-  {% if article %}
-    {% if article.image? %}
-      {% assign og_image = article.image.for-width-1200 %}
-    {% endif %}
-  {% elsif page.image? %}
-    {% assign og_image = page.image.for-width-1200 %}
+  {% if og_obj.image? %}
+    {% assign og_image = og_obj.image.for-width-1200 %}
   {% endif %}
 {% endif %}
 
@@ -36,16 +41,10 @@
 {% endif %}
 
 {% comment %}Open Graph description{% endcomment %}
-{% if article %}
-  {% assign description = article.description %}
-{% else %}
-  {% assign description = page.description %}
-{% endif %}
-
-{% if description != nil and description != '' %}
-  <meta property="og:description" content="{{ description | escape }}">
-  <meta name="description" content="{{ description | escape }}">
-{% endif %}
+{%- if og_obj.description != blank -%}
+  <meta property="og:description" content="{{ og_obj.description | strip_html | escape_once }}">
+  <meta name="description" content="{{ og_obj.description | strip_html | escape_once }}">
+{%- endif -%}
 
 {% comment %}SEO pagination for blog articles.{% endcomment %}
 {% if article %}

components/template-settings-json.tpl

@@ -0,0 +1,3 @@
+{
+  "version": "zurich-2.4.1"
+}

components/template-settings.tpl

@@ -0,0 +1,5 @@
+{%- capture template_settings_json -%}
+  {% include 'template-settings-json' %}
+{%- endcapture -%}
+
+{%- assign template_settings = template_settings_json | replace: 'PREFIX', 'zurich' | json_parse -%}

layouts/auto_generated_product.tpl

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
-{% include "edicy-tools-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
+{%- include "edicy-tools-variables" -%}
 
 {%- if product.image == blank -%}
   {%- assign product_image_state = "without-image" -%}
@@ -47,7 +48,7 @@
                     {%- if product.image != blank- %}
                       <div class="top-inner aspect-ratio-inner">
                         {%- assign image_class = "item-image not-cropped" -%}
-                        {% image product.image target_width: "1280" class: image_class loading: "lazy" %}
+                        {% image product.image target_width: "600" class: image_class loading: "lazy" %}
                       </div>
                     {%- endif -%}
                   </div>

layouts/blog___news.tpl

@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-{% include "edicy-tools-variables" %}
-{% include "blog-article-variables" %}
-{% include "template-variables" %}
+{%- include "template-settings" -%}
+{%- include "edicy-tools-variables" -%}
+{%- include "blog-article-variables" -%}
+{%- include "template-variables" -%}
 
 <html class="{% if editmode %}editmode{% else %}public{% endif %} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">

layouts/blog_article.tpl

@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-{% include "edicy-tools-variables" %}
-{% include "blog-article-variables" %}
-{% include "template-variables" %}
+{%- include "template-settings" -%}
+{%- include "edicy-tools-variables" -%}
+{%- include "blog-article-variables" -%}
+{%- include "template-variables" -%}
 
 <html class="{% if editmode %}editmode{% else %}public{% endif %} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">

layouts/common_page.tpl

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-{% include "edicy-tools-variables" %}
-{% include "template-variables" %}
+{%- include "template-settings" -%}
+{%- include "edicy-tools-variables" -%}
+{%- include "template-variables" -%}
 
 <html class="{% if editmode %}editmode{% else %}public{% endif %} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">

layouts/common_page_two_column.tpl

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-{% include "edicy-tools-variables" %}
-{% include "template-variables" %}
+{%- include "template-settings" -%}
+{%- include "edicy-tools-variables" -%}
+{%- include "template-variables" -%}
 
 <html class="{% if editmode %}editmode{% else %}public{% endif %} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">

layouts/front_page.tpl

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-{% assign front_page = true %}
-{% include "edicy-tools-variables" %}
+{%- include "template-settings" -%}
+{%- assign front_page = true -%}
+{%- include "edicy-tools-variables" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% include "html-head" front_page: true %}

layouts/product.tpl

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
-{% include "edicy-tools-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
+{%- include "edicy-tools-variables" -%}
 
 {% unless page.image %}
   {% assign page_image_state = "without-image" %}

layouts/product_list.tpl

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
-{% include "edicy-tools-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
+{%- include "edicy-tools-variables" -%}
 
 <html class="{% if editmode %}editmode{% else %}public{% endif %} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">