Создание калькулятора цены товара в зависимости от итоговой суммы заказа

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

Как я уже писал ранее в поддержке сайта один из самых сложных моментов - это изучение устройства самой системы управления сайтом (см. пост - Система управления сайтом). Понять как там все устроено, что за чем идет и в каком состоянии сайт вообще находится. Также было и в этот раз.

Информация о сайте:

  • MODX, LLC. MODX Revolution™
  • Minishop2
  • MIGX
  • Msearch2
  • CustomURLs

CMS достаточно распространенная, но как сразу выяснилось сайт находился в плохом состоянии. Приложение MIGX даже не запускалось, выдавая ошибку 500. Что сразу сильно насторожило и вызвало опасения что сайт совсем не пригоден к работе и нужно все переделывать. Но к счастью, основные функции сайта функционируют, со скрипом, и не всегда так как должны, но базовые потребности обеспечивают.

Перейдем к созданию самого калькулятора стоимости товара. Внешне карточка каждого товара выглядит следующим образом.

Карточка товара
Карточка товара в интернет-магазине

И там, в карточке, зеленым цветом выводится стоимость товара, если заказываешь его более чем на 50 тысяч рублей. Если заказываешь более чем на 200 тысяч, цена единицы товара еще снижается и получается, что итоговая скидка становится еще больше. Три градации цены: 1) розничная 2) оптовая и 3) суперцена, самая дешевая.

На скриншоте вы видите итоговый вариант, с уже запрограммированным, реализованным калькулятором штуки товара в зависимости от общей суммы заказа. В самом начале, там было просто поле с количеством и кнопка "в корзину".

Алгоритм реализации такого калькулятора:

  • 1) Достаем из базы данных CMS, стоимость товара в зависимости от категории. Там они были внесены в каждую карточку. Три значения в каждом товаре.
  • 2) Поместив эти значения в переменные выводим их на экран и смотрим правильные ли значения выводятся. Сравниваем с БД.
  • 3) Далее в цикле при каждом нажатии на стрелочки и увеличении количества заказанного товара делаем проверки условий:

    - Если общая сумма заказа менее 50 000 рублей, то ...
    - Если общая сумма заказа более 50 000 рублей, но менее 200 000 рублей, то ...
    - Если общая сумма заказа более 200 000 рублей, то ...
  • 4) С помощью jquery передаем эти значения напрямую в заранее отформатированные <span>.
  • 5) Делаем дополнительный вывод итоговой цены без скидки, чтобы было понятно почему пошла скидка. Зачеркиваем её с помощью тэга <strike>.

Вот и весь алгоритм. Изначально не хотел выкладывать скрипт, но все-таки сделаю это, вдруг кому-то поможет в дальнейших разработках. Буду рад. Только одно условие, скрипт можно использовать только после прочтения вот этого поста из блога частного вебмастера - Как полностью бросить пить? Замечательный пост.

Скрипт калькулятора:

$('input[name="count"]').bind('click keyup', function(){

$count = $('input[name="count"]').val(); // заносим в переменную данные о количестве товара
$price = $('.descr .price-item-rur').html().replace(/ /g,""); // также заносим изначальную цену товара

$pricenorm = $('.descr .price-item-rur-norm').html().replace(/ /g,""); // берем цену обычную
$priceopt = $('.descr .price-item-rur-opt').html().replace(/ /g,""); // берем цену оптовую
$pricesuper = $('.descr .price-item-rur-super').html().replace(/ /g,""); // берем суперцену

$itogoprice = $count*$pricenorm; // высчитываем итоговую стоимость

if ($itogoprice > 50000) { // если итоговая стоимость больше 50 тыс.

if ($itogoprice > 50000 && $itogoprice < 200000) {
$itogo = ($count*$priceopt); // умножаем количество на цену
$('.descr .ms2_total_cost2').html('<strike>'+$itogoprice+'</strike>'+' <font color=green>'+$itogo+'</font>'); // выводим данные в ячейку
$('.descr .price-item-rur').html($priceopt); // выводим данные о цене за штуку
}

if ($itogoprice > 200000) {// если цена выше 200 тыс.
$itogo = ($count*$pricesuper);
$('.descr .ms2_total_cost2').html('<strike>'+$itogoprice+'</strike>'+' <font color=green>'+$itogo+'</font>');
$('.descr .price-item-rur').html($pricesuper);
}

} else { // если итоговая стоимость ниже 50 тыс.
$itogo = ($count*$pricenorm);
$('.descr .ms2_total_cost2').html($itogo);
$('.descr .price-item-rur').html($pricenorm);
}

});

В конце возникла сложность с тем, что сам интернет-магазин делит цену товара на разряды, добавляя между разрядами пробелы. Таким образом если разрядов нет, то в переменной находится число и можно совершать математические операции. Если же цена уже имеет один разряд, например "1 205 рублей", то переменная уже не является числом и математические операции с ней невозможны.

Нам нужно удалить оттуда пробелы и сделать их числами. Это мы делаем с помощью вот такого куска кода ".replace(/ /g,"")", добавляя его к каждой переменной.

Думаю, на этом мы с вами закончим изучение создания калькулятора цены товара на сайте в зависимости от итоговой суммы заказа. Надеюсь помог.

Комментарии  

0 #1 Игорь 24.08.2016 17:22
Здравствуйте. Есть калькулятор и магазин на minishop2. Как можно связать калькулятор с minishop2 ? Что бы человек заполнив всю форму калькулятора, заказ отправлялся в корзину? Как интегрировать ?
Цитировать

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


Защитный код
Обновить

Еще информация на эту тему:
Топ 10 записей в блоге: