Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image Machine - Single quotes in product names #4

Closed
influxweb opened this issue Jul 12, 2019 · 0 comments

Comments

@influxweb
Copy link
Contributor

commented Jul 12, 2019

Expected Behavior

The use of non-alphanumeric characters in the product name should not interfere with the Image Machine functionality.

Current Behavior

If a product name has a single quote in it, i.e. Let's Go Team, then the productName variable causes a SyntaxError: unexpected token: identifier in the console which in turns breaks Image Machine.

Correcting the Issue

This issue is due to the incorrect Output Encoding being passed to the variable; it should be &mvtj instead of &mvte. I have added this update and it will be included in the next maintenance release.

To make the update prior to the next release, you will need to update the code for Image Machine:

User Interface -> Pages -> PROD -> Product Display Layout Image Machine:

window.gallery = [];
let generate_thumbnail_event = new CustomEvent('ImageMachine_Generate_Thumbnail');
let thumbnailIndex = 0;
let thumbnail_width;
let thumbnail_height;
let gallery_container;
let gallery_Index = 0;
let productName = '&mvtj:product:name;';

gallery_container = document.createElement('div');
gallery_container.classList.add('x-product-photo-gallery');
gallery_container.setAttribute('data-hook', 'photo-gallery');


/**
 * This function allows you to prepend or append code to an existing function.
 * https://stackoverflow.com/questions/9134686/adding-code-to-a-javascript-function-programmatically
 */
function functionExtender(container, funcName, prepend, append) {
	(function () {
		'use strict';
		let cachedFunction = container[funcName];

		container[funcName] = function () {
			if (prepend) {
				prepend.apply(this);
			}

			let result = cachedFunction.apply(this, arguments);

			if (append) {
				append.apply(this);
			}

			return result;
		};
	})();
}


ImageMachine.prototype.oninitialize = function (data) {
	window.gallery = [];
	gallery_container.innerHTML = '';
	gallery_Index = 0;
	thumbnailIndex = 0;
	this.Initialize(data);
	this.main_image.setAttribute('data-index', '0');
};


ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
	let img;
	let thumbnail;
	let gallery_element;
	let gallery_image;

	if (!thumbnail_width && !thumbnail_height) {
		thumbnail_width = this.thumb_width + 'px';
		thumbnail_height = this.thumb_height + 'px';
	}

	thumbnail = document.createElement('span');
	thumbnail.classList.add('x-product-layout-images__thumbnail-image');
	thumbnail.setAttribute('data-index', thumbnailIndex++);
	thumbnail.setAttribute('data-main', main_image);
	thumbnail.setAttribute('data-type', type_code);
	thumbnail.setAttribute('data-zoom', closeup_image);
	thumbnail.setAttribute('style', 'width: ' + thumbnail_width + '; display: inline-block; height: ' + thumbnail_height +';');

	if (typeof( thumbnail_image ) === 'string' && thumbnail_image.length > 0) {
		img = document.createElement('img');
		img.src = thumbnail_image;
		img.setAttribute('alt', productName);
		img.setAttribute('itemprop', 'thumbnail');
		thumbnail.appendChild(img);
	}

	/**
	 * Create a scrollable gallery, append it to the page, and open on main image click.
	 */
	gallery_image = (typeof (closeup_image) === 'string' && closeup_image.length > 0) ? closeup_image : main_image;

	if (typeof( closeup_image ) === 'string' && closeup_image.length > 0) {
		gallery_element = document.createElement('img');
		gallery_element.src = gallery_image;
		gallery_element.setAttribute('data-index', gallery_Index++);
		gallery_element.setAttribute('alt', productName);
		gallery_container.appendChild(gallery_element);
	}

	gallery.push({
		src: gallery_image,
		title: productName
	});

	document.dispatchEvent(generate_thumbnail_event);

	return thumbnail;
};


let gallery_template = document.querySelector('[data-hook="photo-gallery-template"]');

if (gallery_template) {
	gallery_template.appendChild(gallery_container);
}


/**
 * This controls what happens when you click a thumbnail.
 */
functionExtender(
	ImageMachine.prototype,
	'onthumbnailimageclick',
	function () {},
	function () {
		let clickedElement = event.target;

		//console.log(clickedElement.getAttribute('data-index'));
		this.main_image.setAttribute('data-index', clickedElement.getAttribute('data-index'));
	}
);


/**
 * This disables the default Miva image zoom functionality.
 * @return {boolean}
 */
ImageMachine.prototype.Closeup_Open = function () {
	return false;
};

ImageMachine.prototype.onmainimageclick = function () {
};

@influxweb influxweb added this to the v1.0.1 milestone Jul 12, 2019

@influxweb influxweb self-assigned this Jul 12, 2019

influxweb added a commit that referenced this issue Jul 24, 2019

v1.0.1
This maintenance release addresses all issues contained in the v1.0.1 milestone. https://github.com/mivaecommerce/readytheme-colossus/milestone/1?closed=1

This closes #1, closes #2, closes #3, closes #4, closes #5, closes #6, and closes #7
@influxweb influxweb referenced this issue Jul 24, 2019

@influxweb influxweb closed this in #8 Jul 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.