[{"id":1,"code":"try {\n let dlPageTypeFinded = false, dlPageTypeFindLoopIsRuning = false, matchType = 'code', infrastructure = 'akinon', currentProductList = [];\n\n function CRN_Akinon() {\n const productContainerPath = '.list__products';\n const productCodesPath = '.list__products > .product-item';\n const productNamesPath = '.infinite-scroll-component > .grid > div h5';\n\n function getWidgetInfo(otherFilters) {\n const url = new URL(location.href).searchParams;\n let searchText = url.get(\"search_text\");\n const categoryId = url.get(\"category_ids\");\n\n let filters = {}, isRulesOk = false;\n\n if (otherFilters) {\n filters = otherFilters;\n isRulesOk = true\n }\n\n if (searchText) {\n searchText = searchText.split('+').join(' ');\n if (searchText) {\n filters['search'] = searchText;\n isRulesOk = true;\n }\n }\n\n if (categoryId) {\n filters['categoryCode'] = categoryId;\n isRulesOk = true;\n }else{\n if (dataLayer) {\n dataLayer.forEach(item => {\n if (item.vl_label && item.vl_label === 'VL-CategoryView' && item.vl_category_id) {\n filters['categoryCode'] = item.vl_category_id;\n isRulesOk = true;\n }\n });\n }\n }\n\n if (isRulesOk) {\n filters['widgetData'] = true;\n }\n\n return filters\n }\n\n function getProductName(item) {\n try {\n if (item && item.ecommerce && item.ecommerce.items[0] && item.ecommerce.items[0].item_name) {\n const productName = item.ecommerce.items[0].item_name;\n getComments(productName, false);\n }\n } catch (error) {\n console.log(\"PRODUCT NAME NOT FOUND\");\n }\n };\n\n function getProductCode(item) {\n try {\n if (item && item.ecommerce && item.ecommerce.detail && item.ecommerce.detail.products && item.ecommerce.detail.products[0].sku) {\n const productCode = item.ecommerce.detail.products[0].sku;\n getComments(productCode, false);\n }\n } catch (error) {\n console.log(\"PRODUCT CODE NOT FOUND\");\n }\n };\n\n function getProductNames() {\n const productNamesEl = document.querySelectorAll(productNamesPath);\n if (productNamesEl.length > 0) {\n let productNames = [];\n productNamesEl.forEach(product => {\n productNames.push(product.innerText);\n });\n getComments(productNames, true);\n }\n };\n\n function getProductCodes() {\n const productItemsEl = document.querySelectorAll(productCodesPath);\n if (productItemsEl.length > 0) {\n let productCodes = [];\n productItemsEl.forEach(product => {\n if (product.dataset && product.dataset.sku) {\n productCodes.push(product.dataset.sku);\n currentProductList.push(product.dataset.sku);\n }\n });\n getComments(productCodes, true, getWidgetInfo());\n }\n };\n\n\n function mutationObserver() {\n const productsContainer = document.querySelector(productContainerPath);\n if (productsContainer) {\n var observer = new MutationObserver(function (mutations) {\n for (let mutation of mutations) {\n if (mutation.type === \"childList\" && mutation.addedNodes.length > 0) {\n checkCurrentProductList(mutation.addedNodes, (newAddedProducts) => {\n getComments(newAddedProducts, true)\n })\n }\n }\n\n });\n\n var config = { attributes: false, childList: true, subtree: false };\n observer.observe(productsContainer, config);\n }\n };\n\n function dataLayerCrawler() {\n if (dataLayer) {\n dlPageTypeFindLoopIsRuning = true;\n for (var i = dataLayer.length - 1; i >= 0; i--) {\n const item = dataLayer[i];\n if (item.Label) {\n const pageType = item.Label;\n if (pageType == 'Product Detail Viewed') {\n matchType == 'code' ? getProductCode(item) : getProductName(item);\n dlPageTypeFinded = true;\n /*console.timeEnd('crninja_pageTypeFinded');*/\n break;\n }\n else if (pageType == 'Product Impressions') {\n matchType == 'code' ? getProductCodes() : getProductNames();\n dlPageTypeFinded = true;\n /*console.timeEnd('crninja_pageTypeFinded');*/\n break;\n }\n }else if(item.cd_pageType && item.cd_pageType === 'Homepage'){\n getComments(\"\", true, getWidgetInfo({operationType:'widget'}));\n dlPageTypeFinded = true;\n /*console.timeEnd('crninja_pageTypeFinded');*/\n break;\n }\n }\n dlPageTypeFindLoopIsRuning = false;\n } else {\n dlPageTypeFindLoopIsRuning = false;\n console.log(\"Datalayer not found\");\n }\n };\n\n function checkCurrentProductList(newProducts, callback) {\n if (newProducts.length > 0) {\n let result = [];\n newProducts.forEach(newProduct => {\n if (newProduct.dataset && newProduct.dataset.sku) {\n result.push(newProduct.dataset.sku)\n }\n });\n\n let diff = result.filter(x => !currentProductList.includes(x));\n callback(diff);\n\n }\n }\n\n dataLayerCrawler();\n mutationObserver();\n }\n\n\n function getComments(values, cagetoryPage, filters) {\n\n let filter = {\n /* productCode: '342181bf-2b5c-413a-8da9-f41d2ec7b529', */\n /* productName: productName, */\n /* stars : [4,5], Sadece belirlediğiniz yıldıza sahip yorumları gösterir*/\n /* onlyMedia: true, Sadece görsel yorumları gösterir*/\n /* sizes: ['36','37'], Ürünün seçili bedenlerine ait yorumları gösterir*/\n sort: 'za',\n quantity: 5, /* Yorumların kaçar kaçar yükleneceğine karar verir*/\n start: 0,\n categoryPage: cagetoryPage,\n };\n\n filter = { ...filter, ...filters };\n\n if (matchType == 'code') {\n filter.productCode = values\n } else {\n filter.productName = values\n }\n\n /*console.log(filter);*/\n\n window.crwl && window.crwl.getComments(filter, (comments) => {\n try {\n if (cwCode) {\n /*console.timeEnd('crninja_total');*/\n Function('comments', 'filter', cwCode)(comments, filter)\n }\n } catch (cwErr) { console.log('Product Matcher Create Comment Viewer Error', cwErr); }\n });\n }\n\n function tryDLPageTypeFind(callback) { /* datalayer pagetype finded checker */\n let dLIntCounter = 0;\n let dLInt = setInterval(() => {\n if (dlPageTypeFinded) {\n clearInterval(dLInt);\n /*console.timeEnd('crninja_pageTypeFinded');*/\n } else {\n dLIntCounter++;\n if (!dlPageTypeFindLoopIsRuning) {\n callback()\n }\n }\n\n if (dLIntCounter >= 15) {\n clearInterval(dLInt);\n console.log(\"Not match page type\");\n }\n }, 200);\n }\n\n function dataLayerChecker(callback) { /* datalayer loading checker */\n if (!dataLayer) {\n let dLIntCounter = 0;\n let dLInt = setInterval(() => {\n if (dataLayer) {\n clearInterval(dLInt);\n tryDLPageTypeFind(callback);\n /*console.timeEnd('crninja_dataLayerFinded');*/\n } else {\n dLIntCounter++;\n }\n\n if (dLIntCounter >= 10) {\n clearInterval(dLInt);\n console.log(\"Datalayer not found\");\n }\n }, 200);\n } else {\n tryDLPageTypeFind(callback);\n /*console.timeEnd('crninja_dataLayerFinded');*/\n }\n }\n\n function orderPageChecker() {\n const path = location.pathname;\n if (path.indexOf('/users/orders/') > -1) {\n if (path.length >= 20) {\n return true\n }\n }\n\n return false\n }\n\n function infrastructureController() {\n if(orderPageChecker()){\n /*console.log('PageType: order detail page');\n if (new URL(location.href).searchParams.get(\"crninja\") == 'v3') {\n }*/\n getComments('default',false);\n }else{\n /*console.time('crninja_total');\n console.time('crninja_dataLayerFinded');\n console.time('crninja_pageTypeFinded');*/\n dataLayerChecker(() => {\n CRN_Akinon();\n });\n }\n }\n\n infrastructureController()\n\n} catch (error) {\n console.log('Product Matcher Error', error);\n}","name":"Product Matcher","autoRun":1,"default":1,"active":1,"others":"\"{\\\"values\\\":{\\\"code\\\":\\\"try%20%7B%0A%20%20%20%20let%20dlPageTypeFinded%20%3D%20false%2C%20dlPageTypeFindLoopIsRuning%20%3D%20false%2C%20matchType%20%3D%20%27code%27%2C%20infrastructure%20%3D%20%27akinon%27%2C%20currentProductList%20%3D%20%5B%5D%3B%0A%0A%20%20%20%20function%20CRN_Akinon%28%29%20%7B%0A%20%20%20%20%20%20%20%20const%20productContainerPath%20%3D%20%27.list__products%27%3B%0A%20%20%20%20%20%20%20%20const%20productCodesPath%20%3D%20%27.list__products%20%3E%20.product-item%27%3B%0A%20%20%20%20%20%20%20%20const%20productNamesPath%20%3D%20%27.infinite-scroll-component%20%3E%20.grid%20%3E%20div%20h5%27%3B%0A%0A%20%20%20%20%20%20%20%20function%20getWidgetInfo%28otherFilters%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20url%20%3D%20new%20URL%28location.href%29.searchParams%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20let%20searchText%20%3D%20url.get%28%22search_text%22%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20categoryId%20%3D%20url.get%28%22category_ids%22%29%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20let%20filters%20%3D%20%7B%7D%2C%20isRulesOk%20%3D%20false%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20%28otherFilters%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20filters%20%3D%20otherFilters%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20isRulesOk%20%3D%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20%28searchText%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20searchText%20%3D%20searchText.split%28%27+%27%29.join%28%27%20%27%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20%28searchText%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20filters%5B%27search%27%5D%20%3D%20searchText%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20isRulesOk%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20%28categoryId%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20filters%5B%27categoryCode%27%5D%20%3D%20categoryId%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20isRulesOk%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20%28dataLayer%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dataLayer.forEach%28item%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20%28item.vl_label%20%26%26%20item.vl_label%20%3D%3D%3D%20%27VL-CategoryView%27%20%26%26%20item.vl_category_id%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20filters%5B%27categoryCode%27%5D%20%3D%20item.vl_category_id%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20isRulesOk%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20","createdAt":"2023-09-13T12:11:45.000Z","updatedAt":"2026-02-18T19:27:43.000Z"},{"id":2,"code":"if (new URL(location.href).searchParams.get(\"crninja\") == 'v4') {\n crninjaV4();\n} else {\n crninjaV3();\n}\n\nfunction crninjaV4() {\n try {\n const COMMENTS = comments;\n\n const FILTER = filter;\n\n let STYLES = comments != CRN_DATATYPES.empty ? JSON.parse(unescape(comments.styles)) : null;\n\n let CURRENT_FILTER = { ...FILTER };\n CURRENT_FILTER['operationType'] = 'comment';\n\n let CURRENT_QA_FILTER = { ...FILTER };\n CURRENT_QA_FILTER['operationType'] = 'question';\n\n const PREFIX = 'CRWLCV-';\n let CRWL_START = 5, CRWL_QUANTITY = 5, CRWL_QA_START = 5, CRWL_QA_QUANTITY = 5, CRWL_COMMENTS_LOADING = false, CRWL_QUESTIONS_LOADING = false;\n\n const COMMENT_STORAGE_KEY = PREFIX+'commentStorage';\n\n createElement = (tagName) => { return document.createElement(tagName) }\n\n let VIEWER = document.createElement('div');\n let COMMENT_CONTAINER = document.createElement('div');\n\n let QA_VIEWER = document.createElement('div');\n let QA_CONTAINER = document.createElement('div');\n\n let uploadedImages = [], newCommentRate = false;\n\n const _w = window.outerWidth;\n\n const _url = location.protocol + '//crninja.com/';\n\n const isMobile = _w < 768 ? true : false;\n\n const primaryColor = '#375A5A';\n const textColor = '#474747';\n\n commentViewerInit = () => {\n if (COMMENTS == CRN_DATATYPES.empty || COMMENTS.commentCount == 0) {\n createCommentlessComponents();\n }\n else {\n if (FILTER.categoryPage) {\n if (STYLES.categoryreview.hide == \"visible\") {\n createCategoryMiniReviews(COMMENTS.reviews)\n }\n } else {\n if (COMMENTS.commentCount == 0) {\n console.log(\"Bu ürün için hiç yorum bulunamadı\")\n return false;\n }\n\n if (document.querySelector('#' + PREFIX + 'main')) {\n console.log(\"Yorum görüntüleyici tekrar yüklenmeye çalıştı\")\n return false;\n }\n createMainComponent();\n createHeader();\n createMiniReview();\n createCommentsContainer();\n createLoadMoreButton();\n\n\n COMMENTS.comments.forEach(comment => {\n createCommentRow(comment);\n });\n VIEWER.addEventListener('scroll', function () {\n if (!CRWL_COMMENTS_LOADING) {\n if ((VIEWER.clientHeight + VIEWER.scrollTop) >= VIEWER.scrollHeight - 5) {\n CRWL_COMMENTS_LOADING = true;\n loadNextComments();\n }\n }\n });\n }\n }\n\n if (COMMENTS == CRN_DATATYPES.empty || COMMENTS.questionsCount == 0) {\n createQuestionlessComponents();\n } else {\n if (!FILTER.categoryPage) {\n if (COMMENTS.questionsActive == 0) {\n console.log(\"Bu ürün için hiç soru cevap bulunamadı\")\n return false;\n }\n\n if (document.querySelector('#' + PREFIX + 'mainQA')) {\n console.log(\"Question görüntüleyici tekrar yüklenmeye çalıştı\")\n return false;\n }\n\n createMainQuestionsComponent();\n createQAFilters();\n createQuestionsContainer();\n createLoadMoreButtonForQA();\n createNewQuestionComponent();\n\n COMMENTS.questions.forEach(question => {\n createQuestionRow(question);\n });\n }\n }\n }\n\n orderPageChecker = () => {\n const path = location.pathname;\n if (path.indexOf('/users/orders/') > -1) {\n if (path.length >= 20) {\n return true\n }\n }\n \n return false\n }\n\n createNewQuestionComponent = () => {\n const container = createElement('div');\n const text = createElement('div');\n const a = createElement('div');\n\n addClass(container,['f','faic','fjcc','mt-3','newQuestionComponent']);\n addClass(a,['ocp','tdl-u']);\n\n a.style.color = primaryColor;\n\n if (isMobile) {\n addClass(container,['fc']);\n }else{\n addClass(container,['fr']);\n addClass(a,['ml-1']);\n }\n \n text.innerText = 'Aradığınızı Bulamadınız mı?';\n a.innerText = 'Bize Yeni Bir Soru Sorun';\n a.addEventListener('click',()=>{\n createNewQuestionForm(FILTER.productCode, window.crwl.CCID);\n })\n\n container.appendChild(text);\n container.appendChild(a);\n QA_VIEWER.appendChild(container);\n }\n\n createNewQuestionForm = (productCode,ccid) => {\n const container = createElement('div');\n\n const productInfoRow = createModalProductInfoRow(false);\n const title = createElement('div');\n const textArea = createElement('textarea');\n const switchContainer = createSwitchButton('İsmim Görünsün','showNamePermit',true);\n const agreement = createElement('div');\n const permitContainer = createElement('div');\n const permitCheckBox = createElement('input');\n const permitLabel = createElement('div');\n const button = createElement('div');\n const errorMessage = createElement('div');\n\n addClass(container,['f','fc']);\n addClass(title,['t-1','mb-3','mt-3']);\n addClass(textArea,['t-1','mb-3','p-1','inputLabel']);\n addClass(switchContainer,['t-1','mb-3','f','fr']);\n addClass(agreement,['t-1','mb-3','inputLabel']);\n addClass(permitContainer,['t-1','mb-3','f','fr','faic']);\n addClass(permitCheckBox,['mr-2']);\n addClass(permitLabel,['inputLabel']);\n addClass(button,['tc','bold','p-3','ocp']);\n \n\n button.style.background = primaryColor;\n button.style.color = '#fff';\n textArea.style.border = '.5px solid '+textColor;\n permitCheckBox.style.width = '30px';\n permitCheckBox.style.height = '30px';\n permitCheckBox.style.accentColor = primaryColor;\n\n title.innerText = 'Ürün özellikleriyle ilgili sorularınızı buradan teknik ekibimize sorabilirsiniz.';\n textArea.placeholder = 'Ürün hakkındaki sorularınız nelerdir?';\n agreement.innerHTML = 'Yorumlarda ismimin gözükmesine ve yorum detaylarının platform genelinde kullanılmasına izin veriyorum. Aydınlatma Metni’ne ulaşmak için tıklayınız.';\n permitLabel.innerHTML = 'Soru sormak için Kullanıcı Sözleşmesi\\'ni kabul ediyorum.';\n button.innerText = 'Kaydet ve Devam Et';\n\n container.id = PREFIX+'newQuestionForm';\n errorMessage.id = PREFIX+'errorMessage';\n permitCheckBox.type = 'checkbox';\n permitCheckBox.name = 'permit';\n textArea.rows = '5';\n textArea.cols = '50';\n\n button.addEventListener('click',()=>{\n sendNewQuestion(productCode, ccid, container);\n })\n\n container.appendChild(productInfoRow);\n container.appendChild(title);\n container.appendChild(textArea);\n container.appendChild(switchContainer);\n container.appendChild(agreement);\n permitContainer.appendChild(permitCheckBox);\n permitContainer.appendChild(permitLabel);\n container.appendChild(permitContainer);\n container.appendChild(button);\n container.appendChild(errorMessage);\n\n const modal = createModal(\"Bize Soru Sor\",container);\n }\n\n createQuestionThanksPage = () => {\n const container = createElement('div');\n const img = createElement('img');\n const title = createElement('h5');\n const desc = createElement('h6');\n const ordersButton = createElement('div');\n const nextButton = createElement('div');\n\n addClass(container,['f', 'fc', 'fjcc']);\n addClass(title,['tc','inputLabel','mb-3']);\n addClass(desc,['tc','inputLabel','mb-3']);\n addClass(ordersButton,['tc','bold','p-3','ocp', 'mb-3']);\n addClass(nextButton,['tc','bold','p-3','ocp']);\n nextButton.style.background = primaryColor;\n nextButton.style.color = '#fff';\n img.style.width = '170px';\n img.style.height = '170px';\n img.style.margin = '20px auto 20px auto';\n ordersButton.style.border = '.5px solid '+primaryColor;\n\n img.src = 'https://www.crninja.com/assets/imgs/chakra_thanks_for_question.svg';\n title.innerText = 'Teşekkürler';\n desc.innerText = 'Sorunuz bize ulaştı. Müşteri temsilcilerimiz en kısa sürede size geri dönüş yapacaklar. İlginiz için teşekkür ederiz!';\n ordersButton.innerText = 'Siparişlerime Git';\n nextButton.innerText = 'Alışverişe Devam Et';\n\n ordersButton.addEventListener('click',()=>{\n location.href = 'https://www.chakra.com.tr/users/orders/';\n });\n\n nextButton.addEventListener('click',()=>{\n modalClose();\n });\n\n container.appendChild(img);\n container.appendChild(title);\n container.appendChild(desc);\n container.appendChild(ordersButton);\n container.appendChild(nextButton);\n\n return container;\n }\n\n createNewCommentForm = (productCode, ccid, productDetail, reviewButton) => {\n const container = createElement('div');\n\n const productInfoRow = createModalProductInfoRow(productDetail);\n const titleContainer = createElement('div');\n const title = createElement('div');\n const textArea = createElement('textarea');\n const imagesContainer = createElement('div');\n const icLeft = createElement('div');\n const icRight = createElement('div');\n const icLeftTitle = createElement('div');\n const icLeftDesc = createElement('div');\n const switchContainer = createSwitchButton('İsmim Görünsün','showNamePermit', false);\n const agreement = createElement('div');\n const permitContainer = createElement('div');\n const permitCheckBox = createElement('input');\n const permitLabel = createElement('div');\n const button = createElement('div');\n const errorMessage = createElement('div');\n const rate = createElement('input');\n \n addClass(container,['f','fc']);\n addClass(titleContainer,['f','fr','fjcsb','faic','mb-3','mt-3']);\n addClass(textArea,['t-1','mb-3','p-1','inputLabel']);\n \n addClass(imagesContainer,['f','fr','faic','fjcc', 'mb-3']);\n addClass(icLeft,['f','fc','fjcc','w-50']);\n addClass(icRight,['f','fr','faic','w-50']);\n addClass(icLeftDesc,['t-05']);\n\n addClass(switchContainer,['t-1','mb-3','f','fr']);\n addClass(agreement,['t-1','mb-3','inputLabel']);\n addClass(permitContainer,['t-1','mb-3','f','fr','faic']);\n addClass(permitCheckBox,['mr-2']);\n addClass(permitLabel,['inputLabel']);\n addClass(button,['tc','bold','p-3','ocp','f','fr','faic','fjcc']);\n \n button.style.background = primaryColor;\n button.style.color = '#fff';\n icLeftDesc.style.fontWeight = '100';\n textArea.style.border = '.5px solid '+textColor;\n permitCheckBox.style.width = '30px';\n permitCheckBox.style.height = '30px';\n permitCheckBox.style.accentColor = primaryColor;\n\n title.innerText = 'Ürünü beğendiniz mi?';\n icLeftTitle.innerHTML = 'Fotoğraf Ekle (opsiyonel)';\n icLeftDesc.innerHTML = 'Her bir fotoğrafın boyutu en fazla 10 mb JPG ve PNG olmalıdır.';\n textArea.placeholder = 'Ürün hakkındaki düşünceleriniz nelerdir?';\n agreement.innerHTML = 'Yorumlarda ismimin gözükmesine ve yorum detaylarının platform genelinde kullanılmasına izin veriyorum. Aydınlatma Metni’ne ulaşmak için tıklayınız.';\n permitLabel.innerHTML = 'Soru sormak için Kullanıcı Sözleşmesi\\'ni kabul ediyorum.';\n button.innerHTML = ' Ürünü Değerlendir';\n\n container.id = PREFIX+'newCommentForm';\n errorMessage.id = PREFIX+'errorMessage';\n permitCheckBox.type = 'checkbox';\n permitCheckBox.name = 'permit';\n textArea.rows = '3';\n textArea.cols = '50';\n rate.id = PREFIX + 'newCommentRate';\n rate.name = 'rate';\n rate.value = false;\n rate.hidden = true;\n \n\n button.addEventListener('click',()=>{\n sendNewComment(productCode, ccid, container, productDetail, reviewButton);\n })\n\n container.appendChild(productInfoRow);\n titleContainer.appendChild(title);\n titleContainer.appendChild(createClickableStars());\n container.appendChild(titleContainer);\n container.appendChild(textArea);\n icRight.appendChild(createUploadImageComponent());\n imagesContainer.appendChild(icLeft);\n imagesContainer.appendChild(icRight);\n icLeft.appendChild(icLeftTitle);\n icLeft.appendChild(icLeftDesc);\n container.appendChild(imagesContainer);\n container.appendChild(switchContainer);\n container.appendChild(agreement);\n permitContainer.appendChild(permitCheckBox);\n permitContainer.appendChild(permitLabel);\n container.appendChild(permitContainer);\n container.appendChild(button);\n container.appendChild(errorMessage);\n container.appendChild(rate);\n\n const modal = createModal(\"Ürünü Değerlendir\",container);\n\n setTimeout(() => {\n setImageUploaderListener(productCode,ccid);\n }, 1000);\n }\n\n createCommentThanksPage = () => {\n const container = createElement('div');\n const img = createElement('img');\n const title = createElement('h5');\n const desc = createElement('h6');\n const ordersButton = createElement('div');\n const nextButton = createElement('div');\n\n addClass(container,['f', 'fc', 'fjcc']);\n addClass(title,['tc','t-3','mb-3', 'inputLabel']);\n addClass(desc,['tc','inputLabel','mb-3']);\n addClass(ordersButton,['tc','bold','p-3','ocp', 'mb-3']);\n addClass(nextButton,['tc','bold','p-3','ocp']);\n nextButton.style.background = primaryColor;\n nextButton.style.color = '#fff';\n img.style.width = '170px';\n img.style.height = '170px';\n img.style.margin = '20px auto 20px auto';\n ordersButton.style.border = '.5px solid '+primaryColor;\n\n img.src = 'https://www.crninja.com/assets/imgs/chakra_thanks_for_comment_icon.svg';\n title.innerText = 'Teşekkürler,\\nDeğerlendirmen Paylaşıldı';\n desc.innerText = 'Alışveriş deneyimini değerlendirerek\\nbirçok kullanıcıya yardımcı oldunuz.';\n ordersButton.innerText = 'Siparişlerime Git';\n nextButton.innerText = 'Alışverişe Devam Et';\n\n ordersButton.addEventListener('click',()=>{\n location.href = 'https://www.chakra.com.tr/users/orders/';\n });\n\n nextButton.addEventListener('click',()=>{\n modalClose();\n });\n\n\n container.appendChild(img);\n container.appendChild(title);\n container.appendChild(desc);\n container.appendChild(ordersButton);\n container.appendChild(nextButton);\n\n return container;\n }\n\n createModal = (title, modalDetail) => {\n const modalAnimationDuration = 500;\n const container = createElement('div');\n container.id = PREFIX+'modal';\n const overlay = createElement('div');\n const modal = createElement('div');\n const _title = createElement('h4');\n const modalHeaderContainer = createElement('div');\n const closeButton = createElement('img');\n const mobileModalNotch = createElement('div');\n \n addClass(container,['f','fjcc','faic', 'fixFull']);\n addClass(overlay,['bigMediaOverlay','ocp']);\n addClass(modal,['modal','p-4']);\n addClass(modalHeaderContainer,['f','fr','faic','fjcsb']);\n addClass(_title, ['t-4']);\n addClass(closeButton, ['ocp']);\n addClass(mobileModalNotch,['mobileModalNotch']);\n\n modal.id = PREFIX+'modalDetail';\n _title.innerText = title;\n closeButton.src = 'https://www.crninja.com/assets/imgs/chakra_close_button.svg';\n\n if (isMobile) {\n addClass(container,['fc']);\n modal.style.height = \"90%\";\n modal.style.bottom = \"-2000px\";\n modal.appendChild(mobileModalNotch);\n }else{\n addClass(container,['fr']);\n modal.style.right = \"-1000px\";\n }\n\n const _modalClose = () => {\n if (isMobile) {\n modal.style.bottom = \"-2000px\";\n }else{\n modal.style.right = \"-1000px\";\n }\n setTimeout(() => {\n container.remove();\n }, modalAnimationDuration);\n };\n\n closeButton.addEventListener('click',_modalClose);\n overlay.addEventListener('click',_modalClose);\n\n modalHeaderContainer.appendChild(_title);\n modalHeaderContainer.appendChild(closeButton);\n modal.appendChild(modalHeaderContainer);\n modalDetail && modal.appendChild(modalDetail);\n container.appendChild(overlay);\n container.appendChild(modal);\n document.body.appendChild(container);\n\n setTimeout(() => {\n modal.style.right = \"0\";\n modal.style.bottom = \"0\";\n }, 10);\n\n return modal\n }\n\n modalClose = () => {\n const modalAnimationDuration = 500;\n const modal = document.querySelector('#'+PREFIX+'modal');\n const modalDetail = document.querySelector('#'+PREFIX+'modalDetail');\n \n if(!modal || !modalDetail) {return}\n\n if (isMobile) {\n modalDetail.style.bottom = \"-2000px\";\n }else{\n modalDetail.style.right = \"-1000px\";\n }\n setTimeout(() => {\n modal.remove();\n }, modalAnimationDuration);\n }\n \n createModalProductInfoRow = (productDetail) => {\n const productInfo = productDetail ? productDetail : getProductInfo(); \n \n const container = createElement('div');\n const left = createElement('div');\n const right = createElement('div');\n const img = createElement('img');\n const productName = createElement('div');\n const starRow = createElement('div');\n\n addClass(container,['f','fr','faic','p-2','mt-3']);\n addClass(right,['f','fc','fjcsa','h-100','t-05']);\n addClass(left,['mr-2']);\n addClass(starRow,['f','fr','faib']);\n\n left.style.width = '70px';\n left.style.height = '70px';\n container.style.background = '#FAF8F6';\n container.style.height = '90px';\n\n const star = createElement('div');\n addClass(star,['star','starFilled']);\n star.style.transform = 'scale(1.2)';\n\n if (orderPageChecker()) {\n addClass(starRow,'dn');\n }\n\n starRow.appendChild(star);\n starRow.innerHTML += ' '+COMMENTS.rateAVG+' ('+COMMENTS.commentCount+' Yorum)';\n\n if (productInfo.img) {\n img.src = productInfo.img;\n left.appendChild(img);\n container.appendChild(left);\n }\n \n if (productInfo.name) {\n productName.innerText = productInfo.name;\n right.appendChild(productName);\n }\n\n right.appendChild(starRow);\n container.appendChild(right);\n\n return container;\n }\n\n createSwitchButton = (text, id, nameInputIsActive) => {\n const container = createElement('div');\n const input = createElement('input');\n const label = createElement('label');\n const span = createElement('span');\n\n input.id = id;\n input.name = id;\n label.setAttribute('for',id);\n\n span.innerText = text;\n input.type='checkbox';\n\n addClass(container,['toggle-container']);\n addClass(label,'toggle');\n addClass(span,['label','inputLabel']);\n\n container.appendChild(input);\n container.appendChild(label);\n container.appendChild(span);\n\n if (nameInputIsActive) {\n const nameInput = createElement('input');\n nameInput.name = 'userFullName';\n nameInput.type = 'text';\n nameInput.placeholder = 'İsim';\n addClass(nameInput,['w-50','p-2']);\n nameInput.style.border = '.5px solid '+textColor;\n container.appendChild(nameInput);\n addClass(container,['fjcsb']);\n }\n\n return container\n }\n\n createClickableStars = () => {\n const container = createElement('div');\n addClass(container, ['f', 'fr', 'fjcc', 'faic', 'ocp']);\n let _on = false;\n for (let i = 1; i <= 5; i++) {\n const _star = createStar(isMobile ? 30 : 45);\n addClass(_star, 'starEmpty');\n _star.dataset.id = i;\n _star.addEventListener('mousemove', () => {\n if (!_on) {\n container.querySelectorAll('div').forEach((star, j) => {\n if (i > j) {\n addClass(star, 'starFilled');\n removeClass(star, 'starEmpty');\n } else {\n addClass(star, 'starEmpty');\n removeClass(star, 'starFilled');\n }\n });\n _on = true;\n }\n })\n\n _star.addEventListener('mouseleave', () => {\n if (_on) {\n container.querySelectorAll('div').forEach((star, j) => {\n if (newCommentRate) {\n if (j >= newCommentRate) {\n addClass(star, 'starEmpty');\n removeClass(star, 'starFilled');\n } else {\n addClass(star, 'starFilled');\n removeClass(star, 'starEmpty');\n }\n } else {\n addClass(star, 'starEmpty');\n removeClass(star, 'starFilled');\n }\n });\n _on = false;\n }\n })\n\n _star.addEventListener('click', () => {\n console.log(\"RATED\", _star.dataset.id);\n newCommentRate = _star.dataset.id;\n document.querySelector('#' + PREFIX + 'newCommentRate').value = newCommentRate;\n })\n\n container.appendChild(_star);\n }\n\n return container;\n }\n\n createStar = (size) => {\n const star = createElement('div');\n addClass(star, 'star');\n if (size) {\n star.style.width = size + \"px\";\n star.style.height = (size-5) + \"px\";\n }\n return star\n }\n\n createUploadImageComponent = () => {\n const container = createElement('div');\n\n const imageForm = createElement('form');\n imageForm.action = _url + 'uploadImage';\n imageForm.method = 'POST';\n imageForm.enctype = 'multipart/form-data';\n imageForm.id = PREFIX+'uploadImageForm';\n addClass(imageForm, ['f', 'fr', 'fjcs', 'faic', 'w-50', 'form', 'dn']);\n const imageInput = createElement('input');\n const imageLabel = createElement('label');\n addClass(imageLabel, 'label');\n imageLabel.innerText = 'Bir resim yükleyin:';\n imageLabel.for = 'imagefile';\n imageForm.appendChild(imageLabel);\n addClass(imageInput, ['o0'])\n const imageSubmitButton = createElement('button');\n imageInput.type = 'file';\n imageInput.id = 'imagefile';\n imageInput.name = 'imagefile';\n imageInput.accept = '.jpeg, .jpg, .png, .gif, .bmp, .webp, .heic';\n imageSubmitButton.type = 'submit';\n imageSubmitButton.id = 'uploadImageSubmit';\n imageSubmitButton.hidden = true;\n imageForm.appendChild(imageInput);\n imageForm.appendChild(imageSubmitButton);\n container.appendChild(imageForm);\n\n addClass(container,['w-100','h-100','f','fr','fjcsb','faic','ml-2']);\n\n imageInput.addEventListener('change', function (e) { imageSubmitButton.click(); });\n\n for (let i = 0; i < 3; i++) {\n const box = createElement('div');\n const img = createElement('img');\n box.id = PREFIX+'uploadImageBox'+i;\n addClass(box,['ocp','w-25','h-100','pr','f','faic','fjcc']);\n addClass(img,['w-100','h-100']);\n box.style.minWidth = '52px';\n box.style.minHeight = '52px';\n box.style.background= '#faf8f6';\n box.dataset.value = 'empty';\n img.src = 'https://www.crninja.com/assets/imgs/chakra_empty_image_box.svg';\n\n box.appendChild(img);\n container.appendChild(box);\n\n box.addEventListener('click', function (e) { \n if (box.dataset.value == 'empty') {\n imageInput.click(); \n }\n });\n }\n\n return container\n }\n\n createImageBoxCloseIcon = (box) => {\n const container = createElement('img');\n addClass(container,['imageBoxCloseButton','pa']);\n container.src = 'https://www.crninja.com/assets/imgs/chakra_close_button.svg';\n container.addEventListener('click',()=>{\n removeBoxImage(box);\n })\n return container\n }\n\n getProductInfo = () => {\n let name = document.querySelector('.product-info__title');\n let img = document.querySelector('.pswp-gallery img');\n\n let url = window.location.href;\n\n if (name) {\n name = name.innerText;\n }\n\n if (img) {\n if (img.src) {\n img = img.src;\n }else if(img.dataset.src){\n img = img.dataset.src\n }\n }\n \n return { name, img, url }\n }\n\n getEmptyImageBox = () => {\n const box = document.querySelector('[data-value=\"empty\"]');\n return box ? box : false;\n }\n\n setBoxImage = (url) => {\n const box = getEmptyImageBox();\n if (box) {\n box.dataset.value = 'filled';\n box.querySelector('img').src = _url + '' +url;\n box.appendChild(createImageBoxCloseIcon(box));\n }\n }\n\n removeBoxImage = (box) => {\n if (box) {\n box.innerHTML = '';\n const img = createElement('img');\n addClass(img,['w-100','h-100']);\n img.src = 'https://www.crninja.com/assets/imgs/chakra_empty_image_box.svg';\n box.appendChild(img);\n setTimeout(() => {\n box.dataset.value = 'empty';\n }, 500);\n }\n }\n\n setImageUploaderListener = (productCode, ccid) => {\n const form = document.getElementById(PREFIX+'uploadImageForm');\n form && form.addEventListener('submit', function (e) {\n e.preventDefault();\n\n const formData = new FormData(this);\n const xhr = new XMLHttpRequest();\n\n xhr.open('POST', _url + 'uploadImage?productCode=' + productCode + '&ccid=' + ccid, true);\n\n xhr.onload = function () {\n console.log(this.responseText);\n if (this.status === 200) {\n setBoxImage(this.responseText);\n uploadedImages.push(this.responseText);\n } else if (this.status === 400) {\n console.log(\"Cancelled\");\n } else {\n console.log(\"Yükleme sırasında bir hata oluştu.\");\n }\n };\n\n xhr.send(formData);\n });\n }\n\n getUserName = () => {\n const name = document.querySelector('.account-menu__user-subtitle');\n return name ? name.innerText : \"\";\n }\n\n sendNewComment = (productCode, ccid, container, productDetail, reviewButton) => {\n let data = {\n productCode: productCode,\n ccid: ccid,\n mediaData: uploadedImages,\n userFullName: getUserName(),\n };\n\n const { name, url } = productDetail;\n data = { ...data, productName:name, productUrl:url };\n\n const newCommentForm = document.getElementById(PREFIX+'newCommentForm');\n newCommentForm.querySelectorAll('input').forEach(input => {\n \n if (input.type == 'text') {\n data[input.name] = input.value\n }\n\n if (input.type == 'checkbox') {\n data[input.name] = input.checked\n }\n });\n\n data['comment'] = newCommentForm.querySelector('textArea').value;\n\n const xhr = new XMLHttpRequest();\n\n xhr.open('POST', _url + 'newComment', true);\n xhr.setRequestHeader('Content-Type', 'application/json');\n const errEl = document.querySelector('#' + PREFIX + 'errorMessage');\n xhr.onload = function () {\n if (this.status === 200) {\n if (this.responseText == 'success') {\n console.log(\"success\");\n container.innerHTML = '';\n container.appendChild(createCommentThanksPage());\n saveUserCommentLocalStorage(productCode);\n reviewButton.remove();\n } else {\n errEl.innerText = this.responseText;\n addClass(errEl, 'errorMessage');\n }\n } else {\n if (errEl) {\n errEl.innerText = this.responseText;\n addClass(errEl, 'errorMessage');\n }\n }\n };\n\n xhr.send(JSON.stringify(data));\n }\n\n sendNewQuestion = (productCode, ccid, container) => {\n let data = {\n productCode: productCode,\n ccid: ccid,\n };\n\n const { name, url } = getProductInfo();\n data = { ...data, productName:name, productUrl:url };\n\n const newQuestionForm = document.getElementById(PREFIX+'newQuestionForm');\n\n newQuestionForm.querySelectorAll('input').forEach(input => {\n if (input.type == 'text') {\n data[input.name] = input.value\n }\n\n if (input.type == 'checkbox') {\n data[input.name] = input.checked\n }\n });\n\n data['question'] = newQuestionForm.querySelector('textArea').value;\n\n \n const xhr = new XMLHttpRequest();\n\n xhr.open('POST', _url + 'newQuestion', true);\n xhr.setRequestHeader('Content-Type', 'application/json');\n const errEl = document.querySelector('#' + PREFIX + 'errorMessage');\n xhr.onload = function () {\n if (this.status === 200) {\n if (this.responseText == 'success') {\n console.log(\"success\");\n container.innerHTML = '';\n container.appendChild(createQuestionThanksPage());\n } else {\n errEl.innerText = this.responseText;\n addClass(errEl, 'errorMessage');\n }\n } else {\n if (errEl) {\n errEl.innerText = this.responseText;\n addClass(errEl, 'errorMessage');\n }\n }\n };\n\n xhr.send(JSON.stringify(data));\n }\n\n createMainComponent = () => {\n VIEWER.id = PREFIX + 'main';\n VIEWER.classList.add(PREFIX + 'main');\n\n let path = CRN_PRODUCTION ? \"#\" + PREFIX + \"clonedContent\" : \"#preview\";\n let insertType = STYLES.main.insertType;\n if (isMobile) {\n path = '#' + PREFIX + 'mobileCommentsArea';\n insertType = 'insertInside';\n }\n targetElementChecker(path, (result) => {\n if (result) {\n switchDirector(insertType, path, VIEWER, false)\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n\n createMainQuestionsComponent = () => {\n QA_VIEWER.id = PREFIX + 'mainQA';\n QA_VIEWER.classList.add(PREFIX + 'mainQA');\n\n let path = CRN_PRODUCTION ? \"#\" + PREFIX + \"clonedContentForQA\" : \"#preview\";\n let insertType = STYLES.main.insertType;\n if (isMobile) {\n path = '#' + PREFIX + 'mobileQuestionsArea';\n insertType = 'insertInside';\n }\n targetElementChecker(path, (result) => {\n if (result) {\n switchDirector(insertType, path, QA_VIEWER, false)\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n\n createCategoryMiniReviews = (comments) => {\n if (!comments.length > 0) {\n return false\n }\n\n let matchType;\n const path = STYLES.categoryreview.selectorPath;\n const insertPath = STYLES.categoryreview.insertPath;\n if (comments[0].feedSKU) {\n matchType = 'code';\n } else if (comments[0].name) {\n matchType = 'name';\n } else {\n matchType = 'name';\n }\n\n targetElementChecker(path, (result) => {\n if (result) {\n const productEls = document.querySelectorAll(path);\n if (productEls.length > 0) {\n productEls.forEach(product => {\n comments.forEach(productReviewData => {\n if (matchType == 'code') {\n if (product.dataset.sku == productReviewData.feedSKU) {\n if (!product.querySelector('.' + PREFIX + 'miniReviewContainer')) {\n switchDirector(STYLES.categoryreview.insertType, insertPath, createCategoryPageMiniReview(productReviewData, product.querySelector(\"a\").href), product.querySelector(insertPath))\n }\n }\n } else {\n if (product.innerText == productReviewData.name) {\n if (!product.parentNode.querySelector('.' + PREFIX + 'miniReviewContainer')) {\n switchDirector(STYLES.categoryreview.insertType, path, createCategoryPageMiniReview(productReviewData, product.href), product)\n }\n }\n }\n });\n });\n }\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n\n createCategoryPageMiniReview = (data, url) => {\n const container = document.createElement(\"div\");\n container.classList.add(PREFIX + 'miniReviewContainer')\n\n /*const rateAVG = parseFloat(data.rateAVG).toFixed(1);\n container.appendChild(createRate(rateAVG));*/\n\n const starCount = data.rateAVG;\n container.appendChild(createStars(starCount, !isMobile, false));\n\n const commentCount = '(' + data.commentCount + ')';\n const mediaCommentCount = data.mediaCommentCount;\n const commentCountEl = createCommentCount(commentCount, mediaCommentCount);\n commentCountEl.style.fontWeight = '400';\n if (isMobile) {\n commentCountEl.style.fontSize = '11px';\n commentCountEl.style.margin = '2px 5px 0 5px';\n }\n container.appendChild(commentCountEl);\n\n container.addEventListener('click', () => {\n location.href = url;\n })\n\n return container;\n }\n\n createCommentsContainer = () => {\n COMMENT_CONTAINER.id = PREFIX + 'commentContainer';\n COMMENT_CONTAINER.classList.add(PREFIX + 'commentsArea');\n COMMENT_CONTAINER.style.backgroundColor = STYLES.comment.commentBackgroundColor;\n VIEWER.appendChild(COMMENT_CONTAINER);\n }\n\n createQuestionsContainer = () => {\n QA_CONTAINER.id = PREFIX + 'questionsContainer';\n QA_CONTAINER.classList.add(PREFIX + 'questionsArea');\n QA_CONTAINER.style.backgroundColor = STYLES.comment.commentBackgroundColor;\n QA_VIEWER.appendChild(QA_CONTAINER);\n }\n\n createMiniReview = () => {\n if (STYLES.minireview?.hide == 'visible') {\n const container = document.createElement(\"div\");\n container.id = PREFIX + 'miniReviewContainer';\n container.classList.add(PREFIX + 'miniReviewContainer');\n container.style.fontWeight = '300';\n\n const rateAVG = parseFloat(COMMENTS.rateAVG).toFixed(1);\n container.appendChild(createRate(rateAVG));\n\n const starCount = COMMENTS.rateAVG;\n container.appendChild(createStars(starCount, true, false));\n\n\n const _text = _getLang() == 'TR' ? ' Değerlendirmeler' : ' Ratings';\n\n const commentCount = COMMENTS.commentCount + _text;\n const mediaCommentCount = false; /*COMMENTS.mediaCommentCount*/\n const _title = createCommentCount(commentCount, mediaCommentCount);\n _title.style.paddingLeft = '12px';\n _title.style.borderLeft = '1px solid gray';\n container.appendChild(_title);\n\n container.addEventListener('click', () => {\n scrollToMainViewer();\n const clonedMenuButton = document.querySelector('#' + PREFIX + 'clonedMenuButton');\n if (clonedMenuButton) {\n clonedMenuButton.click();\n }\n });\n\n if (!isMobile) {\n const miniHoverPanel = creteHowerPanel(rateAVG, COMMENTS.rateAndCounts, COMMENTS.commentCount);\n miniHoverPanel.style.left = 'unset';\n const c = true;\n if (c) {\n container.appendChild(miniHoverPanel);\n }\n\n let hoverPanelStatus = false;\n container.addEventListener('mousemove', () => {\n if (!hoverPanelStatus) {\n if (miniHoverPanel && miniHoverPanel.classList.contains(PREFIX + 'hidden')) {\n miniHoverPanel.classList.add(PREFIX + 'visible');\n miniHoverPanel.classList.remove(PREFIX + 'hidden');\n hoverPanelStatus = true;\n }\n }\n })\n\n container.addEventListener('mouseleave', () => {\n if (hoverPanelStatus) {\n if (miniHoverPanel && miniHoverPanel.classList.contains(PREFIX + 'visible')) {\n miniHoverPanel.classList.add(PREFIX + 'hidden');\n miniHoverPanel.classList.remove(PREFIX + 'visible');\n hoverPanelStatus = false;\n }\n }\n })\n }\n\n const path = CRN_PRODUCTION ? STYLES.minireview.selectorPath : \"#pageTitle\";\n targetElementChecker(path, (result) => {\n if (result) {\n switchDirector(STYLES.minireview.insertType, path, container, false)\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n }\n\n creteHowerPanel = (avg, rateAndCounts, commentCount) => {\n if (!avg || !rateAndCounts) {\n return false\n }\n\n const container = document.createElement(\"div\");\n container.id = PREFIX + 'miniHoverPanel';\n container.classList.add(PREFIX + 'miniHoverPanel');\n container.classList.add(PREFIX + 'hidden');\n\n const createRow = () => {\n const row = document.createElement('div');\n row.classList.add(PREFIX + 'miniHoverPanelRow');\n return row\n }\n\n /*const avgRow = createRow();\n avgRow.innerHTML = '' + avg + ' Ortalama Puan';\n container.appendChild(avgRow);*/\n\n const createProgresBar = (percent, txt) => {\n const row = document.createElement('div');\n row.classList.add(PREFIX + 'miniHoverPanelProgressBarContainer');\n\n const barEmpty = document.createElement('div');\n barEmpty.classList.add(PREFIX + 'miniHoverPanelProgressBarEmpty');\n\n const bar = document.createElement('div');\n bar.classList.add(PREFIX + 'miniHoverPanelProgressBar');\n bar.style.width = percent + '%';\n barEmpty.appendChild(bar);\n\n row.appendChild(barEmpty);\n\n const text = document.createElement('div');\n text.classList.add(PREFIX + 'miniHoverPanelProgressBarText');\n text.innerText = txt;\n row.appendChild(text);\n\n return row;\n }\n\n const createRateAndBar = (rate, count) => {\n const row = createRow();\n\n const leftCol = document.createElement('div');\n leftCol.style.width = '40%';\n leftCol.style.display = 'flex';\n leftCol.style.justifyContent = 'center';\n leftCol.innerHTML = '' + rate + '';\n\n const rightCol = document.createElement('div');\n rightCol.style.width = '60%';\n\n leftCol.appendChild(createStars(rate, false, false));\n rightCol.appendChild(createProgresBar(calculatePercent(count, commentCount), count));\n\n row.appendChild(leftCol);\n row.appendChild(rightCol);\n return row\n }\n\n let rates = [1, 2, 3, 4, 5], currentRates = [];\n rateAndCounts.forEach(rate => {\n container.appendChild(createRateAndBar(rate.rate, rate.count))\n currentRates.push(rate.rate)\n });\n\n let diff = rates.filter(x => !currentRates.includes(x));\n\n diff.sort();\n diff.reverse();\n\n diff.forEach(rate => {\n container.appendChild(createRateAndBar(rate, 0))\n });\n\n return container\n }\n\n createCommentlessComponents = () => {\n const container = document.createElement(\"div\");\n container.style.height = \"180px\";\n container.style.width = \"100%\";\n container.style.display = \"flex\";\n container.style.justifyContent = \"center\";\n container.style.alignItems = \"center\";\n container.style.flexDirection = \"column\";\n\n if (isMobile) {\n container.style.marginBottom = \"40px\";\n }\n\n const starContainer = document.createElement(\"div\");\n starContainer.style.height = \"120px\";\n starContainer.style.width = \"120px\";\n starContainer.style.borderRadius = \"50%\";\n starContainer.style.margin = \"15px 0 20px 0\";\n starContainer.style.display = \"flex\";\n starContainer.style.justifyContent = \"center\";\n starContainer.style.alignItems = \"center\";\n\n const star = document.createElement('img');\n star.src = 'https://www.crninja.com/assets/imgs/chakra_no_comment_icon.svg';\n starContainer.appendChild(star);\n\n container.appendChild(starContainer);\n\n const desc = document.createElement('div');\n desc.style.textAlign = 'center';\n desc.style.color = 'rgb(126,126,126)';\n desc.style.fontSize = '14px';\n desc.style.fontWeight = '100';\n desc.innerText = 'Bu ürün hakkında daha önce hiç yorum yapılmamış.';\n\n container.appendChild(desc);\n\n const clonedReviewArea = document.querySelector('#' + PREFIX + (isMobile ? 'mobileCommentsArea' : 'clonedContent'));\n if (clonedReviewArea) {\n clonedReviewArea.appendChild(container);\n }\n\n const miniContainer = document.createElement(\"div\");\n miniContainer.style.margin = \"10px 0\";\n miniContainer.style.width = \"100%\";\n miniContainer.style.display = \"flex\";\n miniContainer.style.justifyContent = \"center\";\n miniContainer.style.alignItems = \"center\";\n miniContainer.style.flexDirection = \"row\";\n\n const miniStar = document.createElement('img');\n miniStar.src = 'https://www.crninja.com/assets/imgs/chakra-star.svg';\n miniStar.setAttribute('height', '21px');\n miniStar.style.marginRight = \"5px\";\n miniContainer.appendChild(miniStar);\n\n const miniDesc = document.createElement(\"div\");\n miniDesc.style.color = 'rgb(126,126,126)';\n miniDesc.style.fontSize = '14px';\n miniDesc.style.fontWeight = '100';\n miniDesc.innerText = 'Henüz Yorum Yazılmamış';\n miniContainer.appendChild(miniDesc);\n\n const path = \".product-info__title\";\n targetElementChecker(path, (result) => {\n if (result) {\n switchDirector('insertBefore', path, miniContainer, false)\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n\n createQuestionlessComponents = () => {\n const container = document.createElement(\"div\");\n container.style.height = \"280px\";\n container.style.width = \"100%\";\n container.style.display = \"flex\";\n container.style.justifyContent = \"center\";\n container.style.alignItems = \"center\";\n container.style.flexDirection = \"column\";\n\n if (isMobile) {\n container.style.marginBottom = \"40px\";\n }\n\n const starContainer = document.createElement(\"div\");\n starContainer.style.height = \"120px\";\n starContainer.style.width = \"120px\";\n starContainer.style.borderRadius = \"50%\";\n starContainer.style.margin = \"15px 0 20px 0\";\n starContainer.style.display = \"flex\";\n starContainer.style.justifyContent = \"center\";\n starContainer.style.alignItems = \"center\";\n\n const star = document.createElement('img');\n star.src = 'https://www.crninja.com/assets/imgs/chakra_no_question_icon.svg';\n starContainer.appendChild(star);\n\n container.appendChild(starContainer);\n\n const desc = document.createElement('div');\n desc.style.textAlign = 'center';\n desc.style.color = 'rgb(126,126,126)';\n desc.style.fontSize = '14px';\n desc.style.fontWeight = '100';\n desc.innerText = 'Bu ürün hakkında daha önce hiç soru sorulmamış.';\n\n const newQuestionButton = createElement('div');\n addClass(newQuestionButton,['tc','bold','p-3','ocp', 'mt-3','mb-3']);\n newQuestionButton.style.border = '1px solid '+primaryColor;\n newQuestionButton.innerText = 'Ürün Hakkında Soru Sor';\n newQuestionButton.addEventListener('click',()=>{\n createNewQuestionForm(FILTER.productCode,window.crwl.CCID);\n });\n \n container.appendChild(desc);\n container.appendChild(newQuestionButton);\n\n const clonedReviewArea = document.querySelector('#' + PREFIX + (isMobile ? 'mobileQuestionsArea' : 'clonedContentForQA'));\n if (clonedReviewArea) {\n clonedReviewArea.appendChild(container);\n }\n\n }\n\n createHr = () => {\n let hr = document.createElement('div');\n hr.classList.add(PREFIX + 'hr');\n return hr\n }\n\n createQAFilters = () => {\n const container = document.createElement('div');\n container.classList.add(PREFIX + 'qaFiltersContainer');\n\n const inputContainer = document.createElement('div');\n inputContainer.classList.add(PREFIX + 'qaFiltersInputContainer');\n\n const input = document.createElement('input');\n input.classList.add(PREFIX + 'qaFiltersInput');\n input.placeholder = 'Sorularda Ara';\n input.addEventListener('input', (e) => {\n if (e.target.value != '') {\n const searchData = e.target.value;\n changeFilterForQA('search', searchData);\n } else {\n delete CURRENT_QA_FILTER.search;\n applyFilterForQA();\n }\n });\n\n const searchIcon = document.createElement('div');\n searchIcon.classList.add(PREFIX + 'searchIcon');\n searchIcon.innerHTML = '';\n searchIcon.addEventListener('click', (e) => {\n if (input.value != '') {\n const searchData = input.value;\n changeFilterForQA('search', searchData);\n } else {\n delete CURRENT_QA_FILTER.search;\n applyFilterForQA();\n }\n });\n\n const sortContainer = document.createElement('div');\n sortContainer.classList.add(PREFIX + 'sortContainer');\n\n const sortEl = document.createElement('select');\n sortEl.classList.add(PREFIX + 'sortEl');\n sortEl.addEventListener('change', (e) => {\n const sortData = e.target.value;\n changeFilterForQA('sort', sortData);\n });\n\n const _default = document.createElement('option');\n _default.classList.add(PREFIX + 'sortOptions');\n\n const az = document.createElement('option');\n az.classList.add(PREFIX + 'sortOptions');\n\n const za = document.createElement('option');\n za.classList.add(PREFIX + 'sortOptions');\n\n _default.innerText = 'Sırala';\n za.innerText = 'Yeniden Eskiye';\n az.innerText = 'Eskiden Yeniye';\n\n _default.value = 'default';\n _default.selected = true;\n az.value = 'az';\n za.value = 'za';\n\n sortEl.appendChild(_default);\n sortEl.appendChild(za);\n sortEl.appendChild(az);\n\n inputContainer.appendChild(input);\n inputContainer.appendChild(searchIcon);\n container.appendChild(inputContainer);\n\n sortContainer.appendChild(sortEl);\n\n container.appendChild(sortContainer);\n\n QA_VIEWER.appendChild(container);\n }\n\n createSummarize = () => {\n if (!COMMENTS.summarize || _getLang() != 'TR') {\n return false;\n }\n\n const container = document.createElement('div');\n container.classList.add(PREFIX + 'summarizeContainer');\n const title = document.createElement('div');\n title.innerText = 'Değerlendirme Özeti';\n title.classList.add(PREFIX + 'summarizeTitle');\n container.appendChild(title);\n const summary = document.createElement('div');\n summary.classList.add(PREFIX + 'summary');\n summary.innerText = COMMENTS.summarize;\n container.appendChild(summary);\n VIEWER.appendChild(container);\n }\n\n createTitle = () => {\n /*let title = document.createElement('div');\n title.innerText = COMMENTS.commentCount +' '+ STYLES.main.title;\n title.classList.add(PREFIX + 'title');*/\n\n const infoRow = document.createElement('div');\n infoRow.classList.add(PREFIX + 'headerInfoRow');\n infoRow.style.position = 'relative';\n\n if (isMobile) {\n /*title.style.width = 'fit-content';*/\n infoRow.style.width = 'fit-content';\n }\n\n const rateAVG = parseFloat(COMMENTS.rateAVG).toFixed(1);\n\n let rateAVGElement = document.createElement('div');\n rateAVGElement.innerText = parseFloat(COMMENTS.rateAVG).toFixed(1);\n rateAVGElement.style.fontSize = '45px';\n rateAVGElement.style.fontWeight = '100';\n infoRow.appendChild(rateAVGElement);\n\n /*infoRow.appendChild(createRate(rateAVG));*/\n\n const starCount = COMMENTS.rateAVG;\n const _stars = createStars(starCount, true, false, true);\n infoRow.appendChild(_stars);\n\n /*let info = document.createElement('div');\n info.style.fontWeight = '100';\n info.style.fontSize = '12px';\n info.style.margin = '15px 0';\n info.style.textAlign = 'center';\n info.style.width = '100%';\n info.style.display = 'flex';\n info.style.justifyContent = 'center';\n info.style.alignItems = 'center';\n info.innerHTML = `\n Değerlendirme yapabilmek için bu ürünü satın almış olmalısınız.\n `;\n \n infoRow.appendChild(info);*/\n\n\n /*if (!isMobile) {\n const hoverIcon = document.createElement('div');\n hoverIcon.innerHTML = '';\n infoRow.appendChild(hoverIcon);\n }*/\n\n const titleContainer = document.createElement('div');\n titleContainer.classList.add(PREFIX + 'titleContainer');\n titleContainer.style.display = \"flex\";\n titleContainer.style.flexDirection = \"column\";\n titleContainer.style.justifyContent = \"center\";\n titleContainer.style.alignItems = \"center\";\n titleContainer.style.margin = \"15px 0\";\n\n if (isMobile) {\n titleContainer.style.justifyContent = \"space-between\";\n }\n\n titleContainer.appendChild(infoRow);\n /*titleContainer.appendChild(title);\n \n if (!isMobile) {\n const shortingContainer = document.createElement('div');\n shortingContainer.classList.add(PREFIX + 'shortingContainer');\n shortingContainer.style.width=\"100%\";\n titleContainer.appendChild(shortingContainer);\n }*/\n\n\n _createHoverPanel = () => {\n const miniHoverPanel = creteHowerPanel(rateAVG, COMMENTS.rateAndCounts, COMMENTS.commentCount);\n miniHoverPanel.style.top = \"50%\";\n miniHoverPanel.style.left = \"unset\";\n const c = true;\n if (c) {\n infoRow.appendChild(miniHoverPanel);\n }\n\n let hoverPanelStatus = false;\n infoRow.addEventListener('mousemove', () => {\n if (!hoverPanelStatus) {\n if (miniHoverPanel && miniHoverPanel.classList.contains(PREFIX + 'hidden')) {\n miniHoverPanel.classList.add(PREFIX + 'visible');\n miniHoverPanel.classList.remove(PREFIX + 'hidden');\n hoverPanelStatus = true;\n }\n }\n })\n\n infoRow.addEventListener('mouseleave', () => {\n if (hoverPanelStatus) {\n if (miniHoverPanel && miniHoverPanel.classList.contains(PREFIX + 'visible')) {\n miniHoverPanel.classList.add(PREFIX + 'hidden');\n miniHoverPanel.classList.remove(PREFIX + 'visible');\n hoverPanelStatus = false;\n }\n }\n })\n }\n\n if (!isMobile) {\n _createHoverPanel();\n }\n\n VIEWER.appendChild(titleContainer);\n }\n\n createRate = (rate) => {\n if (!rate) {\n return false\n }\n let rateElement = document.createElement('div');\n rateElement.innerText = rate;\n rateElement.classList.add(PREFIX + 'rateAVG');\n return rateElement\n }\n\n createCommentCount = (commentCount, mediaCommentCount) => {\n if (!commentCount) {\n return false\n }\n\n let commentCountElement = document.createElement('div');\n commentCountElement.innerHTML = commentCount;\n\n commentCountElement.classList.add(PREFIX + 'rateAVG');\n\n if (mediaCommentCount > 0) {\n commentCountElement.innerHTML += ' 📷';\n }\n\n return commentCountElement\n }\n\n createUserInfo = (userInfo) => {\n if (!userInfo) {\n return false\n }\n let userInfoElement = document.createElement('div');\n userInfoElement.innerHTML = _changeTimeLang(userInfo.lastModifiedDate) + ' • ' + userInfo.userFullName + (userInfo.productSize ? (' • ' + userInfo.productSize) : \"\");\n userInfoElement.classList.add(PREFIX + 'userInfo');\n return userInfoElement\n }\n\n createStars = (starCount, big, commentCount, veryBig) => {\n if (!starCount) {\n starCount = 0;\n }\n\n const halfStar = parseFloat(starCount);\n let halfPercent = false, integerPart = 0;\n if (isFloat(halfStar)) {\n integerPart = parseInt(starCount);\n halfPercent = starCount.split(\".\")[1].substr(0, 2);\n }\n\n let starsContainer = document.createElement('div');\n starsContainer.classList.add(PREFIX + 'starsContainer');\n if (big) {\n starsContainer.style.margin = '0 10px 0 0';\n }\n\n for (let i = 1; i <= 5; i++) {\n if (i == integerPart + 1) {\n starsContainer.appendChild(createHalfStar(halfPercent, big, veryBig));\n } else {\n const star = document.createElement('div');\n star.classList.add(PREFIX + 'star');\n\n if (big) {\n star.style.transform = 'scale(1)';\n }\n\n if (veryBig) {\n star.style.transform = 'scale(2)';\n star.style.margin = '10px 20px 30px 0';\n }\n\n if (starCount >= i) {\n star.classList.add(PREFIX + 'starFilled');\n }\n else {\n star.classList.add(PREFIX + 'starEmpty');\n }\n\n starsContainer.appendChild(star);\n }\n }\n\n if (commentCount != false && commentCount != 'undefined') {\n starsContainer.innerHTML += '(' + commentCount + ')';\n }\n\n return starsContainer\n }\n\n createHalfStar = (percent, big, veryBig) => {\n\n const halfStarContainer = document.createElement('div');\n halfStarContainer.classList.add(PREFIX + 'star');\n\n if (big) {\n halfStarContainer.style.transform = 'scale(1)';\n }\n\n if (veryBig) {\n halfStarContainer.style.transform = 'scale(2)';\n halfStarContainer.style.margin = '10px 20px 30px 0';\n }\n\n const emptyStar = document.createElement('div');\n emptyStar.classList.add(PREFIX + 'starEmpty');\n emptyStar.classList.add(PREFIX + 'halfStarPosition');\n\n\n const filledStar = document.createElement('div');\n filledStar.classList.add(PREFIX + 'starFilled');\n filledStar.classList.add(PREFIX + 'halfStarPosition');\n filledStar.style.zIndex = \"9\";\n filledStar.style.width = percent + \"%\";\n\n halfStarContainer.appendChild(emptyStar)\n halfStarContainer.appendChild(filledStar)\n\n return halfStarContainer\n }\n\n createLike = (likeCount) => {\n if (!likeCount) {\n likeCount = 0;\n }\n let likeCountElement = document.createElement('div');\n likeCountElement.classList.add(PREFIX + 'likeCount');\n\n let svg = document.createElement('div');\n svg.innerHTML = \"\";\n\n let count = document.createElement('div');\n count.style.marginLeft = '5px';\n count.innerText = '(' + likeCount + ')';\n\n likeCountElement.appendChild(svg)\n likeCountElement.appendChild(count)\n\n\n return likeCountElement\n }\n\n createFilters = (data) => {\n if (!data) {\n return false\n }\n\n let filtersContainer = document.createElement('div');\n filtersContainer.classList.add(PREFIX + 'filtersContainer');\n\n /*if (data.mediaCommentCount > 0) {\n filtersContainer.appendChild(createFilterTitle('Konuya Göre', false));\n }\n \n \n filtersContainer.appendChild(createFilterTitle('Puana Göre', false));*/\n\n const starRow = document.createElement('div');\n starRow.classList.add(PREFIX + 'starFilterRow');\n\n starRow.appendChild(createStarBadge(1, 1, true));\n\n data.mediaCommentCount && starRow.appendChild(createMediaBadge(data.mediaCommentCount));\n\n let _rateData = data.rateAndCounts;\n\n let rates = [1, 2, 3, 4, 5], currentRates = [];\n _rateData.forEach(rate => {\n currentRates.push(rate.rate)\n });\n\n let diff = rates.filter(x => !currentRates.includes(x));\n\n diff.sort();\n diff.reverse();\n\n diff.forEach(rate => {\n _rateData.push({ count: 0, rate: rate, block: true })\n });\n\n _rateData.sort(function (a, b) {\n return b.rate - a.rate;\n });\n\n _rateData.forEach(rateData => {\n starRow.appendChild(createStarBadge(parseInt(rateData.rate), rateData.count, false, rateData.block ? true : false));\n });\n\n filtersContainer.appendChild(starRow);\n\n if (data.sizesAndCounts.length > 0 && data.sizesAndCounts[0].count > 0) {\n filtersContainer.appendChild(createFilterTitle('Bedene Göre', false));\n\n const sizeRow = document.createElement('div');\n sizeRow.classList.add(PREFIX + 'starFilterRow');\n\n data.sizesAndCounts.forEach(sizeData => {\n if (sizeData.productSize && sizeData.count) {\n sizeRow.appendChild(createStandartBadge(sizeData.productSize, sizeData.count));\n }\n });\n filtersContainer.appendChild(sizeRow);\n }\n\n return filtersContainer\n }\n\n createMediaBadge = (mediaCommentCount) => {\n if (!mediaCommentCount) {\n return false\n }\n let mediaBadge = document.createElement('div');\n\n const _text = _getLang() == 'TR' ? 'Fotoğraflı' : 'With Photo Review';\n mediaBadge.innerHTML = _text;\n mediaBadge.classList.add(PREFIX + 'starBadge');\n\n const countEl = document.createElement('div');\n countEl.innerText = mediaCommentCount;\n countEl.style.position = 'absolute';\n countEl.style.top = '-10px';\n countEl.style.left = '21px';\n countEl.style.fontWeight = '100';\n countEl.style.fontSize = '13px';\n countEl.style.background = isMobile ? '#fff' : '#f6f4f1';\n countEl.style.padding = '0 5px';\n mediaBadge.appendChild(countEl);\n\n mediaBadge.addEventListener('click', () => {\n let onlyMedia = CURRENT_FILTER.onlyMedia;\n if (!mediaBadge.classList.contains(PREFIX + 'selectedBadge')) {\n mediaBadge.classList.add(PREFIX + 'selectedBadge');\n onlyMedia = true;\n document.querySelector(\"#\" + PREFIX + \"allCommentsButton\").classList.remove(PREFIX + 'selectedBadge');\n } else {\n mediaBadge.classList.remove(PREFIX + 'selectedBadge');\n onlyMedia = false;\n }\n\n changeFilter('onlyMedia', onlyMedia);\n })\n return mediaBadge\n }\n\n createStandartBadge = (text, count) => {\n if (!text) {\n return false\n }\n let badge = document.createElement('div');\n badge.innerText = text + (count ? '(' + count + ')' : '');\n badge.classList.add(PREFIX + 'standartBadge');\n badge.addEventListener('click', () => {\n let sizes = CURRENT_FILTER.sizes ? CURRENT_FILTER.sizes : [];\n if (!badge.classList.contains(PREFIX + 'selectedBadge')) {\n badge.classList.add(PREFIX + 'selectedBadge');\n sizes.push(text)\n } else {\n badge.classList.remove(PREFIX + 'selectedBadge');\n removeItemFromArray(sizes, text)\n }\n\n changeFilter('sizes', sizes);\n })\n\n return badge\n }\n\n createStarBadge = (starCount, commentCount, allComments, block) => {\n if (!starCount) {\n return false\n }\n let starBadge = document.createElement('div');\n if (!allComments) {\n starBadge.appendChild(createStars(starCount, false, false));\n } else {\n const _text = _getLang() == 'TR' ? 'Tüm Yorumlar' : 'All Reviews';\n starBadge.innerText = _text;\n starBadge.classList.add(PREFIX + 'selectedBadge');\n starBadge.id = PREFIX + \"allCommentsButton\";\n }\n\n const countEl = document.createElement('div');\n countEl.innerText = !allComments ? commentCount : COMMENTS.commentCount;\n countEl.style.position = 'absolute';\n countEl.style.top = '-10px';\n countEl.style.left = '21px';\n countEl.style.fontWeight = '100';\n countEl.style.fontSize = '13px';\n countEl.style.background = isMobile ? '#fff' : '#f6f4f1';\n countEl.style.padding = '0 5px';\n starBadge.appendChild(countEl);\n\n starBadge.classList.add(PREFIX + 'starBadge');\n\n if (!block) {\n starBadge.addEventListener('click', () => {\n let stars;\n if (!allComments) {\n stars = CURRENT_FILTER.stars ? CURRENT_FILTER.stars : [];\n if (!starBadge.classList.contains(PREFIX + 'selectedBadge')) {\n starBadge.classList.add(PREFIX + 'selectedBadge');\n stars.push(starCount)\n } else {\n starBadge.classList.remove(PREFIX + 'selectedBadge');\n removeItemFromArray(stars, starCount);\n }\n document.querySelector(\"#\" + PREFIX + \"allCommentsButton\").classList.remove(PREFIX + 'selectedBadge');\n } else {\n stars = [];\n const starButtons = document.querySelectorAll(\".\" + PREFIX + 'starBadge');\n starButtons.forEach(starButton => {\n starButton.classList.remove(PREFIX + 'selectedBadge');\n });\n starButtons[0].classList.add(PREFIX + 'selectedBadge');\n }\n\n changeFilter('stars', stars);\n })\n } else {\n starBadge.style.opacity = .4;\n }\n\n return starBadge\n }\n\n createFilterTitle = (text, big) => {\n if (!text) {\n return false\n }\n let title = document.createElement('div');\n title.innerText = text;\n title.classList.add(PREFIX + 'badgeTitle');\n big && title.classList.add(PREFIX + 'badgeMainTitle');\n return title\n }\n\n createComment = (comment) => {\n if (!comment) {\n return false\n }\n let commentElement = document.createElement('div');\n commentElement.innerText = comment;\n commentElement.classList.add(PREFIX + 'comment');\n return commentElement\n }\n\n createCommentMedia = (mediaData) => {\n if (!mediaData) {\n return false\n }\n\n mediaData = mediaData.filter(media => media.isActive != 0);\n\n if (mediaData.length == 0) {\n return document.createElement('div')\n }\n\n let mediaContainer = document.createElement('div');\n mediaContainer.classList.add(PREFIX + 'mediaContainer');\n\n mediaData.forEach((media, i) => {\n let mediaElement = document.createElement('img');\n mediaElement.onerror = function () { this.style.display = 'none'; };\n mediaElement.src = media.thumbnailUrl;\n mediaElement.classList.add(PREFIX + 'thumbnailMedia');\n mediaContainer.appendChild(mediaElement);\n\n mediaElement.addEventListener('click', () => {\n createBigMedia(i, mediaData);\n })\n });\n\n return mediaContainer\n }\n\n createQuestion = (data) => {\n if (!data) {\n return false\n }\n let qaElement = document.createElement('div');\n qaElement.innerText = data.question;\n qaElement.classList.add(PREFIX + 'question');\n return qaElement\n }\n\n createAnswer = (data) => {\n if (!data) {\n return false\n }\n let qaElement = document.createElement('div');\n qaElement.innerText = data.answer;\n qaElement.classList.add(PREFIX + 'answer');\n return qaElement\n }\n\n createBigMedia = (i, mediaData) => {\n if (!mediaData) {\n return false\n }\n\n let current = i;\n let bigMediaContainer = document.createElement('div');\n bigMediaContainer.id = PREFIX + 'bigMediaContainer';\n bigMediaContainer.classList.add(PREFIX + 'bigMediaContainer');\n\n let bigMediaOverlay = document.createElement('div');\n bigMediaOverlay.id = PREFIX + 'bigMediaOverlay';\n bigMediaOverlay.classList.add(PREFIX + 'bigMediaOverlay');\n bigMediaContainer.appendChild(bigMediaOverlay);\n\n bigMediaOverlay.addEventListener('click', () => {\n bigMediaContainer.remove();\n })\n\n let bigMediaElement = document.createElement('img');\n bigMediaElement.src = mediaData[i].url;\n bigMediaElement.classList.add(PREFIX + 'bigMedia');\n\n let bigMediaCloseButtonElement = document.createElement('button');\n bigMediaCloseButtonElement.innerHTML = '✖';\n bigMediaCloseButtonElement.classList.add(PREFIX + 'button');\n bigMediaCloseButtonElement.classList.add(PREFIX + 'bigMediaCloseButton');\n bigMediaContainer.appendChild(bigMediaCloseButtonElement);\n\n let rightButton;\n if (mediaData.length > 1) {\n rightButton = document.createElement('button');\n rightButton.innerHTML = '❯';\n rightButton.classList.add(PREFIX + 'button');\n rightButton.classList.add(PREFIX + 'arrowButton');\n\n rightButton.addEventListener('click', () => {\n if (current == mediaData.length - 1) {\n current = 0;\n } else {\n current += 1;\n }\n bigMediaElement.src = mediaData[current].url;\n })\n\n let leftButton = document.createElement('button');\n leftButton.innerHTML = '❮';\n leftButton.classList.add(PREFIX + 'button');\n leftButton.classList.add(PREFIX + 'arrowButton');\n\n leftButton.addEventListener('click', () => {\n if (current == 0) {\n current = mediaData.length - 1;\n } else {\n current -= 1;\n }\n bigMediaElement.src = mediaData[current].url;\n })\n\n bigMediaContainer.appendChild(leftButton);\n }\n\n bigMediaContainer.appendChild(bigMediaElement);\n mediaData.length > 1 && bigMediaContainer.appendChild(rightButton);\n\n bigMediaCloseButtonElement.addEventListener('click', () => close());\n\n close = () => {\n const container = document.querySelector('#' + PREFIX + 'bigMediaContainer');\n if (container) {\n container.remove();\n }\n }\n\n document.body.appendChild(bigMediaContainer);\n }\n\n createHeader = () => {\n createSummarize();\n createTitle();\n\n if (isMobile) {\n const miniInlinePanel = creteHowerPanel(parseFloat(COMMENTS.rateAVG).toFixed(1), COMMENTS.rateAndCounts, COMMENTS.commentCount);\n miniInlinePanel.classList.remove(PREFIX + 'hidden');\n miniInlinePanel.style.position = 'initial';\n miniInlinePanel.style.padding = '0px';\n miniInlinePanel.style.boxShadow = 'unset';\n miniInlinePanel.style.width = '100%';\n miniInlinePanel.style.minWidth = '100%';\n miniInlinePanel.style.marginBottom = '20px';\n const _stars = miniInlinePanel.querySelectorAll('.' + PREFIX + 'miniHoverPanelRow>div:nth-child(1)');\n _stars.forEach(starContainer => {\n starContainer.style.justifyContent = 'flex-start';\n });\n\n const _lines = miniInlinePanel.querySelectorAll('.' + PREFIX + 'miniHoverPanelRow>div:nth-child(2)');\n _lines.forEach(line => {\n line.style.width = '80%';\n });\n\n const _counts = miniInlinePanel.querySelectorAll('.' + PREFIX + 'miniHoverPanelProgressBarText');\n _counts.forEach(countText => {\n countText.style.justifyContent = 'flex-end';\n });\n\n VIEWER.appendChild(miniInlinePanel);\n }\n\n let header = document.createElement('div');\n header.classList.add(PREFIX + 'header');\n\n header.appendChild(createFilters(COMMENTS))\n\n VIEWER.appendChild(header);\n }\n\n createStarsAndUserInfoRow = (commentData) => {\n const container = document.createElement('div');\n container.style.display = 'flex';\n container.style.margin = '7px 0px';\n container.style.justifyContent = 'space-between';\n\n /*const buyed = document.createElement('div');\n buyed.style.color = primaryColor;\n buyed.style.display = 'flex';\n buyed.style.alignItems = 'center';\n buyed.style.fontWeight = '300';\n buyed.innerHTML = ' Ürünü Satın Aldı';*/\n\n const starCount = commentData.rate;\n container.appendChild(createStars(starCount, false, false));\n\n const userInfo = {\n userFullName: commentData.userFullName,\n lastModifiedDate: commentData.lastModifiedDate,\n productSize: commentData.productSize\n };\n container.appendChild(createUserInfo(userInfo));\n\n /*container.appendChild(buyed);*/\n\n return container\n }\n\n createUserInfoRowForQA = (date, nameOrTiming) => {\n const container = document.createElement('div');\n container.style.display = 'flex';\n container.style.margin = '7px 0px';\n container.style.justifyContent = 'space-between';\n\n let userInfoElement = document.createElement('div');\n userInfoElement.innerHTML = date ? _changeTimeLang(date) + ' • ' + nameOrTiming : nameOrTiming ;\n userInfoElement.classList.add(PREFIX + 'userInfo');\n userInfoElement.style.margin = 0;\n\n container.appendChild(userInfoElement);\n\n return container\n }\n\n createCommentRow = (commentData) => {\n let commentContainer = document.createElement('div');\n commentContainer.classList.add(PREFIX + 'commentContainer');\n\n commentContainer.appendChild(createStarsAndUserInfoRow(commentData));\n\n if (commentData.mediaData) {\n const mediaData = JSON.parse(commentData.mediaData)\n commentContainer.appendChild(createCommentMedia(mediaData))\n }\n\n const comment = commentData.comment;\n commentContainer.appendChild(createComment(comment));\n\n COMMENT_CONTAINER.appendChild(commentContainer);\n COMMENT_CONTAINER.appendChild(createHr());\n }\n\n createQuestionRow = (data) => {\n let qaContainer = document.createElement('div');\n qaContainer.classList.add(PREFIX + 'questionContainer');\n\n qaContainer.appendChild(createQuestion(data));\n\n qaContainer.appendChild(createUserInfoRowForQA(data.questionDate, _upperFirstLetter(data.userName)));\n\n if (data.answer) {\n qaContainer.appendChild(createAnswer(data));\n qaContainer.appendChild(createUserInfoRowForQA(data.answerDate, data.answerDatePastTense));\n }\n\n QA_CONTAINER.appendChild(qaContainer);\n QA_CONTAINER.appendChild(createHr());\n }\n\n createLoader = () => {\n const loader = document.createElement('div');\n loader.id = PREFIX + 'loader';\n loader.classList.add(PREFIX + 'loader');\n loader.classList.add(PREFIX + 'hidden');\n COMMENT_CONTAINER.appendChild(loader);\n }\n\n createStyles = () => {\n if (!document.querySelector(PREFIX + 'style')) {\n let style = document.createElement('style');\n style.id = PREFIX + 'style';\n style.innerHTML = '\\\n ' + (STYLES.main.fontFamily != \"\" ? \"@import url('https:\\/\\/fonts.googleapis.com/css2?family=Nunito+Sans:opsz@6..12&display=swap');\" : \"\") + '\\\n .' + PREFIX + 'main{width:' + STYLES.main.width + '; height:' + STYLES.main.height + '; overflow: auto; border-radius: ' + STYLES.main.borderRadius + '; border: ' + STYLES.main.border + ';background-color: ' + STYLES.main.backgroundColor + ';box-shadow: ' + STYLES.main.shadow + ';box-sizing: border-box;font-family: ' + STYLES.main.fontFamily + ';font-size: 14px;color: ' + STYLES.main.color + '; position: relative;}\\\n .' + PREFIX + 'main::-webkit-scrollbar{background:' + STYLES.scrollbar.scrollbarBackgroundColor + '; width:' + STYLES.scrollbar.scrollbarWidth + '; height: 0px; border-radius:6px;}\\\n .' + PREFIX + 'main::-webkit-scrollbar-thumb{background:' + STYLES.scrollbar.scrollbarThumbColor + ';border-radius:' + STYLES.scrollbar.scrollbarBorderRadius + '}\\\n .' + PREFIX + 'title{font-weight: 300;width:100%;text-align:' + STYLES.main.titleTextAlign + '; font-size:' + STYLES.main.titleTextSize + '; position:relative; color:' + STYLES.main.titleTextColor + '; left:' + STYLES.main.titleLeftMargin + '}\\\n .' + PREFIX + 'rateAVG{margin-right:5px;color:#5f5f5f;font-size:' + STYLES.main.rateAvgTextSize + '; font-family: ' + STYLES.main.fontFamily + ';}\\\n .' + PREFIX + 'commentCount{font-size:20px;}\\\n .' + PREFIX + 'userInfo{font-weight: 300;width:100%;height:100%; margin: 2px 0px 5px 8px; font-size:' + STYLES.comment.commentUserInfoTextSize + ';color:' + STYLES.comment.commentUserInfoTextColor + ';line-height:16px}\\\n .' + PREFIX + 'starsContainer{display:flex; flex-direction:row; align-items: center;}\\\n .' + PREFIX + 'star{position: relative; margin-right: 2px; width: ' + STYLES.main.starSize + ';height: ' + STYLES.main.starSize + ';transform: scale(.85);}\\\n .' + PREFIX + 'starEmpty{background: url(' + STYLES.main.emptyStarImage + ') no-repeat; background-size: cover;}\\\n .' + PREFIX + 'starFilled{background:url(' + STYLES.main.filledStarImage + ') no-repeat; background-size: cover;}\\\n .' + PREFIX + 'halfStarPosition{position:absolute; width: ' + STYLES.main.starSize + ';height: ' + STYLES.main.starSize + ';}\\\n .' + PREFIX + 'likeCount{cursor: pointer;color: #666;font-size: 12px;line-height: 16px; display: flex;justify-content: flex-end;align-items: flex-start;fill: #666;}\\\n .' + PREFIX + 'comment{font-weight: 300;margin:15px 0px;word-break: break-word;line-height: 18px; color:' + STYLES.comment.commentTextColor + '; font-size:' + STYLES.comment.commentTextSize + '}\\\n .' + PREFIX + 'question{font-weight: 400;margin:5px 0px;word-break: break-word;line-height: 18px; color:' + STYLES.comment.commentTextColor + '; font-size:' + STYLES.comment.commentTextSize + '}\\\n .' + PREFIX + 'answer{background:#fff;font-weight: 300;margin:5px 0px;padding: 10px 20px;word-break: break-word;line-height: 18px; color:' + STYLES.comment.commentTextColor + '; font-size:' + STYLES.comment.commentTextSize + '}\\\n .' + PREFIX + 'header{display: flex; flex-direction:column;}\\\n .' + PREFIX + 'headerInfoRow{flex-direction:column;width: 100%;align-self: center; display: flex;align-items: center;justify-content: flex-start; box-sizing: border-box;font-family: ' + STYLES.main.fontFamily + ';-webkit-font-smoothing: antialiased;}\\\n .' + PREFIX + 'filtersContainer{display: flex; flex-direction:column;overflow-x:auto;}\\\n .' + PREFIX + 'mediaBadge{border: ' + STYLES.filter.filterButtonBorder + ';width: fit-content;padding: 0px 10px 0px 11px; border-radius: ' + STYLES.filter.filterButtonBorderRadius + '; min-height:30px;display:flex;align-items:center;cursor:pointer;box-sizing: border-box; background-color:' + STYLES.filter.filterButtonBackgroundColor + '; color:' + STYLES.filter.filterButtonTextColor + '; font-size: ' + STYLES.filter.filterButtonTextSize + '}\\\n .' + PREFIX + 'starBadge{position:relative;flex:1;justify-content: center;border: ' + STYLES.filter.filterButtonBorder + ';min-width: 100px;width: fit-content;padding: 17px 10px; margin-right:15px; border-radius: ' + STYLES.filter.filterButtonBorderRadius + '; min-height:30px; display:flex;align-items:center;cursor:pointer;box-sizing: border-box; background-color:' + STYLES.filter.filterButtonBackgroundColor + '; color:' + STYLES.filter.filterButtonTextColor + ';font-weight:100; font-size: ' + STYLES.filter.filterButtonTextSize + '}\\\n .' + PREFIX + 'standartBadge{border: ' + STYLES.filter.filterButtonBorder + ';width: fit-content;padding: 0px 10px 0px 11px; margin-right:15px; border-radius: ' + STYLES.filter.filterButtonBorderRadius + '; min-height:30px; display:flex;align-items:center;cursor:pointer;box-sizing: border-box; background-color:' + STYLES.filter.filterButtonBackgroundColor + '; color:' + STYLES.filter.filterButtonTextColor + '; font-size: ' + STYLES.filter.filterButtonTextSize + '}\\\n .' + PREFIX + 'starFilterRow{display:flex;flex-direction:row;padding: 5px 0;}\\\n .' + PREFIX + 'badgeTitle{font-size: ' + STYLES.filter.filterTitleTextSize + ';color: ' + STYLES.filter.filterTitleColor + ';line-height: 15px;font-weight: ' + STYLES.filter.filterTitleWeight + ';font-family: ' + STYLES.main.fontFamily + ';margin-bottom: 12px;margin-top: 24px;}\\\n .' + PREFIX + 'commentsArea{margin-top: 30px;background-color:' + STYLES.comment.commentBackgroundColor + '; position:relative; padding-bottom: 25px;}\\\n .' + PREFIX + 'questionsArea{margin-top: 30px;background-color:' + STYLES.comment.commentBackgroundColor + '; position:relative; padding-bottom: 25px;}\\\n .' + PREFIX + 'commentContainer{display: flex; flex-direction:column;}\\\n .' + PREFIX + 'questionContainer{margin-top:40px}\\\n .' + PREFIX + 'mediaContainer{height:100px;margin: 5px 0; display: flex;}\\\n .' + PREFIX + 'thumbnailMedia{height: 100%;margin-right: 5px;border-radius: ' + STYLES.comment.commentMediaBorderRadius + ';box-shadow: ' + STYLES.comment.commentMediaShadow + ';cursor: pointer;}\\\n .' + PREFIX + 'bigMediaContainer{height: 100%; width:100%; position:fixed; top:0;left:0;z-index:9999999999;background:rgba(0,0,0,.4);display:flex;justify-content:space-evenly;align-items:center}\\\n .' + PREFIX + 'bigMediaOverlay{height: 100%; width:100%; position:absolute; top:0;left:0;z-index:1;background:rgba(0,0,0,.4)}\\\n .' + PREFIX + 'bigMedia{height: 80%; width: auto; box-shadow: 0 1px 4px #0000004d;z-index:2}\\\n .' + PREFIX + 'button{border:0;color:black;padding:5px 10px; cursor:pointer;font-size:29px; background:transparent;z-index:2;transform:translate3d(0,0,3px)}\\\n .' + PREFIX + 'bigMediaCloseButton{position:absolute;right:0px;top:0px;}\\\n .' + PREFIX + 'arrowButton{font-size:50px;padding:20px 25px;}\\\n .' + PREFIX + 'hr{width:' + STYLES.comment.commentHorizontalLineWidth + '; height:' + STYLES.comment.commentHorizontalLineHeight + '; background-color:' + STYLES.comment.commentHorizontalLineColor + '; margin:15px auto; border-radius: 50px;}\\\n .' + PREFIX + 'selectedBadge{border:' + STYLES.filter.filterButtonSelectedBorder + '; padding: 0px 10px}\\\n .' + PREFIX + 'center{position: relative;transform: translate(-50%, -50%);top: 50%;left: 50%}\\\n .' + PREFIX + 'miniReviewContainer{display:flex; cursor:pointer; align-items: center;position:relative;justify-content: center;}\\\n .' + PREFIX + 'miniHoverPanel{display:flex; flex-direction:column; padding:20px ; box-shadow:0px 0px 5px #b7b3b3; background:#fff;position: absolute;top: 50px;left: 5px;z-index: 9; width:320px; min-width:320px; height:auto}\\\n .' + PREFIX + 'miniHoverPanel:after, .' + PREFIX + 'miniHoverPanel:before { left: 50%; border: solid transparent; content: \"\"; height: 0; width: 0; position: absolute; pointer-events: none; bottom: 100%;}\\\n .' + PREFIX + 'miniHoverPanel:after {border-bottom-color: #fff;border-width: 10px;margin-left: -10px;}\\\n .' + PREFIX + 'miniHoverPanel:before {border-width: 11px;margin-left: -11px;border-bottom-color: #e8e8e8;bottom: 100%;}\\\n .' + PREFIX + 'miniHoverPanelRow{display:flex;align-items: center;margin:5px 0px;}\\\n .' + PREFIX + 'miniHoverPanelProgressBarContainer{display:flex;align-items: center;}\\\n .' + PREFIX + 'miniHoverPanelProgressBarEmpty{display:flex; background: #d7d7d7; width:75%; height:4px; overflow:hidden}\\\n .' + PREFIX + 'miniHoverPanelProgressBar{display:flex; background: #fec004;}\\\n .' + PREFIX + 'miniHoverPanelProgressBarText{display:flex;width:25%; justify-content: center;}\\\n .' + PREFIX + 'loader {border: 2px solid ' + STYLES.scrollbar.scrollbarBackgroundColor + ';border-radius: 50%;border-top: 2px solid ' + STYLES.scrollbar.scrollbarThumbColor + ';width: 40px;height: 40px;-webkit-animation: ' + PREFIX + 'spin 2s linear infinite;animation: ' + PREFIX + 'spin 2s linear infinite; position:absolute; bottom:5px; left:50%; transform: translate(0%, -50%)}\\\n .' + PREFIX + 'miniHoverPanelAvgContainer {font-size: 12px;text-align: center;color: #999;}\\\n .' + PREFIX + 'miniHoverPanelAvg {font-size: 20px; -webkit-font-smoothing: antialiased;color: #333; font-weight: bold;}\\\n .' + PREFIX + 'qaFiltersContainer {display: flex;align-items: center;flex-direction: row;justify-content: space-between; margin-bottom:15px; height:48px;}\\\n .' + PREFIX + 'qaFiltersInputContainer {flex: 5; height:100%; background: white; margin-right: 20px; border: 0.75px solid #D1D1D1; padding: 10px; display: flex; flex-direction: row;}\\\n .' + PREFIX + 'qaFiltersInput {width: 100%; margin-right: 15px; margin-left:15px;}\\\n .' + PREFIX + 'qaFiltersInput:focus{outline: none;}\\\n .' + PREFIX + 'qaFiltersInput::placeholder{color:#474747;}\\\n .' + PREFIX + 'searchIcon {width:30px; cursor:pointer;}\\\n .' + PREFIX + 'sortContainer {flex: 2; background: white; border: 0.75px solid #D1D1D1; height:100%; max-width:160px; padding:10px; display:flex;align-items: center; justify-content: center;}\\\n .' + PREFIX + 'sortEl {}\\\n .' + PREFIX + 'sortEl:focus{outline: none;}\\\n .' + PREFIX + 'sortOptions {}\\\n .' + PREFIX + 'hidden{visibility:hidden}\\\n .' + PREFIX + 'visible{visibility:visible}\\\n .' + PREFIX + 'f-1{flex: 1;}\\\n .' + PREFIX + 'f-2{flex: 2;}\\\n .' + PREFIX + 'f-3{flex: 3;}\\\n .' + PREFIX + 'f-4{flex: 4;}\\\n .' + PREFIX + 'f-5{flex: 5;}\\\n .' + PREFIX + 'f-10{flex: 10;}\\\n .' + PREFIX + 'f{display: flex;}\\\n .' + PREFIX + 'fr{flex-direction: row;}\\\n .' + PREFIX + 'fc{flex-direction: column;}\\\n .' + PREFIX + 'fw{flex-wrap: wrap;}\\\n .' + PREFIX + 'faic{align-items: center;}\\\n .' + PREFIX + 'fais{align-items: flex-start;}\\\n .' + PREFIX + 'faie{align-items: flex-end;}\\\n .' + PREFIX + 'faib{align-items: baseline;}\\\n .' + PREFIX + 'fjcc{justify-content: center;}\\\n .' + PREFIX + 'fjcs{justify-content: flex-start;}\\\n .' + PREFIX + 'fjce{justify-content: flex-end;}\\\n .' + PREFIX + 'fjcsb{justify-content: space-between;}\\\n .' + PREFIX + 'fjcsa{justify-content: space-around;}\\\n .' + PREFIX + 'fjcse{justify-content: space-evenly;}\\\n .' + PREFIX + 'm-1{margin:5px}\\\n .' + PREFIX + 'm-2{margin:10px}\\\n .' + PREFIX + 'm-3{margin:20px}\\\n .' + PREFIX + 'm-15{margin:15px}\\\n .' + PREFIX + 'mr-1{margin-right:5px}\\\n .' + PREFIX + 'mr-2{margin-right:10px}\\\n .' + PREFIX + 'mr-3{margin-right:20px}\\\n .' + PREFIX + 'mt-1{margin-top:5px}\\\n .' + PREFIX + 'mt-2{margin-top:10px}\\\n .' + PREFIX + 'mt-3{margin-top:20px}\\\n .' + PREFIX + 'ml-1{margin-left:5px}\\\n .' + PREFIX + 'ml-2{margin-left:10px}\\\n .' + PREFIX + 'ml-3{margin-left:20px}\\\n .' + PREFIX + 'mb-1{margin-bottom:5px}\\\n .' + PREFIX + 'mb-2{margin-bottom:10px}\\\n .' + PREFIX + 'mb-3{margin-bottom:20px}\\\n .' + PREFIX + 'ma{margin:0 auto}\\\n .' + PREFIX + 'p-1{padding:5px}\\\n .' + PREFIX + 'p-2{padding:10px}\\\n .' + PREFIX + 'p-3{padding:20px}\\\n .' + PREFIX + 'p-4{padding:30px}\\\n .' + PREFIX + 'pr-1{padding-right:5px}\\\n .' + PREFIX + 'pr-2{padding-right:10px}\\\n .' + PREFIX + 'pr-3{padding-right:20px}\\\n .' + PREFIX + 'pl-1{padding-left:5px}\\\n .' + PREFIX + 'pl-2{padding-left:10px}\\\n .' + PREFIX + 'pl-3{padding-left:20px}\\\n .' + PREFIX + 'pt-1{padding-top:5px}\\\n .' + PREFIX + 'pt-2{padding-top:10px}\\\n .' + PREFIX + 'pt-3{padding-top:20px}\\\n .' + PREFIX + 'pb-1{padding-bottom:5px}\\\n .' + PREFIX + 'pb-2{padding-bottom:10px}\\\n .' + PREFIX + 'pb-3{padding-bottom:20px}\\\n .' + PREFIX + 't-05{font-size:12px}\\\n .' + PREFIX + 't-1{font-size:15px}\\\n .' + PREFIX + 't-2{font-size:20px}\\\n .' + PREFIX + 't-3{font-size:25px}\\\n .' + PREFIX + 't-4{font-size:35px}\\\n .' + PREFIX + 't-5{font-size:45px}\\\n .' + PREFIX + 'tc{text-align:center}\\\n .' + PREFIX + 'bold{font-weight:bold}\\\n .' + PREFIX + 'w-100{width:100%}\\\n .' + PREFIX + 'w-50{width:50%}\\\n .' + PREFIX + 'w-25{width:25%}\\\n .' + PREFIX + 'w-30{width:30%}\\\n .' + PREFIX + 'w-75{width:75%}\\\n .' + PREFIX + 'w-70{width:70%}\\\n .' + PREFIX + 'w-60{width:60%}\\\n .' + PREFIX + 'w-15{width:15%}\\\n .' + PREFIX + 'w-10{width:10%}\\\n .' + PREFIX + 'w-20px{width:20px}\\\n .' + PREFIX + 'h-36px{height:36px}\\\n .' + PREFIX + 'h-25{height:25%}\\\n .' + PREFIX + 'h-30{height:30%}\\\n .' + PREFIX + 'h-100{height:100%}\\\n .' + PREFIX + 'min-w-10{min-width:10%}\\\n .' + PREFIX + 'min-h-60px{min-height:60px}\\\n .' + PREFIX + 'w-fc{width: fit-content;}\\\n .' + PREFIX + 'x-1-5{transform:scale(1.5)}\\\n .' + PREFIX + 'x-2{transform:scale(2)}\\\n .' + PREFIX + 'x-3{transform:scale(3)}\\\n .' + PREFIX + 'br-3{border-radius:3px}\\\n .' + PREFIX + 'fleft{float:left}\\\n .' + PREFIX + 'fright{float:right}\\\n .' + PREFIX + 'overxs{overflow-x:scroll}\\\n .' + PREFIX + 'ocp{cursor:pointer}\\\n .' + PREFIX + 'cp{cursor:pointer}\\\n .' + PREFIX + 'cp:hover{background:rgba(0,0,0,.05)}\\\n .' + PREFIX + 'bgw{background:#fff}\\\n .' + PREFIX + 'o0{opacity:0;position: absolute;z-index: -1;}\\\n .' + PREFIX + 'faded{opacity:.5; border:0px}\\\n .' + PREFIX + 'dn{display:none !important}\\\n .' + PREFIX + 'imageBoxCloseButton{ top: -12px; right: -12px; z-index:2; width:24px; }\\\n .' + PREFIX + 'pr{ position: relative }\\\n .' + PREFIX + 'pa{ position: absolute }\\\n .' + PREFIX + 'carouselItem{ width: 100%; height:100%; position: relative; }\\\n .' + PREFIX + 'carouselImageContainer{ }\\\n .' + PREFIX + 'carouselTitle{ font-size: 2.2rem; line-height: 3rem; }\\\n .' + PREFIX + 'carouselButton{ background-color: rgb(242 243 245 / 1); color:#000 !important; height: 40px !important; width:40px !important; border-radius:50%; }\\\n .' + PREFIX + 'carouselNextButton{ right: 1rem; }\\\n .' + PREFIX + 'carouselPrevButton{ left: 1rem; }\\\n .' + PREFIX + 'carouselNextButton:after{ font-size:1.25rem !important;}\\\n .' + PREFIX + 'carouselPrevButton:after{ font-size:1.25rem !important;}\\\n .' + PREFIX + 'carouselProductImage{ }\\\n .' + PREFIX + 'carouselProductName{ font-size: 1rem; font-weight: 300; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(71 71 71 / var(--tw-text-opacity)); margin-top: .5rem; margin-bottom: .75rem; }\\\n .' + PREFIX + 'carouselProductPriceContainer{ }\\\n .' + PREFIX + 'carouselOriginalPrice{ }\\\n .' + PREFIX + 'carouselBadgeContainer{ position: absolute; top: .625rem; left: .625rem; z-index: 2; }\\\n .' + PREFIX + 'carouselBadge{ font-size: .75rem; font-weight: 400; background:#fff; padding: .125rem .625rem; text-align: center; margin-bottom: .5rem; border-radius: .25rem; }\\\n .' + PREFIX + 'discountEffect{ --tw-text-opacity: 1; color:rgb(211 41 41/var(--tw-text-opacity)) }\\\n .' + PREFIX + 'tdl-lt{ text-decoration-line: line-through; }\\\n .' + PREFIX + 'tdl-u{ text-decoration-line: underline; }\\\n .' + PREFIX + 'carouselHeart{ font-size:24px; margin: -7px -1px -5px -5px }\\\n .' + PREFIX + 'carouselHeart:before{ content: \"\"; color:#375a5b; }\\\n .' + PREFIX + 'newQuestionComponent{ font-weight: 500; padding: 10px 20px; word-break: break-word; line-height: 18px; color: #474747; font-size: 14px; }\\\n .' + PREFIX + 'fixFull{ position:fixed; z-index: 9999999; top:0; left:0; width:100%; height:100%; }\\\n .' + PREFIX + 'modal{ overflow:auto; transition: .5s all; width:40%; min-width:400px; height:100%; background:#fff; position:absolute; right:0; bottom:0; z-index:2;}\\\n .' + PREFIX + 'mobileModalNotch{ width:20%; height:5px; background:#D1D1D1; border-radius: 10px; margin:0 auto 10px auto}\\\n .' + PREFIX + 'inputLabel{ color: '+textColor+'; font-weight:100;}\\\n .' + PREFIX + 'errorMessage{background:#fff2bf; color:#172b4e; margin:10px auto; padding:5px 10px; border-radius:5px}\\\n .' + PREFIX + 'summarizeContainer{background: #ffffff; padding: 25px; color: #375a5b;}\\\n .' + PREFIX + 'summarizeTitle{}\\\n .' + PREFIX + 'summary{font-weight: 100; padding-top: 10px; line-height: 1.7;}\\\n \\\n .' + PREFIX + 'toggle-container{ display: flex; align-items: center; gap: 10px;}\\\n .' + PREFIX + 'toggle{ position: relative; width: 50px; height: 25px; background: #eee; border-radius: 50px; cursor: pointer; transition: background-color 0.3s;}\\\n .' + PREFIX + 'toggle::before{ content: \\'\\'; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #ccc; border-radius: 50%; transition: all 0.3s; }\\\n .' + PREFIX + 'toggle-container input[type=\"checkbox\"]{ display: none; }\\\n .' + PREFIX + 'toggle-container input[type=\"checkbox\"]:checked + .' + PREFIX + 'toggle{ background: '+primaryColor+'; }\\\n .' + PREFIX + 'toggle-container input[type=\"checkbox\"]:checked + .' + PREFIX + 'toggle::before{ transform: translateX(25px); background: #ffffff; }\\\n .' + PREFIX + 'label{ font-size: 16px; color: #555; }\\\n \\\n @media only screen and (max-width: 600px) {\\\n .' + PREFIX + 'modal{ width:100%; }\\\n .' + PREFIX + 'carouselTitle { font-size:1.5rem; line-height: 2.25rem;} \\\n .' + PREFIX + 'bigMedia { height: auto; width: 70% } \\\n .' + PREFIX + 'main{width:100%} \\\n .' + PREFIX + 'filtersContainer::-webkit-scrollbar{display:none}\\\n .' + PREFIX + 'sortContainer{display:none}\\\n .' + PREFIX + 'answer{background:#F6F4F0}\\\n .' + PREFIX + 'qaFiltersInputContainer{margin-right:0px;} }'\n + STYLES.customcss.css + ' ';\n document.head.appendChild(style);\n }\n }\n\n addClass = (el, cls) => {\n if (Array.isArray(cls)) {\n cls.forEach(cl => {\n el && el.classList.add(PREFIX + cl)\n });\n } else {\n el && el.classList.add(PREFIX + cls)\n }\n }\n\n removeClass = (el, cls) => {\n if (Array.isArray(cls)) {\n cls.forEach(cl => {\n el && el.classList.remove(PREFIX + cl)\n });\n } else {\n el && el.classList.remove(PREFIX + cls)\n }\n }\n\n createLoadMoreButton = () => {\n const moreButton = document.createElement('div');\n moreButton.id = PREFIX + 'moreButton';\n moreButton.innerText = 'Daha Fazla Yorum Gör';\n moreButton.style.color = '#474747';\n moreButton.style.border = '1px solid #474747';\n moreButton.style.padding = '10px 15px';\n moreButton.style.margin = '0 auto';\n moreButton.style.width = 'fit-content';\n moreButton.style.cursor = 'pointer';\n\n moreButton.addEventListener('click', () => {\n loadNextComments();\n })\n\n VIEWER.appendChild(moreButton);\n VIEWER.appendChild(Object.assign(document.createElement('div'), { innerHTML: 'Bu yorumlar Trendyol platformundan alınmıştır.'})).style.cssText = 'width: 100%; text-align:center';\n }\n\n createLoadMoreButtonForQA = () => {\n const moreButton = document.createElement('div');\n moreButton.id = PREFIX + 'moreButtonForQA';\n moreButton.innerText = 'Daha Fazla Soru ve Cevap Gör';\n moreButton.style.color = '#474747';\n moreButton.style.border = '1px solid #474747';\n moreButton.style.padding = '10px 15px';\n moreButton.style.margin = '0 auto';\n moreButton.style.width = 'fit-content';\n moreButton.style.cursor = 'pointer';\n\n moreButton.addEventListener('click', () => {\n loadNextQuestions();\n })\n\n QA_VIEWER.appendChild(moreButton);\n }\n\n removeLastHr = () => {\n const lastHr = COMMENT_CONTAINER.querySelector('.' + PREFIX + 'hr:last-child');\n if (lastHr) {\n lastHr.remove()\n }\n }\n\n removeLastHrForQA = () => {\n const lastHr = QA_CONTAINER.querySelector('.' + PREFIX + 'hr:last-child');\n if (lastHr) {\n lastHr.remove()\n }\n }\n\n loadNextComments = () => {\n try {\n showLoader();\n CRWL_COMMENTS_LOADING = true;\n const localFilter = {\n ...CURRENT_FILTER,\n start: CRWL_START,\n quantity: CRWL_QUANTITY\n };\n window.crwl.getComments(localFilter, (newComments) => {\n try {\n\n if (newComments.comments?.length > 0 && newComments != \"empty\") {\n\n newComments.comments.forEach(comment => {\n createCommentRow(comment);\n hideLoader();\n });\n\n CRWL_START += CRWL_QUANTITY;\n if (newComments.comments.length > 0) {\n CRWL_COMMENTS_LOADING = false;\n }\n\n const moreButton = document.querySelector('#' + PREFIX + 'moreButton');\n moreButton.style.display = 'block';\n } else {\n const moreButton = document.querySelector('#' + PREFIX + 'moreButton');\n moreButton.style.display = 'none';\n removeLastHr();\n }\n } catch (cwErr) { console.log('CRWL - Not Loaded Next Comments Error', cwErr); }\n finally {\n hideLoader()\n }\n });\n } catch (error) {\n console.log('CRWL - Get Comments Error', error);\n }\n }\n\n loadNextQuestions = () => {\n try {\n showLoader();\n CRWL_QUESTIONS_LOADING = true;\n const localFilter = {\n ...CURRENT_QA_FILTER,\n start: CRWL_QA_START,\n quantity: CRWL_QA_QUANTITY\n };\n window.crwl.getComments(localFilter, (newQuestions) => {\n try {\n\n if (newQuestions.questions.length > 0 && newQuestions != \"empty\") {\n\n newQuestions.questions.forEach(question => {\n createQuestionRow(question);\n hideLoader();\n });\n\n CRWL_QA_START += CRWL_QA_QUANTITY;\n if (newQuestions.questions.length > 0) {\n CRWL_QUESTIONS_LOADING = false;\n }\n\n const moreButton = document.querySelector('#' + PREFIX + 'moreButtonForQA');\n moreButton.style.display = 'block';\n } else {\n const moreButton = document.querySelector('#' + PREFIX + 'moreButtonForQA');\n moreButton.style.display = 'none';\n removeLastHrForQA();\n }\n } catch (cwErr) { console.log('CRWL - Not Loaded Next Questions Error', cwErr); }\n finally {\n hideLoader()\n }\n });\n } catch (error) {\n console.log('CRWL - Get Questions Error', error);\n }\n }\n\n applyFilter = () => {\n try {\n CRWL_COMMENTS_LOADING = true;\n const localFilter = {\n ...CURRENT_FILTER,\n start: 0,\n quantity: CRWL_QUANTITY\n };\n CRWL_START = 0;\n window.crwl.getComments(localFilter, (newComments) => {\n try {\n clearComments();\n newComments.comments.forEach(comment => {\n createCommentRow(comment);\n });\n CRWL_START += CRWL_QUANTITY;\n if (newComments.comments.length > 0) {\n CRWL_COMMENTS_LOADING = false;\n const moreButton = document.querySelector('#' + PREFIX + 'moreButton');\n moreButton.style.display = 'block';\n }\n } catch (cwErr) { console.log('CRWL - Not Loaded Next Comments Error', cwErr); }\n });\n } catch (error) {\n console.log('CRWL - Get Comments Error', error);\n }\n }\n\n applyFilterForQA = () => {\n try {\n CRWL_QUESTIONS_LOADING = true;\n const localFilter = {\n ...CURRENT_QA_FILTER,\n start: 0,\n quantity: CRWL_QA_QUANTITY\n };\n CRWL_QA_START = 0;\n window.crwl.getComments(localFilter, (newQuestions) => {\n try {\n clearQuestions();\n newQuestions.questions.forEach(question => {\n createQuestionRow(question);\n });\n CRWL_QA_START += CRWL_QA_QUANTITY;\n if (newQuestions.questions.length > 0) {\n CRWL_QUESTIONS_LOADING = false;\n const moreButton = document.querySelector('#' + PREFIX + 'moreButtonForQA');\n moreButton.style.display = 'block';\n }\n } catch (cwErr) { console.log('CRWL - Not Loaded Next Questions Error', cwErr); }\n });\n } catch (error) {\n console.log('CRWL - Get Questions Error', error);\n }\n }\n\n changeFilter = (key, value) => {\n CURRENT_FILTER = {\n ...CURRENT_FILTER,\n [key]: value\n }\n applyFilter();\n }\n\n changeFilterForQA = (key, value) => {\n CURRENT_QA_FILTER = {\n ...CURRENT_QA_FILTER,\n [key]: value\n }\n applyFilterForQA();\n }\n\n clearComments = () => {\n COMMENT_CONTAINER.innerText = \"\";\n }\n\n clearQuestions = () => {\n QA_CONTAINER.innerText = \"\";\n }\n\n removeItemFromArray = (arr, item) => {\n const i = arr.indexOf(item);\n if (i > -1) {\n arr.splice(i, 1);\n }\n }\n\n isFloat = (n) => {\n return Number(n) === n && n % 1 !== 0;\n }\n\n calculatePercent = (a, b) => {\n const percent = Math.ceil(parseInt((parseInt(a) * 100) / parseInt(b)))\n\n return percent\n }\n\n crwl_insertBefore = (selectorPath, newEl, category) => {\n if (!category) {\n var targetElement = document.querySelector(selectorPath);\n if (!targetElement) {\n return;\n }\n }\n\n if (category) {\n category.parentNode.insertBefore(newEl, category);\n } else {\n targetElement.parentNode.insertBefore(newEl, targetElement);\n }\n }\n\n crwl_insertAfter = (selectorPath, newEl, category) => {\n if (!category) {\n var targetElement = document.querySelector(selectorPath);\n if (!targetElement) {\n return;\n }\n }\n\n if (category) {\n if (category.nextElementSibling) {\n category.parentNode.insertBefore(newEl, category.nextElementSibling);\n } else {\n category.parentNode.appendChild(newEl);\n }\n } else {\n if (targetElement.nextElementSibling) {\n targetElement.parentNode.insertBefore(newEl, targetElement.nextElementSibling);\n } else {\n targetElement.parentNode.appendChild(newEl);\n }\n }\n }\n\n crwl_insertInside = (selectorPath, newEl, category) => {\n if (!category) {\n var targetElement = document.querySelector(selectorPath);\n if (!targetElement) {\n return;\n }\n }\n\n if (category) {\n category.appendChild(newEl, category);\n } else {\n targetElement.appendChild(newEl, targetElement);\n }\n }\n\n switchDirector = (type, path, element, category) => {\n switch (type) {\n case 'insertBefore':\n crwl_insertBefore(path, element, category)\n break;\n case 'insertAfter':\n crwl_insertAfter(path, element, category)\n break;\n case 'insertInside':\n crwl_insertInside(path, element, category)\n break;\n default:\n crwl_insertInside(path, element, category)\n break;\n }\n }\n\n scrollToMainViewer = () => {\n const ca = document.querySelector(isMobile ? '#' + PREFIX + 'clonedMenuButton' : 'pz-tab-menu');\n if (ca) {\n const y = ca.getBoundingClientRect().top + window.scrollY;\n window.scroll({\n top: y - 50,\n behavior: 'smooth'\n });\n }\n }\n\n targetElementChecker = (path, callback) => {\n const targetEl = document.querySelector(path)\n if (!targetEl) {\n let intCounter = 0;\n let elInt = setInterval(() => {\n if (document.querySelector(path)) {\n clearInterval(elInt);\n callback(true)\n } else {\n intCounter++;\n }\n\n if (intCounter >= 20) {\n clearInterval(elInt);\n console.log(\"Target element not found\", path);\n }\n }, 100);\n } else {\n callback(true)\n }\n }\n\n showLoader = () => {\n const loader = document.querySelector('#' + PREFIX + 'loader')\n\n if (loader) {\n loader.classList.remove(PREFIX + 'hidden')\n }\n }\n\n hideLoader = () => {\n const loader = document.querySelector('#' + PREFIX + 'loader')\n\n if (loader) {\n loader.classList.add(PREFIX + 'hidden')\n }\n }\n\n _toggleMobileReviewsArea = () => {\n const area = document.querySelector('#' + PREFIX + 'mobileCommentsArea');\n if (area) {\n const _btnIcon = document.querySelector('#' + PREFIX + 'clonedMenuButton>i');\n if (area.style.height == '0px') {\n area.style.height = 'auto';\n if (_btnIcon) {\n _btnIcon.style.transition = 'transform .3s';\n _btnIcon.style.transform = 'rotate(90deg)';\n }\n } else {\n area.style.height = '0px';\n if (_btnIcon) {\n _btnIcon.style.transition = 'transform .3s';\n _btnIcon.style.transform = 'rotate(0deg)';\n }\n }\n }\n }\n\n _toggleMobileQuestionsArea = () => {\n const area = document.querySelector('#' + PREFIX + 'mobileQuestionsArea');\n if (area) {\n const _btnIcon = document.querySelector('#' + PREFIX + 'clonedMenuButtonForQA>i');\n if (area.style.height == '0px') {\n area.style.height = 'auto';\n if (_btnIcon) {\n _btnIcon.style.transition = 'transform .3s';\n _btnIcon.style.transform = 'rotate(90deg)';\n }\n } else {\n area.style.height = '0px';\n if (_btnIcon) {\n _btnIcon.style.transition = 'transform .3s';\n _btnIcon.style.transform = 'rotate(0deg)';\n }\n }\n }\n }\n\n _chakraCheckComponents = () => {\n if (!FILTER.categoryPage) {\n\n const _text = _getLang() == 'TR' ? 'DEĞERLENDİRMELER (' : 'REVIEWS (';\n if (!isMobile) {\n const menuContainer = document.querySelector(\"pz-tab-menu\");\n const contentContainer = document.querySelector(\"pz-tab-content\");\n const originalMenuElement = document.querySelector(\"pz-tab-menu>:last-child\");\n const originalContentElement = document.querySelector(\"pz-tab-content>:last-child\");\n\n const clonedMenuElement = originalMenuElement.cloneNode(true);\n clonedMenuElement.id = PREFIX + 'clonedMenuButton';\n clonedMenuElement.querySelector('button').innerText = _text + (COMMENTS.commentCount ? COMMENTS.commentCount : 0) + ')';\n clonedMenuElement.setAttribute('content', 'reviews');\n\n const clonedContentElement = originalContentElement.cloneNode(true);\n clonedContentElement.innerHTML = '';\n clonedContentElement.id = PREFIX + 'clonedContent';\n clonedContentElement.setAttribute('tab', 'reviews');\n\n clonedMenuElement.addEventListener('click', () => {\n clonedMenuElement.classList.add('-active');\n clonedContentElement.classList.add('-active');\n clonedContentElement.removeAttribute(\"hidden\");\n const _menuItems = document.querySelectorAll(\"pz-tab-menu-item\");\n const _contentItems = document.querySelectorAll(\"pz-tab-content-item\");\n for (let i = 0; i < _menuItems.length; i++) {\n if (_menuItems[i].getAttribute('content') != 'reviews') {\n _menuItems[i].classList.remove('-active');\n _contentItems[i].classList.remove('-active');\n _contentItems[i].setAttribute('hidden', 'hidden');\n }\n }\n })\n\n _removeActiveClasses = () => {\n const menuItems = document.querySelectorAll(\"pz-tab-menu-item\");\n menuItems.forEach(menuItem => {\n menuItem.addEventListener('click', (e) => {\n if (e.target.getAttribute('content') != 'reviews') {\n const _menuItem = menuContainer.querySelector('pz-tab-menu-item[content=\"reviews\"]');\n const _contentItem = contentContainer.querySelector('pz-tab-content-item[tab=\"reviews\"]');\n if (_menuItem) {\n _menuItem.classList.remove('-active');\n }\n\n if (_contentItem) {\n _contentItem.classList.remove('-active');\n _contentItem.setAttribute('hidden', 'hidden');\n }\n }\n })\n });\n }\n _removeActiveClasses()\n\n\n\n menuContainer.style.columnGap = \"2rem\";\n menuContainer.appendChild(clonedMenuElement);\n contentContainer.appendChild(clonedContentElement);\n _chakraCheckComponentsForQA();\n } else {\n const menuContainer = document.querySelector('.product-info__details');\n const originalMenuElement = document.querySelector(\".product-info__details>button:last-child\");\n\n const clonedMenuElement = originalMenuElement.cloneNode(true);\n clonedMenuElement.id = PREFIX + 'clonedMenuButton';\n clonedMenuElement.querySelector('span').innerText = _text + (COMMENTS.commentCount ? COMMENTS.commentCount : 0) + ') ';\n clonedMenuElement.setAttribute('content', 'reviews');\n\n clonedMenuElement.addEventListener('click', () => {\n _toggleMobileReviewsArea();\n })\n\n const area = document.createElement('div');\n area.id = PREFIX + 'mobileCommentsArea';\n area.style.height = '0px';\n area.style.transition = 'height .3s';\n area.style.overflow = 'hidden';\n\n menuContainer.appendChild(clonedMenuElement);\n menuContainer.appendChild(area);\n _chakraCheckComponentsForQA();\n\n }\n\n } else {\n _chakraCheckComponentsForQA();\n }\n }\n\n _chakraCheckComponentsForQA = () => {\n if (!FILTER.categoryPage) {\n\n const _text = _getLang() == 'TR' ? 'SORU & CEVAP (' : 'Q&A (';\n if (!isMobile) {\n const menuContainer = document.querySelector(\"pz-tab-menu\");\n const contentContainer = document.querySelector(\"pz-tab-content\");\n const originalMenuElement = document.querySelector(\"pz-tab-menu>:last-child\");\n const originalContentElement = document.querySelector(\"pz-tab-content>:last-child\");\n\n const clonedMenuElement = originalMenuElement.cloneNode(true);\n clonedMenuElement.id = PREFIX + 'clonedMenuButtonForQA';\n clonedMenuElement.querySelector('button').innerText = _text + (COMMENTS.questionsCount ? COMMENTS.questionsCount : 0) + ')';\n clonedMenuElement.setAttribute('content', 'questions');\n\n const clonedContentElement = originalContentElement.cloneNode(true);\n clonedContentElement.innerHTML = '';\n clonedContentElement.id = PREFIX + 'clonedContentForQA';\n clonedContentElement.setAttribute('tab', 'questions');\n\n clonedMenuElement.addEventListener('click', () => {\n clonedMenuElement.classList.add('-active');\n clonedContentElement.classList.add('-active');\n clonedContentElement.removeAttribute(\"hidden\");\n const _menuItems = document.querySelectorAll(\"pz-tab-menu-item\");\n const _contentItems = document.querySelectorAll(\"pz-tab-content-item\");\n for (let i = 0; i < _menuItems.length; i++) {\n if (_menuItems[i].getAttribute('content') != 'questions') {\n _menuItems[i].classList.remove('-active');\n _contentItems[i].classList.remove('-active');\n _contentItems[i].setAttribute('hidden', 'hidden');\n }\n }\n })\n\n _removeActiveClasses = () => {\n const menuItems = document.querySelectorAll(\"pz-tab-menu-item\");\n menuItems.forEach(menuItem => {\n menuItem.addEventListener('click', (e) => {\n if (e.target.getAttribute('content') != 'questions') {\n const _menuItem = menuContainer.querySelector('pz-tab-menu-item[content=\"questions\"]');\n const _contentItem = contentContainer.querySelector('pz-tab-content-item[tab=\"questions\"]');\n if (_menuItem) {\n _menuItem.classList.remove('-active');\n }\n\n if (_contentItem) {\n _contentItem.classList.remove('-active');\n _contentItem.setAttribute('hidden', 'hidden');\n }\n }\n })\n });\n }\n _removeActiveClasses()\n\n\n\n menuContainer.style.columnGap = \"2rem\";\n menuContainer.appendChild(clonedMenuElement);\n contentContainer.appendChild(clonedContentElement);\n commentViewerInit();\n } else {\n const menuContainer = document.querySelector('.product-info__details');\n const originalMenuElement = document.querySelector(\".product-info__details>button:nth-last-of-type(2)\");\n\n const clonedMenuElement = originalMenuElement.cloneNode(true);\n clonedMenuElement.id = PREFIX + 'clonedMenuButtonForQA';\n clonedMenuElement.querySelector('span').innerText = _text + (COMMENTS.questionsCount ? COMMENTS.questionsCount : 0) + ') ';\n clonedMenuElement.setAttribute('content', 'questions');\n\n clonedMenuElement.addEventListener('click', () => {\n _toggleMobileQuestionsArea();\n })\n\n const area = document.createElement('div');\n area.id = PREFIX + 'mobileQuestionsArea';\n area.style.height = '0px';\n area.style.transition = 'height .3s';\n area.style.overflow = 'hidden';\n\n menuContainer.appendChild(clonedMenuElement);\n menuContainer.appendChild(area);\n commentViewerInit();\n }\n\n } else {\n commentViewerInit();\n }\n }\n\n _getLang = () => {\n const defaultLang = 'TR';\n const path = isMobile ? document.querySelector('.mobile-nav__footer__language__form .-selected span') : document.querySelector('.header-top__right__language span');\n if (path) {\n return path.innerText\n } else {\n return defaultLang\n }\n }\n\n _changeTimeLang = (dateString) => {\n if (_getLang() == 'EN') {\n const months = {\n 'Ocak': 'January',\n 'Şubat': 'February',\n 'Mart': 'March',\n 'Nisan': 'April',\n 'Mayıs': 'May',\n 'Haziran': 'June',\n 'Temmuz': 'July',\n 'Ağustos': 'August',\n 'Eylül': 'September',\n 'Ekim': 'October',\n 'Kasım': 'November',\n 'Aralık': 'December'\n };\n\n const dateParts = dateString.split(' ');\n const translatedMonth = months[dateParts[1]];\n const englishDate = `${dateParts[0]} ${translatedMonth} ${dateParts[2]}`;\n return englishDate;\n } else {\n return dateString\n }\n }\n\n reloader = () => {\n VIEWER.remove();\n const els = document.querySelectorAll('[id*=\"' + PREFIX + '\"], [class*=\"' + PREFIX + '\"]');\n els.forEach(el => {\n el.remove();\n });\n }\n\n _upperFirstLetter = (sentence) => {\n return sentence.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');\n }\n\n getProductDetailOrderPage = () => {\n const productElPath = \".a-od-order-subitem__info\";\n const productEls = document.querySelectorAll(productElPath);\n let products = [];\n \n if (productEls.length > 0) {\n productEls.forEach(element => {\n const tmpProductEl = element.querySelector('a');\n const productUrl = tmpProductEl.href;\n const productName = tmpProductEl.innerText;\n const productCode = productUrl.split(\"-\").reverse()[0].replace('/', '');\n const productImg = element.parentElement.querySelector('img');\n let img = null;\n if(productImg) { \n if (productImg.src) {\n img = productImg.src;\n }else if(productImg.dataset.src){\n img = productImg.dataset.src\n }\n }\n products.push({productCode, url:productUrl, productEl: element.parentElement, name: productName, img });\n });\n }\n\n return products;\n }\n\n createNewCommentButton = (productDetail) => {\n const container = createElement('div');\n if (!isMobile) {\n addClass(container,['f','fjce']);\n container.style.flex = '1';\n }else{\n container.style.width = '165px';\n addClass(container,['mt-1','mb-1']);\n }\n\n const newCommentButton = createElement('div');\n addClass(newCommentButton,['tc','p-2','ocp']);\n newCommentButton.style.border = '.5px solid '+primaryColor;\n newCommentButton.style.alignSelf = 'flex-start';\n newCommentButton.style.color = primaryColor;\n newCommentButton.innerText = 'Ürünü Değerlendir';\n newCommentButton.addEventListener('click',()=>{\n createNewCommentForm(productDetail.productCode, window.crwl.CCID, productDetail, container);\n });\n container.appendChild(newCommentButton)\n return container\n }\n\n createOrderPageComponents = () => {\n const orderPageProductDetails = getProductDetailOrderPage();\n if (orderPageProductDetails.length <= 0) {\n return false\n }\n\n orderPageProductDetails.forEach(order => {\n if (userNewCommentIsAvailable(order.productCode)) {\n if (isMobile) {\n const tmpEl = order.productEl.querySelector('.a-od-order-subitem__info-top');\n if (tmpEl) {\n tmpEl.appendChild(createNewCommentButton(order));\n }\n }else{\n order.productEl.appendChild(createNewCommentButton(order));\n }\n }\n });\n }\n\n userNewCommentIsAvailable = (productCode) => {\n const storedComments = getStoredComments();\n return !storedComments.includes(productCode);\n }\n\n saveUserCommentLocalStorage = (productCode) => {\n const storedComments = getStoredComments();\n if (!storedComments.includes(productCode)) {\n storedComments.push(productCode);\n localStorage.setItem(COMMENT_STORAGE_KEY, JSON.stringify(storedComments));\n }\n }\n \n getStoredComments = () => {\n const storedData = localStorage.getItem(COMMENT_STORAGE_KEY);\n return storedData ? JSON.parse(storedData) : [];\n }\n\n function initCRninjaProductWidget() {\n const products = COMMENTS.productWidgetData;\n let widgetInsertType = 'insertBefore';\n let widgetInpertPath = '.list__content';\n\n if (location.pathname == '/') {\n widgetInpertPath = '.showroom';\n widgetInsertType = 'insertAfter';\n }\n\n const configureSwiper = async () => {\n if (COMMENTS.productWidgetsActive && COMMENTS.productWidgetData.length > 0) {\n targetElementChecker(widgetInpertPath, (result) => {\n if (result) {\n switchDirector(widgetInsertType, widgetInpertPath, createSwiperElements(products), false)\n } else {\n console.log(\"Target element not found\", widgetInpertPath);\n }\n })\n initSwiper();\n } else {\n console.log(\"CRNINJA productWidgetsActive\", COMMENTS.productWidgetsActive);\n }\n }\n\n const initSwiper = async () => {\n const linkEl = createElement('link');\n linkEl.rel = 'stylesheet';\n linkEl.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';\n\n const scriptEl = createElement('script');\n scriptEl.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';\n\n /*document.head.appendChild(linkEl); kontrol edilerek açılacak */\n document.head.appendChild(scriptEl);\n scriptEl.onload = () => {\n new Swiper(\".\" + PREFIX + \"mySwiper\", {\n pagination: false,\n loop: true,\n spaceBetween: 20,\n breakpoints: {\n 340: {\n slidesPerView: 2,\n spaceBetween: 20\n },\n 800: {\n slidesPerView: 3,\n spaceBetween: 23\n },\n 1024: {\n slidesPerView: 4,\n spaceBetween: 25\n },\n },\n /*pagination: {\n el: \".swiper-pagination\",\n dynamicBullets: true,\n },*/\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\",\n },\n });\n }\n\n }\n\n const createSwiperElements = (elements) => {\n const container = createElement('div');\n container.setAttribute('class', 'swiper ' + PREFIX + 'mySwiper');\n \n\n if (location.pathname == '/') {\n if (isMobile) {\n container.style.margin = '3rem 1rem';\n }else{\n container.style.margin = '3rem 2.5rem';\n }\n }else{\n container.style.margin = '3rem 0';\n }\n \n const title = createElement('h3');\n switch (COMMENTS.productWidgetsAlgorithm) {\n case 'searchedTopRated':\n title.innerText = 'Aranan Kelimeye Göre Çok Değerlendirilenler';\n break;\n case 'categoryTopRated':\n title.innerText = 'Kategorinin Çok Değerlendirilenleri';\n break;\n case 'generalTopRated':\n title.innerText = 'Çok Değerlendirilen Ürünler';\n break;\n default:\n title.innerText = 'Çok Değerlendirilen Ürünler';\n break;\n }\n\n addClass(title, ['carouselTitle']);\n if (!isMobile) {\n addClass(title, ['carouselTitle', 'mt-3', 'mb-3']);\n }\n\n const wrapper = createElement('div');\n wrapper.setAttribute('class', 'swiper-wrapper');\n\n const nextButton = createElement('div');\n nextButton.setAttribute('class', 'swiper-button-next');\n addClass(nextButton, ['carouselButton', 'carouselNextButton']);\n\n const prevButton = createElement('div');\n prevButton.setAttribute('class', 'swiper-button-prev');\n addClass(prevButton, ['carouselButton', 'carouselPrevButton']);\n\n const pagination = createElement('div');\n pagination.setAttribute('class', 'swiper-pagination');\n\n container.appendChild(title);\n container.appendChild(wrapper);\n container.appendChild(nextButton);\n container.appendChild(prevButton);\n container.appendChild(pagination);\n\n elements.forEach(item => {\n wrapper.appendChild(createCarouselItem(item))\n });\n\n return container\n }\n\n const createCarouselItem = (itemDetail) => {\n const container = createElement('a');\n container.href = itemDetail.feedProductUrl;\n container.setAttribute('class', 'swiper-slide');\n addClass(container, ['mt-3', 'mb-3']);\n\n const content = createElement('div');\n addClass(content, 'carouselItem');\n\n const badgeContainer = createElement('div');\n addClass(badgeContainer, ['carouselBadgeContainer', 'f', 'fc', 'fais']);\n\n const favoriteCountBadge = createElement('div');\n favoriteCountBadge.innerHTML = \"\" + itemDetail.tyFavoriteCount;\n addClass(favoriteCountBadge, ['carouselBadge', 'f', 'fr', 'faic', 'fjcc']);\n\n const questionCountBadge = createElement('div');\n questionCountBadge.innerText = itemDetail.questionCount + ' Soru';;\n addClass(questionCountBadge, 'carouselBadge');\n\n const rateAvgBadge = createElement('div');\n rateAvgBadge.innerHTML = ' ' + itemDetail.rateAVG;\n addClass(rateAvgBadge, ['carouselBadge', 'f', 'fr', 'faic', 'fjcc']);\n\n\n const imageContainer = createElement('div');\n addClass(imageContainer, 'carouselImageContainer');\n\n const image = createElement('img');\n addClass(image, 'carouselProductImage');\n image.src = itemDetail.feedProductImage;\n\n const productStars = createCategoryPageMiniReview({\n \"commentCount\": itemDetail.reviewCount,\n \"mediaCommentCount\": 1,\n \"rateAVG\": itemDetail.rateAVG\n }, itemDetail.feedProductUrl);\n\n addClass(productStars, ['fjcs', 'mt-2']);\n\n const productName = createElement('div');\n addClass(productName, ['carouselProductName', 'mt-2', 'mb-2']);\n productName.innerText = itemDetail.feedProductName;\n\n const productPriceContainer = createElement('div');\n addClass(productPriceContainer, ['carouselProductPriceContainer', 'f', 'fr', 'faic']);\n\n const discountedPrice = createElement('div');\n addClass(discountedPrice, 'carouselDiscountedPrice');\n discountedPrice.innerText = itemDetail.feedProductDiscountedPrice + ' TL';\n\n const originalPrice = createElement('div');\n addClass(originalPrice, 'carouselOriginalPrice');\n originalPrice.innerText = itemDetail.feedProductPrice + ' TL';\n\n if (itemDetail.feedProductDiscountedPrice == itemDetail.feedProductPrice) {\n discountedPrice.style.display = 'none';\n } else {\n addClass(originalPrice, 'tdl-lt');\n addClass(discountedPrice, ['mr-1', 'discountEffect']);\n }\n\n badgeContainer.appendChild(rateAvgBadge);\n badgeContainer.appendChild(favoriteCountBadge);\n /*badgeContainer.appendChild(questionCountBadge);*/\n content.appendChild(badgeContainer);\n imageContainer.appendChild(image);\n content.appendChild(imageContainer);\n content.appendChild(productStars);\n content.appendChild(productName);\n productPriceContainer.appendChild(discountedPrice);\n productPriceContainer.appendChild(originalPrice);\n content.appendChild(productPriceContainer);\n container.appendChild(content);\n\n return container;\n }\n\n configureSwiper();\n }\n\n if (COMMENTS != CRN_DATATYPES.error) {\n reloader();\n if (STYLES) {\n createStyles();\n }\n \n if (orderPageChecker()) {\n createOrderPageComponents();\n return true\n }\n\n if (location.pathname != '/') {\n _chakraCheckComponents();\n }\n /*initCRninjaProductWidget();*/\n }\n } catch (error) { console.error(error) }\n}\n\nfunction crninjaV3() {\n try {\n const COMMENTS = comments;\n\n const FILTER = filter;\n\n let STYLES = comments != CRN_DATATYPES.empty ? JSON.parse(unescape(comments.styles)) : null;\n\n let CURRENT_FILTER = { ...FILTER };\n CURRENT_FILTER['operationType'] = 'comment';\n\n let CURRENT_QA_FILTER = { ...FILTER };\n CURRENT_QA_FILTER['operationType'] = 'question';\n\n const PREFIX = 'CRWLCV-';\n let CRWL_START = 5, CRWL_QUANTITY = 5, CRWL_QA_START = 5, CRWL_QA_QUANTITY = 5, CRWL_COMMENTS_LOADING = false, CRWL_QUESTIONS_LOADING = false;\n\n const COMMENT_STORAGE_KEY = PREFIX+'commentStorage';\n\n createElement = (tagName) => { return document.createElement(tagName) }\n\n let VIEWER = document.createElement('div');\n let COMMENT_CONTAINER = document.createElement('div');\n\n let QA_VIEWER = document.createElement('div');\n let QA_CONTAINER = document.createElement('div');\n\n let uploadedImages = [], newCommentRate = false;\n\n const _w = window.outerWidth;\n\n const _url = location.protocol + '//crninja.com/';\n\n const isMobile = _w < 768 ? true : false;\n\n const primaryColor = '#375A5A';\n const textColor = '#474747';\n\n commentViewerInit = () => {\n if (COMMENTS == CRN_DATATYPES.empty || COMMENTS.commentCount == 0) {\n createCommentlessComponents();\n }\n else {\n if (FILTER.categoryPage) {\n if (STYLES.categoryreview.hide == \"visible\") {\n createCategoryMiniReviews(COMMENTS.reviews)\n }\n } else {\n if (COMMENTS.commentCount == 0) {\n console.log(\"Bu ürün için hiç yorum bulunamadı\")\n return false;\n }\n\n if (document.querySelector('#' + PREFIX + 'main')) {\n console.log(\"Yorum görüntüleyici tekrar yüklenmeye çalıştı\")\n return false;\n }\n createMainComponent();\n createHeader();\n createMiniReview();\n createCommentsContainer();\n createLoadMoreButton();\n if(COMMENTS.commentCount > 0){\n VIEWER.appendChild(Object.assign(document.createElement('div'), { innerHTML: 'Bu yorumlar Trendyol platformundan alınmıştır.'})).style.cssText = 'width: 100%; text-align:center; margin:10px 0;';\n }\n\n\n COMMENTS.comments.forEach(comment => {\n createCommentRow(comment);\n });\n VIEWER.addEventListener('scroll', function () {\n if (!CRWL_COMMENTS_LOADING) {\n if ((VIEWER.clientHeight + VIEWER.scrollTop) >= VIEWER.scrollHeight - 5) {\n CRWL_COMMENTS_LOADING = true;\n loadNextComments();\n }\n }\n });\n }\n }\n\n if (COMMENTS == CRN_DATATYPES.empty || COMMENTS.questionsCount == 0) {\n createQuestionlessComponents();\n } else {\n if (!FILTER.categoryPage) {\n if (COMMENTS.questionsActive == 0) {\n console.log(\"Bu ürün için hiç soru cevap bulunamadı\")\n return false;\n }\n\n if (document.querySelector('#' + PREFIX + 'mainQA')) {\n console.log(\"Question görüntüleyici tekrar yüklenmeye çalıştı\")\n return false;\n }\n\n createMainQuestionsComponent();\n createQAFilters();\n createQuestionsContainer();\n createLoadMoreButtonForQA();\n createNewQuestionComponent();\n\n COMMENTS.questions.forEach(question => {\n createQuestionRow(question);\n });\n }\n }\n }\n\n orderPageChecker = () => {\n const path = location.pathname;\n if (path.indexOf('/users/orders/') > -1) {\n if (path.length >= 20) {\n return true\n }\n }\n \n return false\n }\n\n createNewQuestionComponent = () => {\n const container = createElement('div');\n const text = createElement('div');\n const a = createElement('div');\n\n addClass(container,['f','faic','fjcc','mt-3','newQuestionComponent']);\n addClass(a,['ocp','tdl-u']);\n\n a.style.color = primaryColor;\n\n if (isMobile) {\n addClass(container,['fc']);\n }else{\n addClass(container,['fr']);\n addClass(a,['ml-1']);\n }\n \n text.innerText = 'Aradığınızı Bulamadınız mı?';\n a.innerText = 'Bize Yeni Bir Soru Sorun';\n a.addEventListener('click',()=>{\n createNewQuestionForm(FILTER.productCode, window.crwl.CCID);\n })\n\n container.appendChild(text);\n container.appendChild(a);\n QA_VIEWER.appendChild(container);\n }\n\n createNewQuestionForm = (productCode,ccid) => {\n const container = createElement('div');\n\n const productInfoRow = createModalProductInfoRow(false);\n const title = createElement('div');\n const textArea = createElement('textarea');\n const switchContainer = createSwitchButton('İsmim Görünsün','showNamePermit',true);\n const agreement = createElement('div');\n const permitContainer = createElement('div');\n const permitCheckBox = createElement('input');\n const permitLabel = createElement('div');\n const button = createElement('div');\n const errorMessage = createElement('div');\n\n addClass(container,['f','fc']);\n addClass(title,['t-1','mb-3','mt-3']);\n addClass(textArea,['t-1','mb-3','p-1','inputLabel']);\n addClass(switchContainer,['t-1','mb-3','f','fr']);\n addClass(agreement,['t-1','mb-3','inputLabel']);\n addClass(permitContainer,['t-1','mb-3','f','fr','faic']);\n addClass(permitCheckBox,['mr-2']);\n addClass(permitLabel,['inputLabel']);\n addClass(button,['tc','bold','p-3','ocp']);\n \n\n button.style.background = primaryColor;\n button.style.color = '#fff';\n textArea.style.border = '.5px solid '+textColor;\n permitCheckBox.style.width = '30px';\n permitCheckBox.style.height = '30px';\n permitCheckBox.style.accentColor = primaryColor;\n\n title.innerText = 'Ürün özellikleriyle ilgili sorularınızı buradan teknik ekibimize sorabilirsiniz.';\n textArea.placeholder = 'Ürün hakkındaki sorularınız nelerdir?';\n agreement.innerHTML = 'Yorumlarda ismimin gözükmesine ve yorum detaylarının platform genelinde kullanılmasına izin veriyorum. Aydınlatma Metni’ne ulaşmak için tıklayınız.';\n permitLabel.innerHTML = 'Soru sormak için Kullanıcı Sözleşmesi\\'ni kabul ediyorum.';\n button.innerText = 'Kaydet ve Devam Et';\n\n container.id = PREFIX+'newQuestionForm';\n errorMessage.id = PREFIX+'errorMessage';\n permitCheckBox.type = 'checkbox';\n permitCheckBox.name = 'permit';\n textArea.rows = '5';\n textArea.cols = '50';\n\n button.addEventListener('click',()=>{\n sendNewQuestion(productCode, ccid, container);\n })\n\n container.appendChild(productInfoRow);\n container.appendChild(title);\n container.appendChild(textArea);\n container.appendChild(switchContainer);\n container.appendChild(agreement);\n permitContainer.appendChild(permitCheckBox);\n permitContainer.appendChild(permitLabel);\n container.appendChild(permitContainer);\n container.appendChild(button);\n container.appendChild(errorMessage);\n\n const modal = createModal(\"Bize Soru Sor\",container);\n }\n\n createQuestionThanksPage = () => {\n const container = createElement('div');\n const img = createElement('img');\n const title = createElement('h5');\n const desc = createElement('h6');\n const ordersButton = createElement('div');\n const nextButton = createElement('div');\n\n addClass(container,['f', 'fc', 'fjcc']);\n addClass(title,['tc','inputLabel','mb-3']);\n addClass(desc,['tc','inputLabel','mb-3']);\n addClass(ordersButton,['tc','bold','p-3','ocp', 'mb-3']);\n addClass(nextButton,['tc','bold','p-3','ocp']);\n nextButton.style.background = primaryColor;\n nextButton.style.color = '#fff';\n img.style.width = '170px';\n img.style.height = '170px';\n img.style.margin = '20px auto 20px auto';\n ordersButton.style.border = '.5px solid '+primaryColor;\n\n img.src = 'https://www.crninja.com/assets/imgs/chakra_thanks_for_question.svg';\n title.innerText = 'Teşekkürler';\n desc.innerText = 'Sorunuz bize ulaştı. Müşteri temsilcilerimiz en kısa sürede size geri dönüş yapacaklar. İlginiz için teşekkür ederiz!';\n ordersButton.innerText = 'Siparişlerime Git';\n nextButton.innerText = 'Alışverişe Devam Et';\n\n ordersButton.addEventListener('click',()=>{\n location.href = 'https://www.chakra.com.tr/users/orders/';\n });\n\n nextButton.addEventListener('click',()=>{\n modalClose();\n });\n\n container.appendChild(img);\n container.appendChild(title);\n container.appendChild(desc);\n container.appendChild(ordersButton);\n container.appendChild(nextButton);\n\n return container;\n }\n\n createNewCommentForm = (productCode, ccid, productDetail, reviewButton) => {\n const container = createElement('div');\n\n const productInfoRow = createModalProductInfoRow(productDetail);\n const titleContainer = createElement('div');\n const title = createElement('div');\n const textArea = createElement('textarea');\n const imagesContainer = createElement('div');\n const icLeft = createElement('div');\n const icRight = createElement('div');\n const icLeftTitle = createElement('div');\n const icLeftDesc = createElement('div');\n const switchContainer = createSwitchButton('İsmim Görünsün','showNamePermit', false);\n const agreement = createElement('div');\n const permitContainer = createElement('div');\n const permitCheckBox = createElement('input');\n const permitLabel = createElement('div');\n const button = createElement('div');\n const errorMessage = createElement('div');\n const rate = createElement('input');\n \n addClass(container,['f','fc']);\n addClass(titleContainer,['f','fr','fjcsb','faic','mb-3','mt-3']);\n addClass(textArea,['t-1','mb-3','p-1','inputLabel']);\n \n addClass(imagesContainer,['f','fr','faic','fjcc', 'mb-3']);\n addClass(icLeft,['f','fc','fjcc','w-50']);\n addClass(icRight,['f','fr','faic','w-50']);\n addClass(icLeftDesc,['t-05']);\n\n addClass(switchContainer,['t-1','mb-3','f','fr']);\n addClass(agreement,['t-1','mb-3','inputLabel']);\n addClass(permitContainer,['t-1','mb-3','f','fr','faic']);\n addClass(permitCheckBox,['mr-2']);\n addClass(permitLabel,['inputLabel']);\n addClass(button,['tc','bold','p-3','ocp','f','fr','faic','fjcc']);\n \n button.style.background = primaryColor;\n button.style.color = '#fff';\n icLeftDesc.style.fontWeight = '100';\n textArea.style.border = '.5px solid '+textColor;\n permitCheckBox.style.width = '30px';\n permitCheckBox.style.height = '30px';\n permitCheckBox.style.accentColor = primaryColor;\n\n title.innerText = 'Ürünü beğendiniz mi?';\n icLeftTitle.innerHTML = 'Fotoğraf Ekle (opsiyonel)';\n icLeftDesc.innerHTML = 'Her bir fotoğrafın boyutu en fazla 10 mb JPG ve PNG olmalıdır.';\n textArea.placeholder = 'Ürün hakkındaki düşünceleriniz nelerdir?';\n agreement.innerHTML = 'Yorumlarda ismimin gözükmesine ve yorum detaylarının platform genelinde kullanılmasına izin veriyorum. Aydınlatma Metni’ne ulaşmak için tıklayınız.';\n permitLabel.innerHTML = 'Soru sormak için Kullanıcı Sözleşmesi\\'ni kabul ediyorum.';\n button.innerHTML = ' Ürünü Değerlendir';\n\n container.id = PREFIX+'newCommentForm';\n errorMessage.id = PREFIX+'errorMessage';\n permitCheckBox.type = 'checkbox';\n permitCheckBox.name = 'permit';\n textArea.rows = '3';\n textArea.cols = '50';\n rate.id = PREFIX + 'newCommentRate';\n rate.name = 'rate';\n rate.value = false;\n rate.hidden = true;\n \n\n button.addEventListener('click',()=>{\n sendNewComment(productCode, ccid, container, productDetail, reviewButton);\n })\n\n container.appendChild(productInfoRow);\n titleContainer.appendChild(title);\n titleContainer.appendChild(createClickableStars());\n container.appendChild(titleContainer);\n container.appendChild(textArea);\n icRight.appendChild(createUploadImageComponent());\n imagesContainer.appendChild(icLeft);\n imagesContainer.appendChild(icRight);\n icLeft.appendChild(icLeftTitle);\n icLeft.appendChild(icLeftDesc);\n container.appendChild(imagesContainer);\n container.appendChild(switchContainer);\n container.appendChild(agreement);\n permitContainer.appendChild(permitCheckBox);\n permitContainer.appendChild(permitLabel);\n container.appendChild(permitContainer);\n container.appendChild(button);\n container.appendChild(errorMessage);\n container.appendChild(rate);\n\n const modal = createModal(\"Ürünü Değerlendir\",container);\n\n setTimeout(() => {\n setImageUploaderListener(productCode,ccid);\n }, 1000);\n }\n\n createCommentThanksPage = () => {\n const container = createElement('div');\n const img = createElement('img');\n const title = createElement('h5');\n const desc = createElement('h6');\n const ordersButton = createElement('div');\n const nextButton = createElement('div');\n\n addClass(container,['f', 'fc', 'fjcc']);\n addClass(title,['tc','t-3','mb-3', 'inputLabel']);\n addClass(desc,['tc','inputLabel','mb-3']);\n addClass(ordersButton,['tc','bold','p-3','ocp', 'mb-3']);\n addClass(nextButton,['tc','bold','p-3','ocp']);\n nextButton.style.background = primaryColor;\n nextButton.style.color = '#fff';\n img.style.width = '170px';\n img.style.height = '170px';\n img.style.margin = '20px auto 20px auto';\n ordersButton.style.border = '.5px solid '+primaryColor;\n\n img.src = 'https://www.crninja.com/assets/imgs/chakra_thanks_for_comment_icon.svg';\n title.innerText = 'Teşekkürler,\\nDeğerlendirmen Paylaşıldı';\n desc.innerText = 'Alışveriş deneyimini değerlendirerek\\nbirçok kullanıcıya yardımcı oldunuz.';\n ordersButton.innerText = 'Siparişlerime Git';\n nextButton.innerText = 'Alışverişe Devam Et';\n\n ordersButton.addEventListener('click',()=>{\n location.href = 'https://www.chakra.com.tr/users/orders/';\n });\n\n nextButton.addEventListener('click',()=>{\n modalClose();\n });\n\n\n container.appendChild(img);\n container.appendChild(title);\n container.appendChild(desc);\n container.appendChild(ordersButton);\n container.appendChild(nextButton);\n\n return container;\n }\n\n createModal = (title, modalDetail) => {\n const modalAnimationDuration = 500;\n const container = createElement('div');\n container.id = PREFIX+'modal';\n const overlay = createElement('div');\n const modal = createElement('div');\n const _title = createElement('h4');\n const modalHeaderContainer = createElement('div');\n const closeButton = createElement('img');\n const mobileModalNotch = createElement('div');\n \n addClass(container,['f','fjcc','faic', 'fixFull']);\n addClass(overlay,['bigMediaOverlay','ocp']);\n addClass(modal,['modal','p-4']);\n addClass(modalHeaderContainer,['f','fr','faic','fjcsb']);\n addClass(_title, ['t-4']);\n addClass(closeButton, ['ocp']);\n addClass(mobileModalNotch,['mobileModalNotch']);\n\n modal.id = PREFIX+'modalDetail';\n _title.innerText = title;\n closeButton.src = 'https://www.crninja.com/assets/imgs/chakra_close_button.svg';\n\n if (isMobile) {\n addClass(container,['fc']);\n modal.style.height = \"90%\";\n modal.style.bottom = \"-2000px\";\n modal.appendChild(mobileModalNotch);\n }else{\n addClass(container,['fr']);\n modal.style.right = \"-1000px\";\n }\n\n const _modalClose = () => {\n if (isMobile) {\n modal.style.bottom = \"-2000px\";\n }else{\n modal.style.right = \"-1000px\";\n }\n setTimeout(() => {\n container.remove();\n }, modalAnimationDuration);\n };\n\n closeButton.addEventListener('click',_modalClose);\n overlay.addEventListener('click',_modalClose);\n\n modalHeaderContainer.appendChild(_title);\n modalHeaderContainer.appendChild(closeButton);\n modal.appendChild(modalHeaderContainer);\n modalDetail && modal.appendChild(modalDetail);\n container.appendChild(overlay);\n container.appendChild(modal);\n document.body.appendChild(container);\n\n setTimeout(() => {\n modal.style.right = \"0\";\n modal.style.bottom = \"0\";\n }, 10);\n\n return modal\n }\n\n modalClose = () => {\n const modalAnimationDuration = 500;\n const modal = document.querySelector('#'+PREFIX+'modal');\n const modalDetail = document.querySelector('#'+PREFIX+'modalDetail');\n \n if(!modal || !modalDetail) {return}\n\n if (isMobile) {\n modalDetail.style.bottom = \"-2000px\";\n }else{\n modalDetail.style.right = \"-1000px\";\n }\n setTimeout(() => {\n modal.remove();\n }, modalAnimationDuration);\n }\n \n createModalProductInfoRow = (productDetail) => {\n const productInfo = productDetail ? productDetail : getProductInfo(); \n \n const container = createElement('div');\n const left = createElement('div');\n const right = createElement('div');\n const img = createElement('img');\n const productName = createElement('div');\n const starRow = createElement('div');\n\n addClass(container,['f','fr','faic','p-2','mt-3']);\n addClass(right,['f','fc','fjcsa','h-100','t-05']);\n addClass(left,['mr-2']);\n addClass(starRow,['f','fr','faib']);\n\n left.style.width = '70px';\n left.style.height = '70px';\n container.style.background = '#FAF8F6';\n container.style.height = '90px';\n\n const star = createElement('div');\n addClass(star,['star','starFilled']);\n star.style.transform = 'scale(1.2)';\n\n if (orderPageChecker()) {\n addClass(starRow,'dn');\n }\n\n starRow.appendChild(star);\n starRow.innerHTML += ' '+COMMENTS.rateAVG+' ('+COMMENTS.commentCount+' Yorum)';\n\n if (productInfo.img) {\n img.src = productInfo.img;\n left.appendChild(img);\n container.appendChild(left);\n }\n \n if (productInfo.name) {\n productName.innerText = productInfo.name;\n right.appendChild(productName);\n }\n\n right.appendChild(starRow);\n container.appendChild(right);\n\n return container;\n }\n\n createSwitchButton = (text, id, nameInputIsActive) => {\n const container = createElement('div');\n const input = createElement('input');\n const label = createElement('label');\n const span = createElement('span');\n\n input.id = id;\n input.name = id;\n label.setAttribute('for',id);\n\n span.innerText = text;\n input.type='checkbox';\n\n addClass(container,['toggle-container']);\n addClass(label,'toggle');\n addClass(span,['label','inputLabel']);\n\n container.appendChild(input);\n container.appendChild(label);\n container.appendChild(span);\n\n if (nameInputIsActive) {\n const nameInput = createElement('input');\n nameInput.name = 'userFullName';\n nameInput.type = 'text';\n nameInput.placeholder = 'İsim';\n addClass(nameInput,['w-50','p-2']);\n nameInput.style.border = '.5px solid '+textColor;\n container.appendChild(nameInput);\n addClass(container,['fjcsb']);\n }\n\n return container\n }\n\n createClickableStars = () => {\n const container = createElement('div');\n addClass(container, ['f', 'fr', 'fjcc', 'faic', 'ocp']);\n let _on = false;\n for (let i = 1; i <= 5; i++) {\n const _star = createStar(isMobile ? 30 : 45);\n addClass(_star, 'starEmpty');\n _star.dataset.id = i;\n _star.addEventListener('mousemove', () => {\n if (!_on) {\n container.querySelectorAll('div').forEach((star, j) => {\n if (i > j) {\n addClass(star, 'starFilled');\n removeClass(star, 'starEmpty');\n } else {\n addClass(star, 'starEmpty');\n removeClass(star, 'starFilled');\n }\n });\n _on = true;\n }\n })\n\n _star.addEventListener('mouseleave', () => {\n if (_on) {\n container.querySelectorAll('div').forEach((star, j) => {\n if (newCommentRate) {\n if (j >= newCommentRate) {\n addClass(star, 'starEmpty');\n removeClass(star, 'starFilled');\n } else {\n addClass(star, 'starFilled');\n removeClass(star, 'starEmpty');\n }\n } else {\n addClass(star, 'starEmpty');\n removeClass(star, 'starFilled');\n }\n });\n _on = false;\n }\n })\n\n _star.addEventListener('click', () => {\n console.log(\"RATED\", _star.dataset.id);\n newCommentRate = _star.dataset.id;\n document.querySelector('#' + PREFIX + 'newCommentRate').value = newCommentRate;\n })\n\n container.appendChild(_star);\n }\n\n return container;\n }\n\n createStar = (size) => {\n const star = createElement('div');\n addClass(star, 'star');\n if (size) {\n star.style.width = size + \"px\";\n star.style.height = (size-5) + \"px\";\n }\n return star\n }\n\n createUploadImageComponent = () => {\n const container = createElement('div');\n\n const imageForm = createElement('form');\n imageForm.action = _url + 'uploadImage';\n imageForm.method = 'POST';\n imageForm.enctype = 'multipart/form-data';\n imageForm.id = PREFIX+'uploadImageForm';\n addClass(imageForm, ['f', 'fr', 'fjcs', 'faic', 'w-50', 'form', 'dn']);\n const imageInput = createElement('input');\n const imageLabel = createElement('label');\n addClass(imageLabel, 'label');\n imageLabel.innerText = 'Bir resim yükleyin:';\n imageLabel.for = 'imagefile';\n imageForm.appendChild(imageLabel);\n addClass(imageInput, ['o0'])\n const imageSubmitButton = createElement('button');\n imageInput.type = 'file';\n imageInput.id = 'imagefile';\n imageInput.name = 'imagefile';\n imageInput.accept = '.jpeg, .jpg, .png, .gif, .bmp, .webp, .heic';\n imageSubmitButton.type = 'submit';\n imageSubmitButton.id = 'uploadImageSubmit';\n imageSubmitButton.hidden = true;\n imageForm.appendChild(imageInput);\n imageForm.appendChild(imageSubmitButton);\n container.appendChild(imageForm);\n\n addClass(container,['w-100','h-100','f','fr','fjcsb','faic','ml-2']);\n\n imageInput.addEventListener('change', function (e) { imageSubmitButton.click(); });\n\n for (let i = 0; i < 3; i++) {\n const box = createElement('div');\n const img = createElement('img');\n box.id = PREFIX+'uploadImageBox'+i;\n addClass(box,['ocp','w-25','h-100','pr','f','faic','fjcc']);\n addClass(img,['w-100','h-100']);\n box.style.minWidth = '52px';\n box.style.minHeight = '52px';\n box.style.background= '#faf8f6';\n box.dataset.value = 'empty';\n img.src = 'https://www.crninja.com/assets/imgs/chakra_empty_image_box.svg';\n\n box.appendChild(img);\n container.appendChild(box);\n\n box.addEventListener('click', function (e) { \n if (box.dataset.value == 'empty') {\n imageInput.click(); \n }\n });\n }\n\n return container\n }\n\n createImageBoxCloseIcon = (box) => {\n const container = createElement('img');\n addClass(container,['imageBoxCloseButton','pa']);\n container.src = 'https://www.crninja.com/assets/imgs/chakra_close_button.svg';\n container.addEventListener('click',()=>{\n removeBoxImage(box);\n })\n return container\n }\n\n getProductInfo = () => {\n let name = document.querySelector('.product-info__title');\n let img = document.querySelector('.pswp-gallery img');\n\n let url = window.location.href;\n\n if (name) {\n name = name.innerText;\n }\n\n if (img) {\n if (img.src) {\n img = img.src;\n }else if(img.dataset.src){\n img = img.dataset.src\n }\n }\n \n return { name, img, url }\n }\n\n getEmptyImageBox = () => {\n const box = document.querySelector('[data-value=\"empty\"]');\n return box ? box : false;\n }\n\n setBoxImage = (url) => {\n const box = getEmptyImageBox();\n if (box) {\n box.dataset.value = 'filled';\n box.querySelector('img').src = _url + '' +url;\n box.appendChild(createImageBoxCloseIcon(box));\n }\n }\n\n removeBoxImage = (box) => {\n if (box) {\n box.innerHTML = '';\n const img = createElement('img');\n addClass(img,['w-100','h-100']);\n img.src = 'https://www.crninja.com/assets/imgs/chakra_empty_image_box.svg';\n box.appendChild(img);\n setTimeout(() => {\n box.dataset.value = 'empty';\n }, 500);\n }\n }\n\n setImageUploaderListener = (productCode, ccid) => {\n const form = document.getElementById(PREFIX+'uploadImageForm');\n form && form.addEventListener('submit', function (e) {\n e.preventDefault();\n\n const formData = new FormData(this);\n const xhr = new XMLHttpRequest();\n\n xhr.open('POST', _url + 'uploadImage?productCode=' + productCode + '&ccid=' + ccid, true);\n\n xhr.onload = function () {\n console.log(this.responseText);\n if (this.status === 200) {\n setBoxImage(this.responseText);\n uploadedImages.push(this.responseText);\n } else if (this.status === 400) {\n console.log(\"Cancelled\");\n } else {\n console.log(\"Yükleme sırasında bir hata oluştu.\");\n }\n };\n\n xhr.send(formData);\n });\n }\n\n getUserName = () => {\n const name = document.querySelector('.account-menu__user-subtitle');\n return name ? name.innerText : \"\";\n }\n\n sendNewComment = (productCode, ccid, container, productDetail, reviewButton) => {\n let data = {\n productCode: productCode,\n ccid: ccid,\n mediaData: uploadedImages,\n userFullName: getUserName(),\n };\n\n const { name, url } = productDetail;\n data = { ...data, productName:name, productUrl:url };\n\n const newCommentForm = document.getElementById(PREFIX+'newCommentForm');\n newCommentForm.querySelectorAll('input').forEach(input => {\n \n if (input.type == 'text') {\n data[input.name] = input.value\n }\n\n if (input.type == 'checkbox') {\n data[input.name] = input.checked\n }\n });\n\n data['comment'] = newCommentForm.querySelector('textArea').value;\n\n const xhr = new XMLHttpRequest();\n\n xhr.open('POST', _url + 'newComment', true);\n xhr.setRequestHeader('Content-Type', 'application/json');\n const errEl = document.querySelector('#' + PREFIX + 'errorMessage');\n xhr.onload = function () {\n if (this.status === 200) {\n if (this.responseText == 'success') {\n console.log(\"success\");\n container.innerHTML = '';\n container.appendChild(createCommentThanksPage());\n saveUserCommentLocalStorage(productCode);\n reviewButton.remove();\n } else {\n errEl.innerText = this.responseText;\n addClass(errEl, 'errorMessage');\n }\n } else {\n if (errEl) {\n errEl.innerText = this.responseText;\n addClass(errEl, 'errorMessage');\n }\n }\n };\n\n xhr.send(JSON.stringify(data));\n }\n\n sendNewQuestion = (productCode, ccid, container) => {\n let data = {\n productCode: productCode,\n ccid: ccid,\n };\n\n const { name, url } = getProductInfo();\n data = { ...data, productName:name, productUrl:url };\n\n const newQuestionForm = document.getElementById(PREFIX+'newQuestionForm');\n\n newQuestionForm.querySelectorAll('input').forEach(input => {\n if (input.type == 'text') {\n data[input.name] = input.value\n }\n\n if (input.type == 'checkbox') {\n data[input.name] = input.checked\n }\n });\n\n data['question'] = newQuestionForm.querySelector('textArea').value;\n\n \n const xhr = new XMLHttpRequest();\n\n xhr.open('POST', _url + 'newQuestion', true);\n xhr.setRequestHeader('Content-Type', 'application/json');\n const errEl = document.querySelector('#' + PREFIX + 'errorMessage');\n xhr.onload = function () {\n if (this.status === 200) {\n if (this.responseText == 'success') {\n console.log(\"success\");\n container.innerHTML = '';\n container.appendChild(createQuestionThanksPage());\n } else {\n errEl.innerText = this.responseText;\n addClass(errEl, 'errorMessage');\n }\n } else {\n if (errEl) {\n errEl.innerText = this.responseText;\n addClass(errEl, 'errorMessage');\n }\n }\n };\n\n xhr.send(JSON.stringify(data));\n }\n\n createMainComponent = () => {\n VIEWER.id = PREFIX + 'main';\n VIEWER.classList.add(PREFIX + 'main');\n\n let path = CRN_PRODUCTION ? \"#\" + PREFIX + \"clonedContent\" : \"#preview\";\n let insertType = STYLES.main.insertType;\n if (isMobile) {\n path = '#' + PREFIX + 'mobileCommentsArea';\n insertType = 'insertInside';\n }\n targetElementChecker(path, (result) => {\n if (result) {\n switchDirector(insertType, path, VIEWER, false)\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n\n createMainQuestionsComponent = () => {\n QA_VIEWER.id = PREFIX + 'mainQA';\n QA_VIEWER.classList.add(PREFIX + 'mainQA');\n\n let path = CRN_PRODUCTION ? \"#\" + PREFIX + \"clonedContentForQA\" : \"#preview\";\n let insertType = STYLES.main.insertType;\n if (isMobile) {\n path = '#' + PREFIX + 'mobileQuestionsArea';\n insertType = 'insertInside';\n }\n targetElementChecker(path, (result) => {\n if (result) {\n switchDirector(insertType, path, QA_VIEWER, false)\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n\n createCategoryMiniReviews = (comments) => {\n if (!comments.length > 0) {\n return false\n }\n\n let matchType;\n const path = STYLES.categoryreview.selectorPath;\n const insertPath = STYLES.categoryreview.insertPath;\n if (comments[0].feedSKU) {\n matchType = 'code';\n } else if (comments[0].name) {\n matchType = 'name';\n } else {\n matchType = 'name';\n }\n\n targetElementChecker(path, (result) => {\n if (result) {\n const productEls = document.querySelectorAll(path);\n if (productEls.length > 0) {\n productEls.forEach(product => {\n comments.forEach(productReviewData => {\n if (matchType == 'code') {\n if (product.dataset.sku == productReviewData.feedSKU) {\n if (!product.querySelector('.' + PREFIX + 'miniReviewContainer')) {\n switchDirector(STYLES.categoryreview.insertType, insertPath, createCategoryPageMiniReview(productReviewData, product.querySelector(\"a\").href), product.querySelector(insertPath))\n }\n }\n } else {\n if (product.innerText == productReviewData.name) {\n if (!product.parentNode.querySelector('.' + PREFIX + 'miniReviewContainer')) {\n switchDirector(STYLES.categoryreview.insertType, path, createCategoryPageMiniReview(productReviewData, product.href), product)\n }\n }\n }\n });\n });\n }\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n\n createCategoryPageMiniReview = (data, url) => {\n const container = document.createElement(\"div\");\n container.classList.add(PREFIX + 'miniReviewContainer')\n\n /*const rateAVG = parseFloat(data.rateAVG).toFixed(1);\n container.appendChild(createRate(rateAVG));*/\n\n const starCount = data.rateAVG;\n container.appendChild(createStars(starCount, !isMobile, false));\n\n const commentCount = '(' + data.commentCount + ')';\n const mediaCommentCount = data.mediaCommentCount;\n const commentCountEl = createCommentCount(commentCount, mediaCommentCount);\n commentCountEl.style.fontWeight = '400';\n if (isMobile) {\n commentCountEl.style.fontSize = '11px';\n commentCountEl.style.margin = '2px 5px 0 5px';\n }\n container.appendChild(commentCountEl);\n\n container.addEventListener('click', () => {\n location.href = url;\n })\n\n return container;\n }\n\n createCommentsContainer = () => {\n COMMENT_CONTAINER.id = PREFIX + 'commentContainer';\n COMMENT_CONTAINER.classList.add(PREFIX + 'commentsArea');\n COMMENT_CONTAINER.style.backgroundColor = STYLES.comment.commentBackgroundColor;\n VIEWER.appendChild(COMMENT_CONTAINER);\n }\n\n createQuestionsContainer = () => {\n QA_CONTAINER.id = PREFIX + 'questionsContainer';\n QA_CONTAINER.classList.add(PREFIX + 'questionsArea');\n QA_CONTAINER.style.backgroundColor = STYLES.comment.commentBackgroundColor;\n QA_VIEWER.appendChild(QA_CONTAINER);\n }\n\n createMiniReview = () => {\n if (STYLES.minireview?.hide == 'visible') {\n const container = document.createElement(\"div\");\n container.id = PREFIX + 'miniReviewContainer';\n container.classList.add(PREFIX + 'miniReviewContainer');\n container.style.fontWeight = '300';\n\n const rateAVG = parseFloat(COMMENTS.rateAVG).toFixed(1);\n container.appendChild(createRate(rateAVG));\n\n const starCount = COMMENTS.rateAVG;\n container.appendChild(createStars(starCount, true, false));\n\n\n const _text = _getLang() == 'TR' ? ' Değerlendirmeler' : ' Ratings';\n\n const commentCount = COMMENTS.commentCount + _text;\n const mediaCommentCount = false; /*COMMENTS.mediaCommentCount*/\n const _title = createCommentCount(commentCount, mediaCommentCount);\n _title.style.paddingLeft = '12px';\n _title.style.borderLeft = '1px solid gray';\n container.appendChild(_title);\n\n container.addEventListener('click', () => {\n scrollToMainViewer();\n const clonedMenuButton = document.querySelector('#' + PREFIX + 'clonedMenuButton');\n if (clonedMenuButton) {\n clonedMenuButton.click();\n }\n });\n\n if (!isMobile) {\n const miniHoverPanel = creteHowerPanel(rateAVG, COMMENTS.rateAndCounts, COMMENTS.commentCount);\n miniHoverPanel.style.left = 'unset';\n const c = true;\n if (c) {\n container.appendChild(miniHoverPanel);\n }\n\n let hoverPanelStatus = false;\n container.addEventListener('mousemove', () => {\n if (!hoverPanelStatus) {\n if (miniHoverPanel && miniHoverPanel.classList.contains(PREFIX + 'hidden')) {\n miniHoverPanel.classList.add(PREFIX + 'visible');\n miniHoverPanel.classList.remove(PREFIX + 'hidden');\n hoverPanelStatus = true;\n }\n }\n })\n\n container.addEventListener('mouseleave', () => {\n if (hoverPanelStatus) {\n if (miniHoverPanel && miniHoverPanel.classList.contains(PREFIX + 'visible')) {\n miniHoverPanel.classList.add(PREFIX + 'hidden');\n miniHoverPanel.classList.remove(PREFIX + 'visible');\n hoverPanelStatus = false;\n }\n }\n })\n }\n\n const path = CRN_PRODUCTION ? STYLES.minireview.selectorPath : \"#pageTitle\";\n targetElementChecker(path, (result) => {\n if (result) {\n switchDirector(STYLES.minireview.insertType, path, container, false)\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n }\n\n creteHowerPanel = (avg, rateAndCounts, commentCount) => {\n if (!avg || !rateAndCounts) {\n return false\n }\n\n const container = document.createElement(\"div\");\n container.id = PREFIX + 'miniHoverPanel';\n container.classList.add(PREFIX + 'miniHoverPanel');\n container.classList.add(PREFIX + 'hidden');\n\n const createRow = () => {\n const row = document.createElement('div');\n row.classList.add(PREFIX + 'miniHoverPanelRow');\n return row\n }\n\n /*const avgRow = createRow();\n avgRow.innerHTML = '' + avg + ' Ortalama Puan';\n container.appendChild(avgRow);*/\n\n const createProgresBar = (percent, txt) => {\n const row = document.createElement('div');\n row.classList.add(PREFIX + 'miniHoverPanelProgressBarContainer');\n\n const barEmpty = document.createElement('div');\n barEmpty.classList.add(PREFIX + 'miniHoverPanelProgressBarEmpty');\n\n const bar = document.createElement('div');\n bar.classList.add(PREFIX + 'miniHoverPanelProgressBar');\n bar.style.width = percent + '%';\n barEmpty.appendChild(bar);\n\n row.appendChild(barEmpty);\n\n const text = document.createElement('div');\n text.classList.add(PREFIX + 'miniHoverPanelProgressBarText');\n text.innerText = txt;\n row.appendChild(text);\n\n return row;\n }\n\n const createRateAndBar = (rate, count) => {\n const row = createRow();\n\n const leftCol = document.createElement('div');\n leftCol.style.width = '40%';\n leftCol.style.display = 'flex';\n leftCol.style.justifyContent = 'center';\n leftCol.innerHTML = '' + rate + '';\n\n const rightCol = document.createElement('div');\n rightCol.style.width = '60%';\n\n leftCol.appendChild(createStars(rate, false, false));\n rightCol.appendChild(createProgresBar(calculatePercent(count, commentCount), count));\n\n row.appendChild(leftCol);\n row.appendChild(rightCol);\n return row\n }\n\n let rates = [1, 2, 3, 4, 5], currentRates = [];\n rateAndCounts.forEach(rate => {\n container.appendChild(createRateAndBar(rate.rate, rate.count))\n currentRates.push(rate.rate)\n });\n\n let diff = rates.filter(x => !currentRates.includes(x));\n\n diff.sort();\n diff.reverse();\n\n diff.forEach(rate => {\n container.appendChild(createRateAndBar(rate, 0))\n });\n\n return container\n }\n\n createCommentlessComponents = () => {\n const container = document.createElement(\"div\");\n container.style.height = \"180px\";\n container.style.width = \"100%\";\n container.style.display = \"flex\";\n container.style.justifyContent = \"center\";\n container.style.alignItems = \"center\";\n container.style.flexDirection = \"column\";\n\n if (isMobile) {\n container.style.marginBottom = \"40px\";\n }\n\n const starContainer = document.createElement(\"div\");\n starContainer.style.height = \"120px\";\n starContainer.style.width = \"120px\";\n starContainer.style.borderRadius = \"50%\";\n starContainer.style.margin = \"15px 0 20px 0\";\n starContainer.style.display = \"flex\";\n starContainer.style.justifyContent = \"center\";\n starContainer.style.alignItems = \"center\";\n\n const star = document.createElement('img');\n star.src = 'https://www.crninja.com/assets/imgs/chakra_no_comment_icon.svg';\n starContainer.appendChild(star);\n\n container.appendChild(starContainer);\n\n const desc = document.createElement('div');\n desc.style.textAlign = 'center';\n desc.style.color = 'rgb(126,126,126)';\n desc.style.fontSize = '14px';\n desc.style.fontWeight = '100';\n desc.innerText = 'Bu ürün hakkında daha önce hiç yorum yapılmamış.';\n\n container.appendChild(desc);\n\n const clonedReviewArea = document.querySelector('#' + PREFIX + (isMobile ? 'mobileCommentsArea' : 'clonedContent'));\n if (clonedReviewArea) {\n clonedReviewArea.appendChild(container);\n }\n\n const miniContainer = document.createElement(\"div\");\n miniContainer.style.margin = \"10px 0\";\n miniContainer.style.width = \"100%\";\n miniContainer.style.display = \"flex\";\n miniContainer.style.justifyContent = \"center\";\n miniContainer.style.alignItems = \"center\";\n miniContainer.style.flexDirection = \"row\";\n\n const miniStar = document.createElement('img');\n miniStar.src = 'https://www.crninja.com/assets/imgs/chakra-star.svg';\n miniStar.setAttribute('height', '21px');\n miniStar.style.marginRight = \"5px\";\n miniContainer.appendChild(miniStar);\n\n const miniDesc = document.createElement(\"div\");\n miniDesc.style.color = 'rgb(126,126,126)';\n miniDesc.style.fontSize = '14px';\n miniDesc.style.fontWeight = '100';\n miniDesc.innerText = 'Henüz Yorum Yazılmamış';\n miniContainer.appendChild(miniDesc);\n\n const path = \".product-info__title\";\n targetElementChecker(path, (result) => {\n if (result) {\n switchDirector('insertBefore', path, miniContainer, false)\n } else {\n console.log(\"Target element not found\", path);\n }\n })\n }\n\n createQuestionlessComponents = () => {\n const container = document.createElement(\"div\");\n container.style.height = \"280px\";\n container.style.width = \"100%\";\n container.style.display = \"flex\";\n container.style.justifyContent = \"center\";\n container.style.alignItems = \"center\";\n container.style.flexDirection = \"column\";\n\n if (isMobile) {\n container.style.marginBottom = \"40px\";\n }\n\n const starContainer = document.createElement(\"div\");\n starContainer.style.height = \"120px\";\n starContainer.style.width = \"120px\";\n starContainer.style.borderRadius = \"50%\";\n starContainer.style.margin = \"15px 0 20px 0\";\n starContainer.style.display = \"flex\";\n starContainer.style.justifyContent = \"center\";\n starContainer.style.alignItems = \"center\";\n\n const star = document.createElement('img');\n star.src = 'https://www.crninja.com/assets/imgs/chakra_no_question_icon.svg';\n starContainer.appendChild(star);\n\n container.appendChild(starContainer);\n\n const desc = document.createElement('div');\n desc.style.textAlign = 'center';\n desc.style.color = 'rgb(126,126,126)';\n desc.style.fontSize = '14px';\n desc.style.fontWeight = '100';\n desc.innerText = 'Bu ürün hakkında daha önce hiç soru sorulmamış.';\n\n const newQuestionButton = createElement('div');\n addClass(newQuestionButton,['tc','bold','p-3','ocp', 'mt-3','mb-3']);\n newQuestionButton.style.border = '1px solid '+primaryColor;\n newQuestionButton.innerText = 'Ürün Hakkında Soru Sor';\n newQuestionButton.addEventListener('click',()=>{\n createNewQuestionForm(FILTER.productCode,window.crwl.CCID);\n });\n \n container.appendChild(desc);\n container.appendChild(newQuestionButton);\n\n const clonedReviewArea = document.querySelector('#' + PREFIX + (isMobile ? 'mobileQuestionsArea' : 'clonedContentForQA'));\n if (clonedReviewArea) {\n clonedReviewArea.appendChild(container);\n }\n\n }\n\n createHr = () => {\n let hr = document.createElement('div');\n hr.classList.add(PREFIX + 'hr');\n return hr\n }\n\n createQAFilters = () => {\n const container = document.createElement('div');\n container.classList.add(PREFIX + 'qaFiltersContainer');\n\n const inputContainer = document.createElement('div');\n inputContainer.classList.add(PREFIX + 'qaFiltersInputContainer');\n\n const input = document.createElement('input');\n input.classList.add(PREFIX + 'qaFiltersInput');\n input.placeholder = 'Sorularda Ara';\n input.addEventListener('input', (e) => {\n if (e.target.value != '') {\n const searchData = e.target.value;\n changeFilterForQA('search', searchData);\n } else {\n delete CURRENT_QA_FILTER.search;\n applyFilterForQA();\n }\n });\n\n const searchIcon = document.createElement('div');\n searchIcon.classList.add(PREFIX + 'searchIcon');\n searchIcon.innerHTML = '';\n searchIcon.addEventListener('click', (e) => {\n if (input.value != '') {\n const searchData = input.value;\n changeFilterForQA('search', searchData);\n } else {\n delete CURRENT_QA_FILTER.search;\n applyFilterForQA();\n }\n });\n\n const sortContainer = document.createElement('div');\n sortContainer.classList.add(PREFIX + 'sortContainer');\n\n const sortEl = document.createElement('select');\n sortEl.classList.add(PREFIX + 'sortEl');\n sortEl.addEventListener('change', (e) => {\n const sortData = e.target.value;\n changeFilterForQA('sort', sortData);\n });\n\n const _default = document.createElement('option');\n _default.classList.add(PREFIX + 'sortOptions');\n\n const az = document.createElement('option');\n az.classList.add(PREFIX + 'sortOptions');\n\n const za = document.createElement('option');\n za.classList.add(PREFIX + 'sortOptions');\n\n _default.innerText = 'Sırala';\n za.innerText = 'Yeniden Eskiye';\n az.innerText = 'Eskiden Yeniye';\n\n _default.value = 'default';\n _default.selected = true;\n az.value = 'az';\n za.value = 'za';\n\n sortEl.appendChild(_default);\n sortEl.appendChild(za);\n sortEl.appendChild(az);\n\n inputContainer.appendChild(input);\n inputContainer.appendChild(searchIcon);\n container.appendChild(inputContainer);\n\n sortContainer.appendChild(sortEl);\n\n container.appendChild(sortContainer);\n\n QA_VIEWER.appendChild(container);\n }\n\n createTitle = () => {\n /*let title = document.createElement('div');\n title.innerText = COMMENTS.commentCount +' '+ STYLES.main.title;\n title.classList.add(PREFIX + 'title');*/\n\n const infoRow = document.createElement('div');\n infoRow.classList.add(PREFIX + 'headerInfoRow');\n infoRow.style.position = 'relative';\n\n if (isMobile) {\n /*title.style.width = 'fit-content';*/\n infoRow.style.width = 'fit-content';\n }\n\n const rateAVG = parseFloat(COMMENTS.rateAVG).toFixed(1);\n\n let rateAVGElement = document.createElement('div');\n rateAVGElement.innerText = parseFloat(COMMENTS.rateAVG).toFixed(1);\n rateAVGElement.style.fontSize = '45px';\n rateAVGElement.style.fontWeight = '100';\n infoRow.appendChild(rateAVGElement);\n\n /*infoRow.appendChild(createRate(rateAVG));*/\n\n const starCount = COMMENTS.rateAVG;\n const _stars = createStars(starCount, true, false, true);\n infoRow.appendChild(_stars);\n\n /*let info = document.createElement('div');\n info.style.fontWeight = '100';\n info.style.fontSize = '12px';\n info.style.margin = '15px 0';\n info.style.textAlign = 'center';\n info.style.width = '100%';\n info.style.display = 'flex';\n info.style.justifyContent = 'center';\n info.style.alignItems = 'center';\n info.innerHTML = `\n Değerlendirme yapabilmek için bu ürünü satın almış olmalısınız.\n `;\n \n infoRow.appendChild(info);*/\n\n\n /*if (!isMobile) {\n const hoverIcon = document.createElement('div');\n hoverIcon.innerHTML = '';\n infoRow.appendChild(hoverIcon);\n }*/\n\n const titleContainer = document.createElement('div');\n titleContainer.classList.add(PREFIX + 'titleContainer');\n titleContainer.style.display = \"flex\";\n titleContainer.style.flexDirection = \"column\";\n titleContainer.style.justifyContent = \"center\";\n titleContainer.style.alignItems = \"center\";\n titleContainer.style.margin = \"15px 0\";\n\n if (isMobile) {\n titleContainer.style.justifyContent = \"space-between\";\n }\n\n titleContainer.appendChild(infoRow);\n /*titleContainer.appendChild(title);\n \n if (!isMobile) {\n const shortingContainer = document.createElement('div');\n shortingContainer.classList.add(PREFIX + 'shortingContainer');\n shortingContainer.style.width=\"100%\";\n titleContainer.appendChild(shortingContainer);\n }*/\n\n\n _createHoverPanel = () => {\n const miniHoverPanel = creteHowerPanel(rateAVG, COMMENTS.rateAndCounts, COMMENTS.commentCount);\n miniHoverPanel.style.top = \"50%\";\n miniHoverPanel.style.left = \"unset\";\n const c = true;\n if (c) {\n infoRow.appendChild(miniHoverPanel);\n }\n\n let hoverPanelStatus = false;\n infoRow.addEventListener('mousemove', () => {\n if (!hoverPanelStatus) {\n if (miniHoverPanel && miniHoverPanel.classList.contains(PREFIX + 'hidden')) {\n miniHoverPanel.classList.add(PREFIX + 'visible');\n miniHoverPanel.classList.remove(PREFIX + 'hidden');\n hoverPanelStatus = true;\n }\n }\n })\n\n infoRow.addEventListener('mouseleave', () => {\n if (hoverPanelStatus) {\n if (miniHoverPanel && miniHoverPanel.classList.contains(PREFIX + 'visible')) {\n miniHoverPanel.classList.add(PREFIX + 'hidden');\n miniHoverPanel.classList.remove(PREFIX + 'visible');\n hoverPanelStatus = false;\n }\n }\n })\n }\n\n if (!isMobile) {\n _createHoverPanel();\n }\n\n VIEWER.appendChild(titleContainer);\n }\n\n createRate = (rate) => {\n if (!rate) {\n return false\n }\n let rateElement = document.createElement('div');\n rateElement.innerText = rate;\n rateElement.classList.add(PREFIX + 'rateAVG');\n return rateElement\n }\n\n createCommentCount = (commentCount, mediaCommentCount) => {\n if (!commentCount) {\n return false\n }\n\n let commentCountElement = document.createElement('div');\n commentCountElement.innerHTML = commentCount;\n\n commentCountElement.classList.add(PREFIX + 'rateAVG');\n\n if (mediaCommentCount > 0) {\n commentCountElement.innerHTML += ' 📷';\n }\n\n return commentCountElement\n }\n\n createUserInfo = (userInfo) => {\n if (!userInfo) {\n return false\n }\n let userInfoElement = document.createElement('div');\n userInfoElement.innerHTML = _changeTimeLang(userInfo.lastModifiedDate) + ' • ' + userInfo.userFullName + (userInfo.productSize ? (' • ' + userInfo.productSize) : \"\");\n userInfoElement.classList.add(PREFIX + 'userInfo');\n return userInfoElement\n }\n\n createStars = (starCount, big, commentCount, veryBig) => {\n if (!starCount) {\n starCount = 0;\n }\n\n const halfStar = parseFloat(starCount);\n let halfPercent = false, integerPart = 0;\n if (isFloat(halfStar)) {\n integerPart = parseInt(starCount);\n halfPercent = starCount.split(\".\")[1].substr(0, 2);\n }\n\n let starsContainer = document.createElement('div');\n starsContainer.classList.add(PREFIX + 'starsContainer');\n if (big) {\n starsContainer.style.margin = '0 10px 0 0';\n }\n\n for (let i = 1; i <= 5; i++) {\n if (i == integerPart + 1) {\n starsContainer.appendChild(createHalfStar(halfPercent, big, veryBig));\n } else {\n const star = document.createElement('div');\n star.classList.add(PREFIX + 'star');\n\n if (big) {\n star.style.transform = 'scale(1)';\n }\n\n if (veryBig) {\n star.style.transform = 'scale(2)';\n star.style.margin = '10px 20px 30px 0';\n }\n\n if (starCount >= i) {\n star.classList.add(PREFIX + 'starFilled');\n }\n else {\n star.classList.add(PREFIX + 'starEmpty');\n }\n\n starsContainer.appendChild(star);\n }\n }\n\n if (commentCount != false && commentCount != 'undefined') {\n starsContainer.innerHTML += '(' + commentCount + ')';\n }\n\n return starsContainer\n }\n\n createHalfStar = (percent, big, veryBig) => {\n\n const halfStarContainer = document.createElement('div');\n halfStarContainer.classList.add(PREFIX + 'star');\n\n if (big) {\n halfStarContainer.style.transform = 'scale(1)';\n }\n\n if (veryBig) {\n halfStarContainer.style.transform = 'scale(2)';\n halfStarContainer.style.margin = '10px 20px 30px 0';\n }\n\n const emptyStar = document.createElement('div');\n emptyStar.classList.add(PREFIX + 'starEmpty');\n emptyStar.classList.add(PREFIX + 'halfStarPosition');\n\n\n const filledStar = document.createElement('div');\n filledStar.classList.add(PREFIX + 'starFilled');\n filledStar.classList.add(PREFIX + 'halfStarPosition');\n filledStar.style.zIndex = \"9\";\n filledStar.style.width = percent + \"%\";\n\n halfStarContainer.appendChild(emptyStar)\n halfStarContainer.appendChild(filledStar)\n\n return halfStarContainer\n }\n\n createLike = (likeCount) => {\n if (!likeCount) {\n likeCount = 0;\n }\n let likeCountElement = document.createElement('div');\n likeCountElement.classList.add(PREFIX + 'likeCount');\n\n let svg = document.createElement('div');\n svg.innerHTML = \"\";\n\n let count = document.createElement('div');\n count.style.marginLeft = '5px';\n count.innerText = '(' + likeCount + ')';\n\n likeCountElement.appendChild(svg)\n likeCountElement.appendChild(count)\n\n\n return likeCountElement\n }\n\n createFilters = (data) => {\n if (!data) {\n return false\n }\n\n let filtersContainer = document.createElement('div');\n filtersContainer.classList.add(PREFIX + 'filtersContainer');\n\n /*if (data.mediaCommentCount > 0) {\n filtersContainer.appendChild(createFilterTitle('Konuya Göre', false));\n }\n \n \n filtersContainer.appendChild(createFilterTitle('Puana Göre', false));*/\n\n const starRow = document.createElement('div');\n starRow.classList.add(PREFIX + 'starFilterRow');\n\n starRow.appendChild(createStarBadge(1, 1, true));\n\n data.mediaCommentCount && starRow.appendChild(createMediaBadge(data.mediaCommentCount));\n\n let _rateData = data.rateAndCounts;\n\n let rates = [1, 2, 3, 4, 5], currentRates = [];\n _rateData.forEach(rate => {\n currentRates.push(rate.rate)\n });\n\n let diff = rates.filter(x => !currentRates.includes(x));\n\n diff.sort();\n diff.reverse();\n\n diff.forEach(rate => {\n _rateData.push({ count: 0, rate: rate, block: true })\n });\n\n _rateData.sort(function (a, b) {\n return b.rate - a.rate;\n });\n\n _rateData.forEach(rateData => {\n starRow.appendChild(createStarBadge(parseInt(rateData.rate), rateData.count, false, rateData.block ? true : false));\n });\n\n filtersContainer.appendChild(starRow);\n\n if (data.sizesAndCounts.length > 0 && data.sizesAndCounts[0].count > 0) {\n filtersContainer.appendChild(createFilterTitle('Bedene Göre', false));\n\n const sizeRow = document.createElement('div');\n sizeRow.classList.add(PREFIX + 'starFilterRow');\n\n data.sizesAndCounts.forEach(sizeData => {\n if (sizeData.productSize && sizeData.count) {\n sizeRow.appendChild(createStandartBadge(sizeData.productSize, sizeData.count));\n }\n });\n filtersContainer.appendChild(sizeRow);\n }\n\n return filtersContainer\n }\n\n createMediaBadge = (mediaCommentCount) => {\n if (!mediaCommentCount) {\n return false\n }\n let mediaBadge = document.createElement('div');\n\n const _text = _getLang() == 'TR' ? 'Fotoğraflı' : 'With Photo Review';\n mediaBadge.innerHTML = _text;\n mediaBadge.classList.add(PREFIX + 'starBadge');\n\n const countEl = document.createElement('div');\n countEl.innerText = mediaCommentCount;\n countEl.style.position = 'absolute';\n countEl.style.top = '-10px';\n countEl.style.left = '21px';\n countEl.style.fontWeight = '100';\n countEl.style.fontSize = '13px';\n countEl.style.background = isMobile ? '#fff' : '#f6f4f1';\n countEl.style.padding = '0 5px';\n mediaBadge.appendChild(countEl);\n\n mediaBadge.addEventListener('click', () => {\n let onlyMedia = CURRENT_FILTER.onlyMedia;\n if (!mediaBadge.classList.contains(PREFIX + 'selectedBadge')) {\n mediaBadge.classList.add(PREFIX + 'selectedBadge');\n onlyMedia = true;\n document.querySelector(\"#\" + PREFIX + \"allCommentsButton\").classList.remove(PREFIX + 'selectedBadge');\n } else {\n mediaBadge.classList.remove(PREFIX + 'selectedBadge');\n onlyMedia = false;\n }\n\n changeFilter('onlyMedia', onlyMedia);\n })\n return mediaBadge\n }\n\n createStandartBadge = (text, count) => {\n if (!text) {\n return false\n }\n let badge = document.createElement('div');\n badge.innerText = text + (count ? '(' + count + ')' : '');\n badge.classList.add(PREFIX + 'standartBadge');\n badge.addEventListener('click', () => {\n let sizes = CURRENT_FILTER.sizes ? CURRENT_FILTER.sizes : [];\n if (!badge.classList.contains(PREFIX + 'selectedBadge')) {\n badge.classList.add(PREFIX + 'selectedBadge');\n sizes.push(text)\n } else {\n badge.classList.remove(PREFIX + 'selectedBadge');\n removeItemFromArray(sizes, text)\n }\n\n changeFilter('sizes', sizes);\n })\n\n return badge\n }\n\n createStarBadge = (starCount, commentCount, allComments, block) => {\n if (!starCount) {\n return false\n }\n let starBadge = document.createElement('div');\n if (!allComments) {\n starBadge.appendChild(createStars(starCount, false, false));\n } else {\n const _text = _getLang() == 'TR' ? 'Tüm Yorumlar' : 'All Reviews';\n starBadge.innerText = _text;\n starBadge.classList.add(PREFIX + 'selectedBadge');\n starBadge.id = PREFIX + \"allCommentsButton\";\n }\n\n const countEl = document.createElement('div');\n countEl.innerText = !allComments ? commentCount : COMMENTS.commentCount;\n countEl.style.position = 'absolute';\n countEl.style.top = '-10px';\n countEl.style.left = '21px';\n countEl.style.fontWeight = '100';\n countEl.style.fontSize = '13px';\n countEl.style.background = isMobile ? '#fff' : '#f6f4f1';\n countEl.style.padding = '0 5px';\n starBadge.appendChild(countEl);\n\n starBadge.classList.add(PREFIX + 'starBadge');\n\n if (!block) {\n starBadge.addEventListener('click', () => {\n let stars;\n if (!allComments) {\n stars = CURRENT_FILTER.stars ? CURRENT_FILTER.stars : [];\n if (!starBadge.classList.contains(PREFIX + 'selectedBadge')) {\n starBadge.classList.add(PREFIX + 'selectedBadge');\n stars.push(starCount)\n } else {\n starBadge.classList.remove(PREFIX + 'selectedBadge');\n removeItemFromArray(stars, starCount);\n }\n document.querySelector(\"#\" + PREFIX + \"allCommentsButton\").classList.remove(PREFIX + 'selectedBadge');\n } else {\n stars = [];\n const starButtons = document.querySelectorAll(\".\" + PREFIX + 'starBadge');\n starButtons.forEach(starButton => {\n starButton.classList.remove(PREFIX + 'selectedBadge');\n });\n starButtons[0].classList.add(PREFIX + 'selectedBadge');\n }\n\n changeFilter('stars', stars);\n })\n } else {\n starBadge.style.opacity = .4;\n }\n\n return starBadge\n }\n\n createFilterTitle = (text, big) => {\n if (!text) {\n return false\n }\n let title = document.createElement('div');\n title.innerText = text;\n title.classList.add(PREFIX + 'badgeTitle');\n big && title.classList.add(PREFIX + 'badgeMainTitle');\n return title\n }\n\n createComment = (comment) => {\n if (!comment) {\n return false\n }\n let commentElement = document.createElement('div');\n commentElement.innerText = comment;\n commentElement.classList.add(PREFIX + 'comment');\n return commentElement\n }\n\n createCommentMedia = (mediaData) => {\n if (!mediaData) {\n return false\n }\n\n mediaData = mediaData.filter(media => media.isActive != 0);\n\n if (mediaData.length == 0) {\n return document.createElement('div')\n }\n\n let mediaContainer = document.createElement('div');\n mediaContainer.classList.add(PREFIX + 'mediaContainer');\n\n mediaData.forEach((media, i) => {\n let mediaElement = document.createElement('img');\n mediaElement.onerror = function () { this.style.display = 'none'; };\n mediaElement.src = media.thumbnailUrl;\n mediaElement.classList.add(PREFIX + 'thumbnailMedia');\n mediaContainer.appendChild(mediaElement);\n\n mediaElement.addEventListener('click', () => {\n createBigMedia(i, mediaData);\n })\n });\n\n return mediaContainer\n }\n\n createQuestion = (data) => {\n if (!data) {\n return false\n }\n let qaElement = document.createElement('div');\n qaElement.innerText = data.question;\n qaElement.classList.add(PREFIX + 'question');\n return qaElement\n }\n\n createAnswer = (data) => {\n if (!data) {\n return false\n }\n let qaElement = document.createElement('div');\n qaElement.innerText = data.answer;\n qaElement.classList.add(PREFIX + 'answer');\n return qaElement\n }\n\n createBigMedia = (i, mediaData) => {\n if (!mediaData) {\n return false\n }\n\n let current = i;\n let bigMediaContainer = document.createElement('div');\n bigMediaContainer.id = PREFIX + 'bigMediaContainer';\n bigMediaContainer.classList.add(PREFIX + 'bigMediaContainer');\n\n let bigMediaOverlay = document.createElement('div');\n bigMediaOverlay.id = PREFIX + 'bigMediaOverlay';\n bigMediaOverlay.classList.add(PREFIX + 'bigMediaOverlay');\n bigMediaContainer.appendChild(bigMediaOverlay);\n\n bigMediaOverlay.addEventListener('click', () => {\n bigMediaContainer.remove();\n })\n\n let bigMediaElement = document.createElement('img');\n bigMediaElement.src = mediaData[i].url;\n bigMediaElement.classList.add(PREFIX + 'bigMedia');\n\n let bigMediaCloseButtonElement = document.createElement('button');\n bigMediaCloseButtonElement.innerHTML = '✖';\n bigMediaCloseButtonElement.classList.add(PREFIX + 'button');\n bigMediaCloseButtonElement.classList.add(PREFIX + 'bigMediaCloseButton');\n bigMediaContainer.appendChild(bigMediaCloseButtonElement);\n\n let rightButton;\n if (mediaData.length > 1) {\n rightButton = document.createElement('button');\n rightButton.innerHTML = '❯';\n rightButton.classList.add(PREFIX + 'button');\n rightButton.classList.add(PREFIX + 'arrowButton');\n\n rightButton.addEventListener('click', () => {\n if (current == mediaData.length - 1) {\n current = 0;\n } else {\n current += 1;\n }\n bigMediaElement.src = mediaData[current].url;\n })\n\n let leftButton = document.createElement('button');\n leftButton.innerHTML = '❮';\n leftButton.classList.add(PREFIX + 'button');\n leftButton.classList.add(PREFIX + 'arrowButton');\n\n leftButton.addEventListener('click', () => {\n if (current == 0) {\n current = mediaData.length - 1;\n } else {\n current -= 1;\n }\n bigMediaElement.src = mediaData[current].url;\n })\n\n bigMediaContainer.appendChild(leftButton);\n }\n\n bigMediaContainer.appendChild(bigMediaElement);\n mediaData.length > 1 && bigMediaContainer.appendChild(rightButton);\n\n bigMediaCloseButtonElement.addEventListener('click', () => close());\n\n close = () => {\n const container = document.querySelector('#' + PREFIX + 'bigMediaContainer');\n if (container) {\n container.remove();\n }\n }\n\n document.body.appendChild(bigMediaContainer);\n }\n\n createHeader = () => {\n createTitle();\n\n if (isMobile) {\n const miniInlinePanel = creteHowerPanel(parseFloat(COMMENTS.rateAVG).toFixed(1), COMMENTS.rateAndCounts, COMMENTS.commentCount);\n miniInlinePanel.classList.remove(PREFIX + 'hidden');\n miniInlinePanel.style.position = 'initial';\n miniInlinePanel.style.padding = '0px';\n miniInlinePanel.style.boxShadow = 'unset';\n miniInlinePanel.style.width = '100%';\n miniInlinePanel.style.minWidth = '100%';\n miniInlinePanel.style.marginBottom = '20px';\n const _stars = miniInlinePanel.querySelectorAll('.' + PREFIX + 'miniHoverPanelRow>div:nth-child(1)');\n _stars.forEach(starContainer => {\n starContainer.style.justifyContent = 'flex-start';\n });\n\n const _lines = miniInlinePanel.querySelectorAll('.' + PREFIX + 'miniHoverPanelRow>div:nth-child(2)');\n _lines.forEach(line => {\n line.style.width = '80%';\n });\n\n const _counts = miniInlinePanel.querySelectorAll('.' + PREFIX + 'miniHoverPanelProgressBarText');\n _counts.forEach(countText => {\n countText.style.justifyContent = 'flex-end';\n });\n\n VIEWER.appendChild(miniInlinePanel);\n }\n\n let header = document.createElement('div');\n header.classList.add(PREFIX + 'header');\n\n header.appendChild(createFilters(COMMENTS))\n\n VIEWER.appendChild(header);\n }\n\n createStarsAndUserInfoRow = (commentData) => {\n const container = document.createElement('div');\n container.style.display = 'flex';\n container.style.margin = '7px 0px';\n container.style.justifyContent = 'space-between';\n\n /*const buyed = document.createElement('div');\n buyed.style.color = primaryColor;\n buyed.style.display = 'flex';\n buyed.style.alignItems = 'center';\n buyed.style.fontWeight = '300';\n buyed.innerHTML = ' Ürünü Satın Aldı';*/\n\n const starCount = commentData.rate;\n container.appendChild(createStars(starCount, false, false));\n\n const userInfo = {\n userFullName: commentData.userFullName,\n lastModifiedDate: commentData.lastModifiedDate,\n productSize: commentData.productSize\n };\n container.appendChild(createUserInfo(userInfo));\n\n /*container.appendChild(buyed);*/\n\n return container\n }\n\n createUserInfoRowForQA = (date, nameOrTiming) => {\n const container = document.createElement('div');\n container.style.display = 'flex';\n container.style.margin = '7px 0px';\n container.style.justifyContent = 'space-between';\n\n let userInfoElement = document.createElement('div');\n userInfoElement.innerHTML = date ? _changeTimeLang(date) + ' • ' + nameOrTiming : nameOrTiming ;\n userInfoElement.classList.add(PREFIX + 'userInfo');\n userInfoElement.style.margin = 0;\n\n container.appendChild(userInfoElement);\n\n return container\n }\n\n createCommentRow = (commentData) => {\n let commentContainer = document.createElement('div');\n commentContainer.classList.add(PREFIX + 'commentContainer');\n\n commentContainer.appendChild(createStarsAndUserInfoRow(commentData));\n\n if (commentData.mediaData) {\n const mediaData = JSON.parse(commentData.mediaData)\n commentContainer.appendChild(createCommentMedia(mediaData))\n }\n\n const comment = commentData.comment;\n commentContainer.appendChild(createComment(comment));\n\n COMMENT_CONTAINER.appendChild(commentContainer);\n COMMENT_CONTAINER.appendChild(createHr());\n }\n\n createQuestionRow = (data) => {\n let qaContainer = document.createElement('div');\n qaContainer.classList.add(PREFIX + 'questionContainer');\n\n qaContainer.appendChild(createQuestion(data));\n\n qaContainer.appendChild(createUserInfoRowForQA(data.questionDate, _upperFirstLetter(data.userName)));\n\n if (data.answer) {\n qaContainer.appendChild(createAnswer(data));\n qaContainer.appendChild(createUserInfoRowForQA(data.answerDate, data.answerDatePastTense));\n }\n\n QA_CONTAINER.appendChild(qaContainer);\n QA_CONTAINER.appendChild(createHr());\n }\n\n createLoader = () => {\n const loader = document.createElement('div');\n loader.id = PREFIX + 'loader';\n loader.classList.add(PREFIX + 'loader');\n loader.classList.add(PREFIX + 'hidden');\n COMMENT_CONTAINER.appendChild(loader);\n }\n\n createStyles = () => {\n if (!document.querySelector(PREFIX + 'style')) {\n let style = document.createElement('style');\n style.id = PREFIX + 'style';\n style.innerHTML = '\\\n ' + (STYLES.main.fontFamily != \"\" ? \"@import url('https:\\/\\/fonts.googleapis.com/css2?family=Nunito+Sans:opsz@6..12&display=swap');\" : \"\") + '\\\n .' + PREFIX + 'main{width:' + STYLES.main.width + '; height:' + STYLES.main.height + '; overflow: auto; border-radius: ' + STYLES.main.borderRadius + '; border: ' + STYLES.main.border + ';background-color: ' + STYLES.main.backgroundColor + ';box-shadow: ' + STYLES.main.shadow + ';box-sizing: border-box;font-family: ' + STYLES.main.fontFamily + ';font-size: 14px;color: ' + STYLES.main.color + '; position: relative;}\\\n .' + PREFIX + 'main::-webkit-scrollbar{background:' + STYLES.scrollbar.scrollbarBackgroundColor + '; width:' + STYLES.scrollbar.scrollbarWidth + '; height: 0px; border-radius:6px;}\\\n .' + PREFIX + 'main::-webkit-scrollbar-thumb{background:' + STYLES.scrollbar.scrollbarThumbColor + ';border-radius:' + STYLES.scrollbar.scrollbarBorderRadius + '}\\\n .' + PREFIX + 'title{font-weight: 300;width:100%;text-align:' + STYLES.main.titleTextAlign + '; font-size:' + STYLES.main.titleTextSize + '; position:relative; color:' + STYLES.main.titleTextColor + '; left:' + STYLES.main.titleLeftMargin + '}\\\n .' + PREFIX + 'rateAVG{margin-right:5px;color:#5f5f5f;font-size:' + STYLES.main.rateAvgTextSize + '; font-family: ' + STYLES.main.fontFamily + ';}\\\n .' + PREFIX + 'commentCount{font-size:20px;}\\\n .' + PREFIX + 'userInfo{font-weight: 300;width:100%;height:100%; margin: 2px 0px 5px 8px; font-size:' + STYLES.comment.commentUserInfoTextSize + ';color:' + STYLES.comment.commentUserInfoTextColor + ';line-height:16px}\\\n .' + PREFIX + 'starsContainer{display:flex; flex-direction:row; align-items: center;}\\\n .' + PREFIX + 'star{position: relative; margin-right: 2px; width: ' + STYLES.main.starSize + ';height: ' + STYLES.main.starSize + ';transform: scale(.85);}\\\n .' + PREFIX + 'starEmpty{background: url(' + STYLES.main.emptyStarImage + ') no-repeat; background-size: cover;}\\\n .' + PREFIX + 'starFilled{background:url(' + STYLES.main.filledStarImage + ') no-repeat; background-size: cover;}\\\n .' + PREFIX + 'halfStarPosition{position:absolute; width: ' + STYLES.main.starSize + ';height: ' + STYLES.main.starSize + ';}\\\n .' + PREFIX + 'likeCount{cursor: pointer;color: #666;font-size: 12px;line-height: 16px; display: flex;justify-content: flex-end;align-items: flex-start;fill: #666;}\\\n .' + PREFIX + 'comment{font-weight: 300;margin:15px 0px;word-break: break-word;line-height: 18px; color:' + STYLES.comment.commentTextColor + '; font-size:' + STYLES.comment.commentTextSize + '}\\\n .' + PREFIX + 'question{font-weight: 400;margin:5px 0px;word-break: break-word;line-height: 18px; color:' + STYLES.comment.commentTextColor + '; font-size:' + STYLES.comment.commentTextSize + '}\\\n .' + PREFIX + 'answer{background:#fff;font-weight: 300;margin:5px 0px;padding: 10px 20px;word-break: break-word;line-height: 18px; color:' + STYLES.comment.commentTextColor + '; font-size:' + STYLES.comment.commentTextSize + '}\\\n .' + PREFIX + 'header{display: flex; flex-direction:column;}\\\n .' + PREFIX + 'headerInfoRow{flex-direction:column;width: 100%;align-self: center; display: flex;align-items: center;justify-content: flex-start; box-sizing: border-box;font-family: ' + STYLES.main.fontFamily + ';-webkit-font-smoothing: antialiased;}\\\n .' + PREFIX + 'filtersContainer{display: flex; flex-direction:column;overflow-x:auto;}\\\n .' + PREFIX + 'mediaBadge{border: ' + STYLES.filter.filterButtonBorder + ';width: fit-content;padding: 0px 10px 0px 11px; border-radius: ' + STYLES.filter.filterButtonBorderRadius + '; min-height:30px;display:flex;align-items:center;cursor:pointer;box-sizing: border-box; background-color:' + STYLES.filter.filterButtonBackgroundColor + '; color:' + STYLES.filter.filterButtonTextColor + '; font-size: ' + STYLES.filter.filterButtonTextSize + '}\\\n .' + PREFIX + 'starBadge{position:relative;flex:1;justify-content: center;border: ' + STYLES.filter.filterButtonBorder + ';min-width: 100px;width: fit-content;padding: 17px 10px; margin-right:15px; border-radius: ' + STYLES.filter.filterButtonBorderRadius + '; min-height:30px; display:flex;align-items:center;cursor:pointer;box-sizing: border-box; background-color:' + STYLES.filter.filterButtonBackgroundColor + '; color:' + STYLES.filter.filterButtonTextColor + ';font-weight:100; font-size: ' + STYLES.filter.filterButtonTextSize + '}\\\n .' + PREFIX + 'standartBadge{border: ' + STYLES.filter.filterButtonBorder + ';width: fit-content;padding: 0px 10px 0px 11px; margin-right:15px; border-radius: ' + STYLES.filter.filterButtonBorderRadius + '; min-height:30px; display:flex;align-items:center;cursor:pointer;box-sizing: border-box; background-color:' + STYLES.filter.filterButtonBackgroundColor + '; color:' + STYLES.filter.filterButtonTextColor + '; font-size: ' + STYLES.filter.filterButtonTextSize + '}\\\n .' + PREFIX + 'starFilterRow{display:flex;flex-direction:row;padding: 5px 0;}\\\n .' + PREFIX + 'badgeTitle{font-size: ' + STYLES.filter.filterTitleTextSize + ';color: ' + STYLES.filter.filterTitleColor + ';line-height: 15px;font-weight: ' + STYLES.filter.filterTitleWeight + ';font-family: ' + STYLES.main.fontFamily + ';margin-bottom: 12px;margin-top: 24px;}\\\n .' + PREFIX + 'commentsArea{margin-top: 30px;background-color:' + STYLES.comment.commentBackgroundColor + '; position:relative; padding-bottom: 25px;}\\\n .' + PREFIX + 'questionsArea{margin-top: 30px;background-color:' + STYLES.comment.commentBackgroundColor + '; position:relative; padding-bottom: 25px;}\\\n .' + PREFIX + 'commentContainer{display: flex; flex-direction:column;}\\\n .' + PREFIX + 'questionContainer{margin-top:40px}\\\n .' + PREFIX + 'mediaContainer{height:100px;margin: 5px 0; display: flex;}\\\n .' + PREFIX + 'thumbnailMedia{height: 100%;margin-right: 5px;border-radius: ' + STYLES.comment.commentMediaBorderRadius + ';box-shadow: ' + STYLES.comment.commentMediaShadow + ';cursor: pointer;}\\\n .' + PREFIX + 'bigMediaContainer{height: 100%; width:100%; position:fixed; top:0;left:0;z-index:9999999999;background:rgba(0,0,0,.4);display:flex;justify-content:space-evenly;align-items:center}\\\n .' + PREFIX + 'bigMediaOverlay{height: 100%; width:100%; position:absolute; top:0;left:0;z-index:1;background:rgba(0,0,0,.4)}\\\n .' + PREFIX + 'bigMedia{height: 80%; width: auto; box-shadow: 0 1px 4px #0000004d;z-index:2}\\\n .' + PREFIX + 'button{border:0;color:black;padding:5px 10px; cursor:pointer;font-size:29px; background:transparent;z-index:2;transform:translate3d(0,0,3px)}\\\n .' + PREFIX + 'bigMediaCloseButton{position:absolute;right:0px;top:0px;}\\\n .' + PREFIX + 'arrowButton{font-size:50px;padding:20px 25px;}\\\n .' + PREFIX + 'hr{width:' + STYLES.comment.commentHorizontalLineWidth + '; height:' + STYLES.comment.commentHorizontalLineHeight + '; background-color:' + STYLES.comment.commentHorizontalLineColor + '; margin:15px auto; border-radius: 50px;}\\\n .' + PREFIX + 'selectedBadge{border:' + STYLES.filter.filterButtonSelectedBorder + '; padding: 0px 10px}\\\n .' + PREFIX + 'center{position: relative;transform: translate(-50%, -50%);top: 50%;left: 50%}\\\n .' + PREFIX + 'miniReviewContainer{display:flex; cursor:pointer; align-items: center;position:relative;justify-content: center;}\\\n .' + PREFIX + 'miniHoverPanel{display:flex; flex-direction:column; padding:20px ; box-shadow:0px 0px 5px #b7b3b3; background:#fff;position: absolute;top: 50px;left: 5px;z-index: 9; width:320px; min-width:320px; height:auto}\\\n .' + PREFIX + 'miniHoverPanel:after, .' + PREFIX + 'miniHoverPanel:before { left: 50%; border: solid transparent; content: \"\"; height: 0; width: 0; position: absolute; pointer-events: none; bottom: 100%;}\\\n .' + PREFIX + 'miniHoverPanel:after {border-bottom-color: #fff;border-width: 10px;margin-left: -10px;}\\\n .' + PREFIX + 'miniHoverPanel:before {border-width: 11px;margin-left: -11px;border-bottom-color: #e8e8e8;bottom: 100%;}\\\n .' + PREFIX + 'miniHoverPanelRow{display:flex;align-items: center;margin:5px 0px;}\\\n .' + PREFIX + 'miniHoverPanelProgressBarContainer{display:flex;align-items: center;}\\\n .' + PREFIX + 'miniHoverPanelProgressBarEmpty{display:flex; background: #d7d7d7; width:75%; height:4px; overflow:hidden}\\\n .' + PREFIX + 'miniHoverPanelProgressBar{display:flex; background: #fec004;}\\\n .' + PREFIX + 'miniHoverPanelProgressBarText{display:flex;width:25%; justify-content: center;}\\\n .' + PREFIX + 'loader {border: 2px solid ' + STYLES.scrollbar.scrollbarBackgroundColor + ';border-radius: 50%;border-top: 2px solid ' + STYLES.scrollbar.scrollbarThumbColor + ';width: 40px;height: 40px;-webkit-animation: ' + PREFIX + 'spin 2s linear infinite;animation: ' + PREFIX + 'spin 2s linear infinite; position:absolute; bottom:5px; left:50%; transform: translate(0%, -50%)}\\\n .' + PREFIX + 'miniHoverPanelAvgContainer {font-size: 12px;text-align: center;color: #999;}\\\n .' + PREFIX + 'miniHoverPanelAvg {font-size: 20px; -webkit-font-smoothing: antialiased;color: #333; font-weight: bold;}\\\n .' + PREFIX + 'qaFiltersContainer {display: flex;align-items: center;flex-direction: row;justify-content: space-between; margin-bottom:15px; height:48px;}\\\n .' + PREFIX + 'qaFiltersInputContainer {flex: 5; height:100%; background: white; margin-right: 20px; border: 0.75px solid #D1D1D1; padding: 10px; display: flex; flex-direction: row;}\\\n .' + PREFIX + 'qaFiltersInput {width: 100%; margin-right: 15px; margin-left:15px;}\\\n .' + PREFIX + 'qaFiltersInput:focus{outline: none;}\\\n .' + PREFIX + 'qaFiltersInput::placeholder{color:#474747;}\\\n .' + PREFIX + 'searchIcon {width:30px; cursor:pointer;}\\\n .' + PREFIX + 'sortContainer {flex: 2; background: white; border: 0.75px solid #D1D1D1; height:100%; max-width:160px; padding:10px; display:flex;align-items: center; justify-content: center;}\\\n .' + PREFIX + 'sortEl {}\\\n .' + PREFIX + 'sortEl:focus{outline: none;}\\\n .' + PREFIX + 'sortOptions {}\\\n .' + PREFIX + 'hidden{visibility:hidden}\\\n .' + PREFIX + 'visible{visibility:visible}\\\n .' + PREFIX + 'f-1{flex: 1;}\\\n .' + PREFIX + 'f-2{flex: 2;}\\\n .' + PREFIX + 'f-3{flex: 3;}\\\n .' + PREFIX + 'f-4{flex: 4;}\\\n .' + PREFIX + 'f-5{flex: 5;}\\\n .' + PREFIX + 'f-10{flex: 10;}\\\n .' + PREFIX + 'f{display: flex;}\\\n .' + PREFIX + 'fr{flex-direction: row;}\\\n .' + PREFIX + 'fc{flex-direction: column;}\\\n .' + PREFIX + 'fw{flex-wrap: wrap;}\\\n .' + PREFIX + 'faic{align-items: center;}\\\n .' + PREFIX + 'fais{align-items: flex-start;}\\\n .' + PREFIX + 'faie{align-items: flex-end;}\\\n .' + PREFIX + 'faib{align-items: baseline;}\\\n .' + PREFIX + 'fjcc{justify-content: center;}\\\n .' + PREFIX + 'fjcs{justify-content: flex-start;}\\\n .' + PREFIX + 'fjce{justify-content: flex-end;}\\\n .' + PREFIX + 'fjcsb{justify-content: space-between;}\\\n .' + PREFIX + 'fjcsa{justify-content: space-around;}\\\n .' + PREFIX + 'fjcse{justify-content: space-evenly;}\\\n .' + PREFIX + 'm-1{margin:5px}\\\n .' + PREFIX + 'm-2{margin:10px}\\\n .' + PREFIX + 'm-3{margin:20px}\\\n .' + PREFIX + 'm-15{margin:15px}\\\n .' + PREFIX + 'mr-1{margin-right:5px}\\\n .' + PREFIX + 'mr-2{margin-right:10px}\\\n .' + PREFIX + 'mr-3{margin-right:20px}\\\n .' + PREFIX + 'mt-1{margin-top:5px}\\\n .' + PREFIX + 'mt-2{margin-top:10px}\\\n .' + PREFIX + 'mt-3{margin-top:20px}\\\n .' + PREFIX + 'ml-1{margin-left:5px}\\\n .' + PREFIX + 'ml-2{margin-left:10px}\\\n .' + PREFIX + 'ml-3{margin-left:20px}\\\n .' + PREFIX + 'mb-1{margin-bottom:5px}\\\n .' + PREFIX + 'mb-2{margin-bottom:10px}\\\n .' + PREFIX + 'mb-3{margin-bottom:20px}\\\n .' + PREFIX + 'ma{margin:0 auto}\\\n .' + PREFIX + 'p-1{padding:5px}\\\n .' + PREFIX + 'p-2{padding:10px}\\\n .' + PREFIX + 'p-3{padding:20px}\\\n .' + PREFIX + 'p-4{padding:30px}\\\n .' + PREFIX + 'pr-1{padding-right:5px}\\\n .' + PREFIX + 'pr-2{padding-right:10px}\\\n .' + PREFIX + 'pr-3{padding-right:20px}\\\n .' + PREFIX + 'pl-1{padding-left:5px}\\\n .' + PREFIX + 'pl-2{padding-left:10px}\\\n .' + PREFIX + 'pl-3{padding-left:20px}\\\n .' + PREFIX + 'pt-1{padding-top:5px}\\\n .' + PREFIX + 'pt-2{padding-top:10px}\\\n .' + PREFIX + 'pt-3{padding-top:20px}\\\n .' + PREFIX + 'pb-1{padding-bottom:5px}\\\n .' + PREFIX + 'pb-2{padding-bottom:10px}\\\n .' + PREFIX + 'pb-3{padding-bottom:20px}\\\n .' + PREFIX + 't-05{font-size:12px}\\\n .' + PREFIX + 't-1{font-size:15px}\\\n .' + PREFIX + 't-2{font-size:20px}\\\n .' + PREFIX + 't-3{font-size:25px}\\\n .' + PREFIX + 't-4{font-size:35px}\\\n .' + PREFIX + 't-5{font-size:45px}\\\n .' + PREFIX + 'tc{text-align:center}\\\n .' + PREFIX + 'bold{font-weight:bold}\\\n .' + PREFIX + 'w-100{width:100%}\\\n .' + PREFIX + 'w-50{width:50%}\\\n .' + PREFIX + 'w-25{width:25%}\\\n .' + PREFIX + 'w-30{width:30%}\\\n .' + PREFIX + 'w-75{width:75%}\\\n .' + PREFIX + 'w-70{width:70%}\\\n .' + PREFIX + 'w-60{width:60%}\\\n .' + PREFIX + 'w-15{width:15%}\\\n .' + PREFIX + 'w-10{width:10%}\\\n .' + PREFIX + 'w-20px{width:20px}\\\n .' + PREFIX + 'h-36px{height:36px}\\\n .' + PREFIX + 'h-25{height:25%}\\\n .' + PREFIX + 'h-30{height:30%}\\\n .' + PREFIX + 'h-100{height:100%}\\\n .' + PREFIX + 'min-w-10{min-width:10%}\\\n .' + PREFIX + 'min-h-60px{min-height:60px}\\\n .' + PREFIX + 'w-fc{width: fit-content;}\\\n .' + PREFIX + 'x-1-5{transform:scale(1.5)}\\\n .' + PREFIX + 'x-2{transform:scale(2)}\\\n .' + PREFIX + 'x-3{transform:scale(3)}\\\n .' + PREFIX + 'br-3{border-radius:3px}\\\n .' + PREFIX + 'fleft{float:left}\\\n .' + PREFIX + 'fright{float:right}\\\n .' + PREFIX + 'overxs{overflow-x:scroll}\\\n .' + PREFIX + 'ocp{cursor:pointer}\\\n .' + PREFIX + 'cp{cursor:pointer}\\\n .' + PREFIX + 'cp:hover{background:rgba(0,0,0,.05)}\\\n .' + PREFIX + 'bgw{background:#fff}\\\n .' + PREFIX + 'o0{opacity:0;position: absolute;z-index: -1;}\\\n .' + PREFIX + 'faded{opacity:.5; border:0px}\\\n .' + PREFIX + 'dn{display:none !important}\\\n .' + PREFIX + 'imageBoxCloseButton{ top: -12px; right: -12px; z-index:2; width:24px; }\\\n .' + PREFIX + 'pr{ position: relative }\\\n .' + PREFIX + 'pa{ position: absolute }\\\n .' + PREFIX + 'carouselItem{ width: 100%; height:100%; position: relative; }\\\n .' + PREFIX + 'carouselImageContainer{ }\\\n .' + PREFIX + 'carouselTitle{ font-size: 2.2rem; line-height: 3rem; }\\\n .' + PREFIX + 'carouselButton{ background-color: rgb(242 243 245 / 1); color:#000 !important; height: 40px !important; width:40px !important; border-radius:50%; }\\\n .' + PREFIX + 'carouselNextButton{ right: 1rem; }\\\n .' + PREFIX + 'carouselPrevButton{ left: 1rem; }\\\n .' + PREFIX + 'carouselNextButton:after{ font-size:1.25rem !important;}\\\n .' + PREFIX + 'carouselPrevButton:after{ font-size:1.25rem !important;}\\\n .' + PREFIX + 'carouselProductImage{ }\\\n .' + PREFIX + 'carouselProductName{ font-size: 1rem; font-weight: 300; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(71 71 71 / var(--tw-text-opacity)); margin-top: .5rem; margin-bottom: .75rem; }\\\n .' + PREFIX + 'carouselProductPriceContainer{ }\\\n .' + PREFIX + 'carouselOriginalPrice{ }\\\n .' + PREFIX + 'carouselBadgeContainer{ position: absolute; top: .625rem; left: .625rem; z-index: 2; }\\\n .' + PREFIX + 'carouselBadge{ font-size: .75rem; font-weight: 400; background:#fff; padding: .125rem .625rem; text-align: center; margin-bottom: .5rem; border-radius: .25rem; }\\\n .' + PREFIX + 'discountEffect{ --tw-text-opacity: 1; color:rgb(211 41 41/var(--tw-text-opacity)) }\\\n .' + PREFIX + 'tdl-lt{ text-decoration-line: line-through; }\\\n .' + PREFIX + 'tdl-u{ text-decoration-line: underline; }\\\n .' + PREFIX + 'carouselHeart{ font-size:24px; margin: -7px -1px -5px -5px }\\\n .' + PREFIX + 'carouselHeart:before{ content: \"\"; color:#375a5b; }\\\n .' + PREFIX + 'newQuestionComponent{ font-weight: 500; padding: 10px 20px; word-break: break-word; line-height: 18px; color: #474747; font-size: 14px; }\\\n .' + PREFIX + 'fixFull{ position:fixed; z-index: 9999999; top:0; left:0; width:100%; height:100%; }\\\n .' + PREFIX + 'modal{ overflow:auto; transition: .5s all; width:40%; min-width:400px; height:100%; background:#fff; position:absolute; right:0; bottom:0; z-index:2;}\\\n .' + PREFIX + 'mobileModalNotch{ width:20%; height:5px; background:#D1D1D1; border-radius: 10px; margin:0 auto 10px auto}\\\n .' + PREFIX + 'inputLabel{ color: '+textColor+'; font-weight:100;}\\\n .' + PREFIX + 'errorMessage{background:#fff2bf; color:#172b4e; margin:10px auto; padding:5px 10px; border-radius:5px}\\\n \\\n .' + PREFIX + 'toggle-container{ display: flex; align-items: center; gap: 10px;}\\\n .' + PREFIX + 'toggle{ position: relative; width: 50px; height: 25px; background: #eee; border-radius: 50px; cursor: pointer; transition: background-color 0.3s;}\\\n .' + PREFIX + 'toggle::before{ content: \\'\\'; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #ccc; border-radius: 50%; transition: all 0.3s; }\\\n .' + PREFIX + 'toggle-container input[type=\"checkbox\"]{ display: none; }\\\n .' + PREFIX + 'toggle-container input[type=\"checkbox\"]:checked + .' + PREFIX + 'toggle{ background: '+primaryColor+'; }\\\n .' + PREFIX + 'toggle-container input[type=\"checkbox\"]:checked + .' + PREFIX + 'toggle::before{ transform: translateX(25px); background: #ffffff; }\\\n .' + PREFIX + 'label{ font-size: 16px; color: #555; }\\\n \\\n @media only screen and (max-width: 600px) {\\\n .' + PREFIX + 'modal{ width:100%; }\\\n .' + PREFIX + 'carouselTitle { font-size:1.5rem; line-height: 2.25rem;} \\\n .' + PREFIX + 'bigMedia { height: auto; width: 70% } \\\n .' + PREFIX + 'main{width:100%} \\\n .' + PREFIX + 'filtersContainer::-webkit-scrollbar{display:none}\\\n .' + PREFIX + 'sortContainer{display:none}\\\n .' + PREFIX + 'answer{background:#F6F4F0}\\\n .' + PREFIX + 'qaFiltersInputContainer{margin-right:0px;} }'\n + STYLES.customcss.css + ' ';\n document.head.appendChild(style);\n }\n }\n\n addClass = (el, cls) => {\n if (Array.isArray(cls)) {\n cls.forEach(cl => {\n el && el.classList.add(PREFIX + cl)\n });\n } else {\n el && el.classList.add(PREFIX + cls)\n }\n }\n\n removeClass = (el, cls) => {\n if (Array.isArray(cls)) {\n cls.forEach(cl => {\n el && el.classList.remove(PREFIX + cl)\n });\n } else {\n el && el.classList.remove(PREFIX + cls)\n }\n }\n\n createLoadMoreButton = () => {\n const moreButton = document.createElement('div');\n moreButton.id = PREFIX + 'moreButton';\n moreButton.innerText = 'Daha Fazla Yorum Gör';\n moreButton.style.color = '#474747';\n moreButton.style.border = '1px solid #474747';\n moreButton.style.padding = '10px 15px';\n moreButton.style.margin = '0 auto';\n moreButton.style.width = 'fit-content';\n moreButton.style.cursor = 'pointer';\n\n moreButton.addEventListener('click', () => {\n loadNextComments();\n })\n\n VIEWER.appendChild(moreButton);\n }\n\n createLoadMoreButtonForQA = () => {\n const moreButton = document.createElement('div');\n moreButton.id = PREFIX + 'moreButtonForQA';\n moreButton.innerText = 'Daha Fazla Soru ve Cevap Gör';\n moreButton.style.color = '#474747';\n moreButton.style.border = '1px solid #474747';\n moreButton.style.padding = '10px 15px';\n moreButton.style.margin = '0 auto';\n moreButton.style.width = 'fit-content';\n moreButton.style.cursor = 'pointer';\n\n moreButton.addEventListener('click', () => {\n loadNextQuestions();\n })\n\n QA_VIEWER.appendChild(moreButton);\n }\n\n removeLastHr = () => {\n const lastHr = COMMENT_CONTAINER.querySelector('.' + PREFIX + 'hr:last-child');\n if (lastHr) {\n lastHr.remove()\n }\n }\n\n removeLastHrForQA = () => {\n const lastHr = QA_CONTAINER.querySelector('.' + PREFIX + 'hr:last-child');\n if (lastHr) {\n lastHr.remove()\n }\n }\n\n loadNextComments = () => {\n try {\n showLoader();\n CRWL_COMMENTS_LOADING = true;\n const localFilter = {\n ...CURRENT_FILTER,\n start: CRWL_START,\n quantity: CRWL_QUANTITY\n };\n window.crwl.getComments(localFilter, (newComments) => {\n try {\n\n if (newComments.comments?.length > 0 && newComments != \"empty\") {\n\n newComments.comments.forEach(comment => {\n createCommentRow(comment);\n hideLoader();\n });\n\n CRWL_START += CRWL_QUANTITY;\n if (newComments.comments.length > 0) {\n CRWL_COMMENTS_LOADING = false;\n }\n\n const moreButton = document.querySelector('#' + PREFIX + 'moreButton');\n moreButton.style.display = 'block';\n } else {\n const moreButton = document.querySelector('#' + PREFIX + 'moreButton');\n moreButton.style.display = 'none';\n removeLastHr();\n }\n } catch (cwErr) { console.log('CRWL - Not Loaded Next Comments Error', cwErr); }\n finally {\n hideLoader()\n }\n });\n } catch (error) {\n console.log('CRWL - Get Comments Error', error);\n }\n }\n\n loadNextQuestions = () => {\n try {\n showLoader();\n CRWL_QUESTIONS_LOADING = true;\n const localFilter = {\n ...CURRENT_QA_FILTER,\n start: CRWL_QA_START,\n quantity: CRWL_QA_QUANTITY\n };\n window.crwl.getComments(localFilter, (newQuestions) => {\n try {\n\n if (newQuestions.questions.length > 0 && newQuestions != \"empty\") {\n\n newQuestions.questions.forEach(question => {\n createQuestionRow(question);\n hideLoader();\n });\n\n CRWL_QA_START += CRWL_QA_QUANTITY;\n if (newQuestions.questions.length > 0) {\n CRWL_QUESTIONS_LOADING = false;\n }\n\n const moreButton = document.querySelector('#' + PREFIX + 'moreButtonForQA');\n moreButton.style.display = 'block';\n } else {\n const moreButton = document.querySelector('#' + PREFIX + 'moreButtonForQA');\n moreButton.style.display = 'none';\n removeLastHrForQA();\n }\n } catch (cwErr) { console.log('CRWL - Not Loaded Next Questions Error', cwErr); }\n finally {\n hideLoader()\n }\n });\n } catch (error) {\n console.log('CRWL - Get Questions Error', error);\n }\n }\n\n applyFilter = () => {\n try {\n CRWL_COMMENTS_LOADING = true;\n const localFilter = {\n ...CURRENT_FILTER,\n start: 0,\n quantity: CRWL_QUANTITY\n };\n CRWL_START = 0;\n window.crwl.getComments(localFilter, (newComments) => {\n try {\n clearComments();\n newComments.comments.forEach(comment => {\n createCommentRow(comment);\n });\n CRWL_START += CRWL_QUANTITY;\n if (newComments.comments.length > 0) {\n CRWL_COMMENTS_LOADING = false;\n const moreButton = document.querySelector('#' + PREFIX + 'moreButton');\n moreButton.style.display = 'block';\n }\n } catch (cwErr) { console.log('CRWL - Not Loaded Next Comments Error', cwErr); }\n });\n } catch (error) {\n console.log('CRWL - Get Comments Error', error);\n }\n }\n\n applyFilterForQA = () => {\n try {\n CRWL_QUESTIONS_LOADING = true;\n const localFilter = {\n ...CURRENT_QA_FILTER,\n start: 0,\n quantity: CRWL_QA_QUANTITY\n };\n CRWL_QA_START = 0;\n window.crwl.getComments(localFilter, (newQuestions) => {\n try {\n clearQuestions();\n newQuestions.questions.forEach(question => {\n createQuestionRow(question);\n });\n CRWL_QA_START += CRWL_QA_QUANTITY;\n if (newQuestions.questions.length > 0) {\n CRWL_QUESTIONS_LOADING = false;\n const moreButton = document.querySelector('#' + PREFIX + 'moreButtonForQA');\n moreButton.style.display = 'block';\n }\n } catch (cwErr) { console.log('CRWL - Not Loaded Next Questions Error', cwErr); }\n });\n } catch (error) {\n console.log('CRWL - Get Questions Error', error);\n }\n }\n\n changeFilter = (key, value) => {\n CURRENT_FILTER = {\n ...CURRENT_FILTER,\n [key]: value\n }\n applyFilter();\n }\n\n changeFilterForQA = (key, value) => {\n CURRENT_QA_FILTER = {\n ...CURRENT_QA_FILTER,\n [key]: value\n }\n applyFilterForQA();\n }\n\n clearComments = () => {\n COMMENT_CONTAINER.innerText = \"\";\n }\n\n clearQuestions = () => {\n QA_CONTAINER.innerText = \"\";\n }\n\n removeItemFromArray = (arr, item) => {\n const i = arr.indexOf(item);\n if (i > -1) {\n arr.splice(i, 1);\n }\n }\n\n isFloat = (n) => {\n return Number(n) === n && n % 1 !== 0;\n }\n\n calculatePercent = (a, b) => {\n const percent = Math.ceil(parseInt((parseInt(a) * 100) / parseInt(b)))\n\n return percent\n }\n\n crwl_insertBefore = (selectorPath, newEl, category) => {\n if (!category) {\n var targetElement = document.querySelector(selectorPath);\n if (!targetElement) {\n return;\n }\n }\n\n if (category) {\n category.parentNode.insertBefore(newEl, category);\n } else {\n targetElement.parentNode.insertBefore(newEl, targetElement);\n }\n }\n\n crwl_insertAfter = (selectorPath, newEl, category) => {\n if (!category) {\n var targetElement = document.querySelector(selectorPath);\n if (!targetElement) {\n return;\n }\n }\n\n if (category) {\n if (category.nextElementSibling) {\n category.parentNode.insertBefore(newEl, category.nextElementSibling);\n } else {\n category.parentNode.appendChild(newEl);\n }\n } else {\n if (targetElement.nextElementSibling) {\n targetElement.parentNode.insertBefore(newEl, targetElement.nextElementSibling);\n } else {\n targetElement.parentNode.appendChild(newEl);\n }\n }\n }\n\n crwl_insertInside = (selectorPath, newEl, category) => {\n if (!category) {\n var targetElement = document.querySelector(selectorPath);\n if (!targetElement) {\n return;\n }\n }\n\n if (category) {\n category.appendChild(newEl, category);\n } else {\n targetElement.appendChild(newEl, targetElement);\n }\n }\n\n switchDirector = (type, path, element, category) => {\n switch (type) {\n case 'insertBefore':\n crwl_insertBefore(path, element, category)\n break;\n case 'insertAfter':\n crwl_insertAfter(path, element, category)\n break;\n case 'insertInside':\n crwl_insertInside(path, element, category)\n break;\n default:\n crwl_insertInside(path, element, category)\n break;\n }\n }\n\n scrollToMainViewer = () => {\n const ca = document.querySelector(isMobile ? '#' + PREFIX + 'clonedMenuButton' : 'pz-tab-menu');\n if (ca) {\n const y = ca.getBoundingClientRect().top + window.scrollY;\n window.scroll({\n top: y - 50,\n behavior: 'smooth'\n });\n }\n }\n\n targetElementChecker = (path, callback) => {\n const targetEl = document.querySelector(path)\n if (!targetEl) {\n let intCounter = 0;\n let elInt = setInterval(() => {\n if (document.querySelector(path)) {\n clearInterval(elInt);\n callback(true)\n } else {\n intCounter++;\n }\n\n if (intCounter >= 20) {\n clearInterval(elInt);\n console.log(\"Target element not found\", path);\n }\n }, 100);\n } else {\n callback(true)\n }\n }\n\n showLoader = () => {\n const loader = document.querySelector('#' + PREFIX + 'loader')\n\n if (loader) {\n loader.classList.remove(PREFIX + 'hidden')\n }\n }\n\n hideLoader = () => {\n const loader = document.querySelector('#' + PREFIX + 'loader')\n\n if (loader) {\n loader.classList.add(PREFIX + 'hidden')\n }\n }\n\n _toggleMobileReviewsArea = () => {\n const area = document.querySelector('#' + PREFIX + 'mobileCommentsArea');\n if (area) {\n const _btnIcon = document.querySelector('#' + PREFIX + 'clonedMenuButton>i');\n if (area.style.height == '0px') {\n area.style.height = 'auto';\n if (_btnIcon) {\n _btnIcon.style.transition = 'transform .3s';\n _btnIcon.style.transform = 'rotate(90deg)';\n }\n } else {\n area.style.height = '0px';\n if (_btnIcon) {\n _btnIcon.style.transition = 'transform .3s';\n _btnIcon.style.transform = 'rotate(0deg)';\n }\n }\n }\n }\n\n _toggleMobileQuestionsArea = () => {\n const area = document.querySelector('#' + PREFIX + 'mobileQuestionsArea');\n if (area) {\n const _btnIcon = document.querySelector('#' + PREFIX + 'clonedMenuButtonForQA>i');\n if (area.style.height == '0px') {\n area.style.height = 'auto';\n if (_btnIcon) {\n _btnIcon.style.transition = 'transform .3s';\n _btnIcon.style.transform = 'rotate(90deg)';\n }\n } else {\n area.style.height = '0px';\n if (_btnIcon) {\n _btnIcon.style.transition = 'transform .3s';\n _btnIcon.style.transform = 'rotate(0deg)';\n }\n }\n }\n }\n\n _chakraCheckComponents = () => {\n if (!FILTER.categoryPage) {\n\n const _text = _getLang() == 'TR' ? 'DEĞERLENDİRMELER (' : 'REVIEWS (';\n if (!isMobile) {\n const menuContainer = document.querySelector(\"pz-tab-menu\");\n const contentContainer = document.querySelector(\"pz-tab-content\");\n const originalMenuElement = document.querySelector(\"pz-tab-menu>:last-child\");\n const originalContentElement = document.querySelector(\"pz-tab-content>:last-child\");\n\n const clonedMenuElement = originalMenuElement.cloneNode(true);\n clonedMenuElement.id = PREFIX + 'clonedMenuButton';\n clonedMenuElement.querySelector('button').innerText = _text + (COMMENTS.commentCount ? COMMENTS.commentCount : 0) + ')';\n clonedMenuElement.setAttribute('content', 'reviews');\n\n const clonedContentElement = originalContentElement.cloneNode(true);\n clonedContentElement.innerHTML = '';\n clonedContentElement.id = PREFIX + 'clonedContent';\n clonedContentElement.setAttribute('tab', 'reviews');\n\n clonedMenuElement.addEventListener('click', () => {\n clonedMenuElement.classList.add('-active');\n clonedContentElement.classList.add('-active');\n clonedContentElement.removeAttribute(\"hidden\");\n const _menuItems = document.querySelectorAll(\"pz-tab-menu-item\");\n const _contentItems = document.querySelectorAll(\"pz-tab-content-item\");\n for (let i = 0; i < _menuItems.length; i++) {\n if (_menuItems[i].getAttribute('content') != 'reviews') {\n _menuItems[i].classList.remove('-active');\n _contentItems[i].classList.remove('-active');\n _contentItems[i].setAttribute('hidden', 'hidden');\n }\n }\n })\n\n _removeActiveClasses = () => {\n const menuItems = document.querySelectorAll(\"pz-tab-menu-item\");\n menuItems.forEach(menuItem => {\n menuItem.addEventListener('click', (e) => {\n if (e.target.getAttribute('content') != 'reviews') {\n const _menuItem = menuContainer.querySelector('pz-tab-menu-item[content=\"reviews\"]');\n const _contentItem = contentContainer.querySelector('pz-tab-content-item[tab=\"reviews\"]');\n if (_menuItem) {\n _menuItem.classList.remove('-active');\n }\n\n if (_contentItem) {\n _contentItem.classList.remove('-active');\n _contentItem.setAttribute('hidden', 'hidden');\n }\n }\n })\n });\n }\n _removeActiveClasses()\n\n\n\n menuContainer.style.columnGap = \"2rem\";\n menuContainer.appendChild(clonedMenuElement);\n contentContainer.appendChild(clonedContentElement);\n _chakraCheckComponentsForQA();\n } else {\n const menuContainer = document.querySelector('.product-info__details');\n const originalMenuElement = document.querySelector(\".product-info__details>button:last-child\");\n\n const clonedMenuElement = originalMenuElement.cloneNode(true);\n clonedMenuElement.id = PREFIX + 'clonedMenuButton';\n clonedMenuElement.querySelector('span').innerText = _text + (COMMENTS.commentCount ? COMMENTS.commentCount : 0) + ') ';\n clonedMenuElement.setAttribute('content', 'reviews');\n\n clonedMenuElement.addEventListener('click', () => {\n _toggleMobileReviewsArea();\n })\n\n const area = document.createElement('div');\n area.id = PREFIX + 'mobileCommentsArea';\n area.style.height = '0px';\n area.style.transition = 'height .3s';\n area.style.overflow = 'hidden';\n\n menuContainer.appendChild(clonedMenuElement);\n menuContainer.appendChild(area);\n _chakraCheckComponentsForQA();\n\n }\n\n } else {\n _chakraCheckComponentsForQA();\n }\n }\n\n _chakraCheckComponentsForQA = () => {\n if (!FILTER.categoryPage) {\n\n const _text = _getLang() == 'TR' ? 'SORU & CEVAP (' : 'Q&A (';\n if (!isMobile) {\n const menuContainer = document.querySelector(\"pz-tab-menu\");\n const contentContainer = document.querySelector(\"pz-tab-content\");\n const originalMenuElement = document.querySelector(\"pz-tab-menu>:last-child\");\n const originalContentElement = document.querySelector(\"pz-tab-content>:last-child\");\n\n const clonedMenuElement = originalMenuElement.cloneNode(true);\n clonedMenuElement.id = PREFIX + 'clonedMenuButtonForQA';\n clonedMenuElement.querySelector('button').innerText = _text + (COMMENTS.questionsCount ? COMMENTS.questionsCount : 0) + ')';\n clonedMenuElement.setAttribute('content', 'questions');\n\n const clonedContentElement = originalContentElement.cloneNode(true);\n clonedContentElement.innerHTML = '';\n clonedContentElement.id = PREFIX + 'clonedContentForQA';\n clonedContentElement.setAttribute('tab', 'questions');\n\n clonedMenuElement.addEventListener('click', () => {\n clonedMenuElement.classList.add('-active');\n clonedContentElement.classList.add('-active');\n clonedContentElement.removeAttribute(\"hidden\");\n const _menuItems = document.querySelectorAll(\"pz-tab-menu-item\");\n const _contentItems = document.querySelectorAll(\"pz-tab-content-item\");\n for (let i = 0; i < _menuItems.length; i++) {\n if (_menuItems[i].getAttribute('content') != 'questions') {\n _menuItems[i].classList.remove('-active');\n _contentItems[i].classList.remove('-active');\n _contentItems[i].setAttribute('hidden', 'hidden');\n }\n }\n })\n\n _removeActiveClasses = () => {\n const menuItems = document.querySelectorAll(\"pz-tab-menu-item\");\n menuItems.forEach(menuItem => {\n menuItem.addEventListener('click', (e) => {\n if (e.target.getAttribute('content') != 'questions') {\n const _menuItem = menuContainer.querySelector('pz-tab-menu-item[content=\"questions\"]');\n const _contentItem = contentContainer.querySelector('pz-tab-content-item[tab=\"questions\"]');\n if (_menuItem) {\n _menuItem.classList.remove('-active');\n }\n\n if (_contentItem) {\n _contentItem.classList.remove('-active');\n _contentItem.setAttribute('hidden', 'hidden');\n }\n }\n })\n });\n }\n _removeActiveClasses()\n\n\n\n menuContainer.style.columnGap = \"2rem\";\n menuContainer.appendChild(clonedMenuElement);\n contentContainer.appendChild(clonedContentElement);\n commentViewerInit();\n } else {\n const menuContainer = document.querySelector('.product-info__details');\n const originalMenuElement = document.querySelector(\".product-info__details>button:nth-last-of-type(2)\");\n\n const clonedMenuElement = originalMenuElement.cloneNode(true);\n clonedMenuElement.id = PREFIX + 'clonedMenuButtonForQA';\n clonedMenuElement.querySelector('span').innerText = _text + (COMMENTS.questionsCount ? COMMENTS.questionsCount : 0) + ') ';\n clonedMenuElement.setAttribute('content', 'questions');\n\n clonedMenuElement.addEventListener('click', () => {\n _toggleMobileQuestionsArea();\n })\n\n const area = document.createElement('div');\n area.id = PREFIX + 'mobileQuestionsArea';\n area.style.height = '0px';\n area.style.transition = 'height .3s';\n area.style.overflow = 'hidden';\n\n menuContainer.appendChild(clonedMenuElement);\n menuContainer.appendChild(area);\n commentViewerInit();\n }\n\n } else {\n commentViewerInit();\n }\n }\n\n _getLang = () => {\n const defaultLang = 'TR';\n const path = isMobile ? document.querySelector('.mobile-nav__footer__language__form .-selected span') : document.querySelector('.header-top__right__language span');\n if (path) {\n return path.innerText\n } else {\n return defaultLang\n }\n }\n\n _changeTimeLang = (dateString) => {\n if (_getLang() == 'EN') {\n const months = {\n 'Ocak': 'January',\n 'Şubat': 'February',\n 'Mart': 'March',\n 'Nisan': 'April',\n 'Mayıs': 'May',\n 'Haziran': 'June',\n 'Temmuz': 'July',\n 'Ağustos': 'August',\n 'Eylül': 'September',\n 'Ekim': 'October',\n 'Kasım': 'November',\n 'Aralık': 'December'\n };\n\n const dateParts = dateString.split(' ');\n const translatedMonth = months[dateParts[1]];\n const englishDate = `${dateParts[0]} ${translatedMonth} ${dateParts[2]}`;\n return englishDate;\n } else {\n return dateString\n }\n }\n\n reloader = () => {\n VIEWER.remove();\n const els = document.querySelectorAll('[id*=\"' + PREFIX + '\"], [class*=\"' + PREFIX + '\"]');\n els.forEach(el => {\n el.remove();\n });\n }\n\n _upperFirstLetter = (sentence) => {\n return sentence.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');\n }\n\n getProductDetailOrderPage = () => {\n const productElPath = \".a-od-order-subitem__info\";\n const productEls = document.querySelectorAll(productElPath);\n let products = [];\n \n if (productEls.length > 0) {\n productEls.forEach(element => {\n const tmpProductEl = element.querySelector('a');\n const productUrl = tmpProductEl.href;\n const productName = tmpProductEl.innerText;\n const productCode = productUrl.split(\"-\").reverse()[0].replace('/', '');\n const productImg = element.parentElement.querySelector('img');\n let img = null;\n if(productImg) { \n if (productImg.src) {\n img = productImg.src;\n }else if(productImg.dataset.src){\n img = productImg.dataset.src\n }\n }\n products.push({productCode, url:productUrl, productEl: element.parentElement, name: productName, img });\n });\n }\n\n return products;\n }\n\n createNewCommentButton = (productDetail) => {\n const container = createElement('div');\n if (!isMobile) {\n addClass(container,['f','fjce']);\n container.style.flex = '1';\n }else{\n container.style.width = '165px';\n addClass(container,['mt-1','mb-1']);\n }\n\n const newCommentButton = createElement('div');\n addClass(newCommentButton,['tc','p-2','ocp']);\n newCommentButton.style.border = '.5px solid '+primaryColor;\n newCommentButton.style.alignSelf = 'flex-start';\n newCommentButton.style.color = primaryColor;\n newCommentButton.innerText = 'Ürünü Değerlendir';\n newCommentButton.addEventListener('click',()=>{\n createNewCommentForm(productDetail.productCode, window.crwl.CCID, productDetail, container);\n });\n container.appendChild(newCommentButton)\n return container\n }\n\n createOrderPageComponents = () => {\n const orderPageProductDetails = getProductDetailOrderPage();\n if (orderPageProductDetails.length <= 0) {\n return false\n }\n\n orderPageProductDetails.forEach(order => {\n if (userNewCommentIsAvailable(order.productCode)) {\n if (isMobile) {\n const tmpEl = order.productEl.querySelector('.a-od-order-subitem__info-top');\n if (tmpEl) {\n tmpEl.appendChild(createNewCommentButton(order));\n }\n }else{\n order.productEl.appendChild(createNewCommentButton(order));\n }\n }\n });\n }\n\n userNewCommentIsAvailable = (productCode) => {\n const storedComments = getStoredComments();\n return !storedComments.includes(productCode);\n }\n\n saveUserCommentLocalStorage = (productCode) => {\n const storedComments = getStoredComments();\n if (!storedComments.includes(productCode)) {\n storedComments.push(productCode);\n localStorage.setItem(COMMENT_STORAGE_KEY, JSON.stringify(storedComments));\n }\n }\n \n getStoredComments = () => {\n const storedData = localStorage.getItem(COMMENT_STORAGE_KEY);\n return storedData ? JSON.parse(storedData) : [];\n }\n\n function initCRninjaProductWidget() {\n const products = COMMENTS.productWidgetData;\n let widgetInsertType = 'insertBefore';\n let widgetInpertPath = '.list__content';\n\n if (location.pathname == '/') {\n widgetInpertPath = '.showroom';\n widgetInsertType = 'insertAfter';\n }\n\n const configureSwiper = async () => {\n if (COMMENTS.productWidgetsActive && COMMENTS.productWidgetData.length > 0) {\n targetElementChecker(widgetInpertPath, (result) => {\n if (result) {\n switchDirector(widgetInsertType, widgetInpertPath, createSwiperElements(products), false)\n } else {\n console.log(\"Target element not found\", widgetInpertPath);\n }\n })\n initSwiper();\n } else {\n console.log(\"CRNINJA productWidgetsActive\", COMMENTS.productWidgetsActive);\n }\n }\n\n const initSwiper = async () => {\n const linkEl = createElement('link');\n linkEl.rel = 'stylesheet';\n linkEl.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';\n\n const scriptEl = createElement('script');\n scriptEl.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';\n\n /*document.head.appendChild(linkEl); kontrol edilerek açılacak */\n document.head.appendChild(scriptEl);\n scriptEl.onload = () => {\n new Swiper(\".\" + PREFIX + \"mySwiper\", {\n pagination: false,\n loop: true,\n spaceBetween: 20,\n breakpoints: {\n 340: {\n slidesPerView: 2,\n spaceBetween: 20\n },\n 800: {\n slidesPerView: 3,\n spaceBetween: 23\n },\n 1024: {\n slidesPerView: 4,\n spaceBetween: 25\n },\n },\n /*pagination: {\n el: \".swiper-pagination\",\n dynamicBullets: true,\n },*/\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\",\n },\n });\n }\n\n }\n\n const createSwiperElements = (elements) => {\n const container = createElement('div');\n container.setAttribute('class', 'swiper ' + PREFIX + 'mySwiper');\n \n\n if (location.pathname == '/') {\n if (isMobile) {\n container.style.margin = '3rem 1rem';\n }else{\n container.style.margin = '3rem 2.5rem';\n }\n }else{\n container.style.margin = '3rem 0';\n }\n \n const title = createElement('h3');\n switch (COMMENTS.productWidgetsAlgorithm) {\n case 'searchedTopRated':\n title.innerText = 'Aranan Kelimeye Göre Çok Değerlendirilenler';\n break;\n case 'categoryTopRated':\n title.innerText = 'Kategorinin Çok Değerlendirilenleri';\n break;\n case 'generalTopRated':\n title.innerText = 'Çok Değerlendirilen Ürünler';\n break;\n default:\n title.innerText = 'Çok Değerlendirilen Ürünler';\n break;\n }\n\n addClass(title, ['carouselTitle']);\n if (!isMobile) {\n addClass(title, ['carouselTitle', 'mt-3', 'mb-3']);\n }\n\n const wrapper = createElement('div');\n wrapper.setAttribute('class', 'swiper-wrapper');\n\n const nextButton = createElement('div');\n nextButton.setAttribute('class', 'swiper-button-next');\n addClass(nextButton, ['carouselButton', 'carouselNextButton']);\n\n const prevButton = createElement('div');\n prevButton.setAttribute('class', 'swiper-button-prev');\n addClass(prevButton, ['carouselButton', 'carouselPrevButton']);\n\n const pagination = createElement('div');\n pagination.setAttribute('class', 'swiper-pagination');\n\n container.appendChild(title);\n container.appendChild(wrapper);\n container.appendChild(nextButton);\n container.appendChild(prevButton);\n container.appendChild(pagination);\n\n elements.forEach(item => {\n wrapper.appendChild(createCarouselItem(item))\n });\n\n return container\n }\n\n const createCarouselItem = (itemDetail) => {\n const container = createElement('a');\n container.href = itemDetail.feedProductUrl;\n container.setAttribute('class', 'swiper-slide');\n addClass(container, ['mt-3', 'mb-3']);\n\n const content = createElement('div');\n addClass(content, 'carouselItem');\n\n const badgeContainer = createElement('div');\n addClass(badgeContainer, ['carouselBadgeContainer', 'f', 'fc', 'fais']);\n\n const favoriteCountBadge = createElement('div');\n favoriteCountBadge.innerHTML = \"\" + itemDetail.tyFavoriteCount;\n addClass(favoriteCountBadge, ['carouselBadge', 'f', 'fr', 'faic', 'fjcc']);\n\n const questionCountBadge = createElement('div');\n questionCountBadge.innerText = itemDetail.questionCount + ' Soru';;\n addClass(questionCountBadge, 'carouselBadge');\n\n const rateAvgBadge = createElement('div');\n rateAvgBadge.innerHTML = ' ' + itemDetail.rateAVG;\n addClass(rateAvgBadge, ['carouselBadge', 'f', 'fr', 'faic', 'fjcc']);\n\n\n const imageContainer = createElement('div');\n addClass(imageContainer, 'carouselImageContainer');\n\n const image = createElement('img');\n addClass(image, 'carouselProductImage');\n image.src = itemDetail.feedProductImage;\n\n const productStars = createCategoryPageMiniReview({\n \"commentCount\": itemDetail.reviewCount,\n \"mediaCommentCount\": 1,\n \"rateAVG\": itemDetail.rateAVG\n }, itemDetail.feedProductUrl);\n\n addClass(productStars, ['fjcs', 'mt-2']);\n\n const productName = createElement('div');\n addClass(productName, ['carouselProductName', 'mt-2', 'mb-2']);\n productName.innerText = itemDetail.feedProductName;\n\n const productPriceContainer = createElement('div');\n addClass(productPriceContainer, ['carouselProductPriceContainer', 'f', 'fr', 'faic']);\n\n const discountedPrice = createElement('div');\n addClass(discountedPrice, 'carouselDiscountedPrice');\n discountedPrice.innerText = itemDetail.feedProductDiscountedPrice + ' TL';\n\n const originalPrice = createElement('div');\n addClass(originalPrice, 'carouselOriginalPrice');\n originalPrice.innerText = itemDetail.feedProductPrice + ' TL';\n\n if (itemDetail.feedProductDiscountedPrice == itemDetail.feedProductPrice) {\n discountedPrice.style.display = 'none';\n } else {\n addClass(originalPrice, 'tdl-lt');\n addClass(discountedPrice, ['mr-1', 'discountEffect']);\n }\n\n badgeContainer.appendChild(rateAvgBadge);\n badgeContainer.appendChild(favoriteCountBadge);\n /*badgeContainer.appendChild(questionCountBadge);*/\n content.appendChild(badgeContainer);\n imageContainer.appendChild(image);\n content.appendChild(imageContainer);\n content.appendChild(productStars);\n content.appendChild(productName);\n productPriceContainer.appendChild(discountedPrice);\n productPriceContainer.appendChild(originalPrice);\n content.appendChild(productPriceContainer);\n container.appendChild(content);\n\n return container;\n }\n\n configureSwiper();\n }\n\n if (COMMENTS != CRN_DATATYPES.error) {\n reloader();\n if (STYLES) {\n createStyles();\n }\n \n if (orderPageChecker()) {\n createOrderPageComponents();\n return true\n }\n\n if (location.pathname != '/') {\n _chakraCheckComponents();\n }\n /*initCRninjaProductWidget();*/\n }\n } catch (error) { console.error(error) }\n}","name":"Comment Viewer","autoRun":0,"default":1,"active":1,"others":"\"{\\\"values\\\":{\\\"code\\\":\\\"if%20%28new%20URL%28location.href%29.searchParams.get%28%22crninja%22%29%20%3D%3D%20%27v4%27%29%20%7B%0A%20%20%20%20crninjaV4%28%29%3B%0A%7D%20else%20%7B%0A%20%20%20%20crninjaV3%28%29%3B%0A%7D%0A%0Afunction%20crninjaV4%28%29%20%7B%0A%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20const%20COMMENTS%20%3D%20comments%3B%0A%0A%20%20%20%20%20%20%20%20const%20FILTER%20%3D%20filter%3B%0A%0A%20%20%20%20%20%20%20%20let%20STYLES%20%3D%20comments%20%21%3D%20CRN_DATATYPES.empty%20%3F%20JSON.parse%28unescape%28comments.styles%29%29%20%3A%20null%3B%0A%0A%20%20%20%20%20%20%20%20let%20CURRENT_FILTER%20%3D%20%7B%20...FILTER%20%7D%3B%0A%20%20%20%20%20%20%20%20CURRENT_FILTER%5B%27operationType%27%5D%20%3D%20%27comment%27%3B%0A%0A%20%20%20%20%20%20%20%20let%20CURRENT_QA_FILTER%20%3D%20%7B%20...FILTER%20%7D%3B%0A%20%20%20%20%20%20%20%20CURRENT_QA_FILTER%5B%27operationType%27%5D%20%3D%20%27question%27%3B%0A%0A%20%20%20%20%20%20%20%20const%20PREFIX%20%3D%20%27CRWLCV-%27%3B%0A%20%20%20%20%20%20%20%20let%20CRWL_START%20%3D%205%2C%20CRWL_QUANTITY%20%3D%205%2C%20CRWL_QA_START%20%3D%205%2C%20CRWL_QA_QUANTITY%20%3D%205%2C%20CRWL_COMMENTS_LOADING%20%3D%20false%2C%20CRWL_QUESTIONS_LOADING%20%3D%20false%3B%0A%0A%20%20%20%20%20%20%20%20const%20COMMENT_STORAGE_KEY%20%3D%20PREFIX+%27commentStorage%27%3B%0A%0A%20%20%20%20%20%20%20%20createElement%20%3D%20%28tagName%29%20%3D%3E%20%7B%20return%20document.createElement%28tagName%29%20%7D%0A%0A%20%20%20%20%20%20%20%20let%20VIEWER%20%3D%20document.createElement%28%27div%27%29%3B%0A%20%20%20%20%20%20%20%20let%20COMMENT_CONTAINER%20%3D%20document.createElement%28%27div%27%29%3B%0A%0A%20%20%20%20%20%20%20%20let%20QA_VIEWER%20%3D%20document.createElement%28%27div%27%29%3B%0A%20%20%20%20%20%20%20%20let%20QA_CONTAINER%20%3D%20document.createElement%28%27div%27%29%3B%0A%0A%20%20%20%20%20%20%20%20let%20uploadedImages%20%3D%20%5B%5D%2C%20newCommentRate%20%3D%20false%3B%0A%0A%20%20%20%20%20%20%20%20const%20_w%20%3D%20window.outerWidth%3B%0A%0A%20%20%20%20%20%20%20%20const%20_url%20%3D%20location.protocol%20+%20%27//crninja.com/%27%3B%0A%0A%20%20%20%20%20%20%20%20const%20isMobile%20%3D%20_w%20%3C%20768%20%3F%20true%20%3A%20false%3B%0A%0A%20%20%20%20%20%20%20%20const%20primaryColor%20%3D%20%27%23375A5A%27%3B%0A%20%20%20%20%20%20%20%20const%20textColor%20%3D%20%27%23474747%27%3B%0A%0A%20%20%20%20%20%20%20%20commentViewerInit%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20%28COMMENTS%20%3D%3D%20CRN_DATATYPES.empty%20%7C%7C%20COMMENTS.commentCount%20%3D%3D%200%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20createCommentlessComponents%28%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20%28FILTER.categoryPage%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20%28STYLES.categoryreview.hide%20%3D%3D%20%22visible%22%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%","createdAt":"2023-09-13T12:11:45.000Z","updatedAt":"2026-07-06T19:24:08.000Z"}]