Калькулятор подоконников

26 февраля 2019, 07:00

Давайте попробуем воспроизвести пример калькулятора с демо-сайта. Заходим на страницу компонента в бек-энде.

Шаг 1

Первым делом создадим поля для нашего калькулятора. Для этого переходим во вкладку "Поля" и по-очереди создаём необходимые нам. Обратите внимание, что значения для поля можно задать только после его добавления. По сути, оно должно быть в базе, чтобы привязать к нему значения. Также, если вы добавляете поле msProducts, то нужно понимать, что вместо значений для него забиваются параметры сниппета msProducts в формате JSON.

Ширина (мм)

  • Тип: Число
  • Ключ: width
  • По-умолчанию: 1900
  • Обязательно: Да

Длина (мм)

  • Тип: Число
  • Ключ: length
  • По-умолчанию: 500
  • Обязательно: Да

Материал

  • Тип: msProducts
  • Ключ: material
  • Обязательно: Да
  • Значения:
    • Параметры (JSON):
      {
      "parents": 5,
      "where": {
      },
      "sortby": {"parent":"ASC","menuindex":"ASC"},
      "limit": 0
      }

Профиль

  • Тип: Radiobox
  • Ключ: chamfer
  • По-умолчанию: 1500
  • Обязательно: Да
  • Значения:
    • Профиль Zx: 1500
    • Профиль V: 2200
    • Профиль H: 2500
    • Профиль F '3: 3000
    • Профиль E: 1800
    • Профиль B: 1950
    • Профиль A: 180
    • Профиль F: 3500

Монтаж подоконника

  • Тип: Checkbox
  • Ключ: mounting
  • Значения:
    • Монтаж подоконника 200 мм: 1800
    • Монтаж подоконника 300 мм: 2000
    • Монтаж подоконника 400 мм: 2200
    • Монтаж подоконника 500 мм: 2300
    • Монтаж подоконника 600 мм: 2500

Ухо подоконника

  • Тип: Checkbox
  • Ключ: ear
  • Значения:
    • Подрезка уха подоконника: 300

Шаг 2

Теперь нам нужно создать объект калькулятора, в котором мы соберём все необходимые поля. На вкладке "Калькуляторы" создаём:

  • Заголовок: Калькулятор подоконников
  • Сниппет: xcc.results

Сниппет - это наш обработчик результатов расчёта. В комплекте с компонентом, в качестве примера поставляется сниппет xcc.results, рассчитанный как раз на данный калькулятор. Поэтому править нам его не нужно. Однако, если вам что-то надо добавить, то сниппет хорошо задокументирован.

Сохраняем.

Шаг 3

Сейчас нам надо привязать к калькулятору недавно созданные поля. На только что созданном калькуляторе жмём "Редактировать", откроется окошко, в нём переходим во вкладку "Поля". Жмём кнопку "Добавить" и по-очереди добавляем в калькулятор нужные поля. При желании можно перетащить поля вверх или вниз, таким образом сортируя вывод полей в форме на фронт-энде.

Шаг 4

Вывести калькулятор на фронте достаточно просто:

{'!xCalc' | snippet : [
    'id' => 1,
    'tplOuter' => 'tpl.xCalc.outer',
    'tplResults' => 'tpl.xCalc.results',
]}

В параметр id указываем ID нового калькулятора. В параметр tplResults указываем чанк вывода результатов расчёта. В комплекте с компонентом в чанке tpl.xCalc.results настроен вывод, рассчитанный на данный калькулятор.



Следующий документ
AjaxForm при выводе результатов