Вы узнаете как настраивается дизайн корзины и всплывающего калькулятора с формой заказа. Как сделать тень, закругление углов и как изменить дизайн корзины, если она пустая.
Сейчас мы попробуем настроить всплывающий калькулятор и саму корзину, с помощью которой происходит подсчет товаров и оформляется заказ. Для этого есть отдельный виджет. В программе кнопка всегда будет отображаться в сером виде со значком восклицательного знака – это так и должно выглядеть. В браузере все будет отображаться в соответствии настройкам.
Если вы перейдете в настройки виджета, то найдете 2 блока:
Дизайн корзины – это вид кнопки с надписью «0 товаров», а дизайн калькулятора – внешний вид всплывающего окна после нажатия на кнопку корзины.
Настройки позволяют вам управлять настройками двух разных состояний: внешний вид в пустом состоянии (настройки для пустой корзины) и внешний вид в наполненном состоянии (более 1 товара).
Дополнительные настройки – иконка корзины (изображение в левой части корзины). Для удобства есть 2 варианта иконки (для светлого и темного фона). Чтобы установить иконку, нужно будет для начала отметить галочкой выбор данной опции, затем нажать на оранжевую ссылку и указать тот файл, который будет служить той самой иконкой.
Находим папку, где распаковали сам виджет, находим папку иконок для корзины, выбираем ту, что вам больше подходит. Проверяем в настройках адрес картинки, смотрим в браузере отображение иконки. Выравнивание текста будет с учетом вставленной картинки.
Настраиваются они так же, как и дизайн корзины.
В этом поле есть 4 разных значения (10px;10px;10px;10px ). Каждое значение отвечает за свой угол: левый верхний угол, верхний правый, нижний правый, нижний левый. Чтобы изменить степень скругления, нужно изменить значение конкретного угла, например, вместо 10px поставить 20px.
Возвращаемся в шаблон каждый раз, выделяем кнопку и ставим скругление. Таким образом мы можем управлять внешним видом. Также есть скругление у калькулятора и кнопки в нем. Найти то самое нужное скругление вы сможете только экспериментальным путем.
Вы узнаете как настраивается дизайн корзины и всплывающего калькулятора с формой заказа. Как сделать тень, закругление углов и как изменить дизайн корзины, если она пустая.