Skip to content

Commit

Permalink
FTR
Browse files Browse the repository at this point in the history 
- JS changes to make products slideshow work awesome
  • Loading branch information
Shawn King committed May 31, 2019
1 parent b4dee36 commit bcae8f8
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 94 deletions.
143 changes: 76 additions & 67 deletions BC-Layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ <h1 class="custom-page-header page-title has-dash">{{ page.name }}</h1>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<script src="//cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js"></script>
<!--<link href="https://cdn.jsdelivr.net/gh/sk5/[email protected]/assets/css/styles.css" rel="stylesheet" type="text/css" />-->
<script src="//cdn.jsdelivr.net/gh/sk5/[email protected]/assets/scripts/product-slideshow.js"></script>
<!--<script src="//cdn.jsdelivr.net/gh/sk5/[email protected]/assets/scripts/product-slideshow.js"></script>-->
<!--<script>
window.onload = function () {
// Auto increment main images
Expand All @@ -265,77 +265,86 @@ <h1 class="custom-page-header page-title has-dash">{{ page.name }}</h1>
};
//document.getElementsByClassName("product__thumbnail--link").click(
//this.className += " active";
//alert("Clicked");
//this.className += " active";
//alert("Clicked");
//);
//function changeProductImage() {
//console.log("Hello");
////var slides = document.getElementsByClassName("product__slide");
//console.log(slides.length);
////var currentButton = this.getAttribute("data-thumb");
////console.log(currentButton);
////slides.forEach(function (el) {
////el.classList.add("hidden")
////});
//
//console.log(slides.length);
//---for (var i = 0; i < slides.length; i++) {
//---var slide = slides[i];
//---slide.classList.remove("active");
//---}
//
//
// New way???
var buttons = document.getElementsByClassName("product__thumbnail--link"); // target all buttons into a element array/collection
var buttonsCount = buttons.length; // cache the length
for (var h = 0; h < buttonsCount; h++) { // reset the counter; check if its smaller than the array length; add itself
console.log("before button");
buttons[h].onclick = function (e) { // assign a function to the onclick event
console.log("here");
var imageName = this.getAttribute("data-thumb"); // alert the id attribute of the element clicked
//var element = document.querySelector("[data-slide='image-" + imageName "']");
var element = document.querySelector("[data-slide='image-" + imageName + "']");
console.log(element);
//
//
var slides = document.getElementsByClassName("product__slide");
for (var i = 0; i < slides.length; i++) {
var slide = slides[i];
slide.classList.remove("active");
}
//
element.classList.add("active");
};
}
//
// -- Old way that worked but not dynamically
// -- var element = document.querySelector("[data-slide='image-1'");
// -- console.log(element.length);
// -- element.classList.add("active");
//slides.classList.add("hidden");
//this.className += " active";
//console.log("Still here");
//}
//console.log("Hello");
////var slides = document.getElementsByClassName("product__slide");
//console.log(slides.length);
////var currentButton = this.getAttribute("data-thumb");
////console.log(currentButton);
////slides.forEach(function (el) {
////el.classList.add("hidden")
////});
//
//console.log(slides.length);
//---for (var i = 0; i < slides.length; i++) {
//---var slide = slides[i];
//---slide.classList.remove("active");
//---}
//
//
// New way???
var buttons = document.getElementsByClassName("product__thumbnail--link"); // target all buttons into a element array/collection
var buttonsCount = buttons.length; // cache the length
for (var h = 0; h < buttonsCount; h++) { // reset the counter; check if its smaller than the array length; add itself
//console.log("before button");
buttons[h].onclick = function (e) { // assign a function to the onclick event
//console.log("here");
var imageName = this.getAttribute("data-thumb"); // alert the id attribute of the element clicked
var currentButton = document.querySelector("[data-thumb='" + imageName + "']");
//var element = document.querySelector("[data-slide='image-" + imageName "']");
var element = document.querySelector("[data-slide='image-" + imageName + "']");
//console.log(element);
console.log(currentButton);
//
var buttons = document.getElementsByClassName("product__thumbnail--link");
for (var j = 0; j < buttons.length; j++) {
var button = buttons[j];
button.classList.remove("active");
}
//
currentButton.className += (" active");
//
var slides = document.getElementsByClassName("product__slide");
for (var i = 0; i < slides.length; i++) {
var slide = slides[i];
slide.classList.remove("active");
}
//
element.classList.add("active");
};
}
//
// -- Old way that worked but not dynamically
// -- var element = document.querySelector("[data-slide='image-1'");
// -- console.log(element.length);
// -- element.classList.add("active");
//slides.classList.add("hidden");
//this.className += " active";
//console.log("Still here");
//}
//function show(nr) {
//document.getElementById("table1").style.display = "none";
//document.getElementById("table2").style.display = "none";
//document.getElementById("table3").style.display = "none";
//document.getElementById("table4").style.display = "none";
//document.getElementById("table" + nr).style.display = "block";
//
//var slides = document.getElementsByClassName("product__slide");
//slides.className += "hidden";
//slides.classList.add("hidden");
//-document.querySelectorAll("[data-slide='image'" + nr).className.remove("hidden");
//
//-var thumbnails = document.getElementsByClassName("product__thumbnail--link");
//-thumbnails.className.remove("active");
//var currentSlide = slides.getAttribute('data-fruit');
//-this.className += "active";
//}
//function show(nr) {
//document.getElementById("table1").style.display = "none";
//document.getElementById("table2").style.display = "none";
//document.getElementById("table3").style.display = "none";
//document.getElementById("table4").style.display = "none";
//document.getElementById("table" + nr).style.display = "block";
//
//var slides = document.getElementsByClassName("product__slide");
//slides.className += "hidden";
//slides.classList.add("hidden");
//-document.querySelectorAll("[data-slide='image'" + nr).className.remove("hidden");
//
//-var thumbnails = document.getElementsByClassName("product__thumbnail--link");
//-thumbnails.className.remove("active");
//var currentSlide = slides.getAttribute('data-fruit');
//-this.className += "active";
//}
</script>-->
<script src="{{ 'api' | theme_js_url }}"></script>
<script src="{{ theme | theme_js_url }}"></script>
Expand Down
2 changes: 1 addition & 1 deletion BC-Product.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<!-- 1. Add unique class names to onclick and the images above -->
<!-- 2. When clicking a unique thumbnail, show the corresponding image -->
<!-- 3. Hide all other child images parent <li>'s -->
<button class="product__thumbnail--link">
<button class="product__thumbnail--link{% if forloop.index == 1 %} active{% endif %}">
<img class="product--image" src="{{ image | product_image_url | constrain: 300 }}" alt="Image of {{ product.name | escape }}">
</button>
</li>
Expand Down
36 changes: 19 additions & 17 deletions assets/css/_components.product.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,15 @@
}
//
&__thumbnail {
position: relative;
display: inline-block;
padding: .125rem;
width: 5rem;
box-shadow: 0 0 0 .0625rem $white;
}
//
&__thumbnail--link {
position: relative;
display: block;
//
&:before {
content: "";
Expand All @@ -104,27 +108,25 @@
background: darken(#f9fafb, 15%);
}
//
&:after {
content: "";
position: absolute;
top: -.9375rem;
left: calc(50% - 1.25rem);
width: 2.5rem;
height: .1875rem;
background: $red;
border-radius: 0 0 1rem 1rem;
&:hover {
box-shadow: 0 0 0 .0625rem darken(#f9fafb, 20%);
}
//
&:hover {
box-shadow:
0 0 0 .0625rem darken(#f9fafb, 20%);
&.active {
//
&:after {
content: "";
position: absolute;
top: -.9375rem;
left: calc(50% - 1.25rem);
width: 2.5rem;
height: .1875rem;
background: $red;
border-radius: 0 0 1rem 1rem;
}
}
}
//
&__thumbnail--link {
display: block;
}
//
&__page--headings,
&__details {
padding-left: 2rem;
Expand Down
14 changes: 7 additions & 7 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1080,12 +1080,14 @@ button {
list-style: none;
text-align: center; }
.product__thumbnail {
position: relative;
display: inline-block;
padding: .125rem;
width: 5rem;
box-shadow: 0 0 0 0.0625rem #fff; }
.product__thumbnail:before {
.product__thumbnail--link {
position: relative;
display: block; }
.product__thumbnail--link:before {
content: "";
position: absolute;
top: -1rem;
Expand All @@ -1094,7 +1096,9 @@ button {
width: calc(100% + 3rem);
height: .0625rem;
background: #cbd4dc; }
.product__thumbnail:after {
.product__thumbnail--link:hover {
box-shadow: 0 0 0 0.0625rem #bcc7d2; }
.product__thumbnail--link.active:after {
content: "";
position: absolute;
top: -.9375rem;
Expand All @@ -1103,10 +1107,6 @@ button {
height: .1875rem;
background: #ff5a5a;
border-radius: 0 0 1rem 1rem; }
.product__thumbnail:hover {
box-shadow: 0 0 0 0.0625rem #bcc7d2; }
.product__thumbnail--link {
display: block; }
.product__page--headings, .product__details {
padding-left: 2rem; }
@supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
Expand Down
2 changes: 1 addition & 1 deletion assets/css/styles.min.css
View file

Large diffs are not rendered by default.

12 changes: 11 additions & 1 deletion assets/scripts/product-slideshow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,20 @@ for (var h = 0; h < buttonsCount; h++) { // reset the counter; check if its smal
//console.log("before button");
buttons[h].onclick = function (e) { // assign a function to the onclick event
//console.log("here");
var imageName = this.getAttribute("data-thumb"); // alert the id attribute of the element clicked
var imageName = this.getAttribute("data-thumb"); // alert the id attribute of the element clicked
var currentButton = document.querySelector("[data-thumb='" + imageName + "']");
//var element = document.querySelector("[data-slide='image-" + imageName "']");
var element = document.querySelector("[data-slide='image-" + imageName + "']");
//console.log(element);
//console.log(currentButton);
//
var buttons = document.getElementsByClassName("product__thumbnail--link");
for (var j = 0; j < buttons.length; j++) {
var button = buttons[j];
button.classList.remove("active");
}
//
currentButton.className += (" active");
//
var slides = document.getElementsByClassName("product__slide");
for (var i = 0; i < slides.length; i++) {
Expand Down

0 comments on commit bcae8f8

Please sign in to comment.