Пишем калькулятор расхода краски для сайта

Пишем калькулятор расхода краски для сайта

1280 851 admin

Здравствуйте, уважаемые читатели.

Сегодня мы с вами займемся написанием простого калькулятора расхода лакокрасочных материалов для интернет-магазина на Opencart 2.X, однако описанный ниже код можно без проблем адаптировать для любой платформы.

[mk_mini_callout title=»Важно!»]Данная статья предполагает наличие у читающего по крайней мере минимальных знаний HTML. Если у вас их нет — учите матчасть.[/mk_mini_callout]

Как работает скрипт?

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

Если значение расхода существует, то в карточке товара появляется кнопка расчета, по нажатию которой появляется модальное окно с просьбой указать окрашиваемую площадь. Пользователь указывает площадь, нажимает кнопку «Рассчитать», после чего выводится результат.

Выглядит это вот так:Калькулятор расчета модальное окно

Создаем и заполняем атрибут

Для указания расхода конкретного товара можно было бы создать отдельное поле в карточке товара, однако мы пойдем по наиболее рациональному пути — будем брать значение из атрибутов. Для этого идем в админку и создаем новый атрибут. В нашем случае это «Расход (г/м²)»

Создаем атрибут

Возможно у вас уже существует подобный атрибут, тогда создание нового не потребуется и мы просто пропустим этот шаг.

Далее нам нужно перейти в карточку товара и заполнить указанный атрибут значением, указанным на банке с краской.

На этом админку можно закрыть, она нам больше не понадобится.

Правим карточку товара

Пришла пора трайхардить.

Вооружившись хорошим текстовым редактором (мы рекомендуем Notepad++ или Sublime Text) идем по пути catalog/view/theme/***/template/product/ и редактируем файл product.tpl

Сначала определяемся где у нас будет находиться кнопка расчета. В данном примере мы решили разместить ее возле кнопок «В сравнение» и «В избранное». Находим это место и вставляем следующий код.

Спокойно, не нужно материться, сейчас все объясню.

Разбираем по частям

В первой части мы перебираем атрибуты, если атрибут «Расход (г/м²)» у данного товара существует — выполняем код дальше, в противном случае пропускаем его. Это позволит выводить кнопку только в том случае, когда она актуальна.

А это и есть наша кнопка. Значение атрибута data-target должно совпадать с идентификатором модального окна.

[mk_mini_callout title=»Важно!» button_text=»Подробнее» button_url=»https://www.w3schools.com/howto/howto_css_modals.asp»]В данном примере используется библиотека Bootstrap. Если она не подключена на вашем сайте — подключите ее или используйте вызов диалогового окна с помощью JavaScript[/mk_mini_callout]

В целом это типичное модальное окно Bootstrap, если вы не понимаете что происходит — стоит сначала заглянуть в документацию.

Теперь посмотрим внимательнее на сам скрипт калькулятора.

Округление обязательно должно присутствовать во избежание результатов типа «33.33333333333333 грамма».

Заключение

Таким образом мы с вами только что сэкономили 20-50$, которые теперь можно потратить на печеньки с чаем.

Конечно же, данный скрипт можно усложнить — чтобы он не только выводил результат в единицах измерения веса, но и подсказал сколько банок краски нам понадобится. Но мы ведь простой калькулятор делали, поэтому ограничимся пока тем, что есть. Если эта тема вам интересна — пишите в комментариях. Будет спрос — будет статья.

Спасибо за прочтение и всего доброго.