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

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

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

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

  • 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 #2 FirstEmery 25.11.2017 10:42
I see you don't monetize your page, don't waste your traffic, you can earn extra
bucks every month because you've got high quality content.
If you want to know how to make extra bucks, search for:
Boorfe's tips best adsense alternative
Цитировать
0 #1 Игорь 24.08.2016 17:22
Здравствуйте. Есть калькулятор и магазин на minishop2. Как можно связать калькулятор с minishop2 ? Что бы человек заполнив всю форму калькулятора, заказ отправлялся в корзину? Как интегрировать ?
Цитировать

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


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

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