diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9595cfc5d..c5fa6d87dd 100644
--- 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
index 1f6ab1ab6f..6f8d35268f 100644
--- 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
index 0d91e79d54..cb0e94b5a2 100644
--- a/assets/scss/components/stencil/productView/_productView.scss
+++ b/assets/scss/components/stencil/productView/_productView.scss
@@ -48,12 +48,38 @@
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%;
@@ -61,9 +87,12 @@
}
.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
index c9aac84e51..65b106cf28 100644
--- 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
index 1d53408fb5..3e9de63f8c 100644
--- 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
index 66dca8e729..2d43d5cddc 100644
--- 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
index 97208db188..cc6e52a24d 100644
--- 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
index b89a196b7a..1ea1c816bb 100644
--- a/templates/components/products/product-view.html
+++ b/templates/components/products/product-view.html
@@ -161,7 +161,12 @@
alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image>
-