docs.modx.pro

Русский

English

Русский

English

Тема

  1. Компоненты
  2. miniShop2
  3. Быстрый старт

Быстрый старт ​

miniShop2 поставляется со всеми необходимыми сниппетами и чанками. Для работы вам нужен MODX не ниже 2.3 и PHP не ниже 7.0.

Установка ​

  • Подключите наш репозиторий
  • Установите pdoTools - это библиотека для быстрой работы с БД и оформлением, необходима для многих компонентов
  • Установите Theme.Bootstrap - а это тема оформления Twitter Bootstrap для MODX, под неё заточены стандартные чанки магазина
  • Установите сам miniShop2

Для тестирования можно использовать наш хостинг, на нём эти дополнения можно выбрать прямо при создании сайта.

Шаблоны ​

Theme.Bootstrap устанавливает 2 шаблона, которые вы можете менять по своему усмотрению. Вы можете переименовать и использовать их, или создать новые.

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

Общий ​

Это шаблон для вывода содержимого обычных ресурсов

modx
<!DOCTYPE html>
<html lang="en">
  <head>
    [[$Head]]
  </head>
  <body>
    [[$Navbar]]
    <div class="container">
      <div id="content" class="main">
        [[*content]]
      </div>
      [[$Footer]]
    </div>
  </body>
</html>

Он будет использоваться для главной страницы и корзины.

Категория ​

Шаблон вывода категории с постраничным выводом товаров

modx
<!DOCTYPE html>
<html lang="en">
  <head>
    [[$Head]]
  </head>
  <body>
    [[$Navbar]]
    <div class="container">
      <div id="content" class="category">
        [[!pdoPage?
          &element=`msProducts`
        ]]
        [[!+page.nav]]
      </div>
      [[$Footer]]
    </div>
  </body>
</html>

Товар ​

Шаблон товара, вместо содержимого вызывается чанк из комплекта ms2

modx
<!DOCTYPE html>
<html lang="en">
  <head>
    [[$Head]]
  </head>
  <body>
    [[$Navbar]]
    <div class="container">
      <div id="content" class="product">
        [[$msProduct.content]]
      </div>
      [[$Footer]]
    </div>
  </body>
</html>

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

  • default_template - здесь указываем наш общий шаблон
  • ms2_template_category_default - шаблон категории
  • ms2_template_product_default - шаблон товара

Разделы ​

Главная страница у нас уже есть, просто назначаем ей "Общий" шаблон и пишем в контент:

modx
[[!pdoMenu]]

Это покажет нам все документы сайта на главной, чтобы не заблудиться.

Затем создаём категорию товаров и проверяем, чтобы у неё был шаблон "Категория".

После создания категории, добавляем в неё несколько товаров и проверяем их шаблон тоже.

Теперь осталось только создать корзину. Для этого создаём новую страницу с шаблоном "Общий" в корне сайта, и пишем там:

modx
[[!msCart]]

[[!msOrder]]

[[!msGetOrder]]

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

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

Миникорзина ​

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

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

modx
<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>