Как создать калькулятор стоимости подписки с изменяемыми параметрами на JavaScript

199
Время чтения: 40 мин
Сохранить статью:

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


Что такое калькулятор на сайте?

Калькулятор на сайте — это инструмент, который позволяет пользователям быстро рассчитывать стоимость услуги или продукта, изменяя заданные параметры. Такие инструменты часто используются для:

  • Расчета стоимости аренды.
  • Определения затрат на подписку.
  • Выбора тарифного плана.

Измененные параметры калькулятора

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

  1. Размер помещения: от 10 м² до 2000 м² (шаг 10).
  2. Срок подписки: 1, 3, 6 или 12 месяцев.
  3. Тип услуги: стандартный или премиальный пакет.

HTML: Основная структура калькулятора

HTML-код отвечает за основу калькулятора. Вот его обновленная версия с новыми параметрами:

<section class="subscription-calc">
    <div class="calc-container">
        <div class="calc-wrapper calc-preview">

            <div class="calc-title">
                <span class="decor">Рассчитайте стоимость подписки </span>
                <br> для вашего помещения
            </div>

            <!-- Ползунок: Размер помещения -->
            <div class="calc-form-group">
                <label class="calc-form-title" for="calc-area">
                    <span>Размер помещения</span>
                    <span class="number"><span id="areaValue">10</span> м<sup>2</sup></span>
                </label>
                <input class="calc-range" type="range" id="calc-area" min="10" max="2000" value="10" step="10">
            </div>

            <!-- Ползунок: Срок подписки -->
            <div class="calc-form-group">
                <label class="calc-form-title" for="calc-duration">
                    <span>Срок подписки</span>
                    <span class="number" id="durationValue">1 месяц</span>
                </label>
                <input class="calc-range" type="range" id="calc-duration" min="1" max="12" value="1" step="1">
            </div>

            <!-- Кнопки: Тип услуги -->
            <div class="calc-form-group">
                <label class="calc-form-title">Тип услуги</label>
                <div id="calc-service" class="service-buttons">
                    <button type="button" class="service-button" data-value="standard">Стандартный</button>
                    <button type="button" class="service-button" data-value="premium">Премиум</button>
                </div>
            </div>

            <!-- Результат -->
            <div class="calc-result" id="calc-result">
                <div class="calc-result-wrapper">
                    <span>Итоговая стоимость:</span>
                    <span class="number-result"><span id="priceValue">0</span> ₽</span>
                </div>
            </div>

            <!-- Кнопка скидки -->
            <div class="discount-btn">Получить скидку</div>
        </div>
    </div>
</section>

CSS: Стилизация калькулятора

Добавим стили, чтобы интерфейс выглядел современно и удобно.

.calc-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.calc-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.calc-form-group {
    margin-bottom: 20px;
}

.calc-form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-bottom: 10px;
}

.calc-range {
    width: 100%;
}

.service-buttons {
    display: flex;
    gap: 10px;
}

.service-button {
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.service-button.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.calc-result {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

.discount-btn {
    display: block;
    margin: 20px auto 0;
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}

JavaScript: Логика работы калькулятора

Добавим интерактивность и расчеты.

document.addEventListener('DOMContentLoaded', function () {
    let selectedService = 'standard'; // Значение по умолчанию

    const pricing = {
        standard: [
            [5000, 9000, 15000],
            [8000, 14000, 24000],
            [12000, 21000, 36000],
            [16000, 28000, 48000]
        ],
        premium: [
            [8000, 14000, 24000],
            [12000, 21000, 36000],
            [18000, 31500, 54000],
            [24000, 42000, 72000]
        ]
    };

    function calculatePrice() {
        const area = parseInt(document.getElementById('calc-area').value);
        const duration = parseInt(document.getElementById('calc-duration').value);
        const areaIndex = area <= 500 ? 0 : area <= 1000 ? 1 : area <= 1500 ? 2 : 3;
        const durationIndex = duration <= 3 ? 0 : duration <= 6 ? 1 : 2;
        const price = pricing[selectedService][areaIndex][durationIndex];
        document.getElementById('priceValue').textContent = price.toLocaleString('ru-RU');
    }

    document.getElementById('calc-area').addEventListener('input', function () {
        document.getElementById('areaValue').textContent = this.value;
        calculatePrice();
    });

    document.getElementById('calc-duration').addEventListener('input', function () {
        document.getElementById('durationValue').textContent = `${this.value} ${this.value === '1' ? 'месяц' : 'месяца'}`;
        calculatePrice();
    });

    document.querySelectorAll('.service-button').forEach(button => {
        button.addEventListener('click', function () {
            selectedService = this.getAttribute('data-value');
            document.querySelectorAll('.service-button').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            calculatePrice();
        });
    });

    calculatePrice();
});

Подробное объяснение логики

1. Событие DOMContentLoaded

Этот код устанавливает обработчик события, который срабатывает, когда весь HTML-документ был полностью загружен и разобран. Это гарантирует, что все элементы, к которым мы будем обращаться в коде, уже существуют на странице.

2. Переменные и объект pricing
  • selectedService — переменная, которая хранит выбранный тип услуги (по умолчанию это ‘standard’).
  • pricing — объект, который содержит цены для двух типов услуг: standard и premium. Каждая услуга имеет массив массивов, где каждый внутренний массив соответствует ценам для различных диапазонов площади и продолжительности.
3. Функция calculatePrice
  • Эта функция вычисляет цену на основе введенной площади и продолжительности.
  • area и duration — значения, введенные пользователем.
  • areaIndex и durationIndex — индексы, которые определяют, в каком диапазоне находится площадь и продолжительность. Это делается с помощью условных операторов.
  • price — цена, полученная из объекта pricing на основе выбранной услуги, индекса площади и индекса продолжительности.
  • Наконец, цена отображается в элементе с id priceValue, форматируя ее в соответствии с русским стандартом (разделение тысяч).
4. Обработчики событий для ввода
  • Эти обработчики событий срабатывают при вводе данных в поля для площади и продолжительности.
  • При каждом вводе обновляется текст в элементах areaValue и durationValue, а также вызывается функция calculatePrice, чтобы пересчитать цену.
5. Обработчик событий для выбора услуги
  • Этот код добавляет обработчик событий для всех кнопок с классом service-button.
  • При нажатии на кнопку обновляется переменная selectedService на значение, указанное в атрибуте data-value кнопки.
  • Все кнопки получают класс active, чтобы визуально выделить выбранную.
  • После изменения услуги снова вызывается функция calculatePrice, чтобы обновить цену.
6. Первоначальный расчет цены
  • В конце кода вызывается calculatePrice, чтобы сразу же отобразить цену при загрузке страницы, основываясь на значениях по умолчанию.

Итоги

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

Подобный инструмент улучшает конверсию и помогает пользователю быстрее принять решение, а благодаря SEO-оптимизации вы сможете привлечь больше целевой аудитории.

Если вам нужно интегрировать такой калькулятор на ваш сайт, начните с базовой структуры, а затем расширяйте её, учитывая требования вашего проекта.

Прокрутить вверх