var allScripts = document.getElementsByTagName('script'); var valueProd = ''; for (var p = 0; p < allScripts.length; p++) { valueProd += allScripts[p].innerText; } const productId = valueProd.match(/\('\.product-wrapper'\),\s*(.*?)\s*, {/s); let ProductJson = null; if (productId != null) { ProductJson = JSON.parse(productId[1]); console.log('ProductJson', ProductJson); } var doc_lang = document.documentElement.lang.split('_')[0]; window.documentLanguage = doc_lang; console.log('inserting custom css'); const customCss = ` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, ul, li, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, center, dl, dt, dd, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; //font-family: 'Open Sans', 'HelveticaNeue', 'Arial', 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } #bottomstickycart .productbar-inner .c-row { align-items: center; justify-content: space-between; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } #closeWishlist { background: #e2e2e2; right: 20px !important; border-radius: 32px; width: 20px; height: 20px !important; text-align: center; } .store-cart-button svg { stroke: #FFF; stroke-width: 5px; } // .filter-lane>div { // display: none; // } input[name="color_variation"] { display: none; } .color_boxed label { font-size: 0; width: 35px; height: 35px; border: 2px solid #fff; margin-right: 10px; border-radius: 100%; } .active_color { border: 2px solid black !important; } .variation-wrapper[data-name='Kleur'] { width: 100%; } .color_boxed .geel { background: yellow; } .color_boxed .rood { background: red; } .color_boxed .blauw { background: blue; } .color_boxed .groen { background: green; } .color_boxed .wit { background: white; } .color_boxed .zwart { background: black; } .color_boxed .grijs { background: gray; } .color_boxed .paars { background: purple; } .custom_price { float: left; width: 100%; margin-bottom: 20px; } .custom_price li { list-style: none; margin: 10px 0; background-image: url('//content.app-sources.com/s/03060042598183115/thumbnails/240x160/Images/check_tick-4443342.png'); background-repeat: no-repeat; padding-left: 25px; background-size: contain; background-position: center left; } .custom_price span { color: #A6EB79; font-weight: bold; } .colorlabel { position: relative; } .colorlabel .tooltip_content { visibility: hidden; width: auto; min-width: 90px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; font-size: 15px; left: -28px; top: -35px; } .colorlabel:hover .tooltip_content { visibility: visible; } .colorlabel .tooltip_content::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .sizeCart_sideBar_inner { height: 95%; } .sizechart_img>img { width: 100%; padding: 15px; } .sizechart_img { display: flex; align-items: center; FLEX-DIRECTION: column; overflow: auto; height: 100%; padding-top: 4rem 2rem 0rem; overflow-x: hidden; padding: 3rem; } .productdetails-bar { width: 100%; position: fixed; bottom: 0px; background-color: #fff; z-index: 999; transition: all 0.5s; display: none; border-top: 1px solid #ddd; } .fade-in-cart { display: block; transition: all 0.5s; animation: fadeIn .3s; -webkit-animation: fadeIn .3s; -moz-animation: fadeIn .3s; -ms-animation: fadeIn .3s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .c-row { display: flex; // flex-wrap:wrap; margin: 0px -10px; } c-6 { flex: 0 0 50%; padding: 0px 10px; } .cs-container { max-width: 1300px; width: 100%; margin: 0px auto; } .left-col-inner { width: 100%; display: flex; // align-items: center; } .product-img { // width: 11% } .product-img img { width: 50px; height: 50px; margin-right: 15px; object-fit: cover; object-position: top; } .c-6 { flex: 0 0 47%; padding: 0px 10px; } .productbar-inner { padding: 16px 15px; } .product-details { width: 85%; } .product-details strong { font-size: 16px; font-weight: 500; // font-family: 'mabry'; margin-bottom: 6px; display: block; } .product-prices { width: 100%; display: flex; align-items: center; } .product-prices span { font-size: 15px; font-family: var(--cc-font); } .product-prices span { font-size: 16px; font-family: var(--cc-font); } .dicount-strip { background: #000; color: #fff; padding: 4px 10px; border-radius: 14px; font-size: 12px; // font-family: 'mabry'; } .select-feilds-outer select { width: 100%; height: 44px; padding: 4px; // font-family: 'mabry'; font-size: 16px; border: 1px solid #ddd; border-radius: 0px; text-transform: capitalize; } .select-feilds-outer select:focus { outline: none } .select-feilds-outer { width: 42%; } .product-description { // font-family: 'mabry'; } .productbar-inner .c-row { align-items: center } .counter-btn { display: flex; align-items: center; } .payment-method ul { list-style: none; display: flex; flex-wrap: nowrap; flex-wrap: wrap; } .payment-method ul li img { width: 55px; max-width: 70px; /* BORDER: SOLID 1PX #E2E2E2; */ border-radius: 3px; } .right-col label { font-size: 14px; // font-family: 'mabry'; text-transform: capitalize; margin-top: -20px; position: absolute; } .right-col select { cursor: pointer; } .right-col { gap: 10px; width: 100%; display: flex; align-items: center; justify-content: space-between; } span.original-price { font-size: 17px; color: #747474; font-size: 15px; letter-spacing: normal; font-weight: bold; font-style: normal; text-decoration: none; text-decoration: line-through !important; margin: 0px 10px; } span.minus-discont { font-size: 13px; padding: 0px 0px 0px 2px; } .counter-btn span { border-radius: 0; font-size: 27px; font-weight: 800; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #f2f2f2; border: 1px solid #ddd; } .counter-btn input { width: 50px; height: 40px; background: #fff; border-radius: 0px; text-align: center; margin: 0px 5px; // font-family: 'mabry'; font-weight: 600; border: 1px solid #ddd; } .checkout-btn a { text-decoration: none; background: var(--color-primary); padding: 10px 20px; width: max-content; display: block; text-align: center; color: #fff; font-size: 16px; // font-family: 'mabry'; border-radius: 0px } .checkout-btn a:not([style*='--color-primary: #ffffff']) { background: var(--color-secondary1); } .cc-size-selector { align-items: center; justify-content: center; margin: 0px 5px; cursor: pointer; border: 1px solid black; border-radius: 173px; min-height: 35px; display: flex; box-sizing: border-box; min-width: 35px; position: relative; text-transform: capitalize; // font-family: 'mabry'; font-weight: 600; } .addtocart-wrapper .add-to-wrapper .add-to-cart { // font-family: 'mabry'; // font-weight: 600; } .addtocart-wrapper .add-to-wrapper .sold-out-btn { // font-family: 'mabry'; // font-weight: 600; } .cc-color-selector { align-items: center; justify-content: center; margin: 0px 5px; cursor: pointer; border-radius: 173px; min-height: 35px; display: flex; box-sizing: border-box; min-width: 35px; position: relative; } .product-variations { position: relative; } .product-content-wrapper.center-content { justify-content: space-between; } .sizeChartbtn { /* background: green; */ // padding: 10px; color: #000; // width: 72px; text-align: center; border-radius: 5px; font-size: 13px; margin: 0px 0 0px auto; cursor: pointer; font-weight: 600; // position: absolute; top: 0; right: 0px; bottom: 0; } .sizeCart_sideBar { position: fixed; top: 0; // right: 0px; bottom: 0px; background: rgb(0 0 0 / 68%); width: 100%; height: 100%; z-index: 99999; box-shadow: 0px 0px 14px #9e9797; /* padding: 20px; */ margin-bottom: 6rem; transform: translateX(100%); transition: all 0.5s ease; opacity: 0; visibility: hidden; } .sizeCart_sideBar_active { transform: translateX(0%) !important; opacity: 1 !important; visibility: visible !important; } .sizeCart_sideBar_inner { position: relative; // background: rgb(255 255 255 / 94%); width: 40%; margin: 2rem auto; } .cross-icon { position: absolute; background: #000; color: #fff; border-radius: 0px; right: 20px; top: 2rem; cursor: pointer; width: 35px; height: 35px; display: flex; justify-content: center; font-size: 22px; } #cc-review-list { display: flex; flex-direction: column; gap: 20px; } #cc-rating-box { display: flex; flex-direction: row; } #cc-ratings { display: flex; flex-direction: column; } #cc-review-form>input, #cc-review-form>textarea { height: 20px; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 10px; padding: 5px 10px; } .addtocart-wrapper { margin-bottom: 15px; } #cc-review-form>div:has(> input[type='file']) { border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px 10px; width: fit-content; border-radius: 10px; cursor: pointer; } #cc-review-form>div>input[type='file'] { position: absolute; width: 0; height: 0; } #cc-review-form { display: flex; flex-direction: column; gap: 10px; } #cc-reviews { padding: 20px; } .cc-review-item { filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1)); padding: 25px; display: flex; background-color: white; flex-direction: column; gap: 15px; border-radius: 15px; } .payment-method ul { display: flex; width: 100%; justify-content: flex-start; } .payment-method { width: 100%; // border-bottom: solid 1px #e2e2e2; margin-bottom: 15px; padding-bottom: 10px; } .payment-method ul li { margin-right: 0px; MARGIN: 1px; display: flex; justify-content: center; } .buttonWidget .theme-button{ border-width : 1px!important; } .add-to-btn-wrapper .add-to-cart, .add-to-btn-wrapper .sold-out-btn { padding: 15px 27px; } .payment-loader-outer{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: none; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 99999; background :#f5f6fa; flex-direction: column; } .payment-loader-outer-active{ display: flex } .payment-loader { width: 48px; height: 48px; border: 2px solid #000; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; } .payment-process { width: 100%; text-align: center; margin-top: 23px; text-transform:uppercase; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media only screen and (max-width: 768px) { .product-details strong { width: 285px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; margin: 0px; } .product-prices span { font-size: 15px; } #bottomstickycart .productbar-inner .c-row { align-items: flex-start; justify-content: space-between; flex-direction: column; } #bottomstickycart .productbar-inner { padding: 2px 10px 6px; } .product-body-container-inner > h1{ font-size:18px !important; line-height:1.3; } .productbar-inner .c-6:first-child { flex: 0 0 100%; } .productbar-inner .c-6:last-child { flex: 3 0 100%; } .sizeCart_sideBar_inner { width: 80%; } .custom_price li { background-size: 20px; line-height: 20px; background-position: center left; } .floating-buy-button .addtocart-wrapper { display: none; } .fixed-header-wrapper.visible { z-index: 9; } #cc-rating-section{ margin-top:43px; } } .accordion-wrapper ul { list-style: none; padding: 0; } .accordion-wrapper ul .inner { padding-left: 1em; overflow: hidden; display: none; } .accordion-wrapper ul li { /*margin: 0.5em 0; border: 1px solid #e1e1e1; font-size: 18px;*/ } .accordion-wrapper li a.toggle { /* width: 100%; */ display: block; background: #ffffff; color: #000000; padding: 10px 10px 10px 0px; transition: background 0.3s ease; height: 10px; } .accordion-wrapper ul li a.toggle:hover { /*background: rgba(0, 0, 0, 80%);*/ border-color: #929292; } .accordion-wrapper-content { padding: 1.1428571429em; padding-left: 4.5em !important; padding-right: 4.5em; background-color: #fafafa; box-shadow: inset 0 0 20px 0 #c7c7c742; } .accordion-wrapper-content img { display: block; text-align: center; margin: 20px; margin-left: 30%; margin-top: 10px; } .accordion-wrapper-content { color: #545454; font-size: 14px; font-weight: 400; line-height: 1.4; } .panel { margin-top: -6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; /*width:100vw; background-color: #fcfefe; padding: 1rem;*/ } .toggle p { font-weight: 500; color: #333333; font-size: 14px; vertical-align: unset; } span.a { display: inline; font-weight: 600; font-size: 16px; background-color: #eea29a; } .custom-style span.a { background: transparent !important; } .d-img { margin: -10px 0 -10px 0; float: right; } .about-produt { width: 100%; padding: 15px 0px; // border-top: solid 1px #e2e2e2; // border-bottom: solid 1px #e2e2e2; margin-bottom: 10px; } .about-produt ul { list-style: none; } .about-produt ul li { margin-bottom: 10px; font-weight: 500; font-size: 15px; display: flex; align-items: center; // font-family: 'mabry'; text-transform: capitalize; } .about-produt ul li img { width: 25px; margin-right: 15px; height: 25px; object-fit: cover; } label.sizr-label { width: 49%; margin-bottom: 6px; font-size: 16px; border: unset !important; font-weight: 600; padding-bottom: 6px; } .variation-wrapper label, .qty-wrapper label { float: left; width: 100%; text-align: left; margin-bottom: 5px; font-size: 16px; font-weight: 600; padding-bottom: 5px; } .product-body-container-inner>h1 { color: #3e3e3e; font-size: 25px; font-style: normal; text-decoration: none; } #cc-size-wrapper { margin-top: 20px; margin-bottom: 10px } #cc-color-swatch>label { display: block; margin-bottom: 6px; } #cc-color-swatch { margin-top: 10px; margin-bottom: 10px } a.add-to-cart { text-transform: capitalize; } .add-to-cart-inner { align-items: flex-start; } .wishlistItem { display: flex; flex-direction: row; gap: 20px; margin-top: 20px; align-items: center; padding: 0px 15px 15px; border-bottom: 1px dashed #e2e2e2; justify-content: space-between; } .wishlistItem a { text-decoration: none; } .deletewishitem { cursor: pointer; border: solid 1px #e2e2e2; border-radius: 20px; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; } .wishlistItem>h4 { max-width: 15ch; } .ratingControl { position: relative; display: inline-flex; direction: rtl; align-self: flex-start; } .ratingControl__radio { position: absolute; height: 0; width: 0; opacity: 0; } .ratingControl__star { position: relative; display: block; height: 24px; width: 12px; cursor: pointer; overflow: hidden; } .ratingControl__star:nth-last-of-type(odd)::before, .ratingControl__star:nth-last-of-type(odd)::after { left: 0; clip-path: polygon(50% 0%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .ratingControl__star:nth-last-of-type(even)::before, .ratingControl__star:nth-last-of-type(even)::after { right: 0; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%); } .ratingControl__star::before, .ratingControl__star::after { content: ""; position: absolute; top: 0; height: 100%; } .ratingControl__star::before { width: 200%; background-color: #aaa; } .ratingControl__star::after { background-color: #f2b600; } .ratingControl__star:hover::after, .ratingControl__star:hover~.ratingControl__star::after, .ratingControl__radio:checked~.ratingControl__star::after { width: 200%; } .ratingControl__radio:checked~.ratingControl__star::after { width: 200%; } .ratingControl2 { position: relative; display: inline-flex; direction: rtl; align-self: flex-start; } .ratingControl__radio2 { position: absolute; height: 0; width: 0; opacity: 0; } .ratingControl__star2 { position: relative; display: block; height: 24px; width: 12px; cursor: pointer; overflow: hidden; } .ratingControl__star2:nth-last-of-type(odd)::before, .ratingControl__star2:nth-last-of-type(odd)::after { left: 0; clip-path: polygon(50% 0%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .ratingControl__star2:nth-last-of-type(even)::before, .ratingControl__star2:nth-last-of-type(even)::after { right: 0; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%); } .ratingControl__star2::before, .ratingControl__star2::after { content: ""; position: absolute; top: 0; height: 100%; } .ratingControl__star2::before { width: 200%; background-color: #aaa; } .ratingControl__star2::after { background-color: #f2b600; } // .ratingControl__star2:hover::after, .ratingControl__star2:hover ~ .ratingControl__star2::after, .ratingControl__radio2:checked ~ .ratingControl__star2::after { // width: 200%; // } .ratingControl__radio2:checked~.ratingControl__star2::after { width: 200%; } .rating_fill_color::after { background: #f2b600; width: 200%; } #cc-rating-section { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; gap: 10px; align-items: center; margin-bottom: 15px; } .offer-wrapper { width: 100%; padding-bottom: 40px; border-box: -box-sizing; padding-top: 15px; display: flex; gap: 10px; flex-direction: column; justify-content: center; // max-width:300px; } .offer-items { border-radius: 10px; border: 1px solid rgba(150, 150, 150, .35); padding: 10px; display: flex; gap: 10px; width: 100%; cursor: pointer; } .offer-cross { text-decoration: line-through; } .offer-inner-text { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .offer-discount { display: flex; flex-direction: column; } a.add-to-cart, .sold-out-btn { justify-content: center; cursor: pointer; align-items: center; float: left; padding: 4px 10px; height: 48px; display: flex; color: #fff; font-size: 13px!important; text-transform: capitalize; } .product-photo-container, .product-body-container { padding: 20px !important; } @media only screen and (max-width: 810px) { .accordion-wrapper-content img { margin-left: 12%; } .d-img { margin: 0px; width: 52%; } } @media only screen and (max-width: 767px) { .right-col select { width: 92px!important; font-size: 12px; padding: 0px; } .counter-btn input { width: 50px; height: 24px;} .select-feilds-outer-size>select, select-feilds-outer-color>select { width: fit-content !important; } .product-img { padding-left: 10px; } .mobilec6 { flex: 0 0 0 !important; } .counter-btn span { font-size: 20px; width: 54px; height: 16px; display: flex; align-items: center; justify-content: center; } // .product-details, // .counter-btn { // display: none; // } .counter-btn { flex-direction: column; } .accordion-wrapper-content img { margin-left: 25%; } .checkout-btn a { padding: 0px 10px; font-size: 14px; width: 150px; display: flex; height: 44px; justify-content: center; align-items: center; } .about-produt { padding: 0px 0px; margin-bottom: 1px; } .product-price { margin-bottom: 10px; } } @media only screen and (max-width: 500px) { .accordion-wrapper-content img { margin-left: 0px; } .payment-method ul { flex-wrap: wrap; } .payment-method ul li img { width: 42px; padding-bottom: 5px; } // a.add-to-cart, // .sold-out-btn { // padding: 18px 8px!important; // font-size: 10px!important; // } a.add-to-cart, .sold-out-btn { padding: 14px 25px!important; font-size: 10px!important; height:42px!important; } #addToWishlist { width: 44px !important; padding: 10px !important; } .toggle-widget.style-2 .toggle-header { padding: 10px 15px } .toggle-widget-content p { line-height: 20px !important; } .grid-content-store .product-body-container-inner { width: 100% } .product-item-description .product-item-price .scratched{ width:100% } #cc-rating-section { margin-top: 0; } } .cc-size-selector { font-size: 15px; padding: 6px } @media only screen and (max-width: 1180px) { .product-details strong { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #cc-custom-identifier { position: fixed; top: 60px; right: 10px; padding: 10px; background: white; border-radius: 50px; z-index: 999; } #wishdrop { height: 100vh; width: 100vw; } .sizeCart_sideBar_inner { width: 65%; } .productbar-inner .c-6:first-child { flex: 0 0 32%; } .productbar-inner .c-6:last-child { flex: 0 0 65%; } .checkout-btn a { padding: 0px 10px; font-size: 15px; width: 170px; display: flex; height: 44px; justify-content: center; align-items: center; } } .panel input+span:before { content: ''; position: absolute; left: 0; top: 0; left: 0; width: 24px; height: 24px; border-radius: 24px; background: transparent; border: 1px solid #cacaca; -webkit-transition: background .3s ease; -moz-transition: background .3s ease; -ms-transition: background .3s ease; -o-transition: background .3s ease; transition: background .3s ease; } .panel input:checked+span::before { position: absolute; content: '\\f00c'; font-family: "FontAwesome"; font-size: 11px; color: #fff; text-align: center; line-height: 26px; display: block; background: #333; border: 1px solid #333; } //checkout funnel css .checkouts-wrapper input { color: #000 !important; } .panel span.a { padding-left: 35px; } .pay_ment li { border: 1px solid #e1e1e1; border-radius: 5px; margin-bottom: 10px; padding: 15px; } .panel { position: relative; display: flex; justify-content: space-between; align-items: center; } .panel input+span p { padding-left: 40px; } .panel input+span { width:70% } .panel span>.paynloptions { width: 28px !important; object-fit: contain; height: 28px; } ` document.head.insertAdjacentHTML("beforeend", ``); document.documentElement.style.setProperty('--cc-font', $('h1').css('font-family')); console.log('checking for product page'); const productWrappers = document.getElementsByClassName('product-wrapper'); if (productWrappers.length !== 0) { console.log('fix color and size'); var nameofColor; var nameofSize; (function () { const allVariations = $('.variation-wrapper SELECT') for (let index = 0; index < allVariations.length; index++) { const itemName = allVariations[index].name; const variation = allVariations[index]; const dataNameItems = document.querySelectorAll(`[data-name="${itemName}"`); console.log('>>', dataNameItems); variation.setAttribute('ccselectname', '' + itemName); dataNameItems[0].dataset.ccname = allVariations[index].name; if (dataNameItems[1]) { dataNameItems[1].dataset.ccname = allVariations[index].name; } console.log('>> >>' + allVariations[index].name); } function processItems(items, selectName) { for (let i = 0; i < items.length; i++) { items[i].setAttribute('ccselectname', selectName); } } function processDataNameItems(name, datasetName) { const items = document.querySelectorAll(`[data-name="${name}"`); for (let i = 0; i < items.length; i++) { items[i].dataset.ccname = datasetName; } } const colorItemNames = [ 'Kleur', 'kleur', 'Color', 'color', 'Farbe', 'Colour', 'colour', 'Färg', 'färg', ] colorItemNames.forEach( colorItemName => { const items = document.getElementsByName(colorItemName); if (items.length !== 0) { processItems(items, 'color') processDataNameItems(colorItemName, 'color'); nameofColor = colorItemName; } } ) const sizeItemNames = [ 'Size', 'size', 'Maat', 'maat', 'Größe', 'Grootte', ] sizeItemNames.forEach( sizeItemName => { const items = document.getElementsByName(sizeItemName); if (items.length !== 0) { processItems(items, 'size') processDataNameItems(sizeItemName, 'size'); nameofSize = sizeItemName; } } ) const messenItemName = 'Messen'; const messenItems = document.getElementsByName(messenItemName); if (messenItems.length !== 0) { messenItems[0].setAttribute('ccselectname', 'size'); const dataNameItems = document.querySelectorAll(`[data-name="${messenItemName}"`); dataNameItems[0].dataset.ccname = 'size'; nameofSize = messenItemName; } })(); // listeners for variation fields changes function variationsizeFieldsChanges() { $('select[ccselectname="size"]').on('change', function () { const value = $(this).val(); const $item = $(`div[data-sizeselector="${value}"]`); if (!$item.hasClass('selected')) { $item.click(); } }); } function variationcolorFieldsChanges() { $('select[ccselectname="color"]').on('change', function () { const value = $(this).val(); const $item = $(`div[data-colorselector="${value}"]`); console.log('color value :: ' + $item.hasClass('selected') + '::' + value); if (!$item.hasClass('selected')) { $item.click(); } }); } }