Skip to content

Commit

Permalink
Create productcarousel.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@priyankmodiPM
priyankmodiPM authored Mar 19, 2024
1 parent d04abd3 commit 7df6e2c
Showing 1 changed file with 274 additions and 0 deletions.
274 changes: 274 additions & 0 deletions blocks/productcarousel/productcarousel.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,274 @@
export default function decorate(block) {
var carouselMarkup =

Check failure on line 2 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 2 spaces but found 4

Check failure on line 2 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

Unexpected var, use let or const instead

Check failure on line 2 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

There should be no line break before or after '='

Check failure on line 2 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

Trailing spaces not allowed
'<div id="pdp-carousel" class="product-container">\n' +

Check failure on line 3 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

'+' should be placed at the beginning of the line
'<main class="container">\n' +

Check failure on line 4 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

'+' should be placed at the beginning of the line
'<div class="slider-container" id="new-products">\n'+

Check failure on line 5 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

'+' should be placed at the beginning of the line

Check failure on line 5 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

Operator '+' must be spaced
'<div class="main-product-container">\n'+
'<img id="display-image" src="https://s7g10.scene7.com/is/image/genaibeta/LeatherSofa?wid=1200" alt="Main" class="main-product"/>\n'+
'</div>\n'+
'<div class="slides-wrapper">\n'+
'<div class="slides-container">\n'+
'<ul class="slider-list">\n'+
'<li class="slider-item">\n'+
'<a href="#">\n'+
'<img src="https://s7g10.scene7.com/is/image/genaibeta/LeatherSofa?wid=200&hei=170" alt="New Product 1" />\n'+
'</a>\n'+
'</li>\n'+
'<li class="slider-item">\n'+
'<a href="#">\n'+
'<img src="https://s7ap1.scene7.com/is/image/varun/SofaRight?wid=200&hei=170" alt="New Product 2" />\n'+
'</a>\n'+
'</li>\n'+
'<li class="slider-item">\n'+
'<a href="#">\n'+
'<img src="https://s7ap1.scene7.com/is/image/varun/SofaLeft?wid=200&hei=170" alt="New Product 3" />\n'+
'</a>\n'+
'</li>\n'+
'<li class="slider-item">\n'+
'<a href="#">\n'+
'<img src="https://s7ap1.scene7.com/is/image/varun/SofaBack?wid=200&hei=170" alt="New Product 4" />\n'+
'</a>\n'+
'</li>\n'+
'<li id="video-card" class="slider-item">\n'+
'<a href="#">\n'+
'<img src="https://s7ap1.scene7.com/is/image/varun/LeatherSofaVidThumb?wid=200&hei=170" alt="New Product 5" />\n'+
'</a>\n'+
'</li>\n'+
'</ul>\n'+
'</div>\n'+
'</div>\n'+
'<div class="slider-arrows">\n'+
'<button type="button" class="slider-arrow-prev">Prev</button>\n'+
'<button type="button" class="slider-arrow-next">Next</button>\n'+
'</div>\n'+
'</div>\n'+
'</main>\n' +
'<div class="product-details">\n'+
'<div class="pricing">\n'+
'<h2>Regal Sofa</h2>\n'+
'<p>Price: $497.50</p>\n'+
'<button>Add to Cart</button>\n'+
'<br/>\n'+
'<label for="colorPicker">Pick Sofa Color: &nbsp;</label><br/>\n'+
'<input type="color" id="colorPicker" name="colorPicker" value="#E3DEDA">\n'+

'<p>Pick Wall Color:</p>\n'+
'<div class="card-container">\n'+
'<div class="card">\n'+
'<img id="red-wall" src="https://s7g10.scene7.com/is/image/genaibeta?layer=0&src=ai(genaibeta/LeatherSofa?genReplace=bg,red%20wall%20with%20sunlight%20and%20shadows&op_gen=get)" alt="Image 1">\n' +
'</div>\n'+
'<div class="card">\n'+
'<img id="yellow-wall" src="https://s7g10.scene7.com/is/image/genaibeta?layer=0&src=ai(genaibeta/LeatherSofa?genReplace=bg,yellow%20wall%20with%20shadows%20and%20sunlight&op_gen=get)" alt="Image 2">\n' +
'</div>\n'+
'<div class="card">\n'+
'<img id="blue-wall" src="https://s7g10.scene7.com/is/image/genaibeta?layer=0&src=ai(genaibeta/LeatherSofa?genReplace=bg,blue%20wall%20with%20sunlight%20and%20shadows&op_gen=get)" alt="Image 3">\n' +
'</div>\n'+
'<div class="card">\n'+
'<img id="grey-wall" src="https://s7g10.scene7.com/is/image/genaibeta?layer=0&src=ai(genaibeta/LeatherSofa?genReplace=bg,grey%20wall%20with%20shadows%20and%20sunlight&op_gen=get)" alt="Image 4">\n' +
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</div>'

let div= document.createElement('div');
div.innerHTML = carouselMarkup;
block.textContent = '';
block.append(div);
}

waitForElement("#pdp-carousel").then(() => {
var redWall = document.getElementById("red-wall");
redWall.addEventListener('click', () => {
var picture = document.getElementById("display-image");
var imgUrl = "https://s7g1.scene7.com/is/image/genaibeta?layer=0&src=is(genaibeta/LeatherSofa?wid=3000)&layer=1&src=ai(genaibeta/LeatherSofa?genReplace=bg,red%20wall%20with%20sunlight%20and%20shadows&op_gen=get)&mask=is(genaibeta/Mask3Inverse?wid=3000)&layer=2&src=is(genaibeta/LeatherSofa?wid=3000)&mask=is(genaibeta/Mask3?wid=3000)";
picture.src = imgUrl;
});
var yellowWall = document.getElementById("yellow-wall");
yellowWall.addEventListener('click', () => {
var picture = document.getElementById("display-image");
var imgUrl = "https://s7g1.scene7.com/is/image/genaibeta?layer=0&src=is(genaibeta/LeatherSofa?wid=3000)&layer=1&src=ai(genaibeta/LeatherSofa?genReplace=bg,yellow%20wall%20with%20shadows%20and%20sunlight&op_gen=get)&mask=is(genaibeta/Mask3Inverse?wid=3000)&layer=2&src=is(genaibeta/LeatherSofa?wid=3000)&mask=is(genaibeta/Mask3?wid=3000)";
picture.src = imgUrl;
});
var blueWall = document.getElementById("blue-wall");
blueWall.addEventListener('click', () => {
var picture = document.getElementById("display-image");
var imgUrl = "https://s7g1.scene7.com/is/image/genaibeta?layer=0&src=is(genaibeta/LeatherSofa?wid=3000)&layer=1&src=ai(genaibeta/LeatherSofa?genReplace=bg,blue%20wall%20with%20sunlight%20and%20shadows&op_gen=get)&mask=is(genaibeta/Mask3Inverse?wid=3000)&layer=2&src=is(genaibeta/LeatherSofa?wid=3000)&mask=is(genaibeta/Mask3?wid=3000)";
picture.src = imgUrl;
});
var greyWall = document.getElementById("grey-wall");
greyWall.addEventListener('click', () => {
var picture = document.getElementById("display-image");
var imgUrl = "https://s7g1.scene7.com/is/image/genaibeta?layer=0&src=is(genaibeta/LeatherSofa?wid=3000)&layer=1&src=ai(genaibeta/LeatherSofa?genReplace=bg,grey%20wall%20with%20shadows%20and%20sunlight&op_gen=get)&mask=is(genaibeta/Mask3Inverse?wid=3000)&layer=2&src=is(genaibeta/LeatherSofa?wid=3000)&mask=is(genaibeta/Mask3?wid=3000)";
picture.src = imgUrl;
});

document.getElementById("colorPicker").addEventListener("input", function() {

Check warning on line 105 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

Unexpected unnamed function
var color = this.value;

var picture = document.getElementById("display-image");
var originalUrl = picture.src;

var newUrl = originalUrl.includes("op_colorize") ? originalUrl.replace(/(op_colorize=)[a-fA-F0-9]+/, "$1" + color.substring(1)) : originalUrl+"&op_colorize="+color.substring(1);
picture.src = newUrl;
});

document.getElementById("video-card").addEventListener("click", function() {

Check warning on line 115 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

Unexpected unnamed function
const picture = document.getElementById("display-image");
const container = picture.parentElement;

const videoChild = document.createElement('div');
videoChild.id="s7smartcropvideo_div";
videoChild.class="smart-crop-video main-product";

container.removeChild(picture);
container.appendChild(videoChild);
})

loadScript('https://s7g10.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js', function() {

Check warning on line 127 in blocks/productcarousel/productcarousel.js

View workflow job for this annotation

GitHub Actions / build 

Unexpected unnamed function
var s7smartcropvideoviewer = new s7viewers.SmartCropVideoViewer({
"containerId" : "s7smartcropvideo_div",
"params" : {
"serverurl" : "https://s7g10.scene7.com/is/image/",
"contenturl" : "https://s7g10.scene7.com/is/content/",
"config" : "genaibeta/SmartCropVideo",
"videoserverurl": "https://s7g10.scene7.com/is/content",
"asset" : "genaibeta/Original%20Video-AVS",
}
})
s7smartcropvideoviewer.init();
});

class Slider {
constructor(id, mediaQueries) {
// Get HTML elements
this.slider = document.querySelector(`#${id}`);
this.sliderList = this.slider.querySelector('.slider-list');
this.sliderItems = this.slider.querySelectorAll('.slider-item');
this.sliderNext = this.slider.querySelector('.slider-arrow-next');
this.sliderPrev = this.slider.querySelector('.slider-arrow-prev');

// Get media queries
this.mediaQueryList = [window.matchMedia(`screen and (max-width:${mediaQueries[0] - 1}px)`)];
mediaQueries.forEach((mediaQuery) => {
this.mediaQueryList.push(window.matchMedia(`screen and (min-width:${mediaQuery}px)`));
});

// Define global variables
this.numberOfVisibleItems = null;
this.currentItemIndex = null;
this.sliderItemsLength = this.sliderItems.length;
this.mediaQueryLength = this.mediaQueryList.length;

// Add event listener: to call the run function again when screen resized
this.mediaQueryList.forEach((mediaQuery) => {
mediaQuery.addEventListener('change', () => {
this.run();
});
});

// Add event listener: to go to next slide
this.sliderNext.addEventListener('click', () => {
if (this.currentItemIndex < this.sliderItemsLength - this.numberOfVisibleItems) {
this.currentItemIndex++;
this.shiftSlides();
}
});

// Add event listener: to go to previous slide
this.sliderPrev.addEventListener('click', () => {
if (this.currentItemIndex > 0) {
this.currentItemIndex--;
this.shiftSlides();
}
});

// Disable focus on all slides links
this.sliderItems.forEach((item) => {
const elements = item.querySelectorAll('a');
elements.forEach((element) => {
element.tabIndex = '-1';
});
});

// Add event listener: to scroll down to slider when previous arrow focused
this.sliderPrev.addEventListener('focusin', () => {
this.slider.scrollIntoView();
});

// Add event listener: to scroll down to slider when next arrow focused
this.sliderNext.addEventListener('focusin', () => {
this.slider.scrollIntoView();
});
}

// Run the slider
run() {
let index = this.mediaQueryLength - 1;
while (index >= 0) {
if (this.mediaQueryList[index].matches) {
// Set number of visible slides
this.numberOfVisibleItems = index + 1;

// Reset the slider
this.currentItemIndex = 0;
this.sliderList.style.transform = 'translateX(0%)';

// Set slider list width
this.sliderList.style.width = `calc(${(100 / (this.numberOfVisibleItems + 1)) * this.sliderItemsLength}% - 240px)`;

// Set slides width
this.sliderItems.forEach((item) => {
item.style.width = `${100 / (this.numberOfVisibleItems+1)}%`;
});

// Exit the loop
break;
}
index--;
}
}

// A function to shift slides left and right
shiftSlides() {
this.sliderList.style.transform = `translateX(-${(100 / this.sliderItemsLength) * this.currentItemIndex}%)`;
}
}

// Create a new slider and run it for new-products
const newProductsSlider = new Slider('new-products', [576, 992]);
newProductsSlider.run();

// Create a new slider and run it for featured-products
const featuredProductsSlider = new Slider('featured-products', [576, 768, 992]);
featuredProductsSlider.run();
});

function loadScript(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;

// Execute the callback function once the script is loaded
script.onload = callback;

// Append the script to the document's head
document.head.appendChild(script);
}

function waitForElement(selector) {
return new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}

const observer = new MutationObserver((mutations) => {
if (document.querySelector(selector)) {
observer.disconnect();
resolve(document.querySelector(selector));
}
});

// Observe changes in the entire document body (including subtree)
observer.observe(document.body, { childList: true, subtree: true });
});
}

0 comments on commit 7df6e2c

Please sign in to comment.