Данный слайдер имеет следующие поля: Название, Описание, Ссылка, Изображение.

 

  1. Создаем конфигурацию с названием main_slider:
    {
      "formtabs":[
        {
          "MIGX_id":3,
          "caption":"\u0421\u043b\u0430\u0439\u0434\u0435\u0440",
          "print_before_tabs":"0",
          "fields":[
            {
              "MIGX_id":3,
              "field":"name",
              "caption":"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435",
              "description":"",
              "description_is_code":"0",
              "inputTV":"",
              "inputTVtype":"",
              "validation":"",
              "configs":"",
              "restrictive_condition":"",
              "display":"",
              "sourceFrom":"config",
              "sources":"",
              "inputOptionValues":"",
              "default":"",
              "useDefaultIfEmpty":"0",
              "pos":1
            },
            {
              "MIGX_id":4,
              "field":"desc",
              "caption":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
              "description":"",
              "description_is_code":"0",
              "inputTV":"",
              "inputTVtype":"",
              "validation":"",
              "configs":"",
              "restrictive_condition":"",
              "display":"",
              "sourceFrom":"config",
              "sources":"",
              "inputOptionValues":"",
              "default":"",
              "useDefaultIfEmpty":"0",
              "pos":2
            },
            {
              "MIGX_id":5,
              "field":"link",
              "caption":"\u0421\u0441\u044b\u043b\u043a\u0430",
              "description":"",
              "description_is_code":"0",
              "inputTV":"",
              "inputTVtype":"",
              "validation":"",
              "configs":"",
              "restrictive_condition":"",
              "display":"",
              "sourceFrom":"config",
              "sources":"",
              "inputOptionValues":"",
              "default":"",
              "useDefaultIfEmpty":"0",
              "pos":3
            },
            {
              "MIGX_id":6,
              "field":"image",
              "caption":"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435",
              "description":"",
              "description_is_code":"0",
              "inputTV":"",
              "inputTVtype":"image",
              "validation":"",
              "configs":"",
              "restrictive_condition":"",
              "display":"",
              "sourceFrom":"config",
              "sources":"",
              "inputOptionValues":"",
              "default":"",
              "useDefaultIfEmpty":"0",
              "pos":4
            }
          ],
          "pos":1
        }
      ],
      "contextmenus":"",
      "actionbuttons":"",
      "columnbuttons":"",
      "filters":"",
      "extended":{
        "migx_add":"",
        "disable_add_item":"",
        "add_items_directly":"",
        "formcaption":"",
        "update_win_title":"",
        "win_id":"",
        "maxRecords":"",
        "addNewItemAt":"bottom",
        "media_source_id":"",
        "multiple_formtabs":"",
        "multiple_formtabs_label":"",
        "multiple_formtabs_field":"",
        "multiple_formtabs_optionstext":"",
        "multiple_formtabs_optionsvalue":"",
        "actionbuttonsperrow":4,
        "winbuttonslist":"",
        "extrahandlers":"",
        "filtersperrow":4,
        "packageName":"",
        "classname":"",
        "task":"",
        "getlistsort":"",
        "getlistsortdir":"",
        "sortconfig":"",
        "gridpagesize":"",
        "use_custom_prefix":"0",
        "prefix":"",
        "grid":"",
        "gridload_mode":1,
        "check_resid":1,
        "check_resid_TV":"",
        "join_alias":"",
        "has_jointable":"yes",
        "getlistwhere":"",
        "joins":"",
        "hooksnippets":"",
        "cmpmaincaption":"",
        "cmptabcaption":"",
        "cmptabdescription":"",
        "cmptabcontroller":"",
        "winbuttons":"",
        "onsubmitsuccess":"",
        "submitparams":""
      },
      "permissions":{
        "apiaccess":"",
        "view":"",
        "list":"",
        "save":"",
        "create":"",
        "remove":"",
        "delete":"",
        "publish":"",
        "unpublish":"",
        "viewdeleted":"",
        "viewunpublished":""
      },
      "fieldpermissions":"",
      "columns":[
        {
          "MIGX_id":1,
          "header":"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435",
          "dataIndex":"name",
          "width":"",
          "sortable":"false",
          "show_in_grid":1,
          "customrenderer":"",
          "renderer":"",
          "clickaction":"",
          "selectorconfig":"",
          "renderchunktpl":"",
          "renderoptions":"",
          "editor":""
        },
        {
          "MIGX_id":2,
          "header":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
          "dataIndex":"desc",
          "width":"",
          "sortable":"false",
          "show_in_grid":1,
          "customrenderer":"",
          "renderer":"",
          "clickaction":"",
          "selectorconfig":"",
          "renderchunktpl":"",
          "renderoptions":"",
          "editor":""
        },
        {
          "MIGX_id":3,
          "header":"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435",
          "dataIndex":"image",
          "width":"",
          "sortable":"false",
          "show_in_grid":1,
          "customrenderer":"",
          "renderer":"this.renderImage",
          "clickaction":"",
          "selectorconfig":"",
          "renderchunktpl":"",
          "renderoptions":"",
          "editor":""
        }
      ],
      "category":""
    }
  2. Создаем TV поле с типом migx и в поле Конфигурации вводим название migx конфигурации (main_slider). Не забываем указать шаблон.
  3. Добавляем наши слайды в ресурс с шаблоном.
  4. Создаем чанк tpl.main_slider и ловим плейсхолдеры: name, desc, link, image.
  5. Вызываем сниппет в шаблоне с нашим слайдером и подготовленным чанком:
    [[!getImageList?
     &tvname=`main_slider`
     &tpl=`tpl.main_slider`
    ]]
← MODx + React CMP (Пакет)MODx + NEXT JS (React). Часть 1 →