dev4web
12/21/2016 - 9:05 PM

Product Display Layout Image Machine

Product Display Layout Image Machine

<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(39), '&#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>