Володя

Полностью согласен. Да готов!)

store.simpledream.ru/packages/content/ms2gallery.html#tab=desc

Ну подкалываю да))) Но и научно-познавательный интерес тоже имеется!
Хабр не последний ресурс, но там своя специфика… А так вообще в комментах картинки интересно…

Я с фронта хочу картинки загружать… Вот прям здесь где пишу. Научите а..)))

так удалите их у всех товаров

ну во) другое дело…
можно несколько опций —

<div class="select">
    [[+rows]]
 </div>			
 <script>
    function select(element) {
    if($(element).hasClass('active')){
        $(element).removeClass('active');
        $("select[name='options[[[+name]]]']").find('option').removeAttr('selected')
    } else {   
        var value = $(element).data("value");
        $(element).siblings().removeClass('active');
        $(element).addClass('active');
        $("select[name='options[[[+name]]]']").find('option').removeAttr('selected')
        $("select[name='options[[[+name]]]']").find("option[value="+ value +"]").attr("selected","selected")
     }
 }
</script>

ну если вы умеете, то возьмите и напишите…
Как смог так помог.

вызов на странице продукта —

[[!msOptions?
&tplRow=`tpl.msOptions.row.my`
&tplOuter=`tpl.msOptions.outer.my`
&name=`size`
]]
<span style="display:none">[[!msOptions?name=`size`]]</span>

чанки — tpl.msOptions.outer.my

<div class="select">
    [[+rows]]
</div>			
<script>
  function select(element) {
  var value = element.getAttribute("data-value");
  var nodes = element.parentNode.childNodes;
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i] instanceof HTMLParagraphElement) {
       if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
      else nodes[i].className = "";
    }
  }
  $(document.getElementsByName("options[size]")).find("option[value="+ value +"]").attr("selected","selected")
}
</script>

чанк — tpl.msOptions.row.my

<p data-value="[[+value]]" onclick="select(this)" class="">[[+value]]</p>

велосипед конечно, но едет)))
пример тут — s5351.test.modx.pro/index.php?id=6
p.s. стилизуем на свой вкус)

пардон… не так понял) Выше не то

типа такого — jsbin.com/zitagogo/1/

стандартный то чем не угодил? стилизуй с помощью css…

И наверно вряд ли задружат вдвоем...Pdopage необходимо знать сколько элементов всего в выборке, затем бьет по страницам. А JSONDerulo вряд ли получает количество постов или чего там… соответственно пагинации нет

Кратко описал тут — bezumkin.ru/sections/tips_and_tricks/2843/

пошел дальше и немного переписал код, теперь можно несколько независимых пагинаций на странице вызывать

<h2>первый вызов</h2> 
 
[[!AjaxSnippet?
&snippet=`pdoPage`
&element=`msProducts`
&tpl=`tpl.msProducts.row`
&limit=`3`
&depth=`1`
&parents=`4`
&showLog=`0`
&page=`[[!geturi]]` 
&as_mode=`onload`   
&wrapper=`
<div class="pagin [[+key]]"></div>

<div id="[[+key]]" class="ajax-snippet">
			<img src=" " class="as_spinner" style="width:32px;margin:auto;display:block;">
</div>

<div class="pagin [[+key]]"></div>
`
]] 

<h2>второй вызов</h2>
[[!AjaxSnippet?
&snippet=`pdoPage`
&element=`msProducts`
&tpl=`tpl.msProducts.row`
&limit=`3`
&depth=`1`
&parents=`4`
&showLog=`0`
&sortdir=`DESC`
&page=`[[!geturi]]` 
&pageVarKey=`page2`
&as_mode=`onload`   
&wrapper=`
<div class="pagin [[+key]]"></div>

<div id="[[+key]]" class="ajax-snippet">
			<img src=" " class="as_spinner" style="width:32px;margin:auto;display:block;">
</div>

<div class="pagin [[+key]]"></div>
`
]] 

<script>
    
    $(document).on('as_complete', document, function(e,d) {
 
    $(".pagin."+d["key"]).append(d["pagination"]);
 
	$(document).on('click', '.pagination a', function(e) {
	e.preventDefault();
    var url = $(this).attr('href');
    //console.log(url);

    $.post(url, {as_action: d["key"]}, function(response) {
	    if (typeof response.output !== "undefined") {
		    $('.ajax-snippet#'+d["key"]).html(response.output);
		
		    $(".pagin."+d["key"]).html(response.pagination); 

	      }
    }, "json");                  
                    
 
    }); 
});
    
</script>

смотреть тут — s5322.test.modx.pro/ayaks-snippet-neskolko-vyizovov.html

Делюсь)
код на странице

<div class="pagin"></div>

[[!AjaxSnippet?
&snippet=`pdoPage`
&element=`msProducts`
&tpl=`tpl.msProducts.row`
&limit=`3`
&depth=`1`
&parents=`4`
&showLog=`0`
&page=`[[!geturi]]` 
&as_mode=`onload`   
]] 

<script>
    $(document).on('as_complete', document, function(e,d) {
    $(".pagin").append(d["pagination"]);
	//console.log(d["pagination"]);

	$(document).on('click', '.pagination a', function(e) {
	e.preventDefault();
    var url = $(this).attr('href');
    //console.log(url);

    $.post(url, {as_action: d["key"]}, function(response) {
	    if (typeof response.output !== "undefined") {
		    $('.ajax-snippet').html(response.output);
		
		    $(".pagin").html(response.pagination); 

	      }
    }, "json");                  
                    
 
    }); 
});
    
</script>


<div class="pagin"></div>

[[!geturi]]

<?php
$filter = $_GET['page'];
return $filter;

смотреть что получилось тут — s5322.test.modx.pro/test.html

Да это я уже тут начудил ночью… щас все проверил, нормально работает

сделал с грехом пополам… но почему то возвращаемый контент двоится…

Хотя знаешь задумался, и чет никак не соображу как тут подступиться с аякс пагинацией,
Ну вывести пагинацию это все понятно, перехватить клик по пагинации — тоже понятно.
А вот как организовать запрос к сниппету на этой же странице с выводом содержимого в этот же блок?
Я продумал до отправки post запроса и понял что я не знаю как мне подгрузить страницу и чтоб еще сработало событие as_complete и взять ответ в json…
Если шариш — хотя бы теоретически подскажи порядок действий,
Спасибо!

Ну обертка да. Помоему тут Василий как раз и говорит о том что можно сделать аякс пагинацию…

$(document).on('as_complete', document, function(e,d) {
	console.log(d);
});

данные же у нас все приходят…

ну да после одного раза все нормуль, я это прекрасно знаю… просто думал у меня одного так…