180 lines
6.3 KiB
JavaScript
180 lines
6.3 KiB
JavaScript
/**
|
|
* Copyright (C) 2020 Futurenext srl
|
|
*
|
|
* This file is part of Zakeke.
|
|
*
|
|
* Zakeke Interactive Product Designer can not be copied and/or distributed
|
|
* without the express permission of Futurenext srl
|
|
*
|
|
* @author Futurenext srl <help@zakeke.com>
|
|
* @copyright 2019 Futurenext srl
|
|
* @license https://www.zakeke.com/privacy/#general_conditions
|
|
*/
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
let infoCache = {};
|
|
|
|
function getInfo(id) {
|
|
if (infoCache[id]) {
|
|
return Promise.resolve(infoCache[id]);
|
|
} else {
|
|
return fetch(`${window.zakekeInfoUrl}?id_item=${id}`).then(res =>
|
|
res.json()
|
|
).then(data => {
|
|
infoCache[id] = data;
|
|
return data;
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleProductCustomization(productCustomizationElement) {
|
|
Array.from(productCustomizationElement.querySelectorAll('.cart_quantity, .cart_delete, .cart_avail, .cart_product, .cart_unit')).forEach(element => {
|
|
element.style.opacity = '0';
|
|
element.style.pointerEvents = 'none';
|
|
element.style.border = 'none';
|
|
});
|
|
|
|
const nameElement = productCustomizationElement.querySelector('.product-name > a');
|
|
if (nameElement) {
|
|
nameElement.onclick = event => event.preventDefault();
|
|
}
|
|
}
|
|
|
|
function filterVisibleConfigurationItems(item) {
|
|
return !(item.attributeCode !== null && item.attributeCode.includes('zakekePlatform'));
|
|
}
|
|
|
|
function configurationItemToElement(item) {
|
|
const el = document.createElement('SMALL');
|
|
el.classList.add('cart_ref');
|
|
el.textContent = `${item.attributeName} : ${item.selectedOptionName}`;
|
|
el.style.display = 'block';
|
|
return el;
|
|
}
|
|
|
|
function createPreview(url, dimensions) {
|
|
const previewImg = document.createElement('IMG');
|
|
previewImg.src = url;
|
|
previewImg.style.display = 'block';
|
|
previewImg.style.maxWidth = '100%';
|
|
if (dimensions) {
|
|
previewImg.width = dimensions.width;
|
|
previewImg.height = dimensions.height;
|
|
}
|
|
return previewImg;
|
|
}
|
|
|
|
function getProductRow(customizationItem) {
|
|
if (customizationItem.tagName.toLowerCase() !== 'tr') {
|
|
return getProductRow(customizationItem.parentElement);
|
|
}
|
|
|
|
return customizationItem;
|
|
}
|
|
|
|
function getReferenceRow(row) {
|
|
const rows = Array.from(row.parentElement.children);
|
|
return rows.slice(0, rows.indexOf(row)).reverse().find(currRow =>
|
|
currRow.classList.contains('cart_item')
|
|
);
|
|
}
|
|
|
|
function handleConfiguration(element, configuration) {
|
|
element.removeChild(element.firstChild);
|
|
configuration.items.filter(filterVisibleConfigurationItems).map(configurationItemToElement).forEach(el => {
|
|
element.appendChild(el);
|
|
});
|
|
|
|
const row = getProductRow(element);
|
|
const referenceRow = getReferenceRow(row);
|
|
const referenceRowThumb = referenceRow.querySelector('.cart_product > a');
|
|
referenceRowThumb.style.display = 'none';
|
|
const referenceRowThumbImg = referenceRowThumb.firstElementChild;
|
|
|
|
let firstColumn = row.firstElementChild;
|
|
if (firstColumn.colSpan == '4') {
|
|
firstColumn.colSpan = '3';
|
|
var newFirstColumn = document.createElement('TD');
|
|
row.insertBefore(newFirstColumn, firstColumn);
|
|
firstColumn = newFirstColumn;
|
|
}
|
|
firstColumn.classList.add('cart_product');
|
|
const rowThumb = document.createElement('A');
|
|
rowThumb.href = referenceRowThumb.href;
|
|
rowThumb.appendChild(createPreview(configuration.preview, {
|
|
width: referenceRowThumbImg.width,
|
|
height: referenceRowThumbImg.height
|
|
}));
|
|
firstColumn.appendChild(rowThumb);
|
|
}
|
|
|
|
function handleCustomization(zakekeCustomizationElement) {
|
|
const cartBody = document.querySelector('#cart_summary');
|
|
const zakekeId = zakekeCustomizationElement.innerText.split(':')[1].trim();
|
|
cartBody.style.display = 'none';
|
|
return getInfo(zakekeId).then(data => {
|
|
if (data.hasError) {
|
|
return;
|
|
}
|
|
|
|
if (data.items !== null) {
|
|
handleConfiguration(zakekeCustomizationElement, data);
|
|
} else {
|
|
zakekeCustomizationElement.appendChild(createPreview(data.preview));
|
|
}
|
|
}).finally(() =>
|
|
cartBody.style.display = 'block'
|
|
);
|
|
}
|
|
|
|
function maybeZakekeCustomization(text) {
|
|
return text.includes('-');
|
|
}
|
|
|
|
function hideInCart() {
|
|
const cartItems = Array.from(document.querySelectorAll('#cart_summary > tbody > tr'));
|
|
|
|
const productCustomizationElement = cartItems.find(cartItem => {
|
|
const skuElement = cartItem.querySelector('.cart_ref');
|
|
return skuElement && skuElement.textContent.includes(' product-customization');
|
|
});
|
|
|
|
if (productCustomizationElement) {
|
|
handleProductCustomization(productCustomizationElement);
|
|
}
|
|
|
|
cartItems.forEach(cartItem => {
|
|
const zakekeCustomizationElement = Array.from(cartItem.querySelectorAll('td > ul > li')).find(customization =>
|
|
maybeZakekeCustomization(customization.innerText)
|
|
);
|
|
|
|
if (zakekeCustomizationElement) {
|
|
handleCustomization(zakekeCustomizationElement);
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleMinicart() {
|
|
const customizations = Array.from(document.querySelectorAll('.cart_block_customizations li')).filter(customization =>
|
|
maybeZakekeCustomization(customization.innerText)
|
|
);
|
|
|
|
customizations.forEach(element => {
|
|
getInfo(element.innerText.trim()).then(customization => {
|
|
if (customization.hasError) {
|
|
return;
|
|
}
|
|
|
|
element.appendChild(createPreview(customization.preview));
|
|
|
|
if (customization.items) {
|
|
customization.items.filter(filterVisibleConfigurationItems).map(configurationItemToElement).forEach(el =>
|
|
element.appendChild(el)
|
|
);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
hideInCart();
|
|
handleMinicart();
|
|
}); |