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

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

Установка

  • Подключите репозиторий 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 под себя, затем создадим недостающие опции.

Поделиться с друзьями
Алексей

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

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