<!--КОД ТОВАРА С КНОПКАМИ СОЦ СЕТЕЙ-->

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {

        const productID = '544626761502';
        const waCaption = 'написать в WhatsAPP';
        const tgCaption = 'написать в Telegram';
        const waLink = 'https://api.whatsapp.com/send?phone=79311110771&text=Здравствуйте!%20Подберите%20для%20меня%20идеальную%20композицию%20';
        const tgLink = 'https://t.me/vitaliy_130?text=Здравствуйте!%20Подберите%20для%20меня%20идеальную%20композицию%20';
                
        
        
        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);
                        insertSocialButton();
                    };
                };
                snippetSearchRepeat++;
                if(snippetSearchRepeat>50) clearInterval(tistore);
        }, 100);   
        
        
        const gridCont = document.querySelectorAll(".js-store-grid-cont");
        let renderedCount = 0;
        const totalGrids = gridCont.length;
        
        
        gridCont.forEach(function(el) {
            el.addEventListener('tStoreRendered', function(e) {
                renderedCount++;
                if (renderedCount === totalGrids) {
                    insertSocialButton();
                    renderedCount = 0;
                }
            });
        });

        function waitForGridElements(selector, callback) {
            const checkInterval = setInterval(() => {
                const elements = document.querySelectorAll(selector);
                if (elements.length > 0) {
                    clearInterval(checkInterval);
                    callback(elements);
                }
            }, 100); 
            setTimeout(() => clearInterval(checkInterval), 10000);
        }
        
        waitForGridElements(".t-store__relevants-grid-cont", function(gridRelevantCont) {
            let renderedRelevantCount = 0;
            const totalRelevantGrids = gridRelevantCont.length;
                
            gridRelevantCont.forEach(function (el, index) {
                el.addEventListener('tStoreRendered', function(e) {
                    renderedRelevantCount++;
                    if (renderedRelevantCount === totalRelevantGrids) {
                        insertSocialButton();
                        renderedRelevantCount = 0;
                    }
                });
            });
        });
        
        // Обработчик кликов по товарам, открытие popup
        document.addEventListener('click', function(event) { 
            if (event.target.closest('a[href*="/tproduct/"]')) {
                insertSocialButton();
            }
        });
        
        function insertSocialButton(){
            setTimeout(function(){
                const productBlocks = document.querySelectorAll('.js-product');
                if (productBlocks.length > 0) {
                  productBlocks.forEach(productBlock => {
                    const productUID = productBlock.getAttribute('data-product-gen-uid');
                    if (productUID === productID) {
                        productBlock.classList.add('social-product');
                        const buttonsWrapper = productBlock.querySelector('.js-store-buttons-wrapper');
                      if (buttonsWrapper) {
                        const existingSocialButtons = buttonsWrapper.querySelectorAll('.social-button');
                        if (existingSocialButtons.length === 0) {
                          const buttonsHTML = `
                            <a class="t-btn t-btnflex t-btnflex_type_button t-btnflex_xs wa-link-button social-button" href="${waLink}">
                              <span class="t-btnflex__text t-store__card__btn-text">${waCaption}</span>
                            </a>
                            <a class="t-btn t-btnflex t-btnflex_type_button t-btnflex_xs tg-link-button social-button" href="${tgLink}">
                              <span class="t-btnflex__text t-store__card__btn-text">${tgCaption}</span>
                            </a>
                          `;
                          buttonsWrapper.insertAdjacentHTML('beforeend', buttonsHTML);
                        }
                      }
                    }
                  });
                }
            }, 300); 
               
        };
 
    })();    
});    
</script>



<style>

#allrecords .social-button {
    margin: 0 2px 8px;
    height: 45px;
}

.social-product .t-store__card__btn,
.social-product .t-store__prod-popup__btn{
    display: none;
}


#allrecords .wa-link-button.social-button {
    color: #ffffff;
    background-color: #56d65c;
    font-weight: 700;
    transition-duration: 0.2s;
    transition-property: background-color, color, border-color, box-shadow, opacity, transform, gap;
    transition-timing-function: ease-in-out;
}

#allrecords .wa-link-button.social-button:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) !important;
}

#allrecords .tg-link-button.social-button {
    color: #ffffff;
    background-color: #6fcbff;
    font-weight: 700;
    transition-duration: 0.2s;
    transition-property: background-color, color, border-color, box-shadow, opacity, transform, gap;
    transition-timing-function: ease-in-out;
}

#allrecords .tg-link-button.social-button:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) !important;
}


#allrecords .t-rec .tg-link-button.social-button:hover {
    background-color: #6fcbff !important;
}


.social-product>a,
.social-product .store__card__has-btns{
    pointer-events:none;
}

.social-product .t-store__card__sku,
.social-product .t-store__card__price-wrapper,
.social-product .js-product-controls-wrapper.t-store__card__prod-controls-wrapper
{
    opacity: 0;
    pointer-events:none;
}

#allrecords .social-button{
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
}


</style>