MODX - MIGX. фотоальбом для товара.

MIGX - пожалуй самый сложный и самый полезный внешний компонент. Я до последнего откладывал его применение. Казался заумным и сложным. Но это все оправданно. Он имеет много применений. Можно генерить модели своих таблиц, как пишут. Я использую его пока для создания составных(комплексных) TV. Это когда в одном TV несколько полей. Причем множественных. Например альбом картинок для товара с описанием под каждым фото и параметрами вывода, "Новости компании" с датой, фото, заголовком и кратким описанием. Некоторые считают его аналогом multiTV из EVO. Тут я опишу создание фотогалереи для товара. Предполагается что MIGX уже установлен. Там все просто.

Тут есть нюансы. MIGX реально при созданиии полей может использует уже созданные ранее TV. И эти TV лучше создавать специально для MIGX и нигде больше не подключать. Поэтому я создаю категорию FoMigxTV и там создаю необходимые TV. Обычно достаточно создать только для картинки. Остальные назначаются прямо в редакторе вкладок. Для начала создам несколько необходимых TV, потом можно добавить:

  1. migxFotoAlbum - основной TV, непосредственно сам фотоальбом. для него параметры поставим попозже
  2. migxImg - картинка для migx-альбома. Тип ввода - изображение. Источник файлов - forManegers. Надо создать специальный источник файлов. Чтоб менеджер не шастал по всему серверу.
    1. Тип ввода - migx. Далее нужно назначит закладки на форме и колонки для выбора строки migx в редакторе ресурса. Можно сразу в параметрах ввода TV назначить. А можно и через конфигурацию. Я пробовал оба варианта. Больше понравился первый. Сразу все на виду.

      Вкладки формы:

      [
      {"caption":"Фото товара", "fields":[
          {"field":"image","caption":"Картинка","inputTV":"migxImg"},
          {"field":"title","caption":"Заголовок"},
          {"field":"description","caption":"Пояснение (не выводится, служебное поле)"},
          {"field":"cont","caption":"Содержание лока","inputTVtype":"richtext"}
      ]}
       ,
       {"caption":"Прочее", "fields":[
             {"field":"main","caption":"Назначить главной","inputTVtype":"checkbox","inputOptionValues":"Назначить главной==1"}
      
       ]}
      
      ]
          
      Если не указывать для поля тип ввода - встанкет по-умолчанию, текст.

      Разметка колонок:

      [
        {"header": "Фото", "width": "100", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"},
        {"header": "Заголовок", "width": "200", "sortable": "true", "dataIndex": "title"},
        {"header": "Пояснение", "width": "300", "sortable": "true", "dataIndex": "description"}
      ]
          

      С MIGX идет в комплекте сниппет 'migxResourceMediaPath' который может создать каталог для текущего ресурса(страницы). Это позволяет для каждой страницы автоматически создать создать свой каталог и назначить его как источник файлов. Это и реализуем. Создадим новый источник файлов и в параметр 'basePath' пропишем [[migxResourceMediaPath? &pathTpl=`assets/resourceimages/{id}/` &createFolder=`1`]]

      Теперь при загрузке фоток на страницу товара будет автоматом создаваться отдельный каталог и назначаться как источник файлов. И менеджер не сможет загрузить фотки не туда. И видеть будет только фотки текущего товара. То что доктор прописал.

      На этом с админкой - все. Остается только сделать вывод на стороне броузера. Или по умному - frontEnd. Тут все без сюрпризов и хорошо описано в доках.

      Обычный вывод хорошо описан в документации. Я ж коснусь режима API. При каждой итерации сниппет вывода пишет переменные в массив $modx->placeholders:

            
          [docid] => 704
          [total] => 2
          [MIGX_id] => 3
      
          [title] => Привод FAAC 109780 740 Е
          [image] => assets/resourceGal/704/740-Е-privod-dlya-otkatnyh-vorot.jpg
          [descr] => 
          [_alt] => 0
          [_first] => 1
          [_last] => 
          [idx] => 1
          
          [property.tvname] => migxSlider
          [property.tpl] => @FILE:/assets/cppv/TPL/Pages/tovarX/SH/subM/row1/k1/sliderTpl.tpl
          [property.outputSeparator] => 
        
      Только влезши сюда мне удалось подменить плейсхолдеры и создать свои для слайдера bootstrap. Это надо было из-за того, что idx начинается с "1", а выводить надо было с "0". Ну и заодно свои можно добавить.


Комментарии 0






Разрешённые теги: <b><i><br>Добавить новый комментарий: