Merge pull request #1694 from yurytut1993/STRF-5072

fix(Storefront): STRF-5072 Cornerstone not showing Sale badge
bigcommerce · Jun 30, 2020 · 8ebca2c · 8ebca2c
2 parents e295303 + b7d81ad
commit 8ebca2c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/assets/scss/layouts/products/_productList.scss b/assets/scss/layouts/products/_productList.scss
@@ -64,18 +64,15 @@
 
 .listItem-figure {
     margin: 0 0 spacing("single");
-
+    position: relative;
+
     @include breakpoint("small") {
         margin-bottom: 0;
         padding-left: spacing("half");
         padding-right: spacing("half");
         width: grid-calc(3, $total-columns);
     }
 
-    @include breakpoint("large") {
-        position: relative;
-    }
-
     .listItem-button {
         margin: spacing("single") 0;
 
@@ -87,6 +84,7 @@
             transform-style: preserve-3d;
         }
     }
+
 }
 
 .listItem-figureBody {

diff --git a/assets/scss/layouts/products/_productSaleBadges.scss b/assets/scss/layouts/products/_productSaleBadges.scss
@@ -36,6 +36,23 @@
     width: rem-calc(50px);
 }
 
+.listItem-figure {
+
+    .starwrap {
+        transform: scale(0.7);
+
+        @include breakpoint("small") {
+            top: 0;
+            transform: scale(0.6);
+        }
+
+        @include breakpoint("large") {
+            top: 10px;
+            transform: scale(0.7);
+        }
+    }
+}
+
 .sale-text-burst {
     color: stencilColor("color_text_product_sale_badges");
     font-weight: 600;
@@ -94,6 +111,23 @@
     z-index: zIndex("lower");
 }
 
+.listItem-figure {
+
+    .sale-flag-sash {
+        left: -25px;
+
+        @include breakpoint("small") {
+            top: 15px;
+        }
+
+        @include breakpoint("large") {
+            left: -15px;
+            top: 25px;
+        }
+
+    }
+}
+
 .product:hover .sale-flag-sash {
     background: stencilColor("color_hover_product_sale_badges");
     transition: 800ms ease;

diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
@@ -4,6 +4,22 @@
     <article class="listItem">
 {{/if}}
     <figure class="listItem-figure">
+        {{#or price.non_sale_price_with_tax price.non_sale_price_without_tax}}
+        {{#if theme_settings.product_sale_badges '===' 'sash'}}
+            <div class="sale-flag-sash">
+                <span class="sale-text">On Sale!</span>
+            </div>
+        {{else if theme_settings.product_sale_badges '===' 'topleft'}}
+            <div class="sale-flag-side">
+                <span class="sale-text">On Sale!</span>
+            </div>
+        {{else if theme_settings.product_sale_badges '===' 'burst'}}
+            <div class="starwrap">
+                <div class="sale-text-burst">On Sale!</div>
+                <div class="sale-flag-star"></div>
+            </div>
+        {{/if}}
+        {{/or}}    
         {{> components/common/responsive-img
             image=image
             class="listItem-image"