Как вывести свои иконки на товар в каталоге Tilda?

С помощью этой модификации можно создать свой набор иконок и выводить их в блок каталога. Вместо одной стандартной плашки в каждом товаре теперь можно выводить несколько иконок. Настраивается размер, расположение, отступ и количество иконок в строке. Дополнительно можно включить подсказку при наведении на иконку. Работает с блоками ST300, ST305N, ST310N, ST315N и ST320N.

Модификация работает с включенным Autoscale в блоках

Модификация работает только со стандартными блоками

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Ширина иконки

Высота иконки

Расстояние между иконками

Количество иконок в строке

Скругление углов

Расположение иконок

Подсказка при наведении

Настройки подсказки

Цвет текста

Цвет фона

Радиус углов

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<style> .ticode-icon-box-shop { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; } .ticode-icon-box-shop a { display: block; width: 45px; height: 45px; box-sizing: border-box; position: relative; } .t-store__card__mark-wrapper { left: 10px !important; bottom: auto; top: 10px !important; right: auto; } #ticode-icon-tooltip { position: absolute; display: none; background: #ffffff; color: #000000; padding: 6px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 99; font-family: Arial, sans-serif; } </style> <div id="ticode-icon-tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function () { const TCDshopcartsicn = document.getElementById("ticode-catalog-icons"); const TCDpaseisticn = JSON.parse(TCDshopcartsicn.getAttribute("TCDincons")); const TCDcarttooltip = document.getElementById("ticode-icon-tooltip"); function showTooltip(e, text) { TCDcarttooltip.textContent = text; TCDcarttooltip.style.display = "hidden"; const rect = e.currentTarget.getBoundingClientRect(); const tooltipRect = TCDcarttooltip.getBoundingClientRect(); const top = window.pageYOffset + rect.top - tooltipRect.height - 8; const left = window.pageXOffset + rect.left + (rect.width / 2) - (tooltipRect.width / 2); TCDcarttooltip.style.top = `${top}px`; TCDcarttooltip.style.left = `${left}px`; } function hideTooltip() { TCDcarttooltip.style.display = "none"; } function Ticodetildastaricn(card, index) { const TCDicnkWrapper = card.querySelector(".t-store__card__mark-wrapper"); if (!TCDicnkWrapper) return; const TCDicn = TCDicnkWrapper.querySelector(".t-store__card__mark"); if (!TCDicn) return; const text = TCDicn.textContent.trim(); if (!text.includes(",")) return; const PRtilda = text.split(",").map(p => p.trim()); TCDicnkWrapper.innerHTML = ""; const TildaTCDiconbox = document.createElement("div"); TildaTCDiconbox.classList.add("ticode-icon-box-shop"); PRtilda.forEach((partText) => { const TCDiconSrc = TCDpaseisticn[partText]; if (TCDiconSrc) { const TCDiconLink = document.createElement("a"); TCDiconLink.href = `#${partText}`; const tinewicons = document.createElement("img"); tinewicons.src = TCDiconSrc; tinewicons.alt = partText; tinewicons.width = 45; tinewicons.height = 45; tinewicons.style.borderRadius = '0px'; TCDiconLink.appendChild(tinewicons); TildaTCDiconbox.appendChild(TCDiconLink); TCDiconLink.addEventListener("mouseenter", (e) => showTooltip(e, partText)); TCDiconLink.addEventListener("mouseleave", hideTooltip); } }); const TCDnumberOfIcons = PRtilda.length; const totalWidth = (45 * Math.min(TCDnumberOfIcons, 3)) + (Math.min(TCDnumberOfIcons, 3) - 1) * 5; TildaTCDiconbox.style.width = `${totalWidth}px`; TCDicnkWrapper.appendChild(TildaTCDiconbox); } function Ticodestartcardicn() { document.querySelectorAll(".t-store__card").forEach(Ticodetildastaricn); } Ticodestartcardicn(); const TCDbsvicn = new MutationObserver((mutations) => { mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { if (node.nodeType === 1) { if (node.matches(".t-store__card")) { Ticodetildastaricn(node, "Newtildicn"); } else { node.querySelectorAll?.(".t-store__card").forEach((card, index) => Ticodetildastaricn(card, `Newtildicn ${index}`)); } } }); }); }); TCDbsvicn.observe(document.body, { childList: true, subtree: true }); }); </script> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

Список иконок (см. инструкцию)

<!-- Указываем название иконки и ссылку на иконку -->
<div id="ticode-catalog-icons" TCDincons='{
  "Название": "ссылка на иконку",
  "Название": "ссылка на иконку",
  "Название": "ссылка на иконку",
  "Название": "ссылка на иконку"
}'>
</div>

1. Создаем блок магазина и подключаем в него товары из каталога. Модификация поддерживает блоки ST300, ST305N, ST310N, ST315N и ST320N

2. Создаем HTML блок Т123, вставляем в него код из раздела "список иконок"

3. Настраиваем список иконок. Для этого указываем название и ссылку на иконку. Если нужно больше иконок, то дублируем строки(нее забываем ставить запятую в конце каждой строки кроме последней).

Иконки лучше всего грузить блок GL01(блок галереи), после чего нажимаем ПКМ по картинке и копируем ссылку, которую вставляем в Т123. Сам блок галереи скрываем кликнув в глаз(не удаляем).

4. В генераторе кода указываем дополнительные настройки:
Ширина и высота иконки - указываем размер иконки;
Расстояние между иконками - указываем отступ между иконками(число указывает вертикальный и горизонтальный отступ);
Количество иконок в строке - указываем количество иконок в одной строке. Если указали 1, то иконки будут отображаться в в виде столбца;
Скругление углов - указываем радиус скругления углов у иконок;
Расположение иконок - указываем расположение иконок в карточке каталога;
Подсказка при наведении - если включена, то при наведении на иконку будет показан текст который указывали в названии перед ссылкой. Дополнительно у подсказки можно настроить цвет, фон и радиус скругления углов;

5. Копируем код и вставляем снизу в тот же HTML блок T123 где вставляли список иконок.

6. Переходим в каталог товаров, нажимаем на любой товар и во вкладке "Отметка на карточке" указываем названия иконок через запятую, которые нужно выводить. Например: Острая, Без консервантов, Акция

Примечание! Модификация работает только с товарами которые загрузили в каталог. Если во вкладке "Отметка на карточке" указали название которого нет коде "список иконок", то такой текст просто не будет показан. Список иконок в любой момент можно править, добавляя новые строки или обновляя текущие. Все изменения сразу же будут подтягиваться в в блоки каталогов.