';
html += '
';
html += '
![]()
';
document.body.appendChild(this.scWrapper);
this.scLoaderScreen = document.getElementById(this.appName + '-loader-screen');
this.scAppLoader = document.getElementById(this.appName + '-app-loader');
this.scIfrm = document.getElementById(this.appName + "-iframe");
this.scIfrm.addEventListener("load", this.loadSC);
},
initMessageListener: function () {
window.addEventListener('message', function (event) {
if (event.origin + '/' !== this.baseUri) {
// return false;
}
var data = event.data;
switch (data.action) {
case 'close_sc':
Smartcustomizer.closeSC();
break;
case 'hide_app':
Smartcustomizer.hideApp(data.screenUrl);
break;
case 'show_app':
Smartcustomizer.showApp();
break;
case 'add_to_cart':
Smartcustomizer.addToCart(data);
break;
case 'reload':
Smartcustomizer.reload();
break;
case 'redirect':
Smartcustomizer.redirect(data.link);
break;
case 'send_ajax_request':
Smartcustomizer.sendAjaxRequest(data.afterAction, data.uri, data.data, data.type, data.headers, data.params, event.source, event.origin);
break;
case 'set_cookie':
Smartcustomizer.setCookie(data.name, data.value, data.days);
break;
case 'get_cookie':
Smartcustomizer.getCookieIframe(data.name, event.origin);
break;
default:
}
}, false);
},
initTranslations: function () {
if (!this.translations[this.lng]) {
return;
}
for (key in this.buttonTitles) {
var tr = this.translations[this.lng]['app_button_' + key];
if (tr) {
this.buttonTitles[key] = tr;
}
}
tr = this.translations[this.lng]['custom_design_id'];
if (tr) {
this.customDesignLabel = tr;
}
},
getUriParams: function (param) {
var urlParams = {};
var match,
pl = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) {
return decodeURIComponent(s.replace(pl, " "));
},
query = window.location.search.substring(1);
while (match = search.exec(query)) {
urlParams[decode(match[1])] = decode(match[2]);
}
return (param) ? ((urlParams[param]) ? urlParams[param] : null) : urlParams;
},
openSC: function () {
var addUriParams = ',shop.' + Shopify.shop + ',p.' + Smartcustomizer.uniqueId() + ',init.1';
if (this.ssid) {
addUriParams += ',ssid.' + this.ssid;
}
var action = this.scLink.getAttribute('data-action');
if (action) {
addUriParams += ',action.' + action;
}
var params = this.scLink.getAttribute('data-params');
if (params) {
addUriParams += ',' + params;
}
if (Object.keys(Smartcustomizer.selectedProductOptions).length > 0){
var selectedProductOptions = JSON.stringify(Smartcustomizer.selectedProductOptions);
selectedProductOptions = btoa(selectedProductOptions)
addUriParams += ',opts.' + selectedProductOptions;
}
Smartcustomizer.scready = true;
this.scIfrm.src = this.scIfrm.getAttribute('data-src') + addUriParams;
if (Smartcustomizer.scready) {
this.scAppLoader.classList.remove("hide");
Smartcustomizer.scWrapper.classList.add('active');
document.getElementsByTagName("body")[0].classList.add('modal-open');
if (document.getElementById('shopify-section-header')) {
document.getElementById('shopify-section-header').style.display = "none";
}
}
},
closeSC: function () {
setTimeout(function () {
Smartcustomizer.scWrapper.classList.remove("active");
document.getElementsByTagName("body")[0].classList.remove("modal-open");
if (document.getElementById('shopify-section-header')) {
document.getElementById('shopify-section-header').style.display = "block";
}
}, 0);
},
hideApp: function (screenUrl) {
this.scLoaderScreen.setAttribute('src', screenUrl);
this.scWrapper.classList.add('loading');
},
showApp: function () {
this.scWrapper.classList.remove('loading');
},
reload: function () {
location.reload(true);
},
redirect: function (link) {
window.location = link;
},
loadSC: function () {
Smartcustomizer.scAppLoader.classList.add("hide");
},
sendAjaxRequest: function (afterAction, uri, data, type, headers, params, source, origin) {
headers = headers || {};
// console.log(uri);
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var async = false;
if (params) {
if (params.async) {
async = true;
}
}
xhr.open(type || 'GET', uri, async);
xhr.onreadystatechange = function () {
if (xhr.readyState > 3 && xhr.status == 200) {
var contentType = xhr.getResponseHeader("Content-Type");
var responseData = (contentType == 'application/json') ? JSON.parse(xhr.responseText) : xhr.responseText;
//Smartcustomizer.scIfrm.contentWindow.sc.processAjaxResponse({data: responseData, action: 'process_ajax_response', afterAction: afterAction});
if (data && data.render_image_only != undefined) {
responseData.render_image_only = data.render_image_only;
}
if (afterAction) {
if (afterAction !== 'process_cart_items') {
Smartcustomizer.scIfrm.contentWindow.postMessage({ data: responseData, action: 'process_ajax_response', afterAction: afterAction }, origin);
}
else {
Smartcustomizer.processCartItems(responseData);
}
}
}
};
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
if (headers) {
Object.keys(headers).forEach(function (header) {
xhr.setRequestHeader(header, headers[header]);
});
}
//xhr.withCredentials = true;
var sendData = null;
if (data) {
// sendData = JSON.stringify(data);
// sendData = window.btoa(unescape(encodeURIComponent(sendData)));
var sendData = typeof data == 'string' ? data : Object.keys(data).map(
function (k) { return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
).join('&');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.send(sendData);
},
uniqueId: function () {
return Math.floor(Date.now() / 1000);
},
addToCart: function (data) {
if (!data.properties || !data.properties.props) {
return;
}
var properties = {};
for (key in data.properties.props) {
properties[key] = data.properties.props[key];
}
var quantity = this.productQuantity ? this.productQuantity.value : 1;
var formData = {
'items': [{
'id': data.properties.variationId,
'properties': properties,
'quantity': quantity
}]
};
setTimeout(function () {
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
console.log(response.json());
if (response.ok) {
window.location.href = '/cart';
}
// return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
}, 2000);
},
renderCartElements: function () {
console.log('renderCartElements');
var shopifyTemplateVersion = 1;
var cartItems = document.querySelectorAll('.cart__row');
if (cartItems.length === 0) {
var cartItems = document.querySelectorAll('.cart-item');
shopifyTemplateVersion = 2;
}
if (cartItems.length == 0) {
return;
}
var customDesignIds = [];
for (var i = 0; i < cartItems.length; i++) {
var cid = shopifyTemplateVersion === 2 ? Smartcustomizer.renderV2TemplateCartItem(cartItems[i]) : Smartcustomizer.renderV1TemplateCartItem(cartItems[i]);
if (cid) {
customDesignIds.push(cid);
}
}
if (customDesignIds.length == 0) {
return;
}
this.renderAppElements();
this.scLinks = document.getElementsByClassName("sc-link");
for (var i = 0; i < this.scLinks.length; i++) {
this.scLinks[i].removeEventListener('click', Smartcustomizer.openApp, false);
this.scLinks[i].addEventListener('click', Smartcustomizer.openApp, false);
}
var data = { shop: Shopify.shop, ids: customDesignIds };
data = JSON.stringify(data);
data = window.btoa(unescape(encodeURIComponent(data)));
Smartcustomizer.sendAjaxRequest('process_cart_items', this.baseUri + ',action.designs_getimagesbyids,ajax.1', { data }, 'POST', [], null);
Smartcustomizer.cartUpdateTimer = setInterval(function(){
//console.log('cartUpdateTimer');
if (Smartcustomizer.scLinks.length === 0){
clearInterval(Smartcustomizer.cartUpdateTimer);
Smartcustomizer.renderCartElements();
}
}, 2000);
},
openApp: function (event) {
Smartcustomizer.scLink = this;
event.preventDefault();
Smartcustomizer.openSC();
},
removeSCProductLink: function(cid) {
var item = document.querySelector('.sc-item[sc-id="' + cid + '"]');
if (!item){
return;
}
var links = item.querySelectorAll('a[href*="/products/"][href*="?variant="]');
links.forEach(link => {
if (link.hasAttribute('href')) {
link.removeAttribute('href');
}
});
},
getSCLinkUpdateParams: function (cid) {
return 'cid.' + cid + ',sa.order_update,lng.' + Smartcustomizer.lng;
},
setCustomDesignLabel(cartItem) {
if (this.cdOption === this.customDesignLabel) {
return;
}
cartItem.innerHTML = cartItem.innerHTML.replace(this.cdOption, this.customDesignLabel);
},
renderV2TemplateCartItem: function (cartItem) {
var productOptions = cartItem.getElementsByClassName("product-option");
for (var i = 0; i < productOptions.length; i++) {
var scOption = productOptions[i].textContent.split(this.cdOption);
if (scOption.length !== 2) {
continue;
}
var cid = scOption[1].replace(/\D/g, '').trim();
cartItem.setAttribute('sc-id', cid);
this.setCustomDesignLabel(cartItem);
cartItem.classList.add('sc-item');
var scLink = document.createElement('a');
scLink.className = "product-option sc-link";
scLink.setAttribute('href', '#');
scLink.setAttribute('data-params', Smartcustomizer.getSCLinkUpdateParams(cid));
scLink.innerHTML = Smartcustomizer.buttonTitles.edit;
productOptions[i].parentNode.appendChild(scLink);
return cid;
break;
}
return null;
},
renderV1TemplateCartItem: function (cartItem) {
var cartItemText = cartItem.textContent;
if (cartItemText.indexOf(this.cdOption) == -1) {
return null;
}
var links = cartItem.getElementsByTagName('a');
var itemWrapper = null;
var itemRemove = null;
for (var i2 = 0; i2 < links.length; i2++) {
if (links[i2].href.indexOf('/cart/change') != -1) {
itemRemove = links[i2];
itemWrapper = links[i2].parentNode.parentNode;
break;
}
}
var metaData = itemWrapper.innerHTML.split(this.cdOption);
if (metaData.length != 2) {
return null;
}
var metaDataText = itemWrapper.innerText.split(this.cdOption);
var cid = metaDataText[1].replace(/\D/g, '').trim();
cartItem.setAttribute('sc-id', cid);
this.setCustomDesignLabel(cartItem);
cartItem.classList.add('sc-item');
var scLink = document.createElement('a');
var actionElementClasses = itemRemove.className;
scLink.className = actionElementClasses + " sc-link";
scLink.setAttribute('data-params', Smartcustomizer.getSCLinkUpdateParams(cid));
scLink.setAttribute('href', '#');
scLink.innerHTML = Smartcustomizer.buttonTitles.edit;
metaData[0] += this.cdOption;
var cidEnd = metaData[1].indexOf(cid) + cid.length;
metaData[1] = metaData[1].slice(0, cidEnd) + "
"
+ scLink.outerHTML
+ metaData[1].slice(cidEnd);
itemWrapper.innerHTML = metaData.join('');
return cid;
},
processCartItems: function (images) {
if (Object.keys(images).length === 0) {
return;
}
for (cdid in images) {
var linkParams = Smartcustomizer.getSCLinkUpdateParams(cdid);
var editLink = document.querySelector(".sc-link[data-params='" + linkParams + "']");
if (editLink !== null) {
//console.log(editLink);
editLink.setAttribute('data-params', editLink.getAttribute('data-params') + ',hash.' + images[cdid].hash);
}
var imageElements = document.querySelectorAll(".sc-item[sc-id='" + cdid + "'] img");
if (imageElements.length > 0) {
for (var i = 0; i < imageElements.length; i++) {
imageElements[i].src = images[cdid].image + '?p=' + Smartcustomizer.uniqueId();
imageElements[i].removeAttribute('srcset');
}
}
if (!images[cdid].spv2){
Smartcustomizer.removeSCProductLink(cdid);
}
}
},
setCookie: function (name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 3600000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + escape(value) + expires + "; path=/";
},
getCookie: function (name) {
var nameEQ = name + "=";
var parts = document.cookie.split(';');
var l = parts.length;
for (var i = 0; i < l; i++) {
var part = parts[i];
while (part.charAt(0) == ' ') {
part = part.substring(1, part.length);
}
if (part.indexOf(nameEQ) == 0) {
return unescape(part.substring(nameEQ.length, part.length));
}
}
return null;
},
removeCookie: function (name) {
setCookie(name, "", -1);
},
getCookieIframe: function (name, origin) {
Smartcustomizer.scIfrm.contentWindow.postMessage({ name, value: this.getCookie(name), action: 'process_get_cookie' }, origin);
},
generateHash: function (length) {
length = length || 40;
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
},
parsePrice: function (inputPrice) {
if (typeof inputPrice !== 'number') {
throw new Error('Input price must be a number');
}
const decimalMatch = this.priceFormat.match(/\[(0+)(?:\.(0+))?\]/);
if (!decimalMatch) {
throw new Error('Invalid price format');
}
const integerPartLength = decimalMatch[1].length;
const decimalPlaces = decimalMatch[2] ? decimalMatch[2].length : 0;
const formattedPrice = inputPrice.toFixed(decimalPlaces);
const formattedString = this.priceFormat.replace(/\[(0+)(?:\.(0+))?\]/, formattedPrice);
return formattedString;
},
getFormattedOptionPrice: function (price) {
price = parseFloat(price);
return price > 0 ? ' (+' + this.parsePrice(price) + ')' : '';
}
};
if (meta.page.pageType == 'product' || meta.page.pageType == 'cart') {
Smartcustomizer = new Smartcustomizer();
Smartcustomizer.initApp();
if (meta.page.pageType == 'product') {
Smartcustomizer.renderProductElements();
document.addEventListener('trackingConsentAccepted', function () {
console.log('trackingConsentAccepted event fired');
});
if (window.Shopify.loadFeatures) {
console.log('loadFeatures');
window.Shopify.loadFeatures([
{
name: 'consent-tracking-api',
version: '0.1',
}
],
function (error) {
if (error) {
throw error;
}
const userCanBeTracked = window.Shopify.customerPrivacy.userCanBeTracked();
const userTrackingConsent = window.Shopify.customerPrivacy.getTrackingConsent();
});
}
}
else {
Smartcustomizer.renderCartElements();
}
}
document.addEventListener("DOMContentLoaded", function () {
});