Доработка шаблона категории товаров minishop2 (Fenom)

Сейчас внешний вид по умолчанию выглядит не очень хорошо.

Нужно его переделать.

Меняем внешний вид товарной категории

Открываем чанк msProductsRow.tpl созданный в уроке: minishop2 быстрый старт на Fenom. Внесем в него изменения чтобы вместо рядов выводилась сетка типа этой (только из 3х колонок).

В общем у чанка msProductsRow.tpl после переделки, у меня получился следующий код:

<div class="ms2_product col my-5 my-md-3">
    <div class="card">
        {if $primechanie?}
        <div class="alert alert-primary mb-0">{$primechanie}</div>
        {/if}
        <div class="card-body">
            <div class="row g-0">
                <div class="col-md-3 col-6">
                    {if $thumb?}
                    <img class="img-fluid" src="{$thumb}" alt="{$pagetitle}">
                    {else}
                    <img class="img-fluid" src="template/img/nologo.png" alt="{$pagetitle}"/>
                    {/if}
                </div>
                <div class="col-md-9 col-6 text-center">
                    <p class="mb-1 fw-bold">{$name_company}</p>
                    <a class="btn btn-outline-secondary btn-sm" href="{$id | url}">Подробнее</a>
                </div>
            </div>
            <hr>
            <ul class="nav flex-column">
                {'msProductOptions' | snippet : [ 'product' => $id, 'tpl' => '@FILE chunks/shop/msProductOptionsCat.tpl' ]}
            </ul>
            <p class="mt-2 mb-0"><a href="{$partnerlink}" class="btn btn-success w-100">Оформить</a></p>
            <p class="mb-0 small text-center">Лицензия ЦБ РФ {$litsenziya}</p>
        </div>
    </div>
</div>

А сам шаблон ShopCategory.tpl переделал так:

{extends 'file:templates/base.tpl'} 
{block 'content'}
<header class="bg-light pt-2 border-bottom">
    <div class="container">
        {'!pdoCrumbs' | snippet : [
            'showHome' => 1,
            'showAtHome' => 0,
            'tpl' => '@INLINE <li class="breadcrumb-item"><a title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
            'tplHome' => '@INLINE <li class="breadcrumb-item"><a rel="nofollow" title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
            'tplWrapper' => '@INLINE <nav aria-label="breadcrumb"><ol class="breadcrumb">{$output}</ol></nav>',
            'tplCurrent' => '@INLINE <li class="breadcrumb-item active" aria-current="page">{$menutitle}</li>'
        ]}
    </div>
</header> 
<section class="py-4 bg-white">
    <div class="container">
        <div class="row">
            <div class="col-md-7 col-lg-8">
                <h1 class="mt-5 mb-4">{$_modx->resource.pagetitle}</h1>
                {$_modx->resource.introtext}
            </div>
            <div class="col-md-5 col-lg-4 d-none d-md-block">
                <img src="{$_modx->resource.img}" alt="{$_modx->resource.pagetitle}" class="img-fluid">
            </div>
        </div>
    </div>
</section>
<section class="bg-light py-4">
    <div id="content" class="container category">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
            {'!pdoPage' | snippet : [
                'element' => 'msProducts',
                'setMeta' => '0',
                'tpl' => '@FILE chunks/shop/msProductsRow.tpl',
                'includeTVs' => 'primechanie,name_company,partnerlink,litsenziya',
                'tvPrefix' => '',
                'sortdir' => 'ASC',
                'limit' => '3',
                'tplPageWrapper' => '@INLINE <nav aria-label="pagination"><ul class="pagination">{$prev}{$pages}{$next}</ul></nav>',
                'tplPageFirst' => '',
                'tplPageLast' => '',
                'tplPage' => '@INLINE <li class="page-item"><a class="page-link" href="{$href}">{$pageNo}</a></li>',
                'tplPageActive' => '@INLINE <li class="page-item active"><a class="page-link" href="{$href}">{$pageNo}</a></li>',
                'tplPagePrev' => '@INLINE <li class="page-item"><a class="page-link" href="{$href}"><span aria-hidden="true">«</span></a></li>',
                'tplPageNext' => '@INLINE <li class="page-item"><a class="page-link" href="{$href}"><span aria-hidden="true">»</span></a></li>',
                'tplPagePrevEmpty' => '@INLINE <li class="page-item disabled"><a class="page-link" href="#"><span aria-hidden="true">«</span></a></li>',
                'tplPageNextEmpty' => '@INLINE <li class="page-item disabled"><a class="page-link" href="#"><span aria-hidden="true">»</span></a></li>',
                'tplPageFirstEmpty' => '',
                'tplPageLastEmpty' => ''
            ]}
        </div>
        {'page.nav' | placeholder}
    </div>
</section>
{if $_modx->resource.content?}
<section class="bg-light py-4">
    <div class="container card mb-3">
        <div class="card-body">
            {$_modx->resource.content}
        </div>
    </div>
</section>
{/if}
{/block}

Вот что получилось, при условии что заполнено все.

Здесь не чего нового нет — из того что уже проходили, поэтому не комментирую. Но если есть вопросы, задавайте.

В следующем уроке перенастроим источник файла для хранения изображений товаров.