JS на Tilda: арифметика и безопасное преобразование текста в числа

Содержание

К чему такой простой вопрос затронут? А все элементарно, часто при работе с расчетом скидок и промокодов для своих кастомных решений, например вот здесь https://webvova.ru/blog/tilda/promokod_na_opredelennyj_tovar_tilda/ сталкивался с некорректным получением чисел из строк или из самих чисел

Напомню, что в JS чтобы текст преобразовать в число нужно сделать следующее

//создаем две переменные
let myText1 = 4567
let myText2 = 123.20
    
let myNumber1 = parseInt(myText1)
console.log(typeof(myNumber1))
console.log(myNumber1)
let myNumber2 = parseFloat(myText2)
console.log(typeof(myNumber2))
console.log(myNumber2)

Получается использую parseInt() — преобразование в целое число, parseFloat() — преобразование в число с плавающей запятой. Есть еще Number() он тоже будет ниже рассматриваться.

На выходе для кода выше получим вот такой лог:

number
4567
number
123.2

Это нам говорит о том, что первая и вторая переменная однозначно стали числами. Но первая как целое число, а второе с числами после запятой. И вот здесь кроется часто БОЛЬШАЯ проблема

Нюансы при работе с корзиной

Теперь от простой теории, перейдем к нюансам, допустим вы разместили код, который при открытии корзины получает все товары в корзине, а также основной расчет

<script>
let isCartOpen = false; // Флаг для отслеживания состояния корзины

document.addEventListener('DOMContentLoaded', (event) => {
    check_open_cart_tovar_p();    
});    

    
//ФУНКЦИЯ ПРОВЕРКИ ОТКРЫТИЯ КОРЗИНЫ
function check_open_cart(){
    console.log(tcart);
};   


//Запуск функции при открытии корзины, любой
function check_open_cart_tovar_p(){
    let timer_cart_check_p;
    // Наблюдатель за изменением классов на <body> (для открытия корзины)
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === "attributes") {
                const bodyClass = document.body.getAttribute("class");

                // Если корзина открыта и еще не обработана
                if (
                    bodyClass &&
                    (bodyClass.includes("t706__body_cartsidebarshowed") ||
                        bodyClass.includes("t706__body_cartwinshowed") ||
                        bodyClass.includes("t706__body_cartpageshowed"))
                ) {
                    if (!isCartOpen) {
                        isCartOpen = true; // Устанавливаем флаг корзины
                        //console.log("Корзина открыта");
                        
                        //ЗАПУСКАЕМ ФУНКЦИЮ ПРОВЕРКИ товаров в корзине каждую 200 = 0.2 сек
                        timer_cart_check_p = setInterval(check_open_cart, 200);

                    }
                } else {
                    isCartOpen = false; // Сбрасываем флаг при закрытии корзины
                    clearInterval(timer_cart_check_p);
                }
            }
        });
    });

    // Наблюдаем за изменением атрибутов в <body>
    observer.observe(document.body, { attributes: true });
}
</script>

Мы в логах получаем все товары и расчет стоимостей. Если никаких промокодов не применено, то все читается довольно просто

Мы видим что есть какие — то цифры или это текстовые значения, поэтому когда вы корректируете тильдовские переменные корзины, ВСЕГДА преобразуйте значение своих расчетов к числу, чтобы не было ошибок.

Следующий нюанс. Я часто сталкиваюсь со скидками, которые дают очень странное поведение итоговой суммы в корзине. Причем это следствие работы самой Тильды. Вот смотрите

Часто нужно сделать промокоды на подарок, я прописываю для него скидку 1 рубль, и что мы видим? А видим полную фигню. Вместо 1 рубля скидки, стало при определенных условиях 0.99 рублей, а стоимосить в итоге не 27869, а 27869.01. Плачевно это все, покупатель в итоге ничего не оплачивает, так как думает что тут какая — то ошибка. Причем это просто пример, который можно повторить прям за пару секунд, а бывают еще страшнее ситуации и без промокодов даже.

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

Как я поступаю, если делаю промокоды на подарок или свои расчеты:

— Я подменяю значение 1 рубля на 0, через обращение к объекту корзины и далее к вложенному объекту tcart.promocode и далее делаю перерасчет своими руками всей корзины.

— Либо я отбрасываю знаки после запятой через JS toFixed(0) для косячных значений;

<script>
document.addEventListener("DOMContentLoaded" , (event) => {
    //создаем переменную
    let myText2 = 123.20
    
    //отбрасываем после запятой все знаки + конвертируем в число через Number
    myNumber2 = Number(myNumber2.toFixed(0))
    console.log(typeof(myNumber2))
    console.log(myNumber2)

});    
</script>

Что выдает

— Либо я просто округляю через Math.round те же косячные значения:

<script>
document.addEventListener("DOMContentLoaded" , (event) => {
    //либо просто округляем до целого
    let myText3 = 123.20
    let myNumber3 = parseFloat(myText3)
    myNumber3 = Math.round(myNumber3)
    console.log(typeof(myNumber3))
    console.log(myNumber3)
});    
</script>

Что выдает

В общем принцип понятен, что нужно внимательно относиться к расчетам. Числа должны быть числами, внешний вид чисел не должен пугать людей:-)

Простая арифметика

В плане арифметических операций, то тут все по классике укажу самые распространенные:

+ Оператор сложения возвращает сумму числовых операндов или объединяет строки

— Оператор вычитания

* Оператор умножения

/ Оператор деления

Вывод

Самое важное будьте внимательны с чем вы работаете. Если ведете расчеты то обязательно переводите текст в числа, иначе потом может случиться непредвиденное поведение кода при выводе в корзине Тильды или где — либо еще.

Пример кода можете поглядеть здесь Материалы к 4 уроку

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

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

Нюансы при работе с корзиной

Простая арифметика

Вывод

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

Еще материалы

Добавить комментарий Отменить ответ

4 Арифметические операции и нюансы преобразований текста в числа и наоборот JS Tilda

Нюансы при работе с корзиной

Простая арифметика

Вывод

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

Еще материалы

Добавить комментарий Отменить ответ