How to make show more?

Question

MODX

how to make the show more button so that when you click on it, the page of the standard pagination changes?

{'!pdoPage' | snippet : [
            'element' => 'msProducts',
                'tpl' => '@FILE chunks/product.tpl', 
                'parents' => $_modx->resource.id,
                'limit' => $limit,
                'depth' => 4,
                'includeTVs' => 'views',
                'includeContent' => 1,
                'processTVs' => 1,
                'tvPrefix' => '',
                'sortby' => $sortby,
                'sortdir' => $direction,
 
            ]}

<div class="pagination-box">
        <p class="info">Показаны товары с 1 по 12 из {$_modx->getPlaceholder('page.total')} (всего страниц: {$_modx->getPlaceholder('pageCount')})</p>
    	<div class="pagination">
    		{$_modx->getPlaceholder('page.nav')}
    	</div>
    </div>

Answer 1

Add &ajaxMode=`button`
If you wish, set your own class for the button in the parameters of the pdoPage snippet.
Everything is in the documentation

<div id="pdopage">
    
    <div class="rows">
        
    </div>
</div>

Answer 2

On small screens
1. display:flex to black
order: 10 to red
2. Change flex-direction
3. Change float from right to left.
The width at which to change will have to be calculated using JS

Answer 3

codepen.io/Glaswr/pen/eBVvrd
To this, you need to add the width calculation to js and then set the appropriate order for the article