Подготавливаем ЛК для "ГдеПосылка"

Это продолжение статей по работе с заказами MS2, в последней статье я обещал, что расскажу как интегрировать сервис «ГдеПосылка» в Minishop2, а пока я жду пока очухается администрация «ГдеПосылка» чтобы дать мне доступ к API подготовим почву для интеграции, что мы будем делать:

1. Добавим новое поле в заказы minishop2
2. Сделаем вывод для пользователей их историю заказов без extJS и каких либо дополнений, на чистом pdoTools
3. Научимся делать leftJoin и select на pdoTools и pdoFetch
4. Бонусом идут сразу готовые стили для всего этого добра и написанный JS

За стилизацию заказов я брал пример с modstore, я надеюсь никто не обидится, потому что мне кажется что у нового дизайна модстора очень удачное стиливое решение истории заказов

За объяснением кода — под кат, за кодом на GitHub

Требования к фронту сайта:

1. Jquery
2. FontAwesome (не обязательно)
3. FancyBox 3

Сразу опережая вопросы, вот как будет выглядеть подробная карточка заказа:


А теперь перейдем собственно к разработке:

Первое и самое важное — это добавляем новое поле к заказам MS2. Для этого воспользуемся разделом о плагинах товаров MS2 в официальной доке там написано как расширить свойства товара, но способ работает для любой модели MS2, это нам необходимо для того, чтобы MODX и MS2 увидел и мог работать с кастомными столбцами в БД.
Первым делом нам надо прописать новую карту объекта, для этого создадим index.php и msOrder.inc.php в index.php мы указываем карту какого объекта MS2 мы расширяем, а в msOrder.inc.php мы указываем какие поля добовляем, объяснять не вижу смысла, просто покажу файлы тут, если будут вопросы по ним — задавайте в комментариях

core/components/orderCustomField/index.php

<?php
return array(
    'map' => array(
        'msOrder' => require_once 'msOrder.inc.php',
    ),
);

core/components/orderCustomField/msOrder.inc.php

<?php 
return array(
    'fields' => array (
        'track' => NULL,
      ),
    'fieldMeta' => array(
        'track' => array (
          'dbtype' => 'varchar',
          'precision' => '100',
          'phptype' => 'string',
          'null' => true,
        ),
      ),
);

Также нам нужно добавить поле track в таблицу modx_ms2_orders, для этого в консоле выполним код:

$table = $modx->getTableName('msOrder');
$sql = 'ALTER TABLE ' . $table . '  ADD `track` VARCHAR(255) NULL;';
$modx->exec($sql);

Для того, чтобы minishop2 подхватил наш плагин — нам нужно выполнить код в консоле:

if ($miniShop2 = $modx->getService('miniShop2')) {
    $miniShop2->addPlugin('orderCustomField', '{core_path}components/orderCustomField/index.php');
}

На данном этапе MS2 уже полностью видит наше поле, вы можете с ним полноценно работать, добавлять его в письма к клиентам или обрабатывать на фронте, везде, где доступны данные заказов, но нам нужно само поле в админку, для этого создадим новый плагин на событие msOnManagerCustomCssJs с вот таким содержимым:

<?php
switch ($modx->event->name) {
    case 'msOnManagerCustomCssJs':
	//проверяем на какой странице мы находимся, если это страница orders, то добавляем наш html
        if ($page != 'orders') return;
	    $modx->controller->addHtml("
            <script type='text/javascript'>
                Ext.ComponentMgr.onAvailable('minishop2-window-order-update', function(){
                    this.fields.items[0].items[3].items[0].items.push(
                            {xtype: 'textfield', name: 'track', fieldLabel: 'Трек - номер', anchor: '100%'}
                        );     
                });           
            </script>");
    break;
}

Тут код не вижу смысла объяснять, он прост как три рубля, мы просто добавляем в массив extJS наш объект, скажу лишь только то, что если вы хотите добавить в какое-то другое место, то дебажте расположение элементов вот так:

console.log(this.fields)

А там уже по дереву объектов смотрите где находятся нужные вам поля и пуште в нужный массив ваш объект.

На этом добавление поля закончилось, перейдем к более интересному — выводу заказов пользователя!

Для вывода заказов мы будем использовать только pdoTools и pdoFetch, подразумевается, что у ваших пользователей уже есть ЛК и страница отведенная под историю заказов

На странице отведенную под историю заказов копируем содержимое файла:
/assets/components/MyCustomOrders/chunk/chunk.tpl.html
html и css я не вижу смысла рассматривать, а вот вызов pdoTools думаю будет многим интересен:

[[!pdoResources?
      &class=`msOrder`
      &sortby=`createdon`
      &leftJoin=`{
        "msDelivery":{"class":"msDelivery", "on":"msDelivery.id = msOrder.delivery"},
        "msPayment":{"class":"msPayment", "on":"msPayment.id = msOrder.payment"},
        "msOrderStatus":{"class":"msOrderStatus", "on":"msOrderStatus.id = msOrder.status"},
        "msOrderAddress":{"class":"msOrderAddress", "on":"msOrderAddress.id = msOrder.address"}
      }`
      &select=`{
        "msOrder": "*",
        "msDelivery": "msDelivery.name as deliveryName",
        "msPayment": "msPayment.name as paymentName",
        "msOrderStatus": "msOrderStatus.name as statusName, msOrderStatus.color",
        "msOrderAddress": "*"
      }`
      &where=`{"msOrder.user_id":[[+modx.user.id]]}`
      &showLog=`0`
      &limit=`9999`
      &tpl=`order_row`
    ]]

И так, что же мы делаем в этом вызове?
Первым делом мы обращаемся к модели msOrder и достаем из нее только те записи, которые соответствуют id текущего пользователя, за это отвечает параметр where

&where=`{"msOrder.user_id":[[+modx.user.id]]}`

Далее мы подключаем таблицы msDelivery, msPayment, msOrderStatus и msOrderAddress через leftJoin
msDelivery нам нужен для того, чтобы узнать название метода доставки, msPayment для названия метода оплаты, а msOrderStatus нам нужен для названия статуса и для выбранного цвета текущего статуса (все эти пункты в msOrder лежат как id и по id текущего заказа мы достаем массив статуса, доставки и оплаты). В msOrderAddress лежат все поля введенные пользователем на моменте оформления заказа.
Теперь перейдем к select. В селекте мы указываем то, какие поля нам нужны от каждой таблицы, пойдем по порядку:
msOrder — выбираем все поля
msDelivery — нужно только название, его и выбираем и даем ему псевдоним deliveryName
msPayment — аналогично с msDelivery
msOrderStatus — выбираем имя, даем псевдоним и выбираем цвет
msOrderAddress — выбираем все

Чанк order_row лежит тут

Вот в принципе и все, копируем разметку, не забываем подключить JS и стили, единственное что можно рассмотреть отдельно, это то, как в модалке мы получаем данные, для этого у нас в js есть ajax запрос на контроллер, который через pdoFetch запускает выборку с аналогичными параметрами, что и pdoTools ну и еще одну выборку по msProductData, чтобы подтянуть позиции заказа.

Как то слишком сумбурный туториал получился, потому что я не особо понимаю что нужно разжевывать, а что и так очевидно, если возникли вопросы — задавайте в комментариях, главная цель, с которой писалась эта статья, это НАУЧИТЬ НОВИЧИКОВ, по этому непонятные вам вещи можем разобрать в комментариях.

P.s. кто ждет статьи про интеграцию «где посылка» советую сразу оставить заявку на доступ к их API, потому что думают они очень долго и только пару дней назад дали доступ, хотя оставил я заявку 2 недели назад

"msOrderAddress":{"class":"msOrderAddress", "on":"msOrderAddress.id = msOrder.id"}

"msOrderAddress":{"class":"msOrderAddress", "on":"msOrderAddress.address= msOrder.id"}

[2018-02-26 08:23:39] (ERROR @ /home/s1111/www/core/components/pdotools/model/pdotools/pdotools.class.php : 977) Unexpected token ':' in c307b02e5743bce69f94649b8a8d7c6d line 78, near '{"class":' <- there