Skip to content

Commit

Permalink
FTR
Browse files Browse the repository at this point in the history 
- JS work to get product galleries to work
  • Loading branch information
Shawn King committed May 30, 2019
1 parent eaa8c07 commit d41a3ad
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 10 deletions.
90 changes: 89 additions & 1 deletion BC-Layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,95 @@ <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
var list = document.getElementsByClassName("product__slide");
for (var i = 0; i < list.length; i++) {
list[i].setAttribute("data-slide", "image-" + i);
}
//
// Auto increment thumbnails
var thumbnailList = document.getElementsByClassName("product__thumbnail--link");
for (var j = 0; j < thumbnailList.length; j++) {
thumbnailList[j].setAttribute("data-thumb", + j);
}
};
//document.getElementsByClassName("product__thumbnail--link").click(
//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");
//}
//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>
</body>
Expand Down
18 changes: 14 additions & 4 deletions BC-Product.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,21 @@
<div class="product__images{% if product.images.size > 1 %} product-images-slideshow{% endif %}">
<ul class="product__slides slides">
{% for image in product.images %}
<li class="product__slide js--product-image"><img class="product--image" src="{{ image | product_image_url | constrain: 1200 }}" alt="Image of {{ product.name | escape }}"></li>
<!--{% if forloop.index == 1 %}
<li style="color:black;">First image</li>
{% endif %}-->
<li class="product__slide js--product-image{% if forloop.index == 1 %} active{% endif %}"><img class="product--image" src="{{ image | product_image_url | constrain: 1200 }}" alt="Image of {{ product.name | escape }}"></li>
{% endfor %}
</ul>
<ul class="product__thumbnails">
{% for image in product.images %}
{% for image in product.images %}
<li class="product__thumbnail js--product-thumbnail">
<!-- 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 -->
<a href="#" class="product__thumbnail--link">
<button class="product__thumbnail--link">
<img class="product--image" src="{{ image | product_image_url | constrain: 300 }}" alt="Image of {{ product.name | escape }}">
</a>
</button>
</li>
{% endfor %}
</ul>
Expand Down Expand Up @@ -72,6 +75,13 @@ <h1 class="product--title has-dash">{{ product.name }}</h1>
{{ product.option | hidden_option_input }}
{% else %}
<div class="product__select">
<!--
{% for category in product.categories %}
{% if category.name == 'Shirts' %}
<div>Your content</div>
{% endif %}
{% endfor %}
-->
{% for category in categories.active %}
{% if category.name == 'Shirts' %}
<label class="product__select-label" for="option">Choose a shirt size and color</label>
Expand Down
2 changes: 1 addition & 1 deletion assets/css/_components.product.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
&__slide {
display: none;
//
&:first-of-type {
&.active {
display: block;
}
}
Expand Down
2 changes: 1 addition & 1 deletion assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1045,7 +1045,7 @@ button {
max-height: 100vh; }
.product__slide {
display: none; }
.product__slide:first-of-type {
.product__slide.active {
display: block; }
.product--image {
width: 100%; }
Expand Down
2 changes: 1 addition & 1 deletion assets/css/styles.min.css
View file

Large diffs are not rendered by default.

48 changes: 46 additions & 2 deletions assets/scripts/product-slideshow.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,42 @@
window.onload = function () {
// Auto increment main images
var list = document.getElementsByClassName("product__slide");
for (var i = 0; i < list.length; i++) {
list[i].setAttribute("data-slide", "image-" + i);
}
//
// Auto increment thumbnails
var thumbnailList = document.getElementsByClassName("product__thumbnail--link");
for (var j = 0; j < thumbnailList.length; j++) {
thumbnailList[j].setAttribute("data-thumb", + j);
}
};

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 + "']");
//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");
};
}
//
//
//
/*
window.onload = function () {
// Auto increment main images
var list = document.getElementsByClassName("product__slide");
for (var i = 0; i < list.length; i++) {
Expand All @@ -21,5 +59,11 @@ function show(nr) {
//
var slides = document.getElementsByClassName("product__slide");
slides.className += "hidden";
var currentSlide = slides.getAttribute('data-fruit');
}
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";
}
*/

0 comments on commit d41a3ad

Please sign in to comment.