Установка
- Подключите репозиторий modstore.pro;
- Установите pdoTools — это библиотека для быстрой работы с БД и оформлением, необходима для многих компонентов и именно она подключает Fenom.
- Установите сам miniShop2.
Для тех кто проходит курс по Fenom вам остается установить только установить минишоп.
Шаблоны
Всего нам нужно 3 шаблона.
Общий
Он у нас уже есть (статика), смотрите урок: Создание дополнительных MODX шаблонов или создание базового файлового шаблона и шаблонов для главной и статических страниц. Он будет использоваться для корзины (если она вам нужна).
Категория
Для товарной категории (под категории) создадим шаблон «Категория товаров», за основу возьмем шаблон Статика.
В чанк tpl.x поместите базовый вывод товаров.
<section class="padding_top">
<div id="content" class="container category">
[[!pdoPage?
&element=`msProducts`
&tpl=`tpl.msProducts.row.custom`
]]
[[!+page.nav]]
</div>
</section>
Здесь в &tpl
я указал имя копии оригинального чанка tpl.msProducts.row.custom
, создайте ее.
На будущее! Никогда не правите стандартные чанки, т.к. после обновления все ваши изменения затрутся.
Кто проходит курс по Fenom: (в директории 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». Не забываем в админке в «Элементы» создать новый шаблон «Товарная категория» и подключить наш статический шаблон: {include 'file:templates/ShopCategory.tpl'}
.
Товар
Для товаров создадим шаблон «Товар», за основу так же, возьмем шаблон Статика.
В чанк tpl.x поместите базовый вывод товара.
Кто проходит курс по Fenom: создайте файловый шаблон «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».
Созданные шаблоны можно указать в системных настройках:
- 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 под себя, затем создадим недостающие опции.