Быстрый старт с Minishop2 на Fenom

Быстрый старт с Minishop2 MODX Revo
miniShop2 поставляется со всеми необходимыми сниппетами и чанками. В данном уроке мы создадим базовые шаблоны и чанки на файлах для дальнейшей модернизации. Также создадим пару товаров, корзину покупок и миникорзину (для тех кто создает магазин).

Установка

  • Подключите репозиторий modstore.pro;
  • Установите pdoTools — это библиотека для быстрой работы с БД и оформлением, необходима для многих компонентов и именно она подключает Fenom.
  • Установите сам miniShop2.

Для тех кто проходит курс по Fenom вам остается установить только установить минишоп.

Шаблоны

Всего нам нужно 3 шаблона.

Общий

Он у нас уже есть (статика), смотрите урок: создание базового файлового шаблона и шаблонов для главной и статических страниц. Он будет использоваться для корзины (если она вам нужна).

Категория

Для товарной категории создадим шаблон (в директории templates) с постраничным выводом товаров с именем «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="bg-white py-4">
    <div id="content" class="container category">
        {'!pdoPage' | snippet : [
        	'element' => 'msProducts',
        	'setMeta' => '0',
                'tpl' => '@FILE chunks/shop/msProductsRow.tpl',
        ]}
        {'page.nav' | placeholder}
    </div>
</section>
{/block}

Здесь я отключаю вывод канонических урл — у меня за это отвечает дополнение SEO Suite и подключаю чанк msProductsRow.tpl ,который нужно создать в директории chunks/shop, предварительно создав  директорию shop в chunks).

В содержимое чанка msProductsRow.tpl помещаем весь код из стандартного чанка «tpl.msProducts.row»:

<div class="ms2_product mb-5 mb-md-3" itemtype="http://schema.org/Product" itemscope>
    <meta itemprop="description" content="{$description = $description ?: $pagetitle}">
    <meta itemprop="name" content="{$pagetitle}">

    <form method="post" class="ms2_form d-flex flex-column flex-md-row align-items-center no-gutters">
        <input type="hidden" name="id" value="{$id}">
        <input type="hidden" name="count" value="1">
        <input type="hidden" name="options" value="[]">
        <div class="col-md-2 text-center text-md-left">
            <a href="{$id | url}">
                {if $thumb?}
                    <img src="{$thumb}" class="mw-100" alt="{$pagetitle}" title="{$pagetitle}" itemprop="image"/>
                {else}
                    <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
                        srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
                        class="mw-100" alt="{$pagetitle}" title="{$pagetitle}"/>
                {/if}
            </a>
        </div>
        <div class="col-md-10 d-flex flex-column flex-md-row align-items-center no-gutters" itemtype="http://schema.org/AggregateOffer" itemprop="offers" itemscope>
            <meta itemprop="category" content="{$parent | resource: "pagetitle"}">
            <meta itemprop="name" content="{$pagetitle}">
            <meta itemprop="offerCount" content="1">
            <meta itemprop="price" content="{$price | replace:" ":""}">
            <meta itemprop="lowPrice" content="{$price | replace:" ":""}">
            <meta itemprop="priceCurrency" content="RUR">

            <div class="col-12 col-md-8 mt-2 mt-md-0 flex-grow-1">
                <div class="d-flex justify-content-around justify-content-md-start">
                    <a href="{$id | url}" class="font-weight-bold">{$pagetitle}</a>
                    <span class="price ml-md-3">{$price} {'ms2_frontend_currency' | lexicon}</span>
                    {if $old_price?}
                        <span class="old_price ml-md-3">{$old_price} {'ms2_frontend_currency' | lexicon}</span>
                    {/if}
                </div>
                <div class="flags mt-2 d-flex justify-content-around justify-content-md-start">
                    {if $new?}
                        <span class="badge badge-secondary badge-pill mr-md-1">{'ms2_frontend_new' | lexicon}</span>
                    {/if}
                    {if $popular?}
                        <span class="badge badge-secondary badge-pill mr-md-1">{'ms2_frontend_popular' | lexicon}</span>
                    {/if}
                    {if $favorite?}
                        <span class="badge badge-secondary badge-pill mr-md-1">{'ms2_frontend_favorite' | lexicon}</span>
                    {/if}
                </div>
                {if $introtext}
                    <div class="mt-2 text-center text-md-left">
                        <small>{$introtext | truncate : 200}</small>
                    </div>
                {/if}
            </div>
            <div class="col-12 col-md-4 mt-2 mt-md-0 text-center text-md-right">
                <button class="btn btn-primary" type="submit" name="ms2_action" value="cart/add">
                    {'ms2_frontend_add_to_cart' | lexicon}
                </button>
            </div>
        </div>
    </form>
</div>

Не забываем в админке в «Элементы» создать новый шаблон «Товарная категория» и подключить наш статический шаблон: {include 'file:templates/ShopCategory.tpl'}.

Товар

Создаем файловый шаблон товара «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>
{/block}

Здесь я подключаю чанк msProductContent.tpl , в содержимое чанка msProductContent.tpl помещаем весь код из стандартного чанка «msProduct.content.fenom».

<h1 class="text-center text-md-left">{$_modx->resource.pagetitle}</h1>
<div class="text-center text-md-left mb-2 mb-md-0">
    {if $_modx->resource.new?}
        <span class="badge badge-secondary badge-pill col-auto">{'ms2_frontend_new' | lexicon}</span>
    {/if}
    {if $_modx->resource.popular?}
        <span class="badge badge-secondary badge-pill col-auto">{'ms2_frontend_popular' | lexicon}</span>
    {/if}
    {if $_modx->resource.favorite?}
        <span class="badge badge-secondary badge-pill col-auto">{'ms2_frontend_favorite' | lexicon}</span>
    {/if}
</div>
<div id="msProduct" class="row align-items-center" itemtype="http://schema.org/Product" itemscope>
    <meta itemprop="name" content="{$_modx->resource.pagetitle}">
    <meta itemprop="description" content="{$_modx->resource.description ?: $_modx->resource.pagetitle}">
    <div class="col-12 col-md-6">
        {'!msGallery' | snippet : []}
    </div>
    <div class="col-12 col-md-6" itemtype="http://schema.org/AggregateOffer" itemprop="offers" itemscope>
        <meta itemprop="category" content="{$_modx->resource.parent | resource: "pagetitle"}">
        <meta itemprop="offerCount" content="1">
        <meta itemprop="price" content="{$price | replace:" ":""}">
        <meta itemprop="lowPrice" content="{$price | replace:" ":""}">
        <meta itemprop="priceCurrency" content="RUR">

        <form class="form-horizontal ms2_form" method="post">
            <input type="hidden" name="id" value="{$_modx->resource.id}"/>

            <div class="form-group row align-items-center">
                <label class="col-6 col-md-3 text-right text-md-left col-form-label">{'ms2_product_article' | lexicon}:</label>
                <div class="col-6 col-md-9">
                    {$article ?: '-'}
                </div>
            </div>
            <div class="form-group row align-items-center">
                <label class="col-6 col-md-3 text-right text-md-left col-form-label">{'ms2_product_price' | lexicon}:</label>
                <div class="col-6 col-md-9">
                    {$price} {'ms2_frontend_currency' | lexicon}
                    {if $old_price != 0}
                    <span class="old_price ml-2">{$old_price} {'ms2_frontend_currency' | lexicon}</span>
                    {/if}
                </div>
            </div>
            <div class="form-group row align-items-center">
                <label class="col-6 col-md-3 text-right text-md-left col-form-label" for="product_price">{'ms2_cart_count' | lexicon}:</label>
                <div class="col-6 col-md-9">
                    <div class="input-group">
                        <input type="number" name="count" id="product_price" class="form-control col-md-6" value="1"/>
                        <div class="input-group-append">
                            <span class="input-group-text">{'ms2_frontend_count_unit' | lexicon}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row align-items-center">
                <label class="col-6 col-md-3 text-right text-md-left col-form-label">{'ms2_product_weight' | lexicon}:</label>
                <div class="col-6 col-md-9">
                    {$weight} {'ms2_frontend_weight_unit' | lexicon}
                </div>
            </div>

            <div class="form-group row align-items-center">
                <label class="col-6 col-md-3 text-right text-md-left col-form-label">{'ms2_product_made_in' | lexicon}:</label>
                <div class="col-6 col-md-9">
                    {$made_in ?: '-'}
                </div>
            </div>

            {'msOptions' | snippet : [
                'options' => 'color,size'
            ]}

            {'msProductOptions' | snippet : []}

            <div class="form-group row align-items-center">
                <div class="col-12 offset-md-3 col-md-9 text-center text-md-left">
                    <button type="submit" class="btn btn-primary" name="ms2_action" value="cart/add">
                        {'ms2_frontend_add_to_cart' | lexicon}
                    </button>
                </div>
            </div>
        </form>

    </div>
</div>
<div class="mt-3">
    {$_modx->resource.content}
</div>

Созданные шаблоны можно указать в системных настройках:

  • ms2_template_category_default — шаблон категории
  • ms2_template_product_default — шаблон товара

Создание товарных категорий, подкатегорий и товаров

Категория товаров предназначена для удобного хранения и управления товарами miniShop2. Технически, это CRC msCategory, который расширяет стандартный класс modResource. Это позволяет категории загружать свои собственные javascript и css файлы для более удобной работы с товарами.

Создать новую категорию можно двумя способами:

  • Выбрать нужный пункт в контекстном меню дерева ресурсов

Создание категории товара

  • Или переключить тип документа в категорию товара у обычного ресурса или при создании обычного ресурса.

Переключение типа ресурса

Тип ресурса можно менять и потом, превращаю категорию в обычный документ и наоборот*

После создания категории страница перезагружается, и вы видите уже панель изменения категории.

После создания категории, в ней появляется кнопки «Добавить категорию» для создания подкатегории и «Добавить товар» — для создания товара.

Продолжение для тех, кто делает полноценный магазин

Создание корзины

Создаём новую страницу с шаблоном «Статика» в корне сайта, и пишем там:

[[!msCart]]

[[!msOrder]]

[[!msGetOrder]]

Эти сниппеты выведут нам корзину, оформление заказа и покажут созданный заказ.

Они сделаны таким образом, чтобы что-то выводить только когда это нужно. Например, msCart и msOrder прячутся, если в адресе страницы есть параметр msorder=id заказа, а вот msGetOrder наоборот, реагирует только на него.

Миникорзина

Всё, первичная настройка магазина окончена и уже можно заказывать товары.

В качестве финального штриха можно еще в меню добавить вывод миникорзины. Например, вот так:

<div class="navbar-collapse collapse">
    <!-- Это вывод меню, он есть по умолчанию -->
    <ul class="nav navbar-nav">
        [[pdoMenu?
            &startId=`0`
            &level=`1`
            &tplOuter=`@INLINE {{+wrapper}}`
        ]]
    </ul>
    <!-- А вот здесь добавляем миникорзину -->
    <ul class="nav navbar-nav pull-right" style="padding-top:10px;">
        <li>[[!msMiniCart]]</li>
    </ul>
</div>

Домашнее задание

1. Проанализируйте конкурентов и на основе их создайте как минимум пару категорий (или подкатегорий) — ведь товары можно добавлять сразу в несколько категорий (аля wordPress или бесплатный SeoFilter). При создании проверяем, чтобы у них был шаблон «Категория».

Лично я превращу нашу главную страницу в товарную категорию (шаблон оставлю главным — внешний вид ее не поменяется). И уже в ней буду создавать подкатегории и товары.

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

В следующих уроках настроим minishop под себя, затем создадим недостающие опции.

Понравилась статья? Можно поблагодарить автора: отправив ему донат на
YooMoney
или
Qiwi
. Либо поделившись статьей ☟
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru