URL скопирован в буфер обмена!
Как показать остаток товара в каталоге Tilda
С помощью этой модификации можно вывести в каталоге Tilda остаток товара. Доступно несколько режимов отображения: числовой формат, процент от общего количества или текстовое описание. Дополнительно можно добавить шкалу остатка и настроить её внешний вид. Поддерживаются блоки: ST300, ST305N, ST310N, ST315N, ST320N.
Модификация работает с включенным Autoscale в блоках
Модификация работает только со стандартными блоками
Номер модификации в библиотеке TiCode
Id блока
Максимальное количество
Тип остатка
Размер текста
Выравнивание текста
Шкала остатка
Настройки текста
Тест перед количеством
Цвет текста
Настройки текста
Текст
Количество товара
Цвет текста
Текст
Количество товара
Цвет текста
Текст когда товар закончился
Цвет текста
Настройки шкалы
Позиция шкалы
Высота шкалы
Цвет фона шкалы
Цвет заполнения шкалы
Радиус скругления углов
Код для каталога
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD100--><script>
document.addEventListener("DOMContentLoaded", function () {
const TiCodeCatalog = "nrml";
const TCDidShop = document.querySelectorAll("#rec839686991");
if (TCDidShop.length === 0) return;
const TCDmax = 100;
const displayOrder = "counter-first";
function updateProduct(product) {
let TCDquantityAttr = product.getAttribute("data-product-inv");
let TCDamountshop = TCDquantityAttr ? parseInt(TCDquantityAttr, 10) : 0;
let Timds = product.getAttribute("data-inv-mode") || TiCodeCatalog;
if (TCDamountshop === null || isNaN(TCDamountshop)) {
return;
}
let TCDpercentage = Math.min((TCDamountshop / TCDmax) * 100, 100);
let TCDtitle = product.querySelector(".js-product-name");
let TiAmountText = product.querySelector(".inventory-info");
if (!TiAmountText) {
TiAmountText = document.createElement("div");
TiAmountText.className = "inventory-info";
TiAmountText.style.fontSize = "14px";
TiAmountText.style.marginTop = "2px";
TiAmountText.style.textAlign = "left";
TiAmountText.style.fontFamily = window.getComputedStyle(TCDtitle).fontFamily;
}
if (Timds === "txts") {
TCDProgBar.style.display = "none";
if (TCDamountshop === 0) {
TiAmountText.innerText = "Нет в наличии";
TiAmountText.style.color = "#000000";
} else if (TCDamountshop === 1) {
TiAmountText.innerText = "Осталось 1 шт";
TiAmountText.style.color = "#000000";
} else if (TCDamountshop <= 5) {
TiAmountText.innerText = "Заканчивается";
TiAmountText.style.color = "#000000";
} else {
TiAmountText.innerText = "";
TCDProgBar.style.display = "none";
}
} else {
TiAmountText.innerText = Timds === "prnt"
? `Осталось: ${TCDpercentage.toFixed(1)}%`
: `Осталось: ${TCDamountshop}`;
TiAmountText.style.color = "#000000";
}
let TCDProgBar = product.querySelector(".inventory-bar-container");
if (!TCDProgBar) {
TCDProgBar = document.createElement("div");
TCDProgBar.className = "inventory-bar-container";
TCDProgBar.style.position = "relative";
TCDProgBar.style.width = "100%";
TCDProgBar.style.height = "10px";
TCDProgBar.style.background = "#f7d5ce";
TCDProgBar.style.borderRadius = "5px";
TCDProgBar.style.marginTop = "5px";
TCDProgBar.style.marginBottom = "5px";
TCDProgBar.style.display = "none";
}
if (Timds === "txts") {
TCDProgBar.style.display = "none";
}
let progressBar = TCDProgBar.querySelector(".inventory-bar");
if (!progressBar) {
progressBar = document.createElement("div");
progressBar.className = "inventory-bar";
progressBar.style.height = "100%";
progressBar.style.background = "#F96855";
progressBar.style.borderRadius = "5px";
progressBar.style.transition = "width 0.5s";
TCDProgBar.appendChild(progressBar);
}
progressBar.style.width = `${TCDpercentage}%`;
if (TiAmountText.parentNode) {
TiAmountText.parentNode.removeChild(TiAmountText);
}
if (TCDProgBar.parentNode) {
TCDProgBar.parentNode.removeChild(TCDProgBar);
}
if (TCDtitle) {
if (displayOrder === "counter-first") {
TCDtitle.insertAdjacentElement("afterend", TCDProgBar);
TCDtitle.insertAdjacentElement("afterend", TiAmountText);
} else {
TCDtitle.insertAdjacentElement("afterend", TiAmountText);
TCDtitle.insertAdjacentElement("afterend", TCDProgBar);
}
} else {
let container = product.querySelector(".inventory-container");
if (!container) {
container = document.createElement("div");
container.className = "inventory-container";
product.appendChild(container);
}
container.innerHTML = "";
if (displayOrder === "counter-first") {
container.appendChild(TiAmountText);
container.appendChild(TCDProgBar);
} else {
container.appendChild(TCDProgBar);
container.appendChild(TiAmountText);
}
}
}
function TCDstartAmount() {
TCDidShop.forEach(targetBlock => {
const products = targetBlock.querySelectorAll(".js-product");
products.forEach(product => {
updateProduct(product);
});
});
}
TCDstartAmount();
TCDidShop.forEach(targetBlock => {
const shopobserver = new MutationObserver(mutationsList => {
mutationsList.forEach(mutation => {
if (mutation.type === "attributes" && mutation.attributeName === "data-product-inv") {
updateProduct(mutation.target);
}
});
});
shopobserver.observe(targetBlock, {
subtree: true,
attributes: true,
attributeFilter: ["data-product-inv"]
});
});
});
</script>
<style>
.t-store__card__sold-out-msg { display: none; }
</style>
<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>
Код для карточки товара
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD100--><script>
document.addEventListener("DOMContentLoaded", function () {
const TiCodeCatalog = "nrml";
const TCDidShop = document.querySelectorAll(".t-rec");
if (TCDidShop.length === 0) return;
const TCDmax = 100;
const displayOrder = "counter-first";
function updateProduct(product) {
let TCDquantityAttr = product.getAttribute("data-product-inv");
let TCDamountshop = TCDquantityAttr ? parseInt(TCDquantityAttr, 10) : 0;
let Timds = product.getAttribute("data-inv-mode") || TiCodeCatalog;
if (TCDamountshop === null || isNaN(TCDamountshop)) {
return;
}
let TCDpercentage = Math.min((TCDamountshop / TCDmax) * 100, 100);
let TCDtitle = product.querySelector(".js-product-name");
let TiAmountText = product.querySelector(".inventory-info");
if (!TiAmountText) {
TiAmountText = document.createElement("div");
TiAmountText.className = "inventory-info";
TiAmountText.style.fontSize = "14px";
TiAmountText.style.marginTop = "2px";
TiAmountText.style.textAlign = "left";
TiAmountText.style.fontFamily = window.getComputedStyle(TCDtitle).fontFamily;
}
if (Timds === "txts") {
if (TCDamountshop === 0) {
TiAmountText.innerText = "Нет в наличии";
TiAmountText.style.color = "#000000";
} else if (TCDamountshop === 1) {
TiAmountText.innerText = "Осталось 1 шт";
TiAmountText.style.color = "#000000";
} else if (TCDamountshop <= 5) {
TiAmountText.innerText = "Заканчивается";
TiAmountText.style.color = "#000000";
} else {
TiAmountText.innerText = "";
TCDProgBar.style.display = "none";
}
} else {
TiAmountText.innerText = Timds === "prnt"
? `Осталось: ${TCDpercentage.toFixed(1)}%`
: `Осталось: ${TCDamountshop}`;
TiAmountText.style.color = "#000000";
}
let TCDProgBar = product.querySelector(".inventory-bar-container");
if (!TCDProgBar) {
TCDProgBar = document.createElement("div");
TCDProgBar.className = "inventory-bar-container";
TCDProgBar.style.position = "relative";
TCDProgBar.style.width = "100%";
TCDProgBar.style.height = "10px";
TCDProgBar.style.background = "#f7d5ce";
TCDProgBar.style.borderRadius = "5px";
TCDProgBar.style.marginTop = "5px";
TCDProgBar.style.marginBottom = "5px";
TCDProgBar.style.display = "none";
}
if (Timds === "txts") {
TCDProgBar.style.display = "none";
}
let progressBar = TCDProgBar.querySelector(".inventory-bar");
if (!progressBar) {
progressBar = document.createElement("div");
progressBar.className = "inventory-bar";
progressBar.style.height = "100%";
progressBar.style.background = "#F96855";
progressBar.style.borderRadius = "5px";
progressBar.style.transition = "width 0.5s";
TCDProgBar.appendChild(progressBar);
}
progressBar.style.width = `${TCDpercentage}%`;
if (TiAmountText.parentNode) {
TiAmountText.parentNode.removeChild(TiAmountText);
}
if (TCDProgBar.parentNode) {
TCDProgBar.parentNode.removeChild(TCDProgBar);
}
if (TCDtitle) {
if (displayOrder === "counter-first") {
TCDtitle.insertAdjacentElement("afterend", TCDProgBar);
TCDtitle.insertAdjacentElement("afterend", TiAmountText);
} else {
TCDtitle.insertAdjacentElement("afterend", TiAmountText);
TCDtitle.insertAdjacentElement("afterend", TCDProgBar);
}
} else {
let container = product.querySelector(".inventory-container");
if (!container) {
container = document.createElement("div");
container.className = "inventory-container";
product.appendChild(container);
}
container.innerHTML = "";
if (displayOrder === "counter-first") {
container.appendChild(TiAmountText);
container.appendChild(TCDProgBar);
} else {
container.appendChild(TCDProgBar);
container.appendChild(TiAmountText);
}
}
}
function TCDstartAmount() {
TCDidShop.forEach(targetBlock => {
const products = targetBlock.querySelectorAll(".js-product");
products.forEach(product => {
updateProduct(product);
});
});
}
TCDstartAmount();
TCDidShop.forEach(targetBlock => {
const shopobserver = new MutationObserver(mutationsList => {
mutationsList.forEach(mutation => {
if (mutation.type === "attributes" && mutation.attributeName === "data-product-inv") {
updateProduct(mutation.target);
}
});
});
shopobserver.observe(targetBlock, {
subtree: true,
attributes: true,
attributeFilter: ["data-product-inv"]
});
});
});
</script>
<style>
.t-store__card__sold-out-msg { display: none; }
</style>
<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>
1. Добавляем на страницу блок магазина (модификация работает с блкоами ST300, ST305N, ST310N, ST315N и ST320N). Копируем id блока и вставляем в генератор в поле "Id блока". Если каталогов два или больше, то можно указать id через запятую в формате: #rec869530323, #rec869530324
2. Загружаем товары в каталог Tilda и указываем их количество в колонке "Кол-во". В генераторе в поле "Максимальное количество" указываем максимальное количество товара, которое может быть на складе. В каталоге тильда включаем галочку "показывать товар отдельной страницей".
3. Выбираем тип остатка:
Числовой – отображает точное количество оставшегося товара;
Процентный – показывает процентное соотношение остатка к максимальному количеству;
Текстовый -позволяет настроить отображение текста в зависимости от количества товара:
По умолчанию остаток не отображается.
Если на складе осталось 5 и меньше, показывается первый текст.
Если осталась 1 единица, отображается второй текст.
Если товар закончился, показывается третий текст.
Для первых двух текстовых вариантов можно настроить минимальное количество товара, при котором они будут отображаться. Дополнительно для каждого текста в этом режиме можно указать свой цвет.
Примечание! В это режиме не будет выводить шкалу даже она включена в настройках.
3. При необходимости указываем дополнительные настройки в генераторе:
Размер текста - указываем размер текста в пикселях. Учитывайте что размер одинаковый для десктоп и мобилок;
Выравнивание текста - можно указать расположение для текста (лево/право/центр);
Шкала остатка - если включена, то будет показывать визуальный индикатор в виде шкалы с заполнением. Работает только в числовом и процентном режиме;
Позиция шкалы - выбираем расположение шкалы;
Высота шкалы - указываем высоту шкалы в пикселях;
Цвет фона шкалы и Цвет заполнения - можно настроить цвет фона и заполнения;
Радиус скругления углов - указываем радиус округления углов. Если не нужно, то указываем 0;
4. Копируем первый код вставляем в HTML блок Т123 на страницу с каталогом. Блок T123 должен быть расположен ниже блоком каталога.
5. Копируем второй код для карточек товаров и вставляем в HTML блок Т123 на чистую страницу. Эту страницу назначаем в каталоге тильда футером. Публикуем страницу футера и потом освновную страницу с каталогом.
2. Загружаем товары в каталог Tilda и указываем их количество в колонке "Кол-во". В генераторе в поле "Максимальное количество" указываем максимальное количество товара, которое может быть на складе. В каталоге тильда включаем галочку "показывать товар отдельной страницей".
3. Выбираем тип остатка:
Числовой – отображает точное количество оставшегося товара;
Процентный – показывает процентное соотношение остатка к максимальному количеству;
Текстовый -позволяет настроить отображение текста в зависимости от количества товара:
По умолчанию остаток не отображается.
Если на складе осталось 5 и меньше, показывается первый текст.
Если осталась 1 единица, отображается второй текст.
Если товар закончился, показывается третий текст.
Для первых двух текстовых вариантов можно настроить минимальное количество товара, при котором они будут отображаться. Дополнительно для каждого текста в этом режиме можно указать свой цвет.
Примечание! В это режиме не будет выводить шкалу даже она включена в настройках.
3. При необходимости указываем дополнительные настройки в генераторе:
Размер текста - указываем размер текста в пикселях. Учитывайте что размер одинаковый для десктоп и мобилок;
Выравнивание текста - можно указать расположение для текста (лево/право/центр);
Шкала остатка - если включена, то будет показывать визуальный индикатор в виде шкалы с заполнением. Работает только в числовом и процентном режиме;
Позиция шкалы - выбираем расположение шкалы;
Высота шкалы - указываем высоту шкалы в пикселях;
Цвет фона шкалы и Цвет заполнения - можно настроить цвет фона и заполнения;
Радиус скругления углов - указываем радиус округления углов. Если не нужно, то указываем 0;
4. Копируем первый код вставляем в HTML блок Т123 на страницу с каталогом. Блок T123 должен быть расположен ниже блоком каталога.
5. Копируем второй код для карточек товаров и вставляем в HTML блок Т123 на чистую страницу. Эту страницу назначаем в каталоге тильда футером. Публикуем страницу футера и потом освновную страницу с каталогом.
