Владимир

скорее всего тож самое modx.pro/help/12663/#comment-83284

Тоже пытался заставить работать masonry с подгруппой через pdoPage, но по непонятным причинам, не хотел инициализироваться плагин стандартным способом:

$(document).on('pdopage_load', function (e, config, response) {
      var $grid = $(".masonry");
      $grid.masonry('reloadItems');
      $grid.masonry( 'layout' );
  });

Давая небольшую задержку через setTimeout, заработало на ура.
Вот финальный код:

$(document).ready(function () {
  /* masonry */
  var $grid = $('.masonry').masonry({
    itemSelector      : '.masonry-item',
    columnWidth       : '.masonry-item',
    gutter            : 15,
    percentPosition   : true,
    transitionDuration: '0'
  });
  
  /* pdopage_load */
  $(document).on('pdopage_load', function (e, config, response) {
    function masonryUpd () {
      var $grid = $(".masonry");
      $grid.masonry('reloadItems');
      $grid.masonry( 'layout' );
    }
    setTimeout(masonryUpd, 300);
  });
});

Что странно. По идее не нужно никакой задержки.

{('abcd.c.' ~ $category) | lexicon}

с шаблонизатором все проще, можно писать прям в шаблоне все

{extends 'file:templates/category.tpl'}

{block 'initialize'}
    {parent}

    {var $tag = $_modx->getPlaceholder('vp.tag')}
    {var $_modx->resource.longtitle = $tag}

    {var $crumbs = 0}
    {var $parents = 0}
    {var $resources = '!msProducts'|snippet:[
    'parents' => 0,
    'optionFilters' => json_encode([
    'tags' => $tag
    ]),
    'returnIds' => 1
    ]}

    {if $resources is empty}
        {var $url = ('site_start'|option) | url : ['scheme' => 'full'] : []}
        {$_modx->sendRedirect($url, ['responseCode' => 'HTTP/1.1 404 Not Found'])}
    {/if}

{/block}

Да, сейчас проверил, в сниппете BabelLinks в начале пишете

$pdo = $modx->getService('pdoTools');

//далее в сниппете меняете в трех местах $babel->getChunk на $pdo->getChunk

И все, теперь сниппет поддерживает fenom

Конкретно по данному баннеру не подскажу, но в целом можно сделать так:

Если разметка под баннеры (через tpl_n) грузится, но сам баннер не подгружается, то нужно вешать его реинициализацию на

$(document).ajaxStop(function(){
	
});

Также будет не лишним вешать на уже подгруженный баннер какой-либо класс (допустим, .ready), и при последующей реинициализации обновлять только новые позиции через .not('.ready').

Если разметка под баннеры не подгружается, то нужно самостоятельно считать нужную позицию для размещения баннера и вставлять сами баннеры на событие

$(document).on('mse2_load', function(e, data) {

});

Не знаю как вы выравниваете, но если text-align: justify, то между пунктами меню должны быть переносы или пробелы иначе работать не будет.

Проще конечно с помощью display: flex; justify-content: space-between;

Я бы создал коллекцию объектов (можно через pdoResources) таким запросом

select Res.* from `modx_site_content` as Parent
inner join `modx_site_content` as Res on Res.parent = Parent.id
where Parent.parent = 12
ORDER BY Res.parent ASC, Res.id DESC

А затем пробежался по массиву и сформировал требуемую коллекцию с одним дочерним ресурсом.
Итого всего один запрос к БД.

Перечитал очень много материалов, но размер миниатюр не победил, зато нашел другое решение.

Все возможные ключи для массива и их значения можно получить, добавив в чанк следующий код:

{foreach $_pls as $key => $value}
	<p>{$key} => {$value}</p>
{/foreach}

Там я нашел такое значение image:

image => /assets/images/products/39/400-(21-10)-oak-sherwood.jpg

В чанк вместо {$thumb} добавил {$image} в результате я добился результата, но выводятся тяжелые картинки… joxi.ru/vAWYWgwIv4E7mW

А я собираю всё на сервере — modhost.pro позволяет не поднимать рабочее окружение на своём компе.

'use strict';

const gulp = require('gulp'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    cssmin = require('gulp-clean-css'),
    chmod = require('gulp-chmod');
const build = './assets/';
const assets = '../../../assets/components/startpage/';

gulp.task('default', ['css', 'js']);

gulp.task('watch', function () {
    gulp.watch([build + 'scss/*.scss', build + 'scss/**/*.scss'], ['css']);
    gulp.watch([build + 'js/*.js', build + 'js/app/*.js'], ['js']);
});

gulp.task('css', function () {
    var src = build + 'scss/*.scss';
    var dst = assets + 'css/web/';
    gulp.src(src)
        .pipe(sass().on('error', sass.logError))
        .pipe(cssmin())
        .pipe(gulp.dest(dst));
});

gulp.task('js', function () {
    var src = build + 'js/*.js';
    var dst = assets + 'js/web/';
    gulp.src(src)
        .pipe(uglify().on('error', function (e) {
            console.log(e);
        }))
        .pipe(gulp.dest(dst));

    src = build + 'js/app/*.js';
    dst = assets + 'js/web/app/';
    gulp.src(src)
        .pipe(uglify().on('error', function (e) {
            console.log(e);
        }))
        .pipe(gulp.dest(dst));
});

gulp.task('copy', function () {
    var src = [
        './node_modules/backbone/backbone-min.js',
        './node_modules/underscore/underscore-min.js',
        './node_modules/alertifyjs/build/alertify.min.js',
        './node_modules/backbone.syphon/lib/backbone.syphon.min.js',
        './node_modules/jquery/dist/jquery.min.js',
        './node_modules/tether/dist/js/tether.min.js',
        './node_modules/requirejs/require.js',
        './node_modules/js-cookie/src/js.cookie.js',
        './node_modules/html5sortable/dist/html.sortable.min.js',
        './node_modules/autocomplete-js/dist/autocomplete.min.js',
        './node_modules/bootstrap/dist/js/bootstrap.min.js'
    ];
    var dst = assets + 'js/web/lib/';

    var i = 0;
    gulp.src(src)
        .pipe(uglify().on('error', function (e) {
            console.log(e);
        }))
        .pipe(chmod({
            owner: {read: true, write: true, execute: false},
            group: {read: true, write: false, execute: false},
            others: {read: true, write: false, execute: false}
        }))
        .pipe(rename(function (path) {
            path.extname = '.min.js';
            path.basename = path.basename.replace(/([-.])min/, '').replace(/\.bundle/, '').toLowerCase();
            console.log(path.basename);
        }))
        .pipe(gulp.dest(dst));

    // Fonts
    gulp.src('./node_modules/font-awesome/fonts/**').pipe(gulp.dest(assets + 'fonts/'));
});