Merge pull request #119 from Voog/118_fix_popover_and_breadcrumbs

Fix popover and breadcrumb menu (#119)

components/buy-button.tpl

@@ -1,7 +1,17 @@
+{%- if product.price_min_with_tax != product.price_max_with_tax -%}
+  {%- assign with_price = true -%}
+{%- else -%}
+  {%- assign with_price = false -%}
+{%- endif -%}
+
 {%- capture _button_attributes %}
   data-product-id="{{ product.id }}"
   data-product="{{ product | json | escape }}"
-  data-settings="{"title":"{{ "add_to_cart" | lc | escape_once }}"}"
+  data-settings="{"title":"{{ "add_to_cart" | lc | escape_once }}"
+    {%- if with_price -%}
+      ,"button_style":"with_price"
+    {%- endif -%}
+  }"
 {% endcapture -%}
 
 {% if editmode != true and product.available? == false %}
@@ -34,6 +44,10 @@
         {% else %}
           <span class="edy-buy-button-title">{{ 'add_to_cart' | lc | escape_once }}</span>
         {% endif -%}
+
+        {%- if with_price and product.price_min_with_tax == product.price_max_with_tax -%}
+          <span class="edy-buy-button-price">{{ product.price_with_tax | money_with_currency: product.currency }}</span>
+        {%- endif -%}
       </div>
     </div>
   </div>

components/menu-breadcrumbs-sd.tpl

@@ -1,11 +1,14 @@
 {%- assign breadcrumbsString = breadcrumbsScript | replace: '<script type="application/ld+json">', '' | replace: "</script>", '' | replace: site.url, '' | replace: '@', '' -%}
 {%- assign breadcrumbsObj = breadcrumbsString | json_parse -%}
+{%- if breadcrumbsObj.itemListElement.size > 2 -%}
+  {%- assign breadcrumbsOffset = 1 -%}
+{%- else -%}
+  {%- assign breadcrumbsOffset = 0 -%}
+{%- endif -%}
 
 <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">
+  {%- for listItem in breadcrumbsObj.itemListElement offset: breadcrumbsOffset %}
+    <li class="menu-item{% if forloop.last %} current-page{% endif %}">
       <a href="/{{ listItem.item.id }}">
         {{ listItem.item.name }}
       </a>

components/template-cs-content.tpl

@@ -371,6 +371,14 @@
     "featured": "true"
   */
   --content-links-hover-color: rgba(0, 102, 187, 0.8);
+  /* VoogStyle
+    "pathI18n": ["product", "title"],
+    "titleI18n": "alignment",
+    "editor": "listPicker",
+    "list": {{ base_alignment_set }},
+    "scope": "global"
+  */
+  --content-area-product-title__alignment: left;
   /* VoogStyle
     "pathI18n": ["product", "title"],
     "titleI18n": "size",

components/template-cs-style-rules.tpl

@@ -452,4 +452,9 @@ h3,
   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);
+  text-align: var(--content-area-product-title__alignment);
+}
+
+.menu-item.current-page a {
+  color: var(--color-main);
 }

sources/components/custom-styles/template-cs-content.scss

@@ -420,7 +420,16 @@
   */
   #{--content-links-hover-color}: rgba($link-color, .8);
 
-    /* VoogStyle
+  /* VoogStyle
+    "pathI18n": ["product", "title"],
+    "titleI18n": "alignment",
+    "editor": "listPicker",
+    "list": {{ base_alignment_set }},
+    "scope": "global"
+  */
+  #{--content-area-product-title__alignment}: left;
+
+  /* VoogStyle
     "pathI18n": ["product", "title"],
     "titleI18n": "size",
     "editor": "rangePicker",

sources/components/custom-styles/template-cs-style-rules.scss

@@ -491,5 +491,14 @@ h3,
     font-weight: var(--content-area-product-title__font-weight);
     font-style: var(--content-area-product-title__font-style);
     text-decoration: var(--content-area-product-title__text-decoration);
+    text-align: var(--content-area-product-title__alignment);
+  }
+}
+
+.menu-item {
+  &.current-page {
+    a {
+      color: var(--color-main);
+    }
   }
 }

sources/stylesheets/modules/_variables.scss

@@ -60,6 +60,7 @@ $popover-shadow: 0px 2px 10px rgba($black, .2);
 $image-settings-shadow: 0px 0px 5px rgba($black, .05), 0px 25px 35px rgba($black, .03);
 
 $zindex-settings-popover: 56501;
+$zindex-ca-interaction-button: 10600;
 
 // Variables for blog settings CSS
 $zindex-settings-btn: 104;

sources/stylesheets/utils/_utils.scss

@@ -16,5 +16,6 @@
   .t-sticky {
     position: sticky;
     top: 32px;
+    z-index: $zindex-ca-interaction-button + 1;
   }
 }

stylesheets/main.css

@@ -3531,6 +3531,7 @@ body .edy-settings-editor:not(.editor_default) .edy-popover-content .edy-setting
     position: -webkit-sticky;
     position: sticky;
     top: 32px;
+    z-index: 10601;
   }
 }