Как сделать поле со скидкой на товаре

Если перед вами стоит задача вывести в процентах размер скидки, не стоит расстраиваться, все очень просто.

Один из вариантов которые мы рассмотрим выглядит следующим образом:

aD2PgOKtXzx9m3

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

Как посчитать сколько процентов составляет скидка

Допустим, у нас есть товар который стоил 50 рублей, а теперь он стоит 35 рублей. Посмотрите внимательно на эту формулу, пример на PHP:

А теперь подробней что происходит. Делим нашу новую цену на старую и умножаем на 100 — получаем сколько процентов новая цена составляет от старой. Вычитаем это значение из 100 (процентов) и вот он наш процент — 30%. Проверим всё ли так (50 / 100) * 30 = 15 рублей. С тем как это посчитать разобрались, идем дальше.

Для визуальной части нам понадобится эта картинка
b_price

Выводим наш HTML

Картинка не случайно расположена горизонтально — мы будем ее поворачивать с помощью свойства CSS rotate (мы поворачиваем весь блок, не только картинку но и содержимое — наш процент):

 

45deg — это 45 градусов. На всякий случай прописываем для всех браузеров и молимся, чтобы код сработал в IE 🙂

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.Предоставляю услуги по созданию проектов на CMS 1С-Битрикс — сайты, шаблоны и компоненты с нуля, а также доработка функционала на уже существующих проектах.


Другие виды работ:

— Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp);

— Натяжка вёрстки на 1С-Битрикс;

— Скрипты на PHP и JS (jQuery);

— Парсинг (CSV, XML, XLSX, JSON);

— Интеграции со сторонними сервисами по API;

— Многоязычные версии сайтов;

— и многое другое :)


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

E-mail: dmitriyribka@gmail.com

Skype: cinemacreaterus


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *