Merge pull request #125 from Voog/124_improve_autorendered_pages

Improve auto-rendered product pages
Voog · Mar 10, 2022 · cec4925 · cec4925
2 parents 66b5b75 + e5ee074
commit cec4925
Show file tree

Hide file tree

Showing 20 changed files with 287 additions and 62 deletions.
diff --git a/components/html-head.tpl b/components/html-head.tpl
@@ -16,7 +16,7 @@
 {% 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=barcelona-2.4.1" %}
+<link href="{{ stylesheets_path }}/main.min.css?v={{ template_settings.version }}" media="screen" rel="stylesheet" type="text/css"/>
 {% if editmode %}<link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.css">{% endif %}
 
 {% comment %}Google fonts for Design Editor{% endcomment %}

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=barcelona-2.4.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=barcelona-2.4.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
@@ -170,13 +170,15 @@ main .post-content a {
   text-transform: var(--h3-text-transform);
 }
 
-.main .formatted .custom-btn {
+.main .formatted .custom-btn, .main
+.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 {
   color: var(--content-button-color);
 }
 
 .formatted .form_submit input,
 .formatted .submit,
-.formatted .custom-btn {
+.formatted .custom-btn,
+.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 {
   color: var(--content-button-color);
   font-family: var(--font-main);
   font-size: var(--content-button-font-size);
@@ -192,7 +194,8 @@ main .post-content a {
 
 .formatted .form_submit input:hover,
 .formatted .submit:hover,
-.formatted .custom-btn:hover {
+.formatted .custom-btn:hover,
+.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-font-style);
   font-weight: var(--content-button-font-weight);
   color: var(--content-button-color);
@@ -203,13 +206,16 @@ main .post-content a {
 
 .formatted .form_submit input,
 .formatted .submit,
-.formatted .custom-btn:not(.custom-btn-disabled) {
+.formatted .custom-btn:not(.custom-btn-disabled),
+.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 {
   background-color: var(--content-button-background-color);
 }
 
 .formatted .form_submit input:hover,
 .formatted .submit:hover,
-.formatted .custom-btn:not(.custom-btn-disabled):hover {
+.formatted .custom-btn:not(.custom-btn-disabled):hover,
+.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 {
+  background-color: var(--content-button-background-color);
   opacity: .7;
 }
 
@@ -453,3 +459,69 @@ label .form_field_radio:checked + .form_control_indicator::before {
 .menu-item.current-page a {
   color: var(--main-color);
 }
+
+.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(--fourth-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(--fourth-color);
+  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(--fourth-color);
+  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(--fourth-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(--fourth-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(--fourth-color);
+  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(--fourth-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(--fourth-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(--fourth-color);
+  opacity: .5;
+}
+
+.edy-product-widget-filters {
+  color: var(--main-color);
+}
+
+.dark-background .edy-product-widget-filters {
+  color: var(--fourth-color);
+}
+
+.edy-product-widget-filter-sort option {
+  color: var(--main-color);
+}
+
+.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,22 +1,31 @@
 {% 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 content_left_bg_image_sizes != nil and content_left_bg_image_sizes != '' %}
+  {% if content_left_bg_image_sizes != blank %}
     {% for size in content_left_bg_image_sizes reversed %}
       {% if size.width <= 1280 %}
         {% assign og_image = size %}
       {% else %}
         {% break %}
       {% endif %}
     {% endfor %}
-  {% elsif content_right_bg_image_sizes != nil and content_right_bg_image_sizes != '' %}
+  {% elsif content_right_bg_image_sizes != blank %}
     {% for size in content_right_bg_image_sizes reversed %}
       {% if size.width <= 1280 %}
         {% assign og_image = size %}
@@ -26,12 +35,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 %}
 
@@ -44,16 +49,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": "barcelona-2.4.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', 'barcelona' | json_parse -%}
diff --git a/layouts/auto_generated_product.tpl b/layouts/auto_generated_product.tpl
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-  {% include "template-variables" %}
+  {%- include "template-settings" -%}
+  {%- include "template-variables" -%}
   <html class="content-page {% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
   <head prefix="og: http://ogp.me/ns#">
     {% include "edicy-tools-variables" %}
@@ -49,7 +50,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,6 +1,7 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
-{% include "blog-article-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
+{%- include "blog-article-variables" -%}
 <html class="blog-list-page height-calculation {% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% assign blog_page = true %}

diff --git a/layouts/blog_article.tpl b/layouts/blog_article.tpl
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
-{% include "blog-article-variables" %}
-{% include "blog-settings-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
+{%- include "blog-article-variables" -%}
+{%- include "blog-settings-variables" -%}
 <html class="content-page {% 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,5 +1,6 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
 <html class="content-page {% 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/feature_page.tpl b/layouts/feature_page.tpl
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
 <html class="front-page height-calculation {% 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/front_page.tpl b/layouts/front_page.tpl
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
-{% include "blog-article-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
+{%- include "blog-article-variables" -%}
 <html class="blog-list-page height-calculation {% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
 <head prefix="og: http://ogp.me/ns#">
   {% assign blog_page = true %}

diff --git a/layouts/product.tpl b/layouts/product.tpl
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-  {% include "template-variables" %}
+  {%- include "template-settings" -%}
+  {%- include "template-variables" -%}
   <html class="content-page {% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
   <head prefix="og: http://ogp.me/ns#">
     {% include "edicy-tools-variables" %}
@@ -72,4 +73,4 @@
     {% include "javascripts" %}
     {% include "edicy-tools" %}
   </body>
-</html>
+</html>
diff --git a/layouts/product_list.tpl b/layouts/product_list.tpl
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-  {% include "template-variables" %}
+  {%- include "template-settings" -%}
+  {%- include "template-variables" -%}
   <html class="content-page {% if editmode %}editmode{% else %}public{% endif %}" lang="{{ page.language_code }}">
   <head prefix="og: http://ogp.me/ns#">
     {% include "edicy-tools-variables" %}
@@ -40,4 +41,4 @@
     {% include "javascripts" %}
     {% include "edicy-tools" %}
   </body>
-</html>
+</html>
diff --git a/manifest.json b/manifest.json
@@ -320,6 +320,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": "component",
       "component": true,