URL скопирован в буфер обмена!
Как вывести свои иконки на товар в каталоге Tilda?
С помощью этой модификации можно создать свой набор иконок и выводить их в блок каталога. Вместо одной стандартной плашки в каждом товаре теперь можно выводить несколько иконок. Настраивается размер, расположение, отступ и количество иконок в строке. Дополнительно можно включить подсказку при наведении на иконку. Работает с блоками ST300, ST305N, ST310N, ST315N и ST320N.
Модификация работает с включенным Autoscale в блоках
Модификация работает только со стандартными блоками
Номер модификации в библиотеке TiCode
Ширина иконки
Высота иконки
Расстояние между иконками
Количество иконок в строке
Скругление углов
Расположение иконок
Подсказка при наведении
Настройки подсказки
Цвет текста
Цвет фона
Радиус углов
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD000--><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. Переходим в каталог товаров, нажимаем на любой товар и во вкладке "Отметка на карточке" указываем названия иконок через запятую, которые нужно выводить. Например: Острая, Без консервантов, Акция
Примечание! Модификация работает только с товарами которые загрузили в каталог. Если во вкладке "Отметка на карточке" указали название которого нет коде "список иконок", то такой текст просто не будет показан. Список иконок в любой момент можно править, добавляя новые строки или обновляя текущие. Все изменения сразу же будут подтягиваться в в блоки каталогов.
2. Создаем HTML блок Т123, вставляем в него код из раздела "список иконок"
3. Настраиваем список иконок. Для этого указываем название и ссылку на иконку. Если нужно больше иконок, то дублируем строки(нее забываем ставить запятую в конце каждой строки кроме последней).
Иконки лучше всего грузить блок GL01(блок галереи), после чего нажимаем ПКМ по картинке и копируем ссылку, которую вставляем в Т123. Сам блок галереи скрываем кликнув в глаз(не удаляем).
4. В генераторе кода указываем дополнительные настройки:
Ширина и высота иконки - указываем размер иконки;
Расстояние между иконками - указываем отступ между иконками(число указывает вертикальный и горизонтальный отступ);
Количество иконок в строке - указываем количество иконок в одной строке. Если указали 1, то иконки будут отображаться в в виде столбца;
Скругление углов - указываем радиус скругления углов у иконок;
Расположение иконок - указываем расположение иконок в карточке каталога;
Подсказка при наведении - если включена, то при наведении на иконку будет показан текст который указывали в названии перед ссылкой. Дополнительно у подсказки можно настроить цвет, фон и радиус скругления углов;
5. Копируем код и вставляем снизу в тот же HTML блок T123 где вставляли список иконок.
6. Переходим в каталог товаров, нажимаем на любой товар и во вкладке "Отметка на карточке" указываем названия иконок через запятую, которые нужно выводить. Например: Острая, Без консервантов, Акция
Примечание! Модификация работает только с товарами которые загрузили в каталог. Если во вкладке "Отметка на карточке" указали название которого нет коде "список иконок", то такой текст просто не будет показан. Список иконок в любой момент можно править, добавляя новые строки или обновляя текущие. Все изменения сразу же будут подтягиваться в в блоки каталогов.
