youx.agency
YOUX agency
Обсудить проект

Данный код помогает добавить иконку и функционал поделиться во всех социальных сетях в карточку товара Тильда. Работает также с отдельной страницей

Кнопка поделиться в соц.сетях для карточки товара Tilda

Заказать код
Вступить в чат
Предложить код
Видео-урок

Инструкция

1

Скопируйте и вставьте скрипт в блок "T123" на страницу

2

shareCaption.textContent поменяйте на свой "Поделиться в соц. сетях"

3

Важно: скрипт работает только для товаров на отдельной странице

Скопировать код
Код скопирован

 <!-- Кнопка поделиться в соц.сетях для карточки товара Tilda -->
 <!-- https://youx.agency/knopka-podelitsya-v-sots-setyakh-dlya-kartochki-tovara-tilda -->
 
<style>

.share-сaption {
    color: #212843;
    font-size: 16px;
    font-family: 'Montserrat';
    margin: 18px 0 10px 0;
}

</style>

<script defer src="https://yastatic.net/share2/share.js"></script>


<script defer>
    // Укажите селектор блока, после которого нужно добавить новый блок
    var targetBlockSelector = '.js-store-prod-text';

    // Создаем новый блок HTML
    var newYaShareBlock = document.createElement('div');
    newYaShareBlock.className = 'ya-share2';
    newYaShareBlock.setAttribute('data-curtain', '');
    newYaShareBlock.setAttribute('data-limit', '4');
    newYaShareBlock.setAttribute('data-services', 'messenger,vkontakte,odnoklassniki,telegram,viber,whatsapp');

    // Создаем новый элемент с текстовой подписью
    var shareCaption = document.createElement('div');
    shareCaption.className = 'share-сaption';
    shareCaption.textContent = 'Поделиться в соц. сетях';

    // Найдем целевой блок
    var targetBlock = document.querySelector(targetBlockSelector);

    // Проверяем, найден ли целевой блок
    if (targetBlock) {
        // Сначала вставляем текстовую подпись перед целевым блоком
        targetBlock.parentNode.insertBefore(shareCaption, targetBlock);

        // Затем вставляем новый блок после текстовой подписи
        targetBlock.parentNode.insertBefore(newYaShareBlock, shareCaption.nextSibling);
    }
</script>

Другие модификации