Jump to content
  • Sign in to follow this  

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

       (2 reviews)

    Евгений Зубов
    • 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; Средняя сложность display: none;
      1. Разместите виджет корзины в нужном месте сайта
      2. Задайте оформление корзины подходящее к дизайну сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

       

    Вы узнаете как настраивается дизайн корзины и всплывающего калькулятора с формой заказа. Как сделать тень, закругление углов и как изменить дизайн корзины, если она пустая.


      Report Занятие
    Sign in to follow this  


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest

    С дизайном корзины и калькулятора все понятно.Всё работает.

    Share this review


    Link to review

×
×
  • Create New...