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

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

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

aD2PgOKtXzx9m3

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

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

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

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

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

Выводим наш HTML

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

 

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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

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