Godiva Test
Godiva Test
Anlatılan Ürün
LIVE 📷
Bu video ücretli işbirliği içermektedir
Yayındaki Diğer Ürünler
symbol/chevrongray Yayındaki Tüm Ürünleri GösterSepete Ekle📷 LIVE
symbol/chevrongray Yayına geri dön
Bu video ücretli işbirliği içermektedir
x
📷 LIVE
Sepete EkleSeçilen Renk: SiyahSeçilen Beden: 34
✓ Ürün sepete eklendi
.non-clickable { pointer-events: none; } .akn-modal-product-name { color: black; font-size: 1em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .akn-modal-product-price { color: black; font-weight: 600; font-size: 0.82em; } .cart-success-modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 15; } .cart-success-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: white; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cart-success-modal .icon { font-size: 40px; color: black; } .cart-success-modal .text { font-size: 20px; } .akn-live-commerce-mobile { display: none; } .hidden { display: none !important; } .akn-modal-variants { height: 144px; } .akn-modal-variant { margin-top: 12px; } .variant-label { height: 18px; display: block; margin-bottom: 6px; font-size: 13px; color: #545454; } .variant-label.-error { color: red; } .variant-option-list { display: flex; align-items: center; overflow-x: auto; } .variant-option-list-item { cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .variant-option-list-item.disabled { opacity: 0.3; pointer-events: none; } .variant-option-list-item.-loading { background-color: #eee; } .variant-option-list-item + .variant-option-list-item { margin-left: 16px; } .akn-modal-variant.-color .variant-option-list-item { width: 32px; height: 32px; border-radius: 100%; padding: 5px; border: 1px solid transparent; } .akn-modal-variant.-color .variant-option-list-item.selected { border-color: black; } .akn-modal-variant.-color img { width: 20px; height: 20px; border-radius: 100%; } .akn-modal-variant.-size .variant-option-list-item { padding: 0; width: 80px; height: 42px; border-radius: 40px; border: 1px solid #c8c8c8; font-size: 15px; } .akn-modal-variant.-size .variant-option-list-item.selected { border-color: black; } .akn-modal-variant.-size .variant-option-list-item + .variant-option-list-item { margin-left: 8px; } .akn-live-commerce-wrapper { display: flex; flex-direction: column; } .akn-live-commerce-content { max-width: 1225px; margin: auto; padding: 30px 0; } .akn-live-commerce-content-flex { display: flex; align-items: center; justify-content: space-between; } .akn-stream-wrapper { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .akn-stream-title { font-size: 50px; font-weight: bold; margin-bottom: 15px; } .akn-stream-subtitle { font-weight: 600; color: #d50032; padding-bottom: 10px; } .akn-stream-player { width: 100%; height: 500px; } .akn-highlighted-product-wrapper { margin-left: 38px; } .akn-product-showroom { max-width: 1225px; margin: auto; } .akn-product-showroom-title { font-size: 20px !important; text-align: center; color: black; margin: 25px 0; } .akn-product-list { display: flex; flex-wrap: wrap; margin: 0 -38px; } .akn-product-card-wrapper.highlighted { display: flex; height: auto; justify-content: center; width: 290px; } .akn-product-card { display: flex; flex-direction: column; width: 25%; background: white; padding: 38px; padding-top: 0; } .akn-product-card.highlighted { padding: 0; width: 100%; flex: auto; position: relative; border-radius: 15px; margin: 0; } .akn-product-details { display: flex; flex-direction: column; } .akn-product-details.highlighted { height: auto; width: 100%; padding: 0 20px 20px; } .akn-product-wrapper-title { font-size: 20px; margin-bottom: 5px; width: 100%; display: block; text-align: center; } .akn-product-image-wrapper { position: relative; width: 250px; height: 250px; } .akn-product-image-wrapper.highlighted { position: relative; height: 100%; width: 100%; margin-bottom: 10px; } .akn-product-image-wrapper-border { position: absolute; left: 0; right: 0; bottom: -2px; padding: 2px; background: linear-gradient(to left, white, white); } .akn-live-tag { position: absolute; left: 20px; top: 20px; padding: 2px 8px; font-size: 10px; font-weight: bold; border-radius: 2px; background: linear-gradient(to left, #f4ff00, #71d200); } .akn-product-image { width: 250px; max-height: 250px; } .akn-product-image.highlighted { width: 100%; border-top-left-radius: 15px; border-top-right-radius: 15px; } .akn-product-highlighted-text { position: absolute; width: 250px; height: 25px; left: 0; bottom: 0; text-align: center; line-height: 1.5; background: white; opacity: 0.75; } .akn-product-discount { color: white; width: max-content; margin: 10px 0; text-align: center; background-color: black; padding: 2px 8px; line-height: 1; } .akn-product-name { margin: 0 0 10px 0; text-transform: lowercase; } .akn-product-name::first-letter { text-transform: uppercase; } .akn-product-name.highlighted { margin: 0; margin-bottom: 15px; } .akn-product-name:not(.akn-modal) { height: 50px; overflow: hidden; } .akn-product-prices { display: flex; font-weight: bold; flex-direction: column; } .akn-product-price { color: black; } .akn-product-old-price { color: #9b9b9b; text-decoration: line-through; } .akn-product-purchase-button { border-radius: 21.5px; background: black; border: none; height: 43px; margin-top: 30px; color: white; z-index: 5; } .akn-product-purchase-button a { pointer-events: none; } .akn-product-purchase-button.highlighted { width: 100%; margin-top: 10px; } .akn-modal-wrapper { height: 100%; width: 100vw; background: rgba(0, 0, 0, 0.5); z-index: 15; display: flex; justify-content: center; align-items: center; font-size: 18px; position: fixed; top: 0; left: 0; } .akn-product-details.akn-modal { background: white; position: relative; max-height: 95%; height: auto; border-radius: 15px; width: 470px; overflow-y: auto; } .akn-product-details.akn-modal.-busy::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 100; } .akn-product-details.akn-modal.-busy::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 100%; border-top: 5px solid black; border-style: outset; z-index: 110; animation: modalLoaderAnimation 1s infinite; } .akn-product-details-wrapper.akn-modal { padding: 18px; display: flex; flex-direction: column; height: 100%; } .akn-product-image-wrapper.akn-modal { display: flex; flex-direction: column; width: 100%; padding-bottom: 5px; background: white; background-size: 100% 5px; height: auto; } .akn-product-image.akn-modal { width: 100%; max-height: 45vh; position: relative; object-fit: contain; } .akn-live-tag.akn-modal { content: "LIVE"; padding: 2px 5px; font-weight: bold; border-radius: 2px; background: linear-gradient(to left, #f4ff00, #71d200); left: 13px; top: 13px; bottom: unset; font-size: 9px; } .akn-product-name.akn-modal { font-size: 18px; margin: 0 0 24px 0; color: #333333; } .akn-product-price.akn-modal { float: left; font-size: 18px; width: 100%; } .akn-product-purchase-button.akn-modal { background: black; font-size: 17px; letter-spacing: 1.5px; } .akn-modal-close { position: absolute; padding: 5px 15px; color: #333333; cursor: pointer; font-size: 20px; z-index: 11; right: 0; } .stream-end { background: #ccc; position: relative; text-align: center; } .stream-end-span { top: 45%; position: inherit; } .text-mobile { display: none; } @media only screen and (max-width: 1225px) { .akn-live-commerce-content, .akn-product-showroom { padding: 0 16px; } } @media only screen and (max-width: 700px) { .text-mobile { display: block !important; } .variant-option-list::-webkit-scrollbar { opacity: 0; } .akn-live-tag { left: 10px; bottom: 10px; top: unset; padding: 0 6px; } body { padding-top: 0; } .akn-live-commerce-desktop { display: none !important; } .akn-live-commerce-mobile { display: flex !important; font-size: 12px; height: 100vh; position: relative; width: 100vw; margin-top: -32px; } .akn-stream-title { font-size: 12px; padding: 10px; display: none; } .akn-details-card { z-index: 5; bottom: 25px; position: absolute; left: 15px; right: 15px; } .akn-stream-wrapper { height: 100%; width: 100%; overflow: hidden; } .akn-stream-player { width: 100% !important; height: 100% !important; } .akn-stream-player::after { } .akn-product-list { background-color: #fff; justify-content: center; margin: 0 -8px; padding: 0 16px; } .akn-product-card.highlighted { padding: 0 15px; width: auto; height: 90px; display: flex; flex-direction: row; position: relative; align-items: center; background: white; border-radius: 15px; justify-content: center; box-shadow: 0 0 5px 0 rgb(0 0 0 / 30%); } .akn-video-play-button { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin-left: -34px; margin-top: -24px; } .akn-product-card { width: 50%; padding: 8px; padding-bottom: 60px; } .akn-product-details { width: auto; height: auto; } .akn-product-image { width: 100%; } .akn-product-image.akn-modal { max-height: 28vh; } .akn-product-details.highlighted { display: flex; width: 50%; flex-direction: column; padding: 0; } .akn-product-image-wrapper.highlighted { right: 5px; top: -85px; width: 100px; height: 100px; position: absolute; } .akn-product-image.highlighted { width: 100%; height: 100%; position: relative; border-radius: 15px; } .akn-product-name.highlighted { max-width: 130px; margin-bottom: 5px; } .akn-product-price.highlighted { font-size: 15px; color: black; font-weight: bold; } .akn-product-purchase-button.highlighted { border: none; padding: 10px 20px; border-radius: 32px; background: black; width: 50%; margin-right: 5px; color: white; height: 52px; } .akn-product-list-wrapper { left: 0; bottom: 0; top: 50px; z-index: 6; height: 75vh; width: 100vw; position: absolute; background: white; border-top-left-radius: 15px; border-top-right-radius: 15px; } .akn-product-list-expander { display: flex; z-index: 1; padding: 7.5px 0; margin-top: -5px; position: relative; border-radius: 15px; background: white; justify-content: center; box-shadow: 0 0 5px 0 rgb(0 0 0 / 30%); align-items: center; } .akn-product-list-expander svg { margin-right: 7.5px; } .akn-product-list-dispander { width: 100%; display: flex; padding: 10px 0; justify-content: center; align-items: center; } .akn-product-list-expander, .akn-product-list-dispander { cursor: pointer; } .akn-product-list-dispander svg { margin-right: 7.5px; } #akn-product-list { height: 90%; width: 100%; overflow: scroll; overflow-x: hidden; padding: 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 175px)); } #akn-product-list .akn-product-card { display: flex; width: 165px; flex: 0 0 25%; padding: 0; background: white; align-items: center; flex-direction: column; } #akn-product-list .akn-product-image { width: 165px; height: 165px; } #akn-product-list .akn-product-details { display: flex; width: 165px; height: 140px; flex-direction: column; } #akn-product-list .akn-product-purchase-button { z-index: 5; border: none; width: 165px; height: 40px; margin: 10px 0; color: white; background: black; border-radius: 21.5px; } #akn-mobile-stream-click-handler { width: 100vw; height: 100vh; position: absolute; z-index: 5; } } @media only screen and (max-width: 500px) { .akn-live-commerce-content, .akn-product-showroom { padding: 0; } .akn-product-details.akn-modal { width: 270px; } } @media only screen and (max-width: 360px) { .akn-product-list { padding: 0 8px; } .akn-product-card { margin-right: 8px; } } @keyframes modalLoaderAnimation { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
const baseUrl = "https://2a967a21129a41d3a28fada1e4ae071f.lb.akinoncloud.com/live-commerce/api/v1"; const eventId = 2; let isUserPlayedStream = false; const variantUrlParams = new URLSearchParams(); const basketUrl = "https://www.godiva.com.tr/baskets/basket/"; const csrfToken = "sN0kRov0C8Fto5uXHrh1910oQo26LvGqbqgYyU0WV1rAf4Xhn56w2Jbwfq51qMND"; variantUrlParams.set("format", "json"); function tryToReconnect(hls, video, src) { if (!video.readyState) { console.log("Trying Reconnect"); hls.destroy(); let _hls = new Hls({ enableWorker: false }); _hls.attachMedia(video); _hls.loadSource(src); } } let videoErrorInterval; function videoErrorHandler(hls, video, src) { hls.on(Hls.Events.ERROR, function (event, data) { if (data.fatal) { videoErrorInterval = setInterval(() => tryToReconnect(hls, video, src), 3500); } else { console.log("All clear, setted"); clearInterval(videoErrorInterval); } }); } const videoWorker = (video, src) => { if (video.canPlayType("application/vnd.apple.mpegurl")) { video.src = src; } else if (Hls.isSupported()) { let hls = new Hls({ enableWorker: false }); hls.loadSource(src); hls.attachMedia(video); videoErrorHandler(hls, video, src); } else { console.error("This is a legacy browser that doesn't support MSE"); } }; fetch(baseUrl + "/public/events/" + eventId + "/") .then((response) => response.json()) .then((data) => { const pcVideo = document.querySelector("#pc-player"); const mobileVideo = document.querySelector("#mobile-player"); const src = data.embed_url; videoWorker(pcVideo, src); videoWorker(mobileVideo, src); }); window.GLOBALS.THUMBNAIL_OPTIONS["product-live-comm-highlight"] = { width: 500, height: 500, }; window.GLOBALS.THUMBNAIL_OPTIONS["product-live-comm"] = { width: 500, height: 500, }; function thumbnail(url, option) { const getFileRoot = (url) => url.substring(0, url.lastIndexOf(".")); const getFileExtension = (url) => url.substring(url.lastIndexOf(".")); const getGlobalsValue = (parameter) => parameter && typeof parameter != "undefined" && parameter != "" && parameter != null ? parameter : false; const convertToTitleCase = (string) => string && string.length >= 2 ? string.charAt(0).toUpperCase() + string.substring(1).toLowerCase() : string; let thumbnailUrl = ""; if (url && option) { const thumbnailActive = getGlobalsValue( window.GLOBALS?.THUMBNAIL_ACTIVE ); const thumbnailOption = getGlobalsValue( window.GLOBALS?.THUMBNAIL_OPTIONS[option] ); if (thumbnailActive && thumbnailOption) { const _width = getGlobalsValue(thumbnailOption.width); const _height = getGlobalsValue(thumbnailOption.height); const _quality = getGlobalsValue(thumbnailOption.quality); const _crop = getGlobalsValue(thumbnailOption.crop); const _upscale = getGlobalsValue(thumbnailOption.upscale); thumbnailUrl = getFileRoot(url) + (_width || _height ? "_size" : "") + (_width ? _width : "") + (_height ? "x" + _height : "") + (_quality ? "_quality" + _quality : "") + (_crop ? "_crop" + convertToTitleCase(_crop) : "") + (_upscale ? "_upscale" + convertToTitleCase(_upscale) : "") + getFileExtension(url); } else { thumbnailUrl = url; } } return thumbnailUrl; } function showModalLoader() { document .querySelector(".akn-product-details.akn-modal") .classList.add("-busy"); } function hideModalLoader() { document .querySelector(".akn-product-details.akn-modal") .classList.remove("-busy"); } function refreshBasket(data, pk) { const product = data.basket.basketitem_set.find( (x) => x.product.pk === pk ).product; const totalQuantity = +document.querySelector( ".js-pz-mini-basket-quantity" ).innerText; document.querySelector(".js-pz-mini-basket-quantity").innerText = totalQuantity + 1; document.querySelector(".js-pz-mini-basket-quantity").innerText = totalQuantity + 1; const fragment = document.createElement("fragment"); fragment.innerHTML = ` <li class="pz-mini-basket__list-item js-mini-basket-item"> <a class="img-link" href="${product.absolute_url}"> <img class="pz-mini-basket-item__image" src="${product.productimage_set[0].image}"> </a> <div class="details"> <div class="pz-mini-basket__list-item-main"> <a href="${product.absolute_url}">${product.name}</a> </div> <footer class="pz-mini-basket__list-item-footer"> <span class="total-amount">${product.price} TL</span> <pz-button class="remove-button js-mini-basket-remove-btn pz-button -appearance-ghost" appearance="ghost" service="Basket" action="removeProduct" data-product="192"> <span class="pz-button__text">kaldır</span> </pz-button> </footer> </div> </li> `; basketItem = fragment.querySelector(".pz-mini-basket__list-item"); document.querySelector(".pz-mini-basket__list").prepend(basketItem); } function onModalCartButtonClick(e) { const productPk = parseInt(e.currentTarget.dataset.product); let unselectedVariantFound = false; for (const v of document.querySelectorAll(".akn-modal-variant")) { if (v.querySelector(".variant-option-list:empty")) { continue; } if (!v.querySelector(".variant-option-list-item.selected")) { v.querySelector(".variant-label").classList.add("-error"); unselectedVariantFound = true; break; } } if (unselectedVariantFound) { return; } showModalLoader(); const basketData = { product: productPk, quantity: 1, }; //On Mobile App Basket Signalling if (window.isMobileApp) { window?.ReactNativeWebView?.postMessage( JSON.stringify({ type: "addToBasket", payload: basketData, }) ); setTimeout(() => { hideModalLoader(); document.querySelector(".akn-modal-wrapper").classList.add("hidden"); refreshBasket(data, productPk); resetVariantOptions(); document .querySelector(".cart-success-modal-wrapper") .classList.remove("hidden"); setTimeout(() => { document .querySelector(".cart-success-modal-wrapper") .classList.add("hidden"); }, 2000); }, 0); } if (!window.isMobileApp) { fetch(basketUrl, { method: "POST", body: JSON.stringify(basketData), headers: { "Content-Type": "application/json", "X-CSRFToken": csrfToken, }, }) .then((response) => response.json()) .then((data) => { hideModalLoader(); document .querySelector(".akn-modal-wrapper") .classList.add("hidden"); refreshBasket(data, productPk); resetVariantOptions(); document .querySelector(".cart-success-modal-wrapper") .classList.remove("hidden"); setTimeout(() => { document .querySelector(".cart-success-modal-wrapper") .classList.add("hidden"); }, 2000); }); } } function onCartButtonClick(e) { e.preventDefault(); const productCard = e.currentTarget.closest(".akn-product-card"); const productPk = productCard.dataset.product; const productUrl = e.currentTarget .querySelector("a") .getAttribute("href"); const imageSrc = productCard .querySelector(".akn-product-image") .getAttribute("src"); const productName = productCard.querySelector(".akn-product-name").innerText; const productPrice = productCard.querySelector(".akn-product-price").innerText; updateModalProduct({ name: productName, price: productPrice, image: imageSrc, url: productUrl, pk: productPk, }); fetchVariants(productUrl); document.querySelector(".akn-modal-wrapper").classList.remove("hidden"); } function onVariantOptionClick(e) { const option = e.currentTarget; const variant = option.closest(".akn-modal-variant"); const variantKey = variant.dataset.key; const cartButton = option .closest(".akn-product-details") .querySelector("button"); const productUrl = cartButton.querySelector("a").getAttribute("href"); const productImage = option .closest(".akn-product-details") .querySelector("img"); variantUrlParams.set(variantKey, option.dataset.value); showModalLoader(); fetch(`${productUrl}?${variantUrlParams.toString()}`) .then((response) => response.json()) .then((data) => { renderVariants(data); productImage.setAttribute( "src", data.product.productimage_set[0].image ); cartButton.dataset.product = data.product.pk; cartButton.dataset.pk = data.product.pk; variant.querySelector(".variant-label").classList.remove("-error"); hideModalLoader(); }); } function bindCartButtonEvents() { const buttons = document.querySelectorAll( ".akn-product-purchase-button:not(.akn-modal)" ); buttons.forEach((cartButton) => { cartButton.removeEventListener("click", onCartButtonClick); cartButton.addEventListener("click", onCartButtonClick); }); } function bindVariantOptionEvents() { const options = document.querySelectorAll(".variant-option-list-item"); options.forEach((option) => { option.removeEventListener("click", onVariantOptionClick); option.addEventListener("click", onVariantOptionClick); }); } function renderVariants(data) { const colorList = document.querySelector( ".akn-modal-variant.-color .variant-option-list" ); const sizeList = document.querySelector( ".akn-modal-variant.-size .variant-option-list" ); document.querySelector(".akn-modal-product-name").innerHTML = data?.product?.name; document.querySelector(".akn-modal-product-price").innerHTML = data?.product?.price + " TL"; const existingAttributes = data.variants.find((v) => v.attribute_key == "integration_beden") || data.variants.find((v) => v.attribute_key == "integration_beden"); if (data.variants.find((v) => v.attribute_key == "integration_renk")) { document.querySelector( ".akn-modal-variant.-color .variant-label" ).innerHTML = "Lütfen renk seçiniz"; colorList.innerHTML = data.variants .find((v) => v.attribute_key === "integration_renk") .options.map((option) => { return ` <li class="variant-option-list-item${ option.is_selected ? " selected" : "" }${!option.is_selectable ? " disabled" : ""}" data-value="${ option.value }"> <img src="${option.product.attributes.swatch}" /> </li> `; }) .join(""); } else { colorList.innerHTML = ""; } if (data.variants.find((v) => v.attribute_key == "integration_beden")) { document.querySelector( ".akn-modal-variant.-size .variant-label" ).innerHTML = "Lütfen beden seçiniz"; sizeList.innerHTML = data.variants .find((v) => v.attribute_key === "integration_beden") .options.map((option) => { return ` <li class="variant-option-list-item${ option.is_selected ? " selected" : "" }${!option.is_selectable ? " disabled" : ""}" data-value="${ option.value }"> ${option.product.attributes.filterable_size} </li> `; }) .join(""); } else { sizeList.innerHTML = ""; } if (!existingAttributes) { document.querySelector(".akn-modal-variants").style.display = "none"; } bindVariantOptionEvents(); } function fetchVariants(productUrl) { showModalLoader(); fetch(productUrl + "?format=json") .then((response) => response.json()) .then((data) => { renderVariants(data); hideModalLoader(); }); } function resetVariantOptions() { document.querySelectorAll(".variant-label").forEach((label) => { label.classList.remove("-error"); label.innerHTML = ""; }); document.querySelectorAll(".variant-option-list").forEach((list) => { list.innerHTML = ` <li class="variant-option-list-item -loading"></li> <li class="variant-option-list-item -loading"></li> <li class="variant-option-list-item -loading"></li> <li class="variant-option-list-item -loading"></li> `; }); } function setMobileEvents() { document .querySelector(".akn-modal-close") .addEventListener("click", function (e) { event.target === event.currentTarget && document .querySelector(".akn-modal-wrapper") .classList.toggle("hidden"); resetVariantOptions(); }); document .querySelector(".akn-product-list-expander") .addEventListener("click", function (e) { event.target === event.currentTarget && document .querySelector(".akn-product-list-wrapper") .classList.toggle("hidden"); }); document .querySelector(".akn-product-list-dispander") .addEventListener("click", function (e) { event.target === event.currentTarget && document .querySelector(".akn-product-list-wrapper") .classList.toggle("hidden"); }); } function updateMultipleElements(elementSelector, valueSelector, newValue) { document.querySelectorAll(elementSelector).forEach((element) => { element[valueSelector] = newValue; }); } function updateHighlightedProduct(product) { const toggleElements = document.querySelectorAll( ".akn-highlighted-product-wrapper, .akn-product-card.highlighted" ); if (!product) { toggleElements.forEach((el) => { el.classList.add("hidden"); }); return; } toggleElements.forEach((el) => { el.classList.remove("hidden"); }); const percentage = Math.round( (product?.price / product?.retail_price) * 100 ); const price = product?.price; const retailPrice = product?.retail_price; document .querySelectorAll(".akn-product-card.highlighted") .forEach((el) => { el.setAttribute("data-product", product.omniweb_id); }); updateMultipleElements( ".akn-product-price.highlighted", "innerHTML", `${price} TL` ); updateMultipleElements( ".akn-product-name.highlighted", "innerHTML", product?.name ); updateMultipleElements( ".akn-product-old-price.highlighted", "innerHTML", `${retailPrice} TL` ); updateMultipleElements( ".akn-product-discount.highlighted", "innerHTML", "% " + percentage ); updateMultipleElements( ".akn-product-image.highlighted", "src", thumbnail( product?.productimage_set[0]?.url, "product-live-comm-highlight" ) ); updateMultipleElements( ".akn-product-purchase-button.highlighted a", "href", product?.shop_url ); } function updateModalProduct(productDetails) { document .querySelector(".akn-product-purchase-button.akn-modal") .setAttribute("data-product", productDetails?.pk); updateMultipleElements( ".akn-product-name.akn-modal", "innerHTML", productDetails?.name ); updateMultipleElements( ".akn-product-price.akn-modal", "innerHTML", productDetails?.price ); updateMultipleElements( ".akn-product-purchase-button.akn-modal a", "href", productDetails?.url ); updateMultipleElements( ".akn-product-image.akn-modal", "src", productDetails?.image ); } function reformatShopUrl(shop_url) { if (!shop_url.includes(window.location.hostname)) { let domain = shop_url.split("/")[2]; return (shop_url = shop_url.replace(domain, window.location.hostname)); } return shop_url; } function getProductDetails(product) { const percentage = Math.round( (product?.price / product?.retail_price) * 100 ); const details = { productPk: product.omniweb_id, productImage: thumbnail( product?.productimage_set?.[0]?.url, "product-live-comm" ), productDiscount: "%" + percentage, productName: product?.name, productPrice: product?.price, productOldPrice: product?.retail_price, productUrl: reformatShopUrl(product?.shop_url), }; return details; } function createProductCard(productDetails) { let productCardHtml = `<div class="akn-product-card" data-product="{productPk}"> <img class="akn-product-image" src="{productImage}"/> <div class="akn-product-details"> <span class="akn-product-name">{productName}</span> <div class="akn-product-prices"> <span class="akn-product-price">{productPrice} TL</span> </div> </div> <button class="akn-product-purchase-button"><a href={productUrl} target="_blank">Sepete Ekle</a></button> </div>`; if (typeof String.prototype.replaceAll === "undefined") { String.prototype.replaceAll = function (match, replace) { return this.replace(new RegExp(match, "g"), () => replace); }; } Object.keys(productDetails).map((detailName) => { productCardHtml = productCardHtml.replaceAll( "{" + detailName + "}", productDetails[detailName] ); }); document .querySelector(".akn-live-commerce-desktop .akn-product-list") .insertAdjacentHTML("beforeend", productCardHtml); document .querySelector(".akn-live-commerce-mobile .akn-product-list") .insertAdjacentHTML("beforeend", productCardHtml); } setInterval(() => { fetch(baseUrl + "/public/events/" + eventId + "/highlighted-product/") .then((response) => response.json()) .then((data) => { if (data.detail === "Not found.") { return updateHighlightedProduct(undefined); } updateHighlightedProduct(data); }); }, 2500); fetch(baseUrl + "/public/products/" + eventId + "/product-items/") .then((response) => response.json()) .then((data) => { data.map((product) => { const productDetails = getProductDetails(product); createProductCard(productDetails); }); bindCartButtonEvents(); }); setMobileEvents(); bindCartButtonEvents(); resetVariantOptions(); document .querySelector(".akn-product-purchase-button.akn-modal") .addEventListener("click", onModalCartButtonClick); //Flatpage Fix !! document.querySelector(".flatpage-wrapper").style.padding = 0; document.querySelector(".flatpage__content").style.padding = 0; document.querySelector(".flatpage__content-wrapper").style.marginBottom = 0; function playVideo() { document.querySelector("#mobile-player").play(); document.querySelector(".akn-video-play-button").style.display = "none"; }