Модуль на сайт - Настройка

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

Параметры расчетов для каждого калькулятора можно установить в личном кабинете ПКАСКО.

Установка скидки по страховым компаниям

Для каждой компании Вы можете указать индивидуальную скидку в процентах (discounts):

Можно добавить общую скидку в процентах (discount) для всех компаний, для которых скидка явно не указана:

Предустановленная информация о машине и водителе

Можно задать параметры: возраст, стаж и пол водителей (drivers), марка (make) и модель (model) автомобиля, его год выпуска (year) и мощность в л.с. (power), цена в руб. (price):

Список водителей указывается в параметре drivers и должен содержать элементы вида:

    // sex - Пол водителя: имеет значения "w" (женщина) или "m" (мужчина)
    // age - Возраст водителя: имеет значение большее либо равное 18-ти
    // experience - Стаж вождения: имеет значение большее либо равное 0, но меньшее раpницы age - 18
     
    { sex: "m", age: 25, experience: 2 } 
    

Даже если требуется указать 1 водителя, формат остаётся неизменным, например:

    ...
    drivers: [
      {sex: "m", age: 28, experience: 5}
    ]
    ... 
    

Цветовая схема

Вы можете задать стиль отображения, выбрав его из списка цветовых схеми и указав в параметре colorSchema:

Список цветовых схем:

    inline.kasko.Calculator.ColorSchema.Grey
    inline.kasko.Calculator.ColorSchema.Blue 
    

Также Вы можете задать свои собственные стили отображения модуля, указав в параметре cssStyles путь к css файлу на вашем сервере.

Надо создать свой собственный стиль. C чего начинать? Куда смотреть?

1. Подготовка графики. Для простоты и удобства, рекомендуется сделать подобные файлы по размерам и пропорциям.

• /img/step/count.gif - изображения номеров шагов
• /img/api/grey/steps.png - изображения номеров шагов - skin.css
• /img/step/background.gif - фон шагов
• /img/selector-color-1.gif - фон ссылок выбора или/или
• /img/api/grey/tab1.png - фон ссылок выбора или/или - skin.css
• /img/table/thead.gif - фон шапки таблицы
• /img/table/border-bottom.gif - фон нижнего бордера ячеек таблицы

Кнопки сделаны input type="image", поэтому их оформление не меняется.

2. Написание собственных стилей.

• #box\@kaskoApi - ширина всего блока
• #in_step_by_step - навигация "шаг за шагом"
• #in_content - блок с содержанием
• #auto_footer_margin - отступ снизу

Навигация шаг за шагом:

• li - может иметь классы:
  • .hover - наведенный крусор
  • .active - активный шаг, выбранный в данный момент
  • .disable - неактивный шаг, последующие, не пройденные шаги
  • .done - пройденный шаг
• .in_corner_top, in_corner_bottom - контейнер для округлых уголков.
• #input .uf - форма выбора авто и водителей. Ширина у поле ввода задана фиксированной, потому что теги input, select - самые "непредсказуемые" в отображении элементы страницы.
• .in_table - таблица данных.
  • tr.select - выбранная кликом строка.
  • tr.hover - строка, на которую наведен курсор.
• Стили для кнопок находятся в in-system.css. Чтобы стилизовать кнопку необходимо в своей css задать правила для ширины, высоты и фона кнопки. Для простоты стилизации общие правила объединены в класс "button-img"("button-a-img"), а параметры ширины и фона в классы с префиксом.
  • button-img - класс для элемента input, общие стили
  • button-a-img - класс для элемента a, общие стили
    • button-img-1 - класс для кнопки "Узнать стоимость полиса"
    • button-img-proceed - класс для кнопки "Рассчитать по доп. условиям"
    • button-a-img-emailsend - класс для кнопки "Послать результаты на email"
    • button-img-order-osago - класс для кнопки "Заказать ОСАГО"
    • button-img-order - класс для кнопки "Заказать полис"

Смотреть для примера достаточно в файл skin.css: https://pkasko.com/css/module/theme/grey/skin.css