Der Packout Organizer Konfigurator
window.addEventListener('load', () => {
if (!window.Packout) {
return;
}
var productNo = [];
const loadJson = async () => {
let res = null;
// aktuellen Bestand holen
await fetch(`https://video.gotools-daten.de/CYT/milwaukee/getItems/`)
.then(response => {
return response.json();
}).then(data => {
res = data;
data.forEach(item => {
productNo[item.articleNumber] = item.id;
})
})
.catch(error => {
console.log('Error Code : ' + error.status);
console.log('Error Reason : ' + error.statusText);
});
return res;
}
init = async () => {
const productsAvail = await loadJson();
const packoutProductsToShow = productsAvail
.filter(x => true)
.map((x) => x.articleNumber);
console.log("packoutProductsToShow", packoutProductsToShow);
const addToBasket = async(products) => {
showLoader(true);
for (const product of products) {
//console.log("id", productNo[product]);
const res = await writeEntry(productNo[product]);
if (res === true) {
//console.log("item", res);
} else {
console.log("error: ", res.exceptionCode);
}
}
showLoader(false);
window.location.href = "/basket";
}
const stackBuilder = new Packout({
element: '#stack-builder',
layout: 'stack-builder',
culture: 'en-TT',
products: packoutProductsToShow,
hideIntro: true,
hideInteractiveGuide: true,
hideLanguageWarning: true,
hideNavigationLinks: true,
preserveSession: false,
translations: {
restart: 'Restart!',
},
});
stackBuilder.on('loaded', () => console.log('loaded'));
stackBuilder.on('product-added', (product) => console.log('product-added', product));
stackBuilder.on('product-removed', (product) => console.log('product-removed', product));
stackBuilder.on('submit-basket', (products) => {
addToBasket(products)
});
}
const writeEntry = async (entry) => {
let res = null;
const payload = {
quantity: 1,
totalOrderParamsMarkup: 0,
template: "Ceres::Basket.Basket",
templateType: "item"
};
payload.variationId = entry;
await fetch(`/rest/io/basket/items/`, {
method: 'POST',
headers: {
"Accept": "application/json, text/javascript",
"Content-Type": "application/json; charset=UTF-8"
},
body: JSON.stringify(payload)
})
.then(response => {
return response.json();
}).then(data => {
res = data;
})
.catch(error => {
console.log('Error Code : ' + error.status);
console.log('Error Reason : ' + error.statusText);
});
return res;
}
function showLoader(show = false, desc = "") {
if (show) {
const elem = document.querySelector('#loader') !== null;
if (elem) {
const info = document.querySelector('#loader .info');
info.innerHTML = desc;
} else {
// container zum Positionieren und Eingaben blocken
const div = document.createElement('div');
div.id = "loader";
const loader = document.createElement('div');
loader.classList.add("loader");
div.appendChild(loader);
const info = document.createElement('p');
info.classList.add("info");
info.innerHTML = desc;
div.appendChild(info);
const container = document.querySelector('.loader-containaer');
container.appendChild(div);
}
} else {
document.querySelector('#loader').remove();
}
}
init();
})
