Как в галерее товара сгруппировать фото по цвету в Tilda

<script>
const colorOptionName = 'Цвет';

document.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        let snippetSearchRepeat = 0;
        let tistore = setInterval(function() {
                const productListNum = document.querySelector('.t-store__product-snippet');
                if(productListNum) {
                    if(productListNum.hasAttribute("data-product-url")){
                        clearInterval(tistore);
                        setTimeout(function() {
                            createMdfSlider(productListNum);     
                        }, 1000);
                    };
                };
                snippetSearchRepeat++;
                if(snippetSearchRepeat>50) clearInterval(tistore);
        }, 100);  

        document.addEventListener('click', function(event) { 
            if(event.target.closest('a[href*="/tproduct/"]')){
                setTimeout(function() {
                    const activePopup = document.querySelector('.t-store .t-popup.t-popup_show .t-store__product-popup');
                    if(activePopup) createMdfSlider(activePopup);  
                }, 350);
            }; 
        });
        
        function forceLoadImage(imgElement, src) {
            if (!imgElement || !src) return;
            
            imgElement.style.backgroundImage = `url("${src}")`;
            
            void imgElement.offsetHeight;
            
            const tempImg = new Image();
            tempImg.onload = function() {
                if (imgElement.style.backgroundImage !== `url("${src}")`) {
                    imgElement.style.backgroundImage = `url("${src}")`;
                }
            };
            tempImg.src = src;
        }
        
        function createMdfSlider(block){
            
            const recID = block.closest('.r').id.replace(/\D/g, '');
            
            let isInitialized = false;
            let initialFixDone = false;
            
            function syncSliderToFirstSlide() {
                const slideWrapper = block.querySelector('.t-slds__items-wrapper');
                if(!slideWrapper) return;
                
                const firstVisibleSlide = block.querySelector('.t-slds__item[data-slide-index="1"]');
                if(!firstVisibleSlide) return;
                
                const slideWidth = firstVisibleSlide.offsetWidth;
                if(slideWidth === 0) return;
                
                const currentTransform = slideWrapper.style.transform;
                let currentPos = 1;
                
                if(currentTransform) {
                    const match = currentTransform.match(/translateX\((-?\d+)px\)/);
                    if(match) {
                        const transformX = parseInt(match[1]);
                        currentPos = Math.abs(transformX / slideWidth) + 1;
                    }
                }
                
                if(currentPos !== 1) {
                    return;
                }
                
                const currentActive = block.querySelector('.t-slds__item_active');
                if(currentActive !== firstVisibleSlide) {
                    const allSlides = block.querySelectorAll('.t-slds__item');
                    allSlides.forEach(slide => {
                        slide.classList.remove('t-slds__item_active');
                        slide.setAttribute('aria-hidden', 'true');
                    });
                    
                    firstVisibleSlide.classList.add('t-slds__item_active');
                    firstVisibleSlide.setAttribute('aria-hidden', 'false');
                    
                    slideWrapper.setAttribute('data-slider-pos', '1');
                    
                    if(slideWrapper.style.transform !== 'translateX(0px)') {
                        slideWrapper.style.transform = 'translateX(0px)';
                    }
     
                }
            }
            
            const colorOption = block.querySelector('.js-product-edition-option[data-edition-option-id="'+colorOptionName+'"]');
            if(colorOption){
                const colorInputs = colorOption.querySelectorAll('input.t-product__option-input[name="'+colorOptionName+'"]');

                colorInputs.forEach(function (el, index) {
                    el.addEventListener('change',function(e) {
                        isInitialized = false;
                        initialFixDone = false;
                        changeSlider();
                    });    
                });
                
                function changeSlider(){
                    const colorNameActive = colorOption.querySelector('input.t-product__option-input[name="'+colorOptionName+'"]:checked').value.toLowerCase();

                    const slideWrapper = block.querySelector('.t-slds__items-wrapper');
                    const tslds__item = slideWrapper.querySelectorAll('.t-slds__item:not(.t-slds__item_dummy)');
                    
                    const thumbsbulletWrapper = block.querySelector('[class*="bullet-wrapper"], [class*="bullet_wrapper"]');
                    let thumbs = false;
                    let thumbsbullet = [];
                    
                    if(thumbsbulletWrapper){
                        const commonZoomThumb = thumbsbulletWrapper.querySelector('.t-slds__thumbs_gallery');
                        if(commonZoomThumb){
                            commonZoomThumb.remove();
                            thumbsbullet = thumbsbulletWrapper.querySelectorAll('.t-slds__thumbsbullet');
                            const template = document.querySelector(`.t-slds__thumbsbullet[data-slide-bullet-for="${thumbsbullet.length}"]`);
                            
                            for(let i=thumbsbullet.length+1; i<=(tslds__item.length-2);i++){
                                
                                const donorImage = slideWrapper.querySelector(`.t-slds__item[data-slide-index="${i}"] .t-slds__bgimg`).getAttribute('data-original');
                                const clone = template.cloneNode(true);
                                clone.setAttribute('data-slide-bullet-for', i.toString());
                                const bgImg = clone.querySelector('.t-slds__bgimg');
                                bgImg.setAttribute('data-original', donorImage);
                                bgImg.style.backgroundImage = `url("${donorImage}")`;
                                thumbsbulletWrapper.appendChild(clone);
                            };
                            t_slds_initSliderControls(recID);
                        };
                    
                        thumbs = true;
                        thumbsbullet = thumbsbulletWrapper.querySelectorAll('.t-slds__bullet');
                    };
                    
  
                    let showSlidesTotal = 0;
                    const imagesToPreload = [];
                    let firstMatchedIndex = null;
                    
                    for(let i=1; i<(tslds__item.length-1); i++){
                        tslds__item[i].setAttribute('data-ex-slide-index', i);
                        if(tslds__item[i].classList.contains("t-slds__item_active")){
                            tslds__item[i].classList.remove('t-slds__item_active');    
                        };
                        if(tslds__item[i].classList.contains("no-visible-slide")){
                            tslds__item[i].classList.remove('no-visible-slide');  
                        };
                        let metaColor = tslds__item[i].querySelector('meta[itemprop="caption"]');
                        
                        if(thumbs){
                            thumbsbullet[i-1].setAttribute('data-ex-thumb-index', i);
                            if(thumbsbullet[i-1].classList.contains("t-slds__bullet_active")){
                                thumbsbullet[i-1].classList.remove("t-slds__bullet_active");
                            };
                            if(thumbsbullet[i-1].classList.contains("no-visible-dots")){
                                thumbsbullet[i-1].classList.remove("no-visible-dots");
                            };
                        };
                        
                        let zoom = false;
                        const imgWrapper = tslds__item[i].querySelector('.t-slds__imgwrapper');
                        
                        if ( imgWrapper && imgWrapper.getAttribute('data-zoomable') === 'yes'){
                            zoom = true;
                            imgWrapper.classList.add('t-zoomable');
                        }; 
                        
                        if(metaColor) {
                            metaColor = metaColor.getAttribute('content').toLowerCase();
                            if(metaColor.includes(colorNameActive)){
                            
                                showSlidesTotal++;
                                if(firstMatchedIndex === null) {
                                    firstMatchedIndex = i;
                                }
                                tslds__item[i].setAttribute('data-slide-index', showSlidesTotal);
                                if(thumbs){
                                    thumbsbullet[i-1].setAttribute('data-slide-bullet-for', showSlidesTotal);
                                };
                                
                                const bgImg = tslds__item[i].querySelector('.t-slds__bgimg');
                                const originalSrc = bgImg.getAttribute('data-original');
                                if (originalSrc) {
                                    imagesToPreload.push(originalSrc);
                                    forceLoadImage(bgImg, originalSrc);
                                }
                                
                            }else{
                                tslds__item[i].setAttribute('data-slide-index', '-1');
                                tslds__item[i].classList.add('no-visible-slide');
                                if(zoom) imgWrapper.classList.remove('t-zoomable');
                                if(thumbs){
                                    thumbsbullet[i-1].setAttribute('data-slide-bullet-for', '-1');
                                    thumbsbullet[i-1].classList.add('no-visible-dots');
                                };
                                
                            }
                        }else{
                            showSlidesTotal++;
                            if(firstMatchedIndex === null) {
                                firstMatchedIndex = i;
                            }
                            tslds__item[i].setAttribute('data-slide-index', showSlidesTotal);
                            if(thumbs){
                                thumbsbullet[i-1].setAttribute('data-slide-bullet-for', showSlidesTotal);
                            };
                            
                            const bgImg = tslds__item[i].querySelector('.t-slds__bgimg');
                            const originalSrc = bgImg.getAttribute('data-original');
                            if (originalSrc) {
                                imagesToPreload.push(originalSrc);
                                forceLoadImage(bgImg, originalSrc);
                            }
                        };
                    };
                    
                    if (imagesToPreload.length > 0) {
                        imagesToPreload.forEach(src => {
                            const img = new Image();
                            img.src = src;
                        });
                    }
                    
                    if(showSlidesTotal){
                        slideWrapper.setAttribute('data-slider-pos', 1);
                        slideWrapper.setAttribute('data-slider-totalslides', showSlidesTotal);
                    
                        const firstSlide = slideWrapper.querySelector('.t-slds__item[data-slide-index="1"]');
                        const firstImage = firstSlide ? firstSlide.querySelector('.t-slds__bgimg').getAttribute('data-original') : null;
                        
                        const lastSlideElement = slideWrapper.querySelector('.t-slds__item[data-slide-index="'+showSlidesTotal+'"]');
                        const lastImage = lastSlideElement ? lastSlideElement.querySelector('.t-slds__bgimg').getAttribute('data-original') : null;
                        
                        if (firstImage && lastImage) {
                            const zeroSlide = slideWrapper.querySelector('.t-slds__item[data-slide-index="0"]');
                            if (zeroSlide) {
                                const zeroMeta = zeroSlide.querySelector('meta[itemprop="image"]');
                                if(zeroMeta) zeroMeta.setAttribute('content', lastImage);
                                const zeroSlds__imgwrapper = zeroSlide.querySelector('.t-slds__imgwrapper');
                                if(zeroSlds__imgwrapper && zeroSlds__imgwrapper.hasAttribute('data-img-zoom-url')) 
                                    zeroSlds__imgwrapper.setAttribute('data-img-zoom-url', lastImage);
                                const firstT_bgimg = zeroSlide.querySelector('.t-slds__bgimg');
                                if(firstT_bgimg){
                                    firstT_bgimg.setAttribute('data-original', lastImage);
                                    forceLoadImage(firstT_bgimg, lastImage);
                                };
                            };
                            
                            const lastSlide = slideWrapper.querySelector('.t-slds__item[data-slide-index="'+(tslds__item.length-1)+'"]');
                            if (lastSlide) {
                                const lastMeta = lastSlide.querySelector('meta[itemprop="image"]');
                                if(lastMeta) lastMeta.setAttribute('content', firstImage);
                                const latSlds__imgwrapper = lastSlide.querySelector('.t-slds__imgwrapper');
                                if(latSlds__imgwrapper && latSlds__imgwrapper.hasAttribute('data-img-zoom-url')) 
                                    latSlds__imgwrapper.setAttribute('data-img-zoom-url', firstImage);
                                const lastT_bgimg = lastSlide.querySelector('.t-slds__bgimg');
                                if(lastT_bgimg){
                                    lastT_bgimg.setAttribute('data-original', firstImage);
                                    forceLoadImage(lastT_bgimg, firstImage);
                                };
                            };
                        };
                    };
                    
                    block.querySelector('.t-slds').style.backgroundImage = 'none';
                    const slides = block.querySelectorAll('.t-slds > div');
                    slides.forEach(slide => {
                      slide.classList.add('show-slide');
                    });
                    
                    if(firstMatchedIndex !== null) {
                        const firstVisibleSlide = block.querySelector('.t-slds__item[data-slide-index="1"]');
                        const currentActive = block.querySelector('.t-slds__item_active');
                        
                        if(firstVisibleSlide && currentActive !== firstVisibleSlide) {
                            const allSlides = block.querySelectorAll('.t-slds__item');
                            allSlides.forEach(slide => {
                                slide.classList.remove('t-slds__item_active');
                                slide.setAttribute('aria-hidden', 'true');
                            });
                            
                            firstVisibleSlide.classList.add('t-slds__item_active');
                            firstVisibleSlide.setAttribute('aria-hidden', 'false');
                            
                            if(thumbsbulletWrapper) {
                                const firstBullet = thumbsbulletWrapper.querySelector('.t-slds__bullet[data-slide-bullet-for="1"]');
                                if(firstBullet) {
                                    const allBullets = thumbsbulletWrapper.querySelectorAll('.t-slds__bullet');
                                    allBullets.forEach(b => b.classList.remove('t-slds__bullet_active'));
                                    firstBullet.classList.add('t-slds__bullet_active');
                                }
                            }
                            
                            slideWrapper.style.transform = 'translateX(0px)';
                            slideWrapper.setAttribute('data-slider-pos', '1');

                        }
                        
                        setTimeout(function() {
                            isInitialized = true;
                        }, 500);
                    }
                };
                
                changeSlider();
            };
        };
 
    })();    
});           
</script>


<style>


.t-store .t-store__prod-popup__slider .no-visible-slide, 
.t-store .t-store__prod-popup__slider .no-visible-dots{
    display: none !important;   
}

.t-store .t-store__prod-popup__slider .t-slds {
    background-image: url(https://static.tildacdn.com/tild3539-3633-4561-b766-326133363038/loading-gif-png-5.gif);
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
}

.t-store .t-store__prod-popup__slider .t-slds>div {
    filter: opacity(0.1) blur(5px);
    transition: all 0.3s;
}
.t-store .t-store__prod-popup__slider .t-slds>div[class*="bullet"] {
    filter: opacity(0);
}


.t-store .t-store__prod-popup__slider .t-slds>div.show-slide {
    filter: opacity(1) blur(0);
}
.t-store .t-store__prod-popup__slider .t-slds>div.show-slide[class*="bullet"] {
    filter: opacity(1);
}


.t-slds__thumbsbullet-wrapper.show-slide {
    overflow: auto;
    max-height: 60svh;
}

.t-slds__thumbsbullet-wrapper.show-slide::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.t-slds__thumbsbullet-wrapper.show-slide::-webkit-scrollbar-track {
    background: transparent;
}

.t-slds__thumbsbullet-wrapper.show-slide::-webkit-scrollbar-thumb {
    background: #e6e6e6;
    border-radius: 2px;
}


@media and screen (min-width:640px){
 .t-store__prod-popup__slider .t-slds__thumbsbullets-with-gallery .t-slds__thumbsbullet-wrapper {
    width: 50px;
}
}


</style>