Loading...

Как сделать свои метки, условные обозначения, иконки на товаре?

Модификация вставляет в карточку товара ТРИ иконки. Можно редактировать размеры, расстояние и положение по горизонтали или вертикали.
Время настройки: 5 минут
Генератор кода
Видео инструкция
Пример
Инструкция
Модификация работает с блоками: ST300, ST305, ST310, ST315, ST320
Максимальное количество иконок: 30

Важно: код для модификации нужно продублировать в футер для товаров. Тогда если добавлены товары в "Смотрите также" то модификация будет работать и там.

1. Вставь галерею GL12 и загрузи свои иконки в нее, удалив все стандартные фотки из нее, просто чтоб не мешали.

2. В генераторе укажи нужные настройки для Планшета и Пк: Отступы от краёв, направление, ширина, высота, отступы между иконками;

3. Тоже самое можешь проделать для мобильной версии;

4. Напиши название иконки и вставь ссылку, ссылку нужной иконки ты можешь копировать из галереи GL12;

5. Нажимая на кнопку "+ Добавить метку" появится еще поля для новой иконки, таким образом ты можешь загрузить максимум 30 разных иконок;

6. Копируй сгенерированный HTML код и вставь его в блок Т123;

7. Скрой галерею GL12 и опубликуй страницу;

8. Открой товар, в котором нужно указать иконки, в поле "ОТМЕТКА НА КАРТОЧКЕ (НАПРИМЕР: SALE, NEW, -30%) напиши название иконки через запятую. Перед запятой и после не должно быть пробела, пример: "Острое,Скидка,Новинка" и сохрани изменения.


На Мобильник, Планшет и Пк
Отступ от верхнего края (px)
Отступ от правого края (px)
Направление отображения
Ширина иконки (px)
Высота иконки (px)
Отступы между иконок (px)
Отступ от верхней границы (px)
Отступ от правого края (px)
Направление отображения
Ширина иконки (px)
Высота иконки (px)
Отступы между иконок (px)
Метки
Название иконки
Ссылка на изображение
Копировать код<!-- Как сделать свои метки, условные обозначения, иконки на ТОВАРЕ? -->
<!-- https://nolim.cc/svoi-uslovnyye-oboznacheniya-ikonki-na-tovare -->
<script> function createmarks(str){ var nlkeys = ['отметка']; var nlimgs = ['https://static.tildacdn.com/tild6564-3033-4132-b830-343465656335/Frame_15.svg']; str = str.split(','); var s = ''; s += '<div class="nl_marwrapper">'; for(let i = 0; i < 3; i++){ for(let ins = 0; ins < nlkeys.length; ins++){ if(str[i] == nlkeys[ins]){ s += '<div class="nl_markimg" title="'+nlkeys[ins]+'" style="background-image:url(' + nlimgs[ins] + ')"' + ">"; s += "</div>"; } } } s += "</div>"; return s; } function t_store_get_productCard_mark_html2(t, e) { if (!t.mark) return ""; var r = ""; r += e.markColor ? "color:" + e.markColor + ";" : "", r += e.markBgColor ? "background-color:" + e.markBgColor + ";" : ""; var o = r ? 'style="' + r + '"' : "" , s = ""; s = createmarks(t.mark); return s } $(window).on("load", function() { setTimeout(function() { for (let i = 0; i < $('.t-store__card__mark-wrapper').length; i++) { let valstr = $('.t-store__card__mark-wrapper').eq(i).text().replace(/\s/g, ''); $('.t-store__card__mark-wrapper').eq(i).before(createmarks(valstr)); } t_store_get_productCard_mark_html = t_store_get_productCard_mark_html2; },700); }); </script> <style> .nl_markimg { background-size: cover; width: 40px; height: 40px; margin-right: 5px; display: inline-block; } .nl_marwrapper { position: absolute; right: 10px; top: 10px; z-index: 5; display: table; } @media screen and (max-width: 640px) { .nl_markimg { width: 40px; height: 40px; margin-right: 0px; display: inline-block; } .nl_marwrapper { right: 10px; top: 10px; } }   .t-store__card__mark-wrapper { display: none!important; }</style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda