Merge pull request #138 from Voog/137_fix_popover_and_breadcrumb

Fix popover and breadcrumb menu (#138)
Voog · Feb 18, 2022 · 5775faa · 5775faa
2 parents 884966f + 3441edb
commit 5775faa
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 53 deletions.
diff --git a/components/buy-button.tpl b/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="{&quot;title&quot;:&quot;{{ "add_to_cart" | lc | escape_once }}&quot;}"
+  data-settings="{&quot;title&quot;:&quot;{{ "add_to_cart" | lc | escape_once }}&quot;
+    {%- if with_price -%}
+      ,&quot;button_style&quot;:&quot;with_price&quot;
+    {%- 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>

diff --git a/components/menu-breadcrumbs-sd.tpl b/components/menu-breadcrumbs-sd.tpl
@@ -1,15 +1,18 @@
 {%- 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">
-  {%- for listItem in breadcrumbsObj.itemListElement %}
-    {%- assign pageUrl = page.url | remove_first: "/" -%}
-
-    <li class="menu-item{% if pageUrl == listItem.item.id %} current{% endif %}">
+  {%- for listItem in breadcrumbsObj.itemListElement offset: breadcrumbsOffset %}
+    <li class="menu-item{% if forloop.last %} current{% endif %}">
       <a class="menu-link" href="/{{listItem.item.id}}">{{ listItem.item.name }}</a>
     </li>
 
-    {% if forloop.rindex > 1%}
+    {% if forloop.rindex > 1 %}
       <span class="menu-separator">/</span>
     {% endif %}
   {% endfor -%}

diff --git a/components/template-cs-content.tpl b/components/template-cs-content.tpl
@@ -389,6 +389,14 @@
     "scope": "global"
   */
   --content-links-hover-text-transform: none;
+  /* 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",
@@ -446,7 +454,7 @@
     "featured": true,
     "scope": "global"
   */
-  --content-area-product-title__color: black;
+  --content-area-product-title__color: rgba(0, 0, 0, 0.8);
   /* VoogStyle
     "pathI18n": ["product", "price"],
     "titleI18n": "size",
@@ -504,7 +512,7 @@
     "featured": true,
     "scope": "global"
   */
-  --content-area-product-price__color: black;
+  --content-area-product-price__color: rgba(0, 0, 0, 0.8);
   /* VoogStyle
     "pathI18n": ["product", "description"],
     "titleI18n": "size",

diff --git a/components/template-cs-style-rules.tpl b/components/template-cs-style-rules.tpl
@@ -30,18 +30,18 @@ body.dark-background {
   }
 }
 
-.light-background .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn),
+.light-background .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url),
 .light-background .voog-search-modal a:not(.noborder):not(.custom-btn),
-.dark-background .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn),
+.dark-background .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url),
 .dark-background .voog-search-modal a:not(.noborder):not(.custom-btn) {
   border-bottom-color: var(--content-links-border-bottom-color);
   -webkit-box-shadow: inset 0 -4px 0 var(--content-links-border-bottom-color);
           box-shadow: inset 0 -4px 0 var(--content-links-border-bottom-color);
 }
 
-.light-background .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):hover,
+.light-background .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url):hover,
 .light-background .voog-search-modal a:not(.noborder):not(.custom-btn):hover,
-.dark-background .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):hover,
+.dark-background .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url):hover,
 .dark-background .voog-search-modal a:not(.noborder):not(.custom-btn):hover {
   border-bottom-color: var(--content-links-hover-border-bottom-color);
   -webkit-box-shadow: inset 0 -4px 0 0 var(--content-links-hover-border-bottom-color);
@@ -392,16 +392,16 @@ main.content-formatted .content-body {
   line-height: var(--content-line-height);
 }
 
-main.content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn),
-footer .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn) {
+main.content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url),
+footer .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url) {
   border-bottom-style: var(--content-links-border-bottom);
   font-style: var(--content-links-font-style);
   font-weight: var(--content-links-font-weight);
   text-transform: var(--content-links-text-transform);
 }
 
-main.content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):hover,
-footer .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):hover {
+main.content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url):hover,
+footer .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url):hover {
   border-bottom-style: var(--content-links-hover-border-bottom);
   font-style: var(--content-links-hover-font-style);
   font-weight: var(--content-links-hover-font-weight);
@@ -547,4 +547,5 @@ section.news {
   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);
 }
diff --git a/components/template-variables.tpl b/components/template-variables.tpl
@@ -117,15 +117,15 @@
   {% capture base_alignment_set %}
     [
       {
-        "title": "Left",
+        "titleI18n": "left",
         "value": "left"
       },
       {
-        "title": "Center",
+        "titleI18n": "center",
         "value": "center"
       },
       {
-        "title": "Right",
+        "titleI18n": "right",
         "value": "right"
       }
     ]

diff --git a/sources/components/custom-styles/template-cs-content.scss b/sources/components/custom-styles/template-cs-content.scss
@@ -439,6 +439,15 @@
   */
   #{--content-links-hover-text-transform}: none;
 
+  /* 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",
@@ -496,7 +505,7 @@
     "featured": true,
     "scope": "global"
   */
-  #{--content-area-product-title__color}: $color-black;
+  #{--content-area-product-title__color}: rgba($color-black, 0.8);
 
   /* VoogStyle
     "pathI18n": ["product", "price"],
@@ -555,7 +564,7 @@
     "featured": true,
     "scope": "global"
   */
-  #{--content-area-product-price__color}: $color-black;
+  #{--content-area-product-price__color}: rgba($color-black, 0.8);
 
   /* VoogStyle
     "pathI18n": ["product", "description"],

diff --git a/sources/components/custom-styles/template-cs-style-rules.scss b/sources/components/custom-styles/template-cs-style-rules.scss
@@ -57,7 +57,7 @@ body {
 // BOTH BACKGROUND COLORS
 .light-background,
 .dark-background {
-  .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn),
+  .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url),
   .voog-search-modal a:not(.noborder):not(.custom-btn) {
     border-bottom-color: var(--content-links-border-bottom-color);
     box-shadow: inset 0 -4px 0 var(--content-links-border-bottom-color);
@@ -429,8 +429,8 @@ main.content-formatted {
 }
 
 // CONTENT - links
-main.content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn),
-footer .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn) {
+main.content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url),
+footer .content-formatted a:not(.noborder):not(.custom-btn):not(.link):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url) {
   border-bottom-style: var(--content-links-border-bottom);
   font-style: var(--content-links-font-style);
   font-weight: var(--content-links-font-weight);
@@ -589,5 +589,6 @@ section.news {
     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);
   }
 }
diff --git a/sources/stylesheets/_colors.scss b/sources/stylesheets/_colors.scss
@@ -360,7 +360,7 @@ a {
 .content-formatted,
 .voog-search-modal {
   .light-background &, & {
-    a:not(.noborder):not(.custom-btn):not(.edy-content-social-button):not(.edy-product-widget-item-btn) {
+    a:not(.noborder):not(.custom-btn):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url) {
       border-bottom: 1px solid $link-solid;
       border-bottom: 1px solid $link-rgba-light;
       box-shadow: inset 0 -4px 0$link-solid;
@@ -374,7 +374,7 @@ a {
     }
   }
   .dark-background & {
-    a:not(.noborder):not(.custom-btn):not(.edy-content-social-button):not(.edy-product-widget-item-btn) {
+    a:not(.noborder):not(.custom-btn):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url) {
       border-bottom: 1px solid $link-solid;
       border-bottom: 1px solid $link-rgba-dark;
       box-shadow: inset 0 -4px 0 $link-solid;
@@ -403,10 +403,10 @@ nav a, .menu a, .header a, .edy-cbtn, .edy-btn-cm-round, .edys-gallery-item, .ed
 .content-formatted {
   h1,h2,h3,h4,h5,h6,
   li:before,
-  a:not(.noborder):not(.custom-btn):not(.edy-content-social-button):not(.edy-product-widget-item-btn) {
+  a:not(.noborder):not(.custom-btn):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url) {
     @include color-set($dark-primary, $light-primary);
   }
-  a:not(.noborder):not(.custom-btn):not(.edy-content-social-button):not(.edy-product-widget-item-btn):hover {
+  a:not(.noborder):not(.custom-btn):not(.edy-content-social-button):not(.edy-product-widget-item-btn):not(.edy-product-widget-item-link):not(.edy-product-widget-item-url):hover {
     @include color-set($dark-hover, $light-hover);
   }
   pre {

diff --git a/sources/stylesheets/_navigation-menus.scss b/sources/stylesheets/_navigation-menus.scss
@@ -6,10 +6,6 @@
   .menu-separator {
     opacity: .36;
     font-size: 12px;
-
-    &:first-child {
-      display: none;
-    }
   }
 
   &.menu-breadcrumbs {

diff --git a/sources/stylesheets/_product.scss b/sources/stylesheets/_product.scss
@@ -364,5 +364,6 @@
   .content-body {
     position: sticky;
     top: 104px;
+    z-index: $zindex-ca-interaction-button + 1;
   }
 }
diff --git a/sources/stylesheets/_variables.scss b/sources/stylesheets/_variables.scss
@@ -55,3 +55,5 @@ $h1-size: 36px;
 $h2-size: 27px;
 $h3-size: 23px;
 $font-size: 18px;
+
+$zindex-ca-interaction-button: 10600;