Restore "Quick View" button on List mode (#1033)

bigcommerce · Jun 23, 2017 · 0266b21 · 0266b21
1 parent 2679711
commit 0266b21
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Restore four products per row on category pages when sidebar is empty. [#1018](https://github.com/bigcommerce/cornerstone/pull/1018)
 - Remove gift certificate format validation [#1026](https://github.com/bigcommerce/cornerstone/pull/1026)
 - Remove usage of deprecated {{template_file}} property [#1032](https://github.com/bigcommerce/cornerstone/pull/1032)
+- Reinstate Quick View on product list mode when set to list view [#1033](https://github.com/bigcommerce/cornerstone/pull/1033)
 
 ## 1.8.1 (2017-05-05)
 - Bug fix for category sidebar [#1006](https://github.com/bigcommerce/cornerstone/pull/1006)

diff --git a/assets/scss/layouts/products/_productList.scss b/assets/scss/layouts/products/_productList.scss
@@ -42,6 +42,21 @@
     }
 }
 
+// QuickView button
+// -----------------------------------------------------------------------------
+
+.listItem-button {
+    background-color: $card-figcaption-button-background;
+    border-color: $card-figcaption-button-borderColor;
+    color: $card-figcaption-button-color;
+
+    &:hover {
+        background-color: $card-figcaption-button-backgroundHover;
+        border-color: $card-figcaption-button-borderColor;
+        color: $card-figcaption-button-color;
+    }
+}
+
 
 // List figure
 // -----------------------------------------------------------------------------
@@ -51,11 +66,43 @@
 
     @include breakpoint("small") {
         margin-bottom: 0;
+        padding-left: spacing("half");
+        padding-right: spacing("half");
+        width: grid-calc(3, $total-columns);
+    }
 
-        @include breakpoint("small") {
-            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;
+
+        @include breakpoint("large") {
+            @include verticalPositionMiddle();
+            display: inline-block;
+            margin: 0 0 spacing("single");
+            pointer-events: all;
+            transform-style: preserve-3d;
+        }
+    }
+}
+
+.listItem-figureBody {
+    opacity: 1;
+    text-align: center;
+
+    @include breakpoint("large") {
+        bottom: 0;
+        height: 100%;
+        left: spacing("half");
+        opacity: 0;
+        position: absolute;
+        right: spacing("half");
+        top: 0;
+
+        &:hover {
+            opacity: 1;
         }
     }
 }

diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
@@ -1,6 +1,13 @@
 <article class="listItem">
     <figure class="listItem-figure">
         <img class="listItem-image" src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
+        {{#unless hide_product_quick_view}}
+            {{#if theme_settings.show_product_quick_view}}
+                <div class="listItem-figureBody">
+                    <a href="#" class="button button--small listItem-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
+                </div>
+            {{/if}}
+        {{/unless}}
     </figure>
     <div class="listItem-body">
         <div class="listItem-content">