Merge pull request #125 from Voog/124_improve_autorendered_pages

Improve auto-rendered product pages
Voog · Mar 10, 2022 · 17da8ef · 17da8ef
2 parents 2462a53 + 2efaa11
commit 17da8ef
Show file tree

Hide file tree

Showing 20 changed files with 237 additions and 42 deletions.
diff --git a/components/html-head.tpl b/components/html-head.tpl
@@ -16,9 +16,11 @@
 {% if site.data.touch_icon %}<link rel="apple-touch-icon" href="{{ site.data.touch_icon }}">{% endif %}
 
 {% comment %}STYLESHEETS{% endcomment %}
-{% stylesheet_link "main.min.css?v=bern-2.3.1" %}
-{% if editmode %}{% stylesheet_link "editmode.min.css?v=bern-2.3.1" %}{% endif %}
-<!--[if lt IE 9]>{% stylesheet_link "ie8.min.css?v=bern-2.3.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 %}
+<!--[if lt IE 9]><link href="{{ stylesheets_path }}/ie8.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">

diff --git a/components/javascripts.tpl b/components/javascripts.tpl
@@ -3,11 +3,11 @@
 <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?v=bern-2.3.1"></script>
+<script src="{{ javascripts_path }}/application.min.js?v={{ template_settings.version }}"></script>
 {% sitejs_include %}
 
 {%- if editmode -%}
-  <script src="{{ javascripts_path }}/editmode.min.js?v=bern-2.3.1"></script>
+  <script src="{{ javascripts_path }}/editmode.min.js?v={{ template_settings.version }}"></script>
 {%- endif -%}
 
 {% comment %}Site search related javascript components.{% endcomment %}

diff --git a/components/template-cs-style-rules.tpl b/components/template-cs-style-rules.tpl
@@ -210,7 +210,8 @@ body {
   border-top-style: var(--table-border-style);
   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) - 13px) calc(var(--content-button-padding) - 10px);
   font-size: var(--content-button-font-size);
   font-style: var(--content-button-font-style);
@@ -222,27 +223,32 @@ body {
   -webkit-box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba(0, 0, 0, 0.1);
           box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba(0, 0, 0, 0.1);
 }
-.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);
           text-decoration: var(--content-button-hover-text-decoration);
   text-transform: var(--content-button-hover-text-transform);
   border-color: var(--content-button-hover-color);
 }
-.content-formatted .custom-btn:not(.custom-btn-disabled) {
+.content-formatted .custom-btn:not(.custom-btn-disabled),
+.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);
 }
-.content-formatted .custom-btn:not(.custom-btn-disabled):hover {
+.content-formatted .custom-btn:not(.custom-btn-disabled):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:not(.custom-btn-disabled):hover {
   color: var(--content-button-hover-color);
   background-color: var(--content-button-hover-background-color);
 }
-.dark-background .content-formatted .custom-btn {
+.dark-background .content-formatted .custom-btn,
+.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 {
   -webkit-box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba(0, 0, 0, 0.1);
           box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba(0, 0, 0, 0.1);
 }
-.light-background .content-formatted .custom-btn {
+.light-background .content-formatted .custom-btn,
+.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 {
   -webkit-box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba(0, 0, 0, 0.2);
           box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba(0, 0, 0, 0.2);
 }
@@ -340,4 +346,54 @@ body {
   -webkit-text-decoration: var(--content-area-product-title__text-decoration);
           text-decoration: var(--content-area-product-title__text-decoration);
   text-align: var(--content-area-product-title__alignment);
+}
+
+.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(--third-color);
+}
+.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(--third-color);
+  opacity: 0.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(--third-color);
+  opacity: 0.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(--third-color);
+}
+.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(--third-color);
+}
+.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(--third-color);
+  opacity: 0.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(--third-color);
+}
+.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(--third-color);
+}
+.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(--third-color);
+  opacity: 0.5;
+}
+
+.edy-product-widget-filter-sort option {
+  color: var(--secondary-color-content);
+}
+
+.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(--fourth-color);
 }
diff --git a/components/template-meta.tpl b/components/template-meta.tpl
@@ -1,16 +1,25 @@
 {% 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 fallback_cover_image != nil and fallback_cover_image != '' and front_page_content_cover_image_sizes == nil %}
+  {% if fallback_cover_image != blank and front_page_content_cover_image_sizes == nil %}
     {% assign og_image = fallback_cover_image %}
-  {% elsif front_page_content_cover_image_sizes != nil and front_page_content_cover_image_sizes != '' %}
+  {% elsif front_page_content_cover_image_sizes != blank %}
     {% for size in front_page_content_cover_image_sizes reversed %}
       {% if size.width <= 1280 %}
         {% assign og_image = size %}
@@ -20,12 +29,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 %}
 
@@ -38,16 +43,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 %}

diff --git a/components/template-settings-json.tpl b/components/template-settings-json.tpl
@@ -0,0 +1,3 @@
+{
+  "version": "bern-2.3.1"
+}
diff --git a/components/template-settings.tpl b/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', 'bern' | json_parse -%}
diff --git a/layouts/auto_generated_product.tpl b/layouts/auto_generated_product.tpl
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+{%- include "template-settings" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% include "edicy-tools-variables" %}
@@ -46,7 +47,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>

diff --git a/layouts/blog___news.tpl b/layouts/blog___news.tpl
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-{% include "blog-article-variables" %}
+{%- include "template-settings" -%}
+{%- include "blog-article-variables" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% include "edicy-tools-variables" %}

diff --git a/layouts/blog_article.tpl b/layouts/blog_article.tpl
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-{% include "blog-article-variables" %}
+{%- include "template-settings" -%}
+{%- include "blog-article-variables" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% include "edicy-tools-variables" %}

diff --git a/layouts/common_page.tpl b/layouts/common_page.tpl
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+{%- include "template-settings" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% include "edicy-tools-variables" %}

diff --git a/layouts/common_page_two_column.tpl b/layouts/common_page_two_column.tpl
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+{%- include "template-settings" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% include "edicy-tools-variables" %}

diff --git a/layouts/front_page.tpl b/layouts/front_page.tpl
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+{%- include "template-settings" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% assign front_page = true %}

diff --git a/layouts/product.tpl b/layouts/product.tpl
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+{%- include "template-settings" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% include "edicy-tools-variables" %}

diff --git a/layouts/product_list.tpl b/layouts/product_list.tpl
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+{%- include "template-settings" -%}
 <html class="{% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% include "edicy-tools-variables" %}

diff --git a/manifest.json b/manifest.json
@@ -292,6 +292,20 @@
       "layout_name": "template-meta",
       "title": "template-meta"
     },
+    {
+      "content_type": "component",
+      "component": true,
+      "file": "components/template-settings-json.tpl",
+      "layout_name": "template-settings-json",
+      "title": "template-settings-json"
+    },
+    {
+      "content_type": "component",
+      "component": true,
+      "file": "components/template-settings.tpl",
+      "layout_name": "template-settings",
+      "title": "template-settings"
+    },
     {
       "content_type": "product",
       "component": false,

diff --git a/sources/components/custom-styles/template-cs-style-rules.scss b/sources/components/custom-styles/template-cs-style-rules.scss
@@ -274,7 +274,8 @@ body {
     }
   }
 
-  .custom-btn {
+  .custom-btn,
+  .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) - 13px) calc(var(--content-button-padding) - 10px);
     font-size: var(--content-button-font-size);
     font-style: var(--content-button-font-style);
@@ -423,3 +424,81 @@ body {
     text-align: var(--content-area-product-title__alignment);
   }
 }
+
+.dark-background {
+  .edy-product-widget-grid .edy-product-widget-item {
+    .edy-product-widget-item-details-wrap {
+      .edy-product-widget-item-title,
+      .edy-product-widget-item-link {
+        color: var(--third-color);
+      }
+
+      .edy-product-widget-item-price,
+      .edy-product-widget-item-description {
+        color: var(--third-color);
+        opacity: .7;
+      }
+    }
+
+    .edy-product-widget-item-top-outer .edy-product-widget-item-top.edy-product-widget-item-without-image {
+      border: 1px solid var(--third-color);
+      opacity: .5;
+    }
+
+    .edy-product-widget-item-details-flex-wrap {
+      .edy-product-widget-item-out-of-stock,
+      .edy-product-widget-item-btn {
+        color: var(--third-color);
+      }
+    }
+
+    &: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(--third-color);
+        }
+      }
+
+      .edy-product-widget-item-price {
+        color: var(--third-color);
+        opacity: .7;
+      }
+
+      .edy-product-widget-item-out-of-stock {
+        color: var(--third-color);
+      }
+    }
+
+    .edy-product-widget-item-description {
+      color: var(--third-color);
+    }
+
+    .edy-product-widget-item-without-image {
+      border: 1px solid var(--third-color);
+      opacity: .5;
+    }
+  }
+}
+
+.edy-product-widget-filter-sort option {
+  color: var(--secondary-color-content);
+}
+
+.dark-background {
+  .edy-product-widget-filter-name,
+  .edy-product-widget-filter-sort,
+  .edy-product-widget-filter-label,
+  .edy-product-widget-filter-search-input {
+    color: var(--fourth-color);
+  }
+}
diff --git a/sources/stylesheets/content/_content-formatted.scss b/sources/stylesheets/content/_content-formatted.scss
@@ -183,7 +183,8 @@
     height: auto;
   }
 
-  .custom-btn {
+  .custom-btn,
+  .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 {
     display: inline-block;
     padding: 8px 11px;
     font-size: 14px;