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

Если сейчас зайти на страницу товара (в моем случае оффера), то увидит примерно такую картину:

Как то не очень выглядит) Давайте сделаем примерно такой внешний вид:

Для этого нам нужно немного переделать шаблон ShopProduct.tpl и чанк msProductContent.tpl, созданные в уроке «Быстрый старт с Minishop2 на Fenom». Начнем с чанка, открываем его и перекраиваем его код, в конечном итоге у меня получился следующий вызов содержимого.

<h1 class="h2 mb-2">{$_modx->resource.pagetitle}</h1>
<div id="msProduct" class="row">
    <div class="col-lg-8 col-md-8 col-7 border-top">
        <ul class="nav">
            {'msProductOptions' | snippet : [ 'tpl' => '@FILE chunks/shop/msProductOptions.tpl' ]}
            <li class="col-md-6 nav-item my-md-3">Заявок в этом месяце - <strong>1000+</strong></li>
        </ul>
        <div class="border-bottom mb-3"></div>
        <p>Способы получения денег: 
            {'!pdoResources' | snippet : [
                'parents' => '1',
                'limit' => '7',
                'resources' => '@FILE snippets/shop/GetIdCatefories.php' | snippet,
                'tpl' => '@FILE chunks/shop/poluscenieDeneg.tpl',
                'tplLast' => '@FILE chunks/shop/poluscenieDenegLast.tpl',
                'includeTVs' => 'pagetitlealternative',
                'tvPrefix' => '',
                'sortdir' => 'ASC'
            ]}
        </p>
    </div>
    <div class="col-lg-3 offset-lg-1 col-md-4 col-5">
        <img class="mt-1 img-fluid" src="{'!msGallery' | snippet : [ 'tpl' => '@FILE chunks/shop/Gallery.tpl' ]}" alt="{$_modx->resource.pagetitle}">
        <a href="{$_modx->resourcepartnerlink}" class="mt-3 btn btn-success w-100">Оформить займ</a>
    </div>
</div>

Где чанки имеют следующий коды.

msProductOptions.tpl:

{foreach $options as $option}
<li class="col-md-6 nav-item my-md-3">
    {$option.caption} - <strong>{if $option.value is array} {$option.value | join : ', '} {$option.measure_unit}
        {else} {$option.value} {/if}</strong>
</li>
{/foreach}

Это мы проходили в уроке …

Gallery.tpl:

{if $files?}
{$files[0]['url']}
{else}
/template/img/nologo.png
{/if}

Просто выводим путь до первой картинки загруженной в галерею, если не чего не загружено, то выводим путь до картинки заглушки (ее нужно создать самостоятельно).

poluscenieDeneg.tpl:

<a class="link-dark fw-bold" href="{$uri}" target="_blank" title="{$pagetitle}">{$pagetitlealternative}</a>,

Тут я создал TV поле «pagetitlealternative» — альтернативный заголовок и назначил его для шаблона категории, соответственно заполнил данное поле в самих категориях, все остальное стандарт.

poluscenieDenegLast.tpl тоже самое, что и poluscenieDeneg.tpl (для последнего результата), только в конце кода вместо , стоит ..

И самое интересное, в вызове pdoResources в параметре resources вызывается сниппет GetIdCatefories.php со следующим кодом:

<?php
$modx->getService('miniShop2');
$docid = $modx->getOption('docid', $scriptProperties, $modx->resource->get('id'));
$sql = "SELECT * FROM {$modx->getTableName('msCategoryMember')} WHERE `product_id` = $docid";
$q = $modx->prepare($sql);
$q->execute();
$resources = $q->fetchAll(PDO::FETCH_ASSOC);
foreach ($resources as $resource){
    $cats[] = $resource['category_id'];
}
$out = implode(',', $cats);
return $out;

Данный сниппет выводит все id родителей товара (через запятую). Т.е. товары же мы можем добавлять сразу в несколько категорий,

этот снипет как раз выводит их в таком формате: 17,18,20,21.

Ну и тут остается еще 1 обычное TV поле: resourcepartnerlink — партнерская ссылка.

Теперь переходим к правке шаблона ShopProduct.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="bg-white py-4">
    <div class="container">
        {include 'file:chunks/shop/msProductContent.tpl'} 
    </div>
</section>
<section class="bg-light py-4">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-8">
                {if $_modx->resource.introtext?}
                <div class="card mb-3">
                    <div class="card-body">
                        <h2 class="h3">О компании</h2>
                        {$_modx->resource.introtext}
                    </div>
                </div>
                {/if}
               <div class="card mb-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <p classs="text-center text-sm-start"><a href="{$_modx->resourcepartnerlink}" class="btn btn-success">Оформить займ</a></p>
                            </div>
                            <div class="col-sm-6">
                                <p classs="text-center text-sm-end">Оформили: <strong>1000+</strong> раз</p>
                            </div>
                        </div>
                    </div>
                </div>
                {if $_modx->resource.content?}
                <div class="card">
                    <div class="card-body">
                        {$_modx->resource.content}
                    </div>
                </div>
                {/if}
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="sticky-top" itemscope itemtype="https://schema.org/WPAdBlock">
                	<a href="#" itemprop="url" rel="external" target="_blank"><img itemprop="image" class="w-100" src="https://mykrozaym.ru/template/img/blog/money.gif" alt="баннер"></a>
                </div>
            </div>
        </div>
        <a href="{$_modx->resource.parent | resource : 'uri'}">< {$_modx->resource.parent | resource: "pagetitle"}</a>
    </div>
</section>
{/block}

Здесь все стандартно: вызов сниппетов, чанков, TV полей и условия if. Если что то не понятно, спрашивайте!

В итоге получаем вот такую карточку оффера.

В следующем уроке переделаем внешний вид категории товаров.