Показывать в каталоге второе изображение по умолчанию, если имеется

Бывают такие случаи, когда проще провзаимодействовать с чем-то кодом, нежели вручную переделывать кучу одинаковых эелементов. Так, например, когда у вас много товаров и хочется везде показывать второе изображение вместо первого, проще воспользоваться скриптом. Также это может быть нужно, когда подобное хочется проделать только на десктопе или только на мобильных устройствах (где, по сути, нет функции наведения для просмотра второго изображения).

Учтите, что скрипт не меняет изображения местами, он скрывает первое изображение и отображает второе для выбранных настроек. И ещё важно понимать, что он будет работать для всех каталогов, размещенных на одной странице со скриптом. Если хотите, чтобы скрипт применялся ко всему сайту, разместите его в футере сайта.

Инструкция:

Включите в настройках каталога функцию «Показывать второе изображение при наведении».
Выберите в форме ниже, где у вас сделаны товары: в каталоге или в блоке магазина.
Также выберите, для каких устройств хотите применять скрипт.
Скопируйте полученный код и вставьте его в блок T123. Сам блок с кодом разместите под блоком каталога или в футере сайта.

<!-- Показывать в каталоге второе изображение по умолчанию, если имеется | https://necodim.ru/tilda/catalog-second-image -->

<script>
const catalogs = document.querySelectorAll('.js-store-grid-cont');
catalogs.forEach(catalog => {
  catalog.addEventListener('tStoreRendered',() => {
        let products = document.querySelectorAll('.js-product');
        products.forEach(product => {
            let images = product.querySelectorAll('.t-bgimg');
            if (images.length > 1) {
                images[0].style.opacity = 0;
                images[1].style.opacity = 1;
            }
        });
  });
});
</script>

Скопировать код

Пример работы модификации

Два изображения есть только у последнего товара («Свитшот»). На десктопе всё работает стандартно, а если посмотрите со смартфона, то увидите сразу второе изображение (свитшот со спины, где написано «Некодим»).