Добавляем видео вместо изображения в каталоге товаров

Модификация позволяет заменить изображения на ваши видео в каталоге товаров
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
61586785
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
Добавляем блок T123 и копируем в него код
  1. На 123 строке кода заменяем цвет линий
1 шаг
Скопировать код
Блоку с каталогом
2 шаг
  1. Задаём класс uc-slider-run
  1. Если загружаете видео на kinescope, необходимо скопировать ссылку и дописать концовку /720p или другое разрешение (можно посмотреть доступные в настройках видео)
  2. Если видео моргает при перезапуске, напишите нужно заменить концовку на /original
Загружаем видео на kinescope
3 шаг
Открываем раздел "Товары"
4 шаг
  1. В настройках карточки товара, напротив первого изображения нажимаем на кнопку "Видео"
  2. Выбираем Тип видео: Kinescope
  3. И вставляем ссылку на видео (не забываем про концовку)
<!--SH11 - Модификация для Тильды. Видео вместо картинок в карточке товара https://mod.tistols.com/catalog-video -->
<script>
$(document).ready(function() {
    function getAllCatalogBlocks() {
        return Array.from(document.querySelector('.uc-slider-run.t-store')).map(block => `#${block.id}`);
    }

    function processCards() {
        Object.keys(window.tStoreXHR).forEach((key) => {
            const xhrData = window.tStoreXHR[key];

            if (xhrData && xhrData.response) {
                try {
                    const store = JSON.parse(xhrData.response);
                    const products = store.products;

                    if (products && Array.isArray(products)) {
                        products.forEach((product) => {
                            const gallery = JSON.parse(product.gallery);
                            const videoLink = gallery.find(item => item.video && item.video.includes(""));

                            if (videoLink) {
                                const cards = document.querySelectorAll(`.uc-slider-run [data-product-gen-uid="${product.uid}"]`);
                                cards.forEach(card => {
                                    const imgWrapper = card.querySelector(".t-store__card__imgwrapper");
                                    const imageElement = card.querySelector(".js-product-img");

                                    if (imgWrapper && imageElement) {
                                        if (card.querySelector("video")) return; // Если видео уже вставлено, пропустить

                                        imageElement.style.display = "none";

                                        const videoElement = document.createElement("video");
                                        videoElement.src = videoLink.video;
                                        videoElement.autoplay = true;
                                        videoElement.muted = true;
                                        videoElement.loop = true;
                                        videoElement.playsInline = true;
                                        videoElement.style.cssText = `
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 100%;
                                            object-fit: contain;
                                            border-radius: 10px;
                                        `;
                                        imgWrapper.style.position = "relative";
                                        imgWrapper.appendChild(videoElement);
                                    }
                                });
                            }
                        });
                    }
                } catch (error) {
                    console.error("Ошибка обработки данных магазина:", error);
                }
            }
        });
    }

    function observeCatalogChanges() {
        document.querySelectorAll('.t-store').forEach(storeBlock => {
            const observer = new MutationObserver(() => {
                processCards();
            });

            observer.observe(storeBlock, { childList: true, subtree: true });
        });
    }

    function waitForElement(selector, callback) {
        const checkExist = setInterval(() => {
            if (document.querySelector(selector)) {
                clearInterval(checkExist);
                callback();
            }
        }, 50);
    }

    waitForElement('.t-store__card', function() {
        processCards();
        observeCatalogChanges();
    });
});

</script>
Вам также может быть интересно: