Пример работы

Добавляем отметки с иконкой на карточки товара

Модификатор добавляет отметки на карточках товара в виде загруженных иконок
Коллекция / Добавляем отметки с иконкой на карточки товара
1. Добавляем блок каталога товаров
2. В настройках блока переходим в раздел ОТМЕТКИ SALE / NEW и убираем цвет фона
3. В разделе "Товары" добавляем метки на товарах, это делается в пункте "ОТМЕТКА НА КАРТОЧКЕ"
4. Добавляем блок T123 и копируем в него код
Скопировать код
5. В коде заменяем ссылки на изображения и корректируем названия sale и star на ваши
<!-- SH10 - Модификация для Тильды. Добавляем отметки с иконкой на карточки товара https://mod.tistols.com/icon-mark -->
<style>
    .t-store__card__mark {
        display: flex;
        gap: 0px;
        width:80px;
        height: 40px;
        background-color:transparent;
        padding: 0;
        justify-content: flex-end;
    }
    .t-store__card__mark-wrapper{
        right:px;
    }
    @maedia screen and (max-width:680px){
        .t-store__card__mark {
            width:50px;
        height: 25px;
        }
    }
</style>
<script>
$(function(){
    var catTimer = setInterval(function(){
        var cards = $('.js-product');
        
        // Проверяем наличие карточек
        if(cards.length > 1){
            clearInterval(catTimer);
            console.log(cards.length);
            
            cards.each(function(){
                // Находим элемент info
                var info = $(this).find('.t-store__card__mark');
                var info_txt = info.text().trim(); // Получаем текст и убираем пробелы
                var marks = info_txt.split(','); // Разделяем текст на массив по запятой
                
                console.log(marks.length);

                // Очищаем info перед вставкой значков
                info.empty();

                // Проверяем содержимое массива marks
                marks.forEach(function(mark) {
                    mark = mark.trim(); // Убираем пробелы для каждого элемента
                    
                    // Добавляем значки по мере нахождения значений
                    if(mark === 'sale') {
                        info.append('<img src="https://static.tildacdn.com/tild6232-6134-4139-b461-343434393063/Frame_21834.svg" alt="sale">'); // Иконка для sale
                    }
                    if(mark === 'star') {
                        info.append('<img src="https://static.tildacdn.com/tild6536-3032-4334-b135-373964326661/Frame_21833.svg" alt="star">'); // Иконка для star
                    }
                });
            });
        }
    }, 1000);
});

</script>
Добавьте шаблон страницы к себе в проект.
  1. Нажмите на кнопку "Создать новую страницу"
  2. Пролистайте до конца
  3. В "Указать ID страницы" напишите номер 58970027
Вам также может быть интересно:
НОВЫЙ
Club
  • Все преимущества тарифа Pro

  • Модуль smsmod.ru для 1 сайта на 1 год

  • Сертификат на разработку 1 модификации

  • Доступ в клубный чат, в котором:

  • Помогаем с доработкой модификаций под ваш проект

  • Общаемся и делимся опытом, рекомендациями
1 500 руб.
/ месяц
При оплате на год, вы:
экономите 12 000 ₽
-40%
Месяц
Год
Free
  • Доступ к коду бесплатных модификаций

  • Пошаговые видеоинструкции

  • Готовые шаблоны с бесплатными модификациями

  • Обновления библиотеки (1−3 модификации в месяц)

  • Оповещения о новых модификациях
Бесплатный тариф
Pro
  • Полный доступ к коду всех модификаций

  • Обновления библиотеки (от 5 модификаций в месяц)

  • Поддержка работы модификаций при изменениях в Tilda

  • Пошаговые видеоинструкции

  • Готовые шаблоны с модификациями

  • Оповещения о новых модификациях

  • Техподдержка в чате

  • -30% скидка на модуль smsmod.ru
250 руб.
/ месяц
При оплате на год, вы:
экономите 3 000 ₽
-50%
Месяц
Год
*Модификации будут работать в проектах после истечения подписки
Тарифы
Чтобы получить доступ, выберите тариф:
Free
  • Доступ к коду бесплатных модификаций

  • Пошаговые видеоинструкции

  • Готовые шаблоны с бесплатными модификациями

  • Обновления библиотеки (1−3 модификации в месяц)

  • Оповещения о новых модификациях
Бесплатный тариф
НОВЫЙ
Club
  • Все преимущества тарифа Pro

  • Модуль smsmod.ru для 1 сайта на 1 месяц

  • Сертификат на разработку 1 модификации

  • Доступ в клубный чат, в котором:

  • Помогаем с доработкой модификаций под ваш проект

  • Общаемся и делимся опытом, рекомендациями
2 500 руб.
/ месяц
Месяц
Год
*Модификации будут работать в проектах после истечения подписки
Тарифы
Чтобы получить доступ, выберите тариф:
Pro
  • Полный доступ к коду всех модификаций

  • Обновления библиотеки (от 5 модификаций в месяц)

  • Поддержка работы модификаций при изменениях в Tilda

  • Пошаговые видеоинструкции

  • Готовые шаблоны с модификациями

  • Оповещения о новых модификациях

  • Техподдержка в чате

  • -30% скидка на модуль smsmod.ru
500 руб.
/ месяц
Месяц
Год