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

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

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

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)
  • Скрипты на PHP и JS (jQuery)

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

E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

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