IMPORTANT: This article is about using JS with CPB custom product builder, which requires advanced coding skills. If you need help with custom development, please contact our support.
Code includes:
1. Returns object with information on selected options without configID:
function getProductConfig() {
var result = {};
var product = CPB.getStore().getState().Product;
var changes = product.userChanges;
var panels = Object.keys(changes);
panels.forEach(function(panelId) {
var title = '';
product.panels.forEach(function(panel) {
if(panel.id === panelId) title = panel.title;
});
var panel = {
title: title,
categories: {}
}
var categories = Object.keys(changes[panelId]);
categories.forEach(function(categoryId) {
var catLayer = changes[panelId][categoryId].layer;
var selectedOption = catLayer?.option;
var catObj = product.panels.find(p => p.id == panelId).categories.find(c => c.id == categoryId);
var category = {
title: catObj.title,
options: []
}
catObj.options.forEach(function(option) {
if(option.id === selectedOption) {
let title = option.option.data.label;
let value = (() => {
if (catObj.type === 'font') {
return catLayer.value;
} else if (catObj.type === "fileUpload") {
const res = {}
catObj.options.forEach(option => {
res[option.option.data.label] = option.fileUploadValue;
});
return res;
} else if (catObj.display === 'checkbox') {
let inputs = {};
title = catObj.title;
product.layers.filter(layer => layer.category === categoryId).forEach(layer => {
let label = catObj.options.find(o => o.id == layer.option).option.data.label;
inputs[label] = true;
});
return inputs;
} else if (catObj.type === 'input' || catObj.type === "multiple" || catObj.type === "dateTime") {
let inputs = {};
Object.keys(changes[panelId][categoryId].options).forEach(opId => {
let label = catObj.options.find(op => op.id == opId).option.data.label;
inputs[label] = changes[panelId][categoryId].options[opId].value;
});
if (Object.keys(inputs).length == 1) {
return changes[panelId][categoryId].value;
} else {
title = "";
return inputs;
}
} else if (catObj.type === "dateTime") {
return changes[panelId][categoryId]
} else if (option.option.data.value) {
return option.option.data.value
}
})();
category.options.push({
title: title,
sku: option.sku,
value: value
});
}
});
panel.categories[categoryId] = category;
});
result[panelId] = panel;
});
return result
}
2. Returns object with information on selected options with configID (async):
function getProductConfigSec(callback) {
_cpb.saveConfig(function(res) {
var result = [];
var product = CPB.getStore().getState().Product;
var changes = product.userChanges;
var panels = Object.keys(changes);
panels.forEach(function(panelId) {
var title = '';
product.panels.forEach(function(panel) {
if(panel.id === panelId) title = panel.title;
});
var panel = {
title: title,
categories: {}
}
var categories = Object.keys(changes[panelId]);
categories.forEach(function(categoryId) {
var catLayer = changes[panelId][categoryId].layer;
var selectedOption = catLayer?.option;
var catObj = product.panels.find(p => p.id == panelId).categories.find(c => c.id == categoryId);
var category = {
title: catObj.title,
options: []
}
catObj.options.forEach(function(option) {
if(option.id === selectedOption) {
let title = option.option.data.label;
let value = (() => {
if (catObj.type === 'font') {
return catLayer.value;
} else if (catObj.type === "fileUpload") {
const res = {}
catObj.options.forEach(option => {
res[option.option.data.label] = option.fileUploadValue;
});
return res;
} else if (catObj.display === 'checkbox') {
let inputs = {};
title = catObj.title;
product.layers.filter(layer => layer.category === categoryId).forEach(layer => {
let label = catObj.options.find(o => o.id == layer.option).option.data.label;
inputs[label] = true;
});
return inputs;
} else if (catObj.type === 'input' || catObj.type === "multiple" || catObj.type === "dateTime") {
let inputs = {};
Object.keys(changes[panelId][categoryId].options).forEach(opId => {
let label = catObj.options.find(op => op.id == opId).option.data.label;
inputs[label] = changes[panelId][categoryId].options[opId].value;
});
if (Object.keys(inputs).length == 1) {
return changes[panelId][categoryId].value;
} else {
title = "";
return inputs;
}
} else if (catObj.type === "dateTime") {
return changes[panelId][categoryId]
} else if (option.option.data.value) {
return option.option.data.value
}
})();
category.options.push({
title: title,
sku: option.sku,
value: value
});
}
});
panel.categories[categoryId] = category;
});
result[panelId] = panel;
});
callback({configId: res, panels: result});
});
};
3. Returns preview in the specified size Images:
function getViewImageURL(size, view) {
if (typeof window.cpbImageStorage === 'undefined') return;
view = view || 'front';
size = size || 1000;
var convaSize = $('.konvajs-content').width() || size;
var newRatio = size / convaSize;
var getDataURL = cpbImageStorage.views[view].getSnapshot(newRatio);
return getDataURL;
}
var front = getViewImageURL(1000, 'front');
var back = getViewImageURL(1000, 'back') ;
Comments
0 comments
Please sign in to leave a comment.