> Kaarten maken > Uitnodigingen Save the date kaart bruiloft met veldbloemen en goudfolie
Bestel gemakkelijk een proefdruk voor 2,50
Gratis uitgebreid pakket bij je proefdruk Klantenbeoordeling: 9,5/10 Jouw bestelling is 100% CO2 neutraal Vragen? Overleg metdesigners
×
Het design van jouw gekozen kaart is hieronder automatisch doorvertaald naar andere formaten in dezelfde kaartpositie. Kies jouw favoriet en plaats alle teksten en elementen gemakkelijk op de juiste plek in de editor. Kom je er niet uit? Neem zeker even contact met ons op, dan kijken we er samen naar!
' + productWrapper.getInnerHTML(); } else { message = document.getElementById("product-types") message.innerHTML = '
Sorry, voor dit ontwerp konden we hier geen ander formaat genereren.
Neem contact op, dan zetten we het ontwerp gratis voor je klaar!
' throw Error('could not generate other products'); } } ) } } async function createProducts(targetDesign) { let productsCreated = 0; const productObject = []; const otherProducts = storage.getItem(targetDesign); storage.removeItem(targetDesign) for (i in productTypesFiltered) { let productType = productTypesFiltered[i]; let productName = productType.product; let defaultBorder = border === 'borderRound' ? true : false; try { if (otherProducts != null) { let otherProductsJson = JSON.parse(otherProducts); let product = otherProductsJson.find(o => o.name === productName); if (product) { if (product.name === productName) { createProductItem(product.name, product.coid, product.border) .then(create => { updateSessionStorage(targetDesign, productName, product.coid, product.border) //productObject.push({name: productName, coid: product.coid, border: product.border}); }) .catch((err) => { console.log(err); let coidProduct = generateOtherProduct(targetDesign, productName) .then(newCoid => { createProductItem(productName, newCoid, defaultBorder); //productObject.push({name: productName, coid: newCoid, border: defaultBorder}) updateSessionStorage(targetDesign, productName, newCoid, defaultBorder) }) .catch((newErr) => { throw Error(newErr) }); }); } } else { let coidProduct = await generateOtherProduct(targetDesign, productName); createProductItem(productName, coidProduct, defaultBorder); updateSessionStorage(targetDesign, productName, coidProduct, defaultBorder) //productObject.push({name: productName, coid: coidProduct, border: defaultBorder}) } } else { let coidProduct = await generateOtherProduct(targetDesign, productName); createProductItem(productName, coidProduct, defaultBorder); updateSessionStorage(targetDesign, productName, coidProduct, defaultBorder) //productObject.push({name: productName, coid: coidProduct, border: defaultBorder}) } ++productsCreated } catch (err) { // delete failed item let productItemHtml = document.querySelector("div[productId='" + productName + "']"); productItemHtml.remove() console.log(err) } } return productsCreated } async function updateSessionStorage(storageDesign, productNaming, coidOfProduct, borderValue) { let existing = storage.getItem(storageDesign) // If no existing data, create an array // Otherwise, convert the localStorage string to an array with json Objects existing = existing ? JSON.parse(existing) : []; existing.push({ name: productNaming, coid: coidOfProduct, border: borderValue }) storage.setItem(storageDesign, JSON.stringify(existing)); } // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; bodyClasses.remove("modal-open") let productWrapper = document.getElementById("product-types"); //productWrapper.innerHTML = ""; }; // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; bodyClasses.remove("modal-open") let productWrapper = document.getElementById("product-types"); //productWrapper.innerHTML = ""; } }; function getPresetByName(n) { return formatPresets.filter(function(formatPresets) { return formatPresets.name == n; }); } function ObjectLength(object) { let length = 0; for (let key in object) { if (object.hasOwnProperty(key)) { ++length; } } return length; } const generateDateTimeNow = function() {let d = new Date; return [ d.getFullYear(),d.getMonth()+1,d.getDate()].join('-')+' '+ [d.getHours(), String(d.getMinutes()).padStart(2, "0"), String(d.getSeconds()).padStart(2, "0")].join(':');} function checkNested(obj, level, ...rest) { if (obj === undefined) return false if (rest.length == 0 && obj.hasOwnProperty(level)) return true return checkNested(obj[level], ...rest) } // open a design in the editor and return the design json data with coid async function fetchDesign(d) { let chooseCard = await fetch("/choose_card/" + d+ "?target_url=edit"); let urlDesign = await chooseCard.url; let coidUrl = new URL(urlDesign); let coid = coidUrl.searchParams.get("coid"); let response = await fetch("/api/design?coid=" + coid); let fullDesignJson = await response.json(); let designPages = await fullDesignJson.designs[0].pages; return [designPages, coid]; } // open a design as another product async function openOtherProduct(des, newProduct) { let product = await getPresetByName(newProduct)[0]; let fold = product.fold; let design = await fetchDesign(des); let oldSize = ObjectLength(design[0]) - 1; let coid = design[1]; // decide on scale let aspectRatioTarget = () => product.pages[0].height / product.pages[0].width; let aspectRatioDesign = () => design[0].p1.h / design[0].p1.w; let scale = aspectRatioDesign() > aspectRatioTarget() ? "height" : "width"; let pages; if (oldSize === 2 && product.pages.length === 4){ pages = product.pages.map((page, index) => { if (index === 1) { return ({ old_key: 0, new_key: index + 1, ...product.pages[index], scale: scale })} else if (index === 2){return ({ old_key: 2, new_key: index + 1, ...product.pages[index], scale: scale })} else {return ({ old_key: (index + 1 > oldSize) ? 0 : index + 1, new_key: index + 1, ...product.pages[index], scale: scale })} }) } else { pages = product.pages.map((page, index) => ({ old_key: (index + 1 > oldSize) ? 0 : index + 1, new_key: index + 1, ...product.pages[index], scale: scale })); } let convertJson = {}; convertJson["fold"] = fold; convertJson["new_pages"] = pages; convertJson["source_design_json"] = design[0]; // convert the design let convertUrl = "/convert_editor_design?coid=" + coid; let convertRequest = await fetch(convertUrl, { method: "POST", credentials: "same-origin", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify(convertJson), }); let respJson = await convertRequest.json(); window.open( "/create/edit/?coid=" + coid + "&add_to_basket=false&update_basket=true" ); } async function generateOtherProduct(des, newProduct) { console.log(newProduct) try { let product = getPresetByName(newProduct)[0]; //console.log('product', product) let fold = product.fold; if (fold === 'none' || typeof fold === 'undefined') { fold = "none" } console.log(fold) let freeform = product.hasOwnProperty('specs'); let design = await fetchDesign(des); //console.log('design', design) let oldSize = ObjectLength(design[0]) - 1; let coid = design[1]; //console.log('coid', coid) // decide on scale let aspectRatioTarget = (freeform) ? product.specs.sheets[0].spreads[0][0].height / product.specs.sheets[0].spreads[0][0].width : product.pages[0].height / product.pages[0].width; // let aspectRatioTarget = () => // product.pages[0].height / product.pages[0].width; //console.log('aspectRatioTarget', aspectRatioTarget) let aspectRatioDesign = () => design[0].p1.h / design[0].p1.w; let scale = aspectRatioDesign() > aspectRatioTarget ? "height" : "width"; let pages; // apply custom logic of placing the p2 to p3 from single to double card format if (!freeform){ if (oldSize === 2 && product.pages.length === 4){ pages = product.pages.map((page, index) => { if (index === 1) { return ({ old_key: 0, new_key: index + 1, ...product.pages[index], scale: scale })} else if (index === 2){return ({ old_key: 2, new_key: index + 1, ...product.pages[index], scale: scale })} else {return ({ old_key: (index + 1 > oldSize) ? 0 : index + 1, new_key: index + 1, ...product.pages[index], scale: scale })} }) } else if (oldSize === 4 && product.pages.length === 2){ pages = product.pages.map((page, index) => { if (index === 0) { return ({ old_key: 1, new_key: index + 1, ...product.pages[index], scale: scale })} else if (index === 1){return ({ old_key: 3, new_key: index + 1, ...product.pages[index], scale: scale })} else {return ({ old_key: (index + 1 > oldSize) ? 0 : index + 1, new_key: index + 1, ...product.pages[index], scale: scale })} }) } else { pages = product.pages.map((page, index) => ({ old_key: (index + 1 > oldSize) ? 0 : index + 1, new_key: index + 1, ...product.pages[index], scale: scale })); } } else { if(product.specs.sheets[0].spreads[0].length > 1){ pages = [{ old_key: 1, new_key: 1, width: product.specs.sheets[0].spreads[0][0].width, height: product.specs.sheets[0].spreads[0][0].height, scale: scale, bleed: product.specs.sheets[0].spreads[0][0].bleed_top, }, { old_key: 2, new_key: 2, width: product.specs.sheets[0].height_canvas, height: product.specs.sheets[0].width_canvas, scale: "auto", bleed: 0, }] } else { pages = [{ old_key: 1, new_key: 1, width: product.specs.sheets[0].spreads[0][0].width, height: product.specs.sheets[0].spreads[0][0].height, scale: scale, bleed: product.specs.sheets[0].spreads[0][0].bleed_top, }]} } let convertJson = {}; convertJson["fold"] = fold; convertJson["new_pages"] = pages; if (freeform) { convertJson["specs"] = product.specs } //console.log('convertJson', convertJson) // create tracking data in converted json designData = design[0]; trackPix = 'L.2c94a7705d3ec209ef0706a9da19ffc2.jpg'; genDate = generateDateTimeNow(); trackData = `converted,${genDate},${des},${newProduct}` if(checkNested(designData,'design_data','design_images')){ designData.design_data.design_images.push({sid: trackPix, name: trackData}) } convertJson["source_design_json"] = design[0]; // convert the design let convertUrl = "/convert_editor_design?coid=" + coid; let convertRequest = await fetch(convertUrl, { method: "POST", credentials: "same-origin", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify(convertJson), }); let respJson = await convertRequest.json(); //console.log('respJson', respJson) return coid } catch (error) { throw Error(error) } } async function createProductItem(name, coid, roundedCorners = false) { try { let img = await flatPreviewGenerator(coid); let productWrapper = document.getElementById("product-types"); let productItemHtml = document.querySelector("div[productId='" + name + "']"); let productLink = productItemHtml.querySelector("#product-link"); let productTitleLink = productItemHtml.querySelector("#product-title-link"); let productImage = productItemHtml.querySelector("#image-link"); let productBack = productItemHtml.querySelector(".thumbnail-flat-back"); if (roundedCorners) { let radius = '12' let p = productTypesFiltered.find(x => x.product === name); let rounded = `${radius}px`; if (p.border === 'r') { rounded = `0px ${radius}px ${radius}px 0px`; } if (p.border === 'b') { rounded = `0px 0px ${radius}px ${radius}px` } productImage.style.borderRadius = rounded; productBack.style.borderRadius = rounded; } else { productImage.style.borderRadius = ''; if (!name.includes('Raam') && !name.includes('Poster')){ productBack.style.borderRadius = ''; } } let link = "/create/edit/?coid=" + coid + "&add_to_basket=false&update_basket=true"; productLink.href = link; productTitleLink.href = link; let downloadingImage = new Image(); downloadingImage.onload = function() { if (name.includes('Raambord')){ productImage.setAttribute('birth-sign-image', this.src) } else if (name.includes('Raamsticker')){ let imEl = productImage.shadowRoot let deeperShadow = imEl.querySelector('.hydrated').shadowRoot; deeperShadow.querySelector('.image').src = this.src; } else if (name.includes('Poster') || name.includes('Raamsticker')){ let imEl = productImage.shadowRoot console.log(imEl) let deeperShadow = imEl.querySelector('.hydrated').shadowRoot; deeperShadow.querySelector('.image').src = this.src; deeperShadow.querySelector('.image').style.left = '50px'; } else { productImage.src = this.src; } }; downloadingImage.src = img; } catch (err) { let productItemHtml = document.querySelector("div[productId='" + name + "']"); productItemHtml.remove() throw Error(err) } } function createMockProductItems(border = 'borderSquare') { let productWrapper = document.getElementById("product-types"); for (p in productTypesFiltered) { let productType = productTypesFiltered[p]; let productName = productType.product; let productTitle = productType.title; let productDescription = productType.description; let productPrice = productType.price; let productFold = productType.fold; let displayBack = productFold === 0 ? 'none' : 'block'; let productBorder = productType.border; let landscapeFold = productBorder === 'b' ? 'landscape' : 'square'; let basicThumb = ` ${previewThumbHtml} ${productTitle} ${productDescription} Vanaf ${productPrice} 
`; let portraitWindowSign = `
`; productWrapper.innerHTML += productHTML; } } async function flatPreviewGenerator(coId) { let flatPreviewUrl = `/flat_preview/${coId}/1/static_foil/208`; let getFlatPreview = await fetch( flatPreviewUrl, { method: "GET", credentials: "same-origin", headers: { Accept: "application/json", "Content-Type": "application/json", } } ).then(response => { if (!response.ok) { throw Error('no valid coid'); } let getImageBlob = response.blob().then(function(myBlob) { let objectURL = URL.createObjectURL(myBlob); return objectURL }) return getImageBlob }); return getFlatPreview } function changeAllCorners(round) { let design = designId; let otherProducts = JSON.parse(storage.getItem(design)); let changedProducts = [] otherProducts.map(p => { changeCorners(p.coid, p.name, round); changedProducts.push({ name: p.name, coid: p.coid, border: round }); }) storage.setItem(design, JSON.stringify(changedProducts)); } function changeAllFoil(del = true) { let design = designId; let otherProducts = JSON.parse(storage.getItem(design)); otherProducts.map(p => { deleteFoil(p.coid, p.name, del) }) } async function changeCorners(coid, productName, round) { let currentDesignRequest = await fetch( "/api/get_current_design?coid=" + coid, { method: "GET", credentials: "same-origin", headers: { Accept: "application/json", "Content-Type": "application/json", }, } ); let respJson = await currentDesignRequest.json(); let newDesign = Object.assign(respJson); if (round) { newDesign.pages.design_data.trim = 'borderRound' } let updateDesign = await fetch( "/api/get_current_design?coid=" + coid, { method: "POST", credentials: "same-origin", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify(newDesign) } ); let updateCurrent = await updateDesign.json(); //window.open("/create/edit/?coid=" + coid + "&add_to_basket=false&update_basket=true", "_blank") createProductItem(productName, coid, round); } async function deleteFoil(coid, productName, del) { let currentDesignRequest = await fetch( "/api/get_current_design?coid=" + coid, { method: "GET", credentials: "same-origin", headers: { Accept: "application/json", "Content-Type": "application/json", }, } ); let respJson = await currentDesignRequest.json(); if (del) { // let keysPages = Object.keys(respJson.pages); keysPages.forEach((o, i) => { if (o[0].includes("p")) { let page = o; if (respJson["pages"][page].hasOwnProperty("images")) { let images = respJson["pages"][page]["images"]; images.forEach((im, ix) => { if (respJson["pages"][page]["images"][ix]["type"] === "rich_text") { // delete foiltype on text image element delete respJson["pages"][page]["images"][ix]["foil_type"]; respJson["pages"][page]["images"][ix]["text"].forEach((el, ie) => { if (respJson["pages"][page]["images"][ix]["text"][ie].hasOwnProperty("lines")) { respJson["pages"][page]["images"][ix]["text"][ie]["lines"].forEach((il, xl) => { if ( respJson["pages"][page]["images"][ix]["text"][ie]["lines"][ xl ].hasOwnProperty("textSpans") ) { respJson["pages"][page]["images"][ix]["text"][ie]["lines"][xl][ "textSpans" ].forEach((ts, tsx) => { delete respJson["pages"][page]["images"][ix]["text"][ie]["lines"][xl][ "textSpans" ][tsx]["foil"]; }); } }); } }); } else { if (respJson["pages"][page]["images"][ix].hasOwnProperty("foil_type")) { delete respJson["pages"][page]["images"][ix]["foil_type"] } } }); } } }); } let newDesign = Object.assign(respJson); let updateDesign = await fetch( "/api/get_current_design?coid=" + coid, { method: "POST", credentials: "same-origin", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify(newDesign) } ); let updateCurrent = await updateDesign.json(); createProductItem(productName, coid); }
