Product Display Layout Image Machine
<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(39), ''')" />
<script>
(function () {
/**
* This is a 'CustomEvent()' polyfill for IE 9-11 to generate the proper thumbnails.
* https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
*/
if (typeof window.CustomEvent === "function") return false;
function CustomEvent(event, params) {
params = params || {bubbles: false, cancelable: false, detail: undefined};
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
var gallery = [],
thumbnailIndex = 0,
generate_thumbnail_event = new CustomEvent('ImageMachine_Generate_Thumbnail');
ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
var thumbnail,
img,
imCall = image_data&mvt:product:id;;
if (imCall.length === 1) {
/**
* If 'thumbnail_image' is 'null', then we know there are no additional image.
* In that case, we will append the contents of the 'single-image' template into the main image container.
*/
var singleImage = document.querySelector('[data-hook="single-image"]'),
displayImage = document.importNode(singleImage.content, true),
singleImageSrc = displayImage.querySelector('img'),
imageContainer = document.querySelector('[data-hook^="cmp-product-imagery__slider"]');
if (thumbnail_image !== null) {
singleImageSrc.setAttribute('src', thumbnail_image);
}
else {
singleImageSrc.setAttribute('src', main_image);
}
imageContainer.appendChild(displayImage);
}
thumbnail = document.createElement('div');
thumbnail.setAttribute('class', 'cmp-product-imagery__image');
thumbnail.setAttribute('data-index', thumbnailIndex++);
thumbnail.setAttribute('data-thumbnail', main_image);
thumbnail.setAttribute('data-zoom', closeup_image);
thumbnail.setAttribute('data-type', type_code);
if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
img = document.createElement('img');
if (thumbnailIndex > 1) {
img.src = 'graphics/en-US/cssui/blank.gif';
img.setAttribute('data-lazy', thumbnail_image);
}
else {
img.src = thumbnail_image;
}
img.setAttribute('alt', '&mvt:clean:product:name;');
img.setAttribute('title', '&mvt:clean:product:name;');
thumbnail.appendChild(img);
}
var gallery_image = (typeof(closeup_image) == 'string' && closeup_image.length > 0) ? closeup_image : main_image;
gallery.push({
src: gallery_image,
title: '&mvt:clean:product:name;'
});
document.dispatchEvent(generate_thumbnail_event);
return thumbnail;
};
</script>