Merge pull request #123 from Voog/feature/122_autogenerated_product_l…

…ayout Add auto-generated product layout (#123)
Voog · Feb 10, 2022 · b9d345b · b9d345b
2 parents e6e2913 + 4acdc0f
commit b9d345b
Show file tree

Hide file tree

Showing 25 changed files with 1,004 additions and 6,463 deletions.
diff --git a/components/buy-button.tpl b/components/buy-button.tpl
@@ -0,0 +1,55 @@
+{%- capture _button_attributes %}
+  data-product-id="{{ product.id }}"
+  data-product="{{ product | json | escape }}"
+  data-settings="{&quot;title&quot;:&quot;{{ "add_to_cart" | lc | escape_once }}&quot;}"
+{% endcapture -%}
+
+{% if editmode != true and product.available? == false %}
+  <div class="edy-buy-button-container edy-buy-button-view">
+    <div class="form_field">
+      <div class="edy-buy-button custom-btn custom-btn-disabled edy-buy-button-disabled">
+        <span class="edy-buy-button-title">{{ 'ecommerce.buy_button.currently_unavailable' | lc }}</span>
+      </div>
+    </div>
+  </div>
+{% elsif product.uses_variants %}
+  <div class="edy-buy-button-container edy-buy-button-view" {{ _button_attributes }}>
+    <div class="edy-buy-button-variants">
+      {% for variant_type in product.variant_types %}
+        <div class="form_field" data-variation-id="{{ variant_type.id }}">
+          <label class="form_field_label">{{ variant_type.name | escape_once }}</label>
+          <select class="form_field_select" data-variation-attribute-id="{{ variant_type.id }}">
+            <option value="">---</option>
+            {%- for variant_value in variant_type.variant_values %}
+              <option value="{{ variant_value.id }}">{{ variant_value.name | escape_once }}</option>
+            {%- endfor %}
+          </select>
+        </div>
+      {% endfor %}
+    </div>
+    <div class="form_field">
+      <div class="edy-buy-button custom-btn custom-btn-disabled edy-buy-button-disabled">
+        {%- if product.out_of_stock? %}
+          <span class="edy-buy-button-title">{{ 'out_of_stock' | lc | escape_once }}</span>
+        {% else %}
+          <span class="edy-buy-button-title">{{ 'add_to_cart' | lc | escape_once }}</span>
+        {% endif -%}
+      </div>
+    </div>
+  </div>
+{% else %}
+  {% if editmode or product.out_of_stock? %}
+    {% assign buy_button_classes = "custom-btn-disabled edy-buy-button-disabled" %}
+  {% endif %}
+  <div class="edy-buy-button-container edy-buy-button-view">
+    <div class="form_field">
+      <div class="edy-buy-button custom-btn {{ buy_button_classes }}" {{ _button_attributes }}>
+        {% if product.out_of_stock? %}
+          <span class="edy-buy-button-title">{{ 'out_of_stock' | lc | escape_once }}</span>
+        {% else %}
+          <span class="edy-buy-button-title">{{ 'add_to_cart' | lc | escape_once }}</span>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+{% endif %}
diff --git a/components/html-head.tpl b/components/html-head.tpl
@@ -40,7 +40,10 @@
 {% include "template-meta" %}
 
 {% comment %}BREADCRUMBS{% endcomment %}
-{% sd_breadcrumbs %}
+{%- capture breadcrumbsScript -%}
+  {%- sd_breadcrumbs -%}
+{%- endcapture -%}
+{{ breadcrumbsScript }}
 
 {% if blog %}{{ blog.rss_link }}{% endif %}
 {{ site.stats_header }}
diff --git a/components/menu-breadcrumbs-sd.tpl b/components/menu-breadcrumbs-sd.tpl
@@ -0,0 +1,14 @@
+{%- 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" data-search-indexing-allowed="false">
+  {%- for listItem in breadcrumbsObj.itemListElement %}
+    {%- assign pageUrl = page.url | remove_first: "/" -%}
+
+    <li class="menu-item">
+      <a class="{% if forloop.index > 1 %}with_arrow{% endif %} menu-link" href="/{{ listItem.item.id }}">
+        {{ listItem.item.name }}
+      </a>
+    </li>
+  {% endfor -%}
+</ul>
diff --git a/components/menu-breadcrumbs.tpl b/components/menu-breadcrumbs.tpl
@@ -1,6 +1,3 @@
-{%- capture breadcrumbsScript -%}
-  {%- sd_breadcrumbs -%}
-{%- endcapture -%}
 {%- assign breadcrumbsString = breadcrumbsScript | replace: '<script type="application/ld+json">', '' | replace: "</script>", '' | replace: site.url, '' | replace: '@', '' -%}
 {%- assign breadcrumbsObj = breadcrumbsString | json_parse -%}
 
@@ -33,4 +30,4 @@
       {% include 'add-page-button' _menuItem: page %}
     </li>
   {%- endif -%}
-</ul>
+</ul>
diff --git a/components/template-cs-content.tpl b/components/template-cs-content.tpl
@@ -162,4 +162,178 @@
     "scope": "global"
   */
   --content-link-hover-color: rgba(0, 102, 187, 0.8);
+  /* VoogStyle
+    "pathI18n": ["product", "title"],
+    "titleI18n": "size",
+    "editor": "rangePicker",
+    "min": 8,
+    "max": 100,
+    "unit": "px",
+    "scope": "global"
+  */
+  --content-area-product-title__font-size: 50px;
+  /* VoogStyle
+    "pathI18n": ["product", "title"],
+    "titleI18n": "font_size",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "700",
+      "off": "400"
+    },
+    "icon": "bold",
+    "scope": "global"
+  */
+  --content-area-product-title__font-weight: 700;
+  /* VoogStyle
+    "pathI18n": ["product", "title"],
+    "titleI18n": "font_style",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "italic",
+      "off": "normal"
+    },
+    "icon": "italic",
+    "scope": "global"
+  */
+  --content-area-product-title__font-style: normal;
+  /* VoogStyle
+    "pathI18n": ["product", "title"],
+    "titleI18n": "text_decoration",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "underline",
+      "off": "none"
+    },
+    "icon": "underline",
+    "scope": "global"
+  */
+  --content-area-product-title__text-decoration: none;
+  /* VoogStyle
+    "pathI18n": ["product", "title"],
+    "titleI18n": "color",
+    "type": "button",
+    "editor": "colorPicker",
+    "featured": true,
+    "scope": "global"
+  */
+  --content-area-product-title__color: #1b2124;
+  /* VoogStyle
+    "pathI18n": ["product", "price"],
+    "titleI18n": "size",
+    "editor": "rangePicker",
+    "min": 8,
+    "max": 100,
+    "unit": "px",
+    "scope": "global"
+  */
+  --content-area-product-price__font-size: 24px;
+  /* VoogStyle
+    "pathI18n": ["product", "price"],
+    "titleI18n": "font_size",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "700",
+      "off": "400"
+    },
+    "icon": "bold",
+    "scope": "global"
+  */
+  --content-area-product-price__font-weight: 700;
+  /* VoogStyle
+    "pathI18n": ["product", "price"],
+    "titleI18n": "font_style",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "italic",
+      "off": "normal"
+    },
+    "icon": "italic",
+    "scope": "global"
+  */
+  --content-area-product-price__font-style: normal;
+  /* VoogStyle
+    "pathI18n": ["product", "price"],
+    "titleI18n": "text_decoration",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "underline",
+      "off": "none"
+    },
+    "icon": "underline",
+    "scope": "global"
+  */
+  --content-area-product-price__text-decoration: none;
+  /* VoogStyle
+    "pathI18n": ["product", "price"],
+    "titleI18n": "color",
+    "type": "button",
+    "editor": "colorPicker",
+    "featured": true,
+    "scope": "global"
+  */
+  --content-area-product-price__color: #000;
+  /* VoogStyle
+    "pathI18n": ["product", "description"],
+    "titleI18n": "size",
+    "editor": "rangePicker",
+    "min": 8,
+    "max": 100,
+    "unit": "px",
+    "scope": "global"
+  */
+  --content-area-product-description__font-size: 18px;
+  /* VoogStyle
+    "pathI18n": ["product", "description"],
+    "titleI18n": "font_size",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "700",
+      "off": "400"
+    },
+    "icon": "bold",
+    "scope": "global"
+  */
+  --content-area-product-description__font-weight: 400;
+  /* VoogStyle
+    "pathI18n": ["product", "description"],
+    "titleI18n": "font_style",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "italic",
+      "off": "normal"
+    },
+    "icon": "italic",
+    "scope": "global"
+  */
+  --content-area-product-description__font-style: normal;
+  /* VoogStyle
+    "pathI18n": ["product", "description"],
+    "titleI18n": "text_decoration",
+    "type": "button",
+    "editor": "toggleIcon",
+    "states": {
+      "on": "underline",
+      "off": "none"
+    },
+    "icon": "underline",
+    "scope": "global"
+  */
+  --content-area-product-description__text-decoration: none;
+  /* VoogStyle
+    "pathI18n": ["product", "description"],
+    "titleI18n": "color",
+    "type": "button",
+    "editor": "colorPicker",
+    "featured": true,
+    "scope": "global"
+  */
+  --content-area-product-description__color: rgba(141, 144, 145, 0.6);
 }
diff --git a/components/template-cs-style-rules.tpl b/components/template-cs-style-rules.tpl
@@ -218,3 +218,30 @@ body.dark-background {
           text-decoration: var(--content-link-text-decoration);
   text-transform: var(--content-link-text-transform);
 }
+
+.product-content .product-price {
+  color: var(--content-area-product-price__color);
+  font-size: var(--content-area-product-price__font-size);
+  font-weight: var(--content-area-product-price__font-weight);
+  font-style: var(--content-area-product-price__font-style);
+  -webkit-text-decoration: var(--content-area-product-price__text-decoration);
+          text-decoration: var(--content-area-product-price__text-decoration);
+}
+
+.product-content .product-description {
+  color: var(--content-area-product-description__color);
+  font-size: var(--content-area-product-description__font-size);
+  font-weight: var(--content-area-product-description__font-weight);
+  font-style: var(--content-area-product-description__font-style);
+  -webkit-text-decoration: var(--content-area-product-description__text-decoration);
+          text-decoration: var(--content-area-product-description__text-decoration);
+}
+
+.product-content .content-item-title h1 {
+  color: var(--content-area-product-title__color);
+  font-size: var(--content-area-product-title__font-size);
+  font-weight: var(--content-area-product-title__font-weight);
+  font-style: var(--content-area-product-title__font-style);
+  -webkit-text-decoration: var(--content-area-product-title__text-decoration);
+          text-decoration: var(--content-area-product-title__text-decoration);
+}
diff --git a/javascripts/application.js b/javascripts/application.js
@@ -659,6 +659,35 @@ MMCQ = (function() {
     $('.content-formatted table').wrap('<div class="table-container"></div>');
   };
 
+  // Change product image position on narrower screens (mobile devices)
+  var handleProductPageContent = function () {
+    $(document).ready(function () {
+      changeProductImagePos();
+    });
+
+    $(window).resize(debounce(function () {
+      changeProductImagePos();
+    }, 25));
+
+    var changeProductImagePos = function () {
+      var productGallery = $('.js-product-gallery');
+      var productImageContentBox = $('.js-content-item-box');
+      var productContentRight = $('.js-product-content-right');
+
+      if ($('.js-buy-btn-content .edy-buy-button-container').length >= 1) {
+        if ($(window).width() < 752) {
+          if ($('.js-buy-btn-content + .js-product-gallery').length === 0) {
+            productContentRight.append(productGallery);
+          }
+        } else {
+          if ($('.js-content-item-box + .js-product-gallery').length === 0) {
+            productImageContentBox.parent().append(productGallery);
+          }
+        }
+      }
+    }
+  };
+
 // Initiates the table horisontal scroll function when window is resized.
   var handleWindowResize = function() {
     // Add functions that should be triggered while resizing the window here.
@@ -708,6 +737,7 @@ MMCQ = (function() {
   // Enables the usage of the initiations outside this file.
   // For example add "<script>site.initBlogPage();</script>" at the end of the "Blog & News" page to initiate blog listing view functions.
   window.site = $.extend(window.site || {}, {
+    handleProductPageContent: handleProductPageContent,
     initFrontPage: initFrontPage,
     initCommonPage: initCommonPage,
     initProductPage: initProductPage,
@@ -719,4 +749,4 @@ MMCQ = (function() {
 
   // Initiates site wide functions.
   init();
-})(jQuery);
+})(jQuery);
diff --git a/javascripts/application.min.js b/javascripts/application.min.js
diff --git a/javascripts/editmode.js b/javascripts/editmode.js
@@ -473,6 +473,14 @@
     toggleImageSettingsPopover();
   });
 
+  // Opens product admin view on product image click
+
+  var handleProductImageClick = function(product_id) {
+    $('.product-content .product-image').click(function() {
+      window.open('/admin/ecommerce/products/' + product_id, '_blank').focus();
+    });
+  };
+
   var init = function () {
     bindCustomTexteditorStyles();
     bindCustomDataItem();
@@ -487,9 +495,10 @@
     bgPickerColorScheme: bgPickerColorScheme,
     bindContentItemImgDropAreas: bindContentItemImgDropAreas,
     bindContentItemImageCropToggle: bindContentItemImageCropToggle,
-    bindProductListeners: bindProductListeners
+    bindProductListeners: bindProductListeners,
+    handleProductImageClick: handleProductImageClick
   });
 
   // Initiates site wide functions.
   init();
-})(jQuery);
+})(jQuery);