Показываем случайные товары в каталоге ST305N

Модификатор выводит несколько случайных товаров из подключенного каталога
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
43869577
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
Добавляем блок T123 и копируем в него код
  1. На 8 строке кода заменяем кол-во товаров для вывода
1 шаг
Скопировать код
Блоку с каталогом
2 шаг
  1. Задаём класс uc-also
<!--SH13 - Модификация для Тильды. Показываем случайные товары в каталоге ST305N https://mod.tistols.com/also -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const ucAlsoBlock = document.querySelector('.uc-also'); // Ищем блок с классом .uc-also
    if (ucAlsoBlock) { 
        console.log("Старт работы скрипта");

        const visibleItemsCount = 3; // тут задаем кол-во товаров которое должно показываться

        function waitForProducts(callback) {
            const observer = new MutationObserver(() => {
                const allProducts = ucAlsoBlock.querySelectorAll('.t-store__card');
                if (allProducts.length > 0) {
                    observer.disconnect();
                    callback(allProducts);
                }
            });

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

        function shuffleAndShowVisibleItems(allProducts) {
            const shuffled = Array.from(allProducts);
            shuffled.sort(() => Math.random() - 0.5);

            const parentContainer = allProducts[0].parentElement;

            shuffled.forEach(product => {
                parentContainer.appendChild(product);
            });

            allProducts.forEach(product => product.style.display = 'none');

            shuffled.slice(0, visibleItemsCount).forEach(product => {
                product.style.display = 'block';
            });
        }

        waitForProducts(function (allProducts) {
            setTimeout(() => {
                shuffleAndShowVisibleItems(allProducts);
            }, 1000);
        });
    }
});
</script>
Вам также может быть интересно: