Дизайн корзины и калькулятора

От Евгений Зубов

• 9 июля, 2016
11 4,25,2,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2016_07/11_%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%8B_%D0%B8_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0.mp4.dd655a16d7c96f3c7f5b0dabb7e9bf33.mp4 10 До 30 минут Евгений Зубов display: none; https://creatura.club/uploads/ Средняя сложность display: none;
1. Разместите виджет корзины в нужном месте сайта
2. Задайте оформление корзины подходящее к дизайну сайта

Сейчас мы попробуем настроить всплывающий калькулятор и саму корзину, с помощью которой происходит подсчет товаров и оформляется заказ. Для этого есть отдельный виджет. В программе кнопка всегда будет отображаться в сером виде со значком восклицательного знака – это так и должно выглядеть. В браузере все будет отображаться в соответствии настройкам.

Если вы перейдете в настройки виджета, то найдете 2 блока:

1. Блок корзины
2. Блок калькулятора и формы

Дизайн корзины – это вид кнопки с надписью «0 товаров», а дизайн калькулятора – внешний вид всплывающего окна после нажатия на кнопку корзины.

• Дизайн корзины.

Настройки позволяют вам управлять настройками двух разных состояний: внешний вид в пустом состоянии (настройки для пустой корзины) и внешний вид в наполненном состоянии (более 1 товара).

Дополнительные настройки – иконка корзины (изображение в левой части корзины). Для удобства есть 2 варианта иконки (для светлого и темного фона). Чтобы установить иконку, нужно будет для начала отметить галочкой выбор данной опции, затем нажать на оранжевую ссылку и указать тот файл, который будет служить той самой иконкой.

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

• Настройки калькулятора.

Настраиваются они так же, как и дизайн корзины.

• Настройки скругления углов

В этом поле есть 4 разных значения (10px;10px;10px;10px ). Каждое значение отвечает за свой угол: левый верхний угол, верхний правый, нижний правый, нижний левый. Чтобы изменить степень скругления, нужно изменить значение конкретного угла, например, вместо 10px поставить 20px.

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