Сегодня расскажу вам какой интернет-магазин мне достался на поддержку сайта и как там удалось создать калькулятор цены товара в зависимости от итоговой суммы заказа. Сам скрипт выложу тоже, но как мне кажется куда полезнее будет описать алгоритм калькулятора.
Как я уже писал ранее в поддержке сайта один из самых сложных моментов - это изучение устройства самой системы управления сайтом (см. пост - Система управления сайтом). Понять как там все устроено, что за чем идет и в каком состоянии сайт вообще находится. Также было и в этот раз.
Информация о сайте:
- 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>.
Вот и весь алгоритм. Изначально не хотел выкладывать скрипт, но все-таки сделаю это, вдруг кому-то поможет в дальнейших разработках. Буду рад. Только одно условие, скрипт можно использовать только после прочтения вот этого поста из блога частного вебмастера - Как полностью бросить пить? Замечательный пост.
Скрипт калькулятора:
$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,"")", добавляя его к каждой переменной.
Думаю, на этом мы с вами закончим изучение создания калькулятора цены товара на сайте в зависимости от итоговой суммы заказа. Надеюсь помог.
Комментарии
RSS лента комментариев этой записи