Add bgpicker to auto-rendered product pages

- Include template settings - Adjust auto-gen page colors for dark background
Voog · Mar 8, 2022 · a67707a · a67707a
1 parent a491afd
commit a67707a
Show file tree

Hide file tree

Showing 21 changed files with 145 additions and 23 deletions.
diff --git a/components/html-head.tpl b/components/html-head.tpl
@@ -17,7 +17,7 @@
 {% if editmode %}
   <link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.css">
 {% endif %}
-{% stylesheet_link "main.min.css?v=dorpat-1.1.1" %}
+<link href="{{ stylesheets_path }}/main.min.css?v={{ template_settings.version }}" media="screen" rel="stylesheet" type="text/css"/>
 
 {% 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:300,300i,400,400i,500,500i,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/site-header.tpl b/components/site-header.tpl
@@ -55,7 +55,15 @@
             <button class="type-btn js-type-btn{% if photo_article %} is-active{% endif %}" data-article-type="photo-article">Photo</button>
           </div>
         {% else %}
-          <button class="voog-bg-picker-btn js-background-settings" data-bg-key="header_bg" data-bg-picture-boolean="true" data-bg-default-image-color="{% if front_page %}rgb(142, 156, 169){% else %}rgb(41, 42, 39){% endif %}" data-target-width="600" data-bg-image="{{ header_bg_image }}" data-bg-image-sizes="{{ header_bg_image_sizes_str | escape }}" data-bg-color="{{ header_bg_color }}" data-bg-color-data="{{ header_bg_color_data_str | escape }}"></button>
+          <button class="voog-bg-picker-btn js-background-settings" 
+            data-bg-key="{% if product_page %}{{ header_bg_key }}{% else %}header_bg{% endif %}"
+            data-bg-picture-boolean="true" 
+            data-bg-default-image-color="{% if front_page %}rgb(142, 156, 169){% else %}rgb(41, 42, 39){% endif %}" 
+            data-target-width="600" data-bg-image="{{ header_bg_image }}" 
+            data-bg-image-sizes="{{ header_bg_image_sizes_str | escape }}" 
+            data-bg-color="{{ header_bg_color | escape_once }}" 
+            data-bg-color-data="{{ header_bg_color_data_str | escape }}">
+          </button>
         {% endif %}
       {% endif %}
 

diff --git a/components/site-javascripts.tpl b/components/site-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 }}/main.min.js?v=dorpat-1.1.1"></script>
+<script src="{{ javascripts_path }}/main.min.js?v={{ template_settings.version }}"></script>
 {% sitejs_include %}
 
 {% comment %}Site search related javascript components.{% endcomment %}

diff --git a/components/template-cs-style-rules.tpl b/components/template-cs-style-rules.tpl
@@ -738,6 +738,11 @@ body {
           text-decoration: var(--content-area-product-title__text-decoration);
   text-transform: var(--content-area-product-title__text-transform);
 }
+.dark-background .product-content .product-price,
+.dark-background .product-content .product-description,
+.dark-background .product-content .content-item-title h1 {
+  color: var(--third-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 {

diff --git a/components/template-settings-json.tpl b/components/template-settings-json.tpl
@@ -0,0 +1,13 @@
+{
+  "product": {
+    "body_bg": {
+      "key": "PREFIX_product_body_bg",
+      "value": {}
+    },
+    "header_bg": {
+      "key": "PREFIX_product_header_bg",
+      "value": {}
+    }
+  },
+  "version": "dorpat-1.1.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', 'dorpat' | json_parse -%}
diff --git a/components/template-styles.tpl b/components/template-styles.tpl
@@ -173,6 +173,13 @@
   }
   {% endif %}
 
+  {% comment %}/* Product page content area background*/ {% endcomment %}
+  {% if product_body_bg_color != blank %}
+  .product-page .page-body .background-color {
+    background-color: {{ product_body_bg_color }}
+  }
+  {% endif %}
+
   {% comment %}/* FOOTER BACKGROUND */{% endcomment %}
   {% comment %}/* Front page content area 1 background color style. */{% endcomment %}
   {% if footer_bg_color != blank %}

diff --git a/components/template-tools.tpl b/components/template-tools.tpl
@@ -18,6 +18,8 @@
     //==========================================================================
     {% if front_page %}
       pageType = 'frontPage';
+    {% elsif product_page %}
+      pageType = 'productPage';
     {% else %}
       {% if blog_article_page %}
         pageType = 'articlePage';

diff --git a/components/template-variables.tpl b/components/template-variables.tpl
@@ -86,15 +86,21 @@
 
   {% comment %}SITE HEADER RELATED VARIABLES.{% endcomment %}
   {% comment %}Assign variables based on page type.{% endcomment %}
-  {% assign header_bg = page.data.header_bg %}
+  {% if product_page == true %}
+    {% assign header_bg_key = template_settings.product.header_bg.key %}
+    {% assign header_bg = site.data[header_bg_key] %}
+  {% else %}
+    {% assign header_bg = page.data.header_bg %}
+  {% endif %}
+
   {% assign header_bg_image = header_bg.image %}
   {% assign header_bg_image_sizes = header_bg.imageSizes %}
   {% assign header_bg_color = header_bg.color %}
   {% assign header_bg_color_data = header_bg.colorData %}
   {% assign header_bg_combined_lightness = header_bg.combinedLightness %}
 
   {% comment %}Sets the background type to choose active CMS color scheme.{% endcomment %}
-  {% if header_bg %}
+  {% if header_bg != blank%}
     {% if header_bg_combined_lightness %}
       {% if header_bg_combined_lightness > 0.6 %}
         {% assign header_bg_type = "light-background" %}
@@ -301,6 +307,41 @@
     {% assign content_bg_2_color_data_str = content_bg_2_color_data | json %}
   {% endif %}
 
+  {% comment %}AUTO-RENDERED PRODUCT PAGE BACKGROUND VARIABLES{% endcomment %}
+  {% assign product_body_bg_key = template_settings.product.body_bg.key %}
+
+  {% assign product_body_bg = site.data[product_body_bg_key] %}
+  {% assign product_body_bg_color = product_body_bg.color %}
+  {% assign product_body_bg_color_data = product_body_bg.colorData %}
+  {% assign product_body_bg_combined_lightness = product_body_bg.combinedLightness %}
+
+  {% if product_body_bg != blank %}
+    {% if product_body_bg_combined_lightness %}
+      {% if product_body_bg_combined_lightness > 0.6 %}
+        {% assign product_body_bg_type = "light-background" %}
+      {% else %}
+        {% assign product_body_bg_type = "dark-background" %}
+      {% endif %}
+    {% else %}
+      {% if product_body_bg_color_data.a >= 0.6 %}
+        {% if product_body_bg_color_data.lightness >= 0.6 %}
+          {% assign product_body_bg_type = "light-background" %}
+        {% else %}
+          {% assign product_body_bg_type = "dark-background" %}
+        {% endif %}
+      {% else %}
+        {% assign product_body_bg_type = "light-background" %}
+      {% endif %}
+    {% endif %}
+  {% else %}
+    {% assign product_body_bg_type = "light-background" %}
+  {% endif %}
+
+  {% if product_body_bg_color_data == nil %}
+    {% assign product_body_bg_color_data_str = "" %}
+  {% else %}
+    {% assign product_body_bg_color_data_str = product_body_bg_color_data | json %}
+  {% endif %}
 
   {% comment %}SITE MAIN CONTENT AREA RELATED VARIABLES.{% endcomment %}
   {% comment %}Assign variables based on page type.{% endcomment %}

diff --git a/javascripts/main.js b/javascripts/main.js
@@ -441,7 +441,7 @@
         Edicy.articles.currentArticle.setData(dataBgKey, commitData);
       }
     } else {
-      if (pageType === 'contentPage' && (dataBgKey === 'footer_bg') || (dataBgKey === 'body_bg')) {
+      if (pageType === 'contentPage' && (dataBgKey === 'footer_bg') || (dataBgKey === 'body_bg') || pageType === 'productPage') {
         siteData.set(dataBgKey, commitData);
       } else {
         pageData.set(dataBgKey, commitData);

diff --git a/javascripts/main.min.js b/javascripts/main.min.js
diff --git a/layouts/auto_generated_product.tpl b/layouts/auto_generated_product.tpl
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
-{% include "template-variables" %}
+{%- assign product_page = true -%}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
 
 <html class="{{ view_mode }} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}" data-view-state="{{ view_mode }}">
 <head prefix="og: http://ogp.me/ns#">
@@ -25,16 +27,27 @@
 
 {% assign gallery_content_size = gallery_content_html | strip | size %}
 
-<body class="{% if sidebar_active %}common-page sidebar-active{% else %}sidebar-inactive{% endif %} item-page{% if site.data.has_header_bg_color %} header-top-with-bg{% endif %}">
+<body class="product-page {% if sidebar_active %}common-page sidebar-active{% else %}sidebar-inactive{% endif %} item-page{% if site.data.has_header_bg_color %} header-top-with-bg{% endif %}">
   {% include "template-svg-spritesheet" %}
 
   <div class="site-container">
 
     {% include "site-header" %}
     {% include "common-page-variables" %}
 
-    <div class="page-body">
-      <div class="js-background-type {{ body_bg_type }}">
+    <div class="page-body js-bg-picker-area">
+      <div class="js-background-type {{ product_body_bg_type }}">
+        {% if editmode %}
+           <button class="voog-bg-picker-btn js-background-settings" 
+            data-bg-key="{{ product_body_bg_key }}" 
+            data-bg-picture-boolean="false" 
+            data-bg-default-image-color="rgb(255, 255, 255)" 
+            data-bg-color="{{ product_body_bg_color }}" 
+            data-bg-color-data="{{ product_body_bg_color_data_str | escape }}">
+          </button>
+        {% endif %}
+        <div class="background-color js-background-color"></div>
+
         <main class="page-content" role="main">
           <div class="main-inner-row content-full">
             <div class="main-content top-row">
@@ -121,7 +134,7 @@
   {% include "menu-mobile" %}
   {% include "site-signout" %}
   {% include "site-javascripts" %}
-  {% include "template-tools" with "item_list_page" %}
+  {% include "template-tools" with "product_page" %}
 
   <script>
     if (site) {

diff --git a/layouts/blog___news.tpl b/layouts/blog___news.tpl
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-{% assign blog_page = true %}
-{% include "template-variables" %}
-{% include "blog-article-variables" %}
+{%- assign blog_page = true -%}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
+{%- include "blog-article-variables" -%}
 <html class="{{ view_mode }} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
   <head prefix="og: http://ogp.me/ns#">
     {% include "html-head" %}

diff --git a/layouts/blog_article.tpl b/layouts/blog_article.tpl
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 {% assign blog_article_page = true %}
-{% 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="{{ view_mode }} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}{% unless comment.valid? %} comments-open js-calculate-comments-height{% endunless %}" lang="{{ page.language_code }}">
   <head prefix="og: http://ogp.me/ns#">
     {% include "html-head" %}

diff --git a/layouts/common_page.tpl b/layouts/common_page.tpl
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 {% assign common_page = true %}
-{% include "template-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
 <html class="{{ view_mode }} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
   <head prefix="og: http://ogp.me/ns#">
     {% include "html-head" sidebar: true %}

diff --git a/layouts/front_page.tpl b/layouts/front_page.tpl
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 {% assign front_page = true %}
-{% include "template-variables" %}
+{%- include "template-settings" -%}
+{%- include "template-variables" -%}
 <html class="{{ view_mode }} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
   <head prefix="og: http://ogp.me/ns#">
     {% include "html-head" %}

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" -%}
 
 {% unless page.image %}
   {% assign page_image_state = "without-image" %}

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="{{ view_mode }} {{ language_flags_mode }} {{ language_names_mode }} {{ language_menu_mode }}" lang="{{ page.language_code }}">
   <head prefix="og: http://ogp.me/ns#">
     {% assign item_list_page = true %}

diff --git a/manifest.json b/manifest.json
@@ -313,6 +313,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,

diff --git a/sources/components/custom-styles/template-cs-style-rules.scss b/sources/components/custom-styles/template-cs-style-rules.scss
@@ -987,6 +987,14 @@ body {
     text-decoration: var(--content-area-product-title__text-decoration);
     text-transform: var(--content-area-product-title__text-transform);
   }
+
+  .dark-background & {
+    .product-price,
+    .product-description,
+    .content-item-title h1 {
+      color: var(--third-color);
+    }
+  }
 }
 
 .dark-background {

diff --git a/sources/javascripts/concat/base.js b/sources/javascripts/concat/base.js
@@ -386,7 +386,7 @@
         Edicy.articles.currentArticle.setData(dataBgKey, commitData);
       }
     } else {
-      if (pageType === 'contentPage' && (dataBgKey === 'footer_bg') || (dataBgKey === 'body_bg')) {
+      if (pageType === 'contentPage' && (dataBgKey === 'footer_bg') || (dataBgKey === 'body_bg') || pageType === 'productPage') {
         siteData.set(dataBgKey, commitData);
       } else {
         pageData.set(dataBgKey, commitData);