Merge pull request #1024 from sacr3dc0w/product-image-carousel-fix

Restore product image carousel
bigcommerce · Jul 20, 2017 · 469f1e6 · 469f1e6
2 parents 941f912 + c0751e8
commit 469f1e6
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Draft
 - Move some hard-coded validation messages to language file [#1040](https://github.com/bigcommerce/cornerstone/pull/1040)
 - Use different id for gift cert in cart page [#1044](https://github.com/bigcommerce/cornerstone/pull/1044)
+- Restore product image carousel [#1028](https://github.com/bigcommerce/cornerstone/pull/1028)
 
 ## 1.9.0 (2017-07-18)
 - Product Images were obscuring product details on smaller viewports [#1019](https://github.com/bigcommerce/cornerstone/pull/1019)

diff --git a/assets/js/theme/global/quick-view.js b/assets/js/theme/global/quick-view.js
@@ -4,6 +4,7 @@ import 'foundation-sites/js/foundation/foundation.dropdown';
 import utils from '@bigcommerce/stencil-utils';
 import ProductDetails from '../common/product-details';
 import { defaultModal } from './modal';
+import 'slick-carousel';
 
 export default function (context) {
     const modal = defaultModal();
@@ -20,6 +21,8 @@ export default function (context) {
 
             modal.$content.find('.productView').addClass('productView--quickView');
 
+            modal.$content.find('[data-slick]').slick();
+
             return new ProductDetails(modal.$content.find('.quickView'), context);
         });
     });

diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -48,22 +48,51 @@
 
     margin-left: -(spacing("quarter"));
     margin-right: -(spacing("quarter"));
+
+    .slick-list {
+        margin-left: remCalc(40px);
+        margin-right: remCalc(40px);
+    }
+
+    .slick-next {
+        right: 0;
+    }
+
+    .slick-prev {
+        left: 0;
+    }
+
+    img {
+        bottom: 0;
+        left: 0;
+        margin: auto;
+        max-height: 50px;
+        max-width: 50px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 100%;
+    }
 }
 
 .productView-thumbnail {
     @include grid-column(3);
     padding-left: spacing("quarter");
     padding-right: spacing("quarter");
+    text-align: center;
 
     @include breakpoint("large") {
         width: 20%;
     }
 }
 
 .productView-thumbnail-link {
-    border: 2px solid transparent;
+    border: container("border");
     display: inline-block;
+    height: 67px;
+    max-width: 75px;
     padding: 2px;
+    position: relative;
     text-align: center;
     width: 100%;
 

diff --git a/assets/scss/components/vendor/slick/_slick.scss b/assets/scss/components/vendor/slick/_slick.scss
@@ -19,6 +19,7 @@
 .slick-next,
 .slick-prev {
     @include carouselOpaqueBackgrounds($slick-arrow-bgColor);
+    border: 1px solid $slick-arrow-borderColor;
     height: remCalc(61px);
     margin-top: -(remCalc(30px));
     padding: remCalc(10px);
@@ -50,7 +51,7 @@
     }
 
     &::before {
-        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAyNCA0MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMS40NTY3OSAxLjAwNzQ2MTQ3bDIxIDIwLjAyNDgyMTQzTDEuNTA4ODUgNDEuMDA3NDYxNSIgc3Ryb2tlPSIjMkQyRDJEIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
+        background-image: $slick-arrow-next;
     }
 
     &:hover {
@@ -69,7 +70,7 @@
     }
 
     &::before {
-        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAyNCA0MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjIuNDU3MjA3NCAxLjAwNzQ2MTQ3bC0yMSAyMC4wMjQ4MjE0MyAyMC45NDc5Mzk3IDE5Ljk3NTE3ODYiIHN0cm9rZT0iIzJEMkQyRCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
+        background-image: $slick-arrow-prev;
     }
 
     &:hover {

diff --git a/assets/scss/settings/vendor/slick/_settings.scss b/assets/scss/settings/vendor/slick/_settings.scss
@@ -10,6 +10,9 @@ $slick-font-family:             inherit;
 $slick-loader-path:             null;
 $slick-arrow-color:             stencilColor("carousel-arrow-color");
 $slick-arrow-bgColor:           rgba(stencilColor("carousel-arrow-bgColor"), 0.9);
+$slick-arrow-borderColor:       stencilColor("carousel-arrow-borderColor");
+$slick-arrow-prev:              url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='#{$slick-arrow-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
+$slick-arrow-next:              url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='#{$slick-arrow-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
 $slick-dot-color:               stencilColor("carousel-dot-color");
 $slick-dot-color-active:        stencilColor("carousel-dot-color-active");
 $slick-dot-bgColor:             rgba(stencilColor("carousel-dot-bgColor"), 0.9);

diff --git a/config.json b/config.json
@@ -159,6 +159,7 @@
     "carousel-dot-bgColor": "#ffffff",
     "carousel-arrow-color": "#989898",
     "carousel-arrow-bgColor": "#ffffff",
+    "carousel-arrow-borderColor": "#ffffff",
     "card-title-color": "#2d2d2d",
     "card-title-color-hover": "#a5a5a5",
     "card-figcaption-button-background": "#ffffff",
@@ -414,8 +415,9 @@
         "carousel-dot-color": "#2d2d2d",
         "carousel-dot-color-active": "#f08383",
         "carousel-dot-bgColor": "#ffffff",
-        "carousel-arrow-color": "#999999",
-        "carousel-arrow-bgColor": "#ffffff",
+        "carousel-arrow-color": "#f08383",
+        "carousel-arrow-bgColor": "#585858",
+        "carousel-arrow-borderColor": "#585858",
         "icon-ratingEmpty": "#696969",
         "icon-ratingFull": "#7fc0c2",
         "icon-color": "#ffffff",
@@ -558,6 +560,7 @@
         "carousel-dot-bgColor": "#5c5245",
         "carousel-arrow-color": "#db8a40",
         "carousel-arrow-bgColor": "#ffffff",
+        "carousel-arrow-borderColor": "#ffffff",
         "icon-color": "#806f58",
         "icon-color-hover": "#b37134",
         "icon-ratingEmpty": "#dfddda",

diff --git a/schema.json b/schema.json
@@ -954,6 +954,11 @@
         "type": "color",
         "label": "Arrow background color",
         "id": "carousel-arrow-bgColor"
+      },
+      {
+        "type": "color",
+        "label": "Arrow border color",
+        "id": "carousel-arrow-borderColor"
       }
     ]
   },

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -161,7 +161,12 @@ <h2 class="modal-header-title">{{lang 'products.bulk_pricing.modal_title'}}</h2>
                      alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image>
             </a>
         </figure>
-        <ul class="productView-thumbnails">
+        <ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
+                "infinite": false,
+                "mobileFirst": true,
+                "slidesToShow": 5,
+                "slidesToScroll": 1
+            }'{{/gt}}>
             {{#each product.images}}
                 <li class="productView-thumbnail">
                     <a