Вывод каталога товаров и оформление заказа

Ну что, с теорией разобрались, пора приступать к практике.

Сегодня мы создадим несколько товаров, выведем их на сайте, добавим в корзину и оформим. Наверное, этот урок будет интересен только совсем начинающим работать в MODX и тем, кто впервые видит miniShop2.

Итак, все товары miniShop2 должны принадлежать категории товаров - создадим её. Это можно сделать через контекстное меню, или переключением класса имеющегося ресурса:

Категория товаров - это ресурс MODX c необычным внешним видом и свойствами. В первую очередь, конечно, видно что поле content вынесено на вторую вкладку, а на его месте расположена таблица вложенных ресурсов.

Теперь нам нужно создать несколько товаров и вывести их на сайте. Здесь тоже ничего сложного - это делается или через контекстное меню, или кнопкой в категории:

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

Это основной сниппет для вывода каталога miniShop2. Он основан на pdoTools и обладает всеми его возможностями. В отличии от pdoResources, сниппет msProducts умеет:

Присоединять и выбирать свойства товара из таблицы msProductData
Присоединять и выбирать свойства производителя товара из таблицы msVendor
Присоединять и выбирать картинки из галереи товара - таблицы msProductFile
Фильтровать товары по их связям (параметры &link, &master и &slave)
Форматировать цену и вес, согласно системным настройкам.
При выводе цены и веча вызывать события для системных плагинов, которые могут их изменить (система скидок msDiscount)
Поддержка мультикатегорий товаров MS2. Это когда один товар выводится в разных категориях.

Конечно, вы можете пользоваться pdoResources для вывода каталога, но msProducts делает это гораздо лучше.

Простейший вызов msProducts выглядит так:

[[msProducts]]

Это выведет все товары, которые являются потомками текущей страницы на глубине вложения до 10.

[[msProducts?
    &parents=`4,5`
    &depth=`0`
]]

Это выведет только непосредственных потомков категорий 4 и 5.

Обычно вывод каталога комбинируют с постраничной разбивкой:

[[!pdoPage?
    &element=`msProducts`
    &limit=`10`
]]
[[!+page.nav]]

Вы уже знаете, как работает pdoTools, поэтому всегда можете включить &showLog=1 и посмотреть, каким образом присоединяются таблицы, чтобы сортировать по полям товара:

[[!pdoPage?
    &element=`msProducts`
    &limit=`10`
    &sortby=`Data.price`
    &sortdir=`ASC`
]]
[[!+page.nav]]

Рекомендую еще прочитать отдельную заметку про msProducts.

Как мы помним, внешний вид ресурсов в MODX регулируется шаблонами. Нам нужно создать 2 новых: категория и товар.

Я просто копирую один из существующих шаблонов и меняю у него область контента. Например, вот так выглядит моя категория:

<!DOCTYPE html>
<html>
    <head>
        [[$Head]]
    </head>
    <body>
        [[$Navbar]]
        <div class="container">
            [[$Crumbs]]
            <div id="content" class="inner">
                <h3>[[*pagetitle]]</h3>
                [[!pdoPage?
                    &element=`msProducts`
                ]]
                [[!+page.nav]]
            </div>
            [[$Footer]]
        </div>
    </body>
</html>

В основном содержимом страницы у нас вывод её названия и вложенных товаров.

Кстати, для редактирования шаблонов и чанков я настоятельно рекомендую вам компонент Ace.

Теперь осталось только назначить наш шаблон категориям и мы увидим наш каталог. Строка товара оформляется стандартным чанком сниппета msProducts - tpl.msProducts.row.

С товарами всё еще проще - нам нужно использовать уже готовый чанк msProduct.content. В нём выводится галерея товара, его основные свойства и форма добавления в корзину.

Советую еще указать шаблон по умолчанию для товаров в настройке ms2_template_product_default.

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

За вывод корзины отвечает сниппет msCart, который нужно вызывать на отдельной странице, некэшированным.

У него есть три чанка: оформление одного товара tpl.msCart.row, оформление всей таблицы tpl.msCart.outer и вывод пустой корзины tpl.msCart.empty.

За оформление заказа отвечает сниппет msOrder, его обычно располагают ниже корзины.

У него есть чанк общего оформления tpl.msOrder.outer, чанк для способа доставки tpl.msOrder.delivery, метода оплаты tpl.msOrder.payment и сообщения об успешном оформлении tpl.msOrder.success.

Способы доставки и оплаты выводятся согласно настроек в админке, а обязательные для заказа поля зависят от настроек выбранной доставки.

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

В общем, всё максимально автоматизированно.

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

Всё делается стандартными сниппетами, у всех у них есть прописанные параметры, в комплекте идут чанки оформления.

Если что-то непонятно - вы всегда можете зайти на страницу сниппет и посмотреть описание параметров. Например вот, msCart:

Если у вас есть вопросы по сегодняшней теме - задавайте!

Вывод каталога товаров и оформление заказа

Сниппет msProducts

Шаблоны товаров и категорий

Корзина и оформление заказа

Заключение

bezumkin.ru

Категории