5 Условие if \ else в JavaScript + Tilda

Очень часто при написании JS в Тильде приходится использовать условия и тем самым делать ветвление кода в зависимости от полученных значений. Например одним из таких решений где пришлось делать много проверок это Добавить дополнительные товары в корзине Tilda при добавлении основного товара. Тут без них, никуда.

Главным оператором для созданий условий проверок чего либо является if и его вариация if else.

Синтаксис if \ if else

Для if:

if ( условие )
{
  //код выполняется, если условие истинно
}

Для if else:

if ( условие )
{
  //выполняется, если условие истинно

}
else
{
  //выполняется, если условие ложно

}

Для else if:

if ( условие )
{
  //выполняется, если условие истинно
}
else if ( условие )
{
 //выполняется, если условие истинно
}
else if ( условие )
{
 //выполняется, если условие истинно
}
else
{
 //выполняется, если условие ложно
}

Как применяю в Тильде

На самом деле для Тильды каких-то особых нюансов применения и нет. Все как и везде. Однако ниже я покажу различные варианты, которые могут лично вам пригодиться.

В примере ниже, при открытии корзины тильды я проверяю активирован промокод или нет. Причем данная проверка выполняется каждые 200 мс. Благодаря этому можно легко выполнять нужный участок кода в зависимости от действий человека, так как скорость проверки высокая и действия выполняются почти моментально.

document.addEventListener('DOMContentLoaded', (event) => {
    //при загрузке страницы запускаем функцию проверки открытия корзины
    web4lifeCheckOpenCart();
})

//глобальная переменная - флаг
let web4lifCartIsOpen = false;

//функция проверки открытия корзины и там же проверяем каждые 200 мс активирован промокод или нет
function web4lifeCheckOpenCart(){
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(({ type }) => {
            if (type === "attributes") {
                const bodyClass = document.body.getAttribute("class") || "";
                const isCartVisible = bodyClass.includes("t706__body_cartsidebarshowed") ||
                    bodyClass.includes("t706__body_cartwinshowed") ||
                    bodyClass.includes("t706__body_cartpageshowed");
                if (isCartVisible && !web4lifeCheckOpenCart) {
                  //Корзина открыта
		  web4lifCartIsOpen = true;
                  //определяем активирован ли промокод или нет
                  let web4lifeTimerCartCheck = setInterval(web4lifeCheckActivation, 200);
                } else if (!isCartVisible && web4lifeCheckOpenCart) {
                  //корзина закрыта
                }
            }
        });
    });
    observer.observe(document.body, { attributes: true });
};


//функция проверки активации промокода
function web4lifeCheckActivation(){
    //определяем существует ли промокод
    if (typeof tcart.promocode !== "undefined") {
      //промокод активирован, выполняем нужный код
    } else {
      //промокод не активирован, выполняем другой нудный код
    }
};

Здесь в примере использованы разные варианты if \ else \ else if, а также вложенные условия.

Почему приходиться так заморачиваться, ответ прост, зачастую такой формат записи позволяет проще читать то что написано. Однако, когда уровней вложенности становится очень много, то стоит рассмотреть другие варианты использования условий

Тернарный оператор — «короткая форма» if … else

Тернарный оператор (?:) — это выражение, которое в одну строку делает то же самое, что и обычная конструкция if … else.

Называется он тернарным, потому что использует три операнда:

условие ? выражение_если_истина : выражение_если_ложь

• условие — любое выражение, которое приводится к true или false.
• выражение_если_истина — выполняется и возвращается, когда условие истинно.
• выражение_если_ложь — выполняется и возвращается, когда условие ложно.

Тернарник всегда возвращает значение, поэтому его можно сразу присвоить переменной, передать в функцию или вернуть из другой функции.

Базовое сравнение с if … else

// Обычный if … else 
let color; 
if (isActive) 
{ 
  color = 'green'; 
} else { 
  color = 'red'; 
} 

// То же самое через тернарный оператор 
const color = isActive ? 'green' : 'red';

• Короче: меньше строк кода.
• Форма выражения: можно использовать в любом месте, где допустимо выражение (например, внутри JSX или аргумента функции).
• Однозначность: хорошо читается, пока оба варианта простые.

Пример из «тильдовского» кода

Вместо длинного if … else внутри функции web4lifeCheckActivation:

function web4lifeCheckActivation() { 
  if (typeof tcart.promocode !== 'undefined') { 
    // промокод активирован applyDiscount(); 
  } else { 
    // промокод не активирован removeDiscount(); 
  } 
}

можно написать короче:

function web4lifeCheckActivation() { 
  typeof tcart?.promocode !== 'undefined' ? applyDiscount() // промокод активен : removeDiscount(); // промокод не активен 
}

Когда тернарник удобен

Подходит	Лучше оставить if … else
Простое двуличное ветвление («да / нет», «on / off»).	Сложная логика, несколько инструкций в каждой ветке.
Присвоения, возвраты, одно-два коротких вызова.	Несколько else if, вложенные условия, побочные эффекты.
Вставка значения прямо в JSX/HTML строку.	Нужно отладить пошагово или добавить console.log.

Советы по стилю

Длина. Не растягивайте обе ветки на много выражений. Если читаемость падает — вернитесь к if … else.

Скобки. Добавляйте круглые скобки, когда тернарник стоит рядом с другими операциями, чтобы избежать путаницы с приоритетом: jsКопироватьРедактироватьconst total = price * (hasPromo ? 0.8 : 1);

Не злоупотребляйте вложенными тернарниками. С каждым уровнем вложенности код становится хуже читаемым: // Плохо: сразу трудно понять, что происходит const status = isPaid ? 'paid' : isPending ? 'pending' : 'new'; Замените на обычный if … else if, когда вариантов больше двух.

Вывод

Тернарный оператор — отличный способ сократить одно простое условие.
Используйте его для коротких присвоений, возвратов или инлайнового вывода, но переходите к обычному if … else, как только логика перестаёт умещаться в одну-две лаконичные ветки.

Как со мной связаться

Если вы не нашли для себя ответ в моих статьях или у вас есть задача, присылайте ваше ТЗ задание под ваш проект.
Пишите https://t.me/vbalakin буду рад помочь с доработкой.