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

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

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

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

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

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

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

Сниппет msProducts

Это основной сниппет для вывода каталога 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:

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

← Предыдущая заметка
Обзор интерфейса miniShop2
Следующая заметка →
Компонент поиска и фильтрации mSearch2
Комментарии (36)
Александр
06.08.2014 18:31

Василий, если я хочу вывести товары не строчками, а таблицей 4 строки по 3 товара, то это нужно править только tpl.msProducts.row (делать заполнение товарами через pdoResources)?

bezumkinВасилий Наумкин
06.08.2014 19:06

Да, нужно править только tpl.msProducts.row, только непонятно, причем здесь pdoResources?

Вообще, забудь про pdoResources когда работаешь с товарами miniShop2 - msProducts умеет всё тоже самое и даже больше.

_tangoСаша Туманов
09.08.2014 19:37

Актуально тоже! А как править tpl.msProducts.row, чтобы получить вывод по три, например, товара в строчке? Есть какая то штатная фишка для этого? Для getResourses всегда пользовался дополнительными чанками, типа first, last, n-th. А тут, чтобы выводилось по три штуки пришлось в сниппете msProducts внутри формирующего вывод цикла свои условия добавлять, типа if($row['idx'] % 3){ ... } и так далее. Если есть возможность так не изворачиваться, расскажите пожалуйста! Или может где описано, да пропустил..

AlroniksИван Климчук
10.08.2014 00:37

В twitter bootstrap и много где это решается версткой. Блоки просто друг за другом располагаются, условия для разбиения по строкам не требуется, если сверстано толково и по сетке, то они сами расставятся, как нужно.

bezumkinВасилий Наумкин
10.08.2014 02:12

Для getResourses всегда пользовался дополнительными чанками, типа first, last, n-th

В pdoResources и msProducts это тоже работает.

А так в Bootstrap есть верстка блоками - http://getbootstrap.com/css/#grid

<div class="row">
    [[msProducts?
        &tpl=`@INLINE
        <div class="col-md-3">
            [[+pagetitle]] - [[+price]]
        </div>`
    ]]
</div>
Александр
11.08.2014 17:03

Ваш вариант выводит 3-и колонки повторяющихся товаров. Сделал вот такой вариант:


<div class="col-md-3 ms2_product">
    <div class="row">
        <img src="[[+thumb:default=`[[++assets_url]]components/minishop2/img/web/ms2_small.png`]]" width="120" height="90" />
    </div>
    <div class="row span10 col-md-10">
        <form method="post" class="ms2_form">
            <a href="[[~[[+id]]]]">[[+pagetitle]]</a>
            <span class="row flags">[[+new]] [[+popular]] [[+favorite]]</span>
            <span class="row price">[[+price]] [[%ms2_frontend_currency]]</span>
            [[+old_price]]
            <button class="btn btn-default" type="submit" name="ms2_action" value="cart/add"><i class="glyphicon glyphicon-barcode"></i> [[%ms2_frontend_add_to_cart]]</button>
            <input type="hidden" name="id" value="[[+id]]">
            <input type="hidden" name="count" value="1">
            <input type="hidden" name="options" value="[]">
        </form>
        <p><small>[[+introtext]]</small></p>
    </div>
</div>
<!--minishop2_popular <i class="glyphicon glyphicon-star" title="[[%ms2_frontend_popular]]"></i>-->
<!--minishop2_new <i class="glyphicon glyphicon-flag" title="[[%ms2_frontend_new]]"></i>-->
<!--minishop2_favorite <i class="glyphicon glyphicon-bookmark" title="[[%ms2_frontend_favorite]]"></i>-->
<!--minishop2_old_price <span class="old_price">[[+old_price]] [[%ms2_frontend_currency]]</span>-->

Почему-то первая строка выводится нормально а дальше даже в футер залазят товары. Менял только tpl.msProducts.row

bezumkinВасилий Наумкин
11.08.2014 17:14

Чтобы не залазило в футер, весь блок товаров с классами col-md-3 должен быть внутри блока с классом row.

Также еще бывает полезно добавить после этого блока

<div class="crearfix"></div>
Александр
11.08.2014 17:57

Если col-md-3 обернуть в row , то выводится по одному товару в каждой строчке т.е в столбик получается. Попробовал в шаблоне категорий прописать вместо:


[[!pdoPage?
    &element=`msProducts`
]]

вот так:


<div class="row">
    [[msProducts?
    &tpl=tpl.msProducts.row
    ]]
</div>

вылазить в футер перестали, но распределение по рабочей области беспорядочное (разные интервалы и отступы)

bezumkinВасилий Наумкин
11.08.2014 18:21

Вот именно второй вариант верный. А дальше нужно читать про float.

Александр
11.08.2014 19:11

Спасибо. Дописал в шаблоне вот так:


<div class="row">
    float: left !important;
    [[msProducts?
    &tpl=tpl.msProducts.row
    ]]
</div>

И все заработало.

_tangoСаша Туманов
11.08.2014 18:28

Спасибо, за предыдущий ответ! Еще появился вопрос. Во время верстки корзины возникла необходимость слегка отформатировать вывод свойств товара (color, size). В чанке они вызываются как [[+option.color]] и получается "Цвет: glace;". Хотелось бы сделать "Цвет" сереньким, а после значения убрать точку с запятой. Подскажите пожалуйста где можно отловить формирование строчки "Цвет: glace;", чтобы внести коррективы (завернуть "Цвет:" в span например)? Рассмотрел getChunk в pdotools, но не разобрался :(

bezumkinВасилий Наумкин
11.08.2014 18:31

Вот этот быстрый плейсхолдер выводит строку с цветом в корзине.

_tangoСаша Туманов
11.08.2014 18:36

Ахтыжё! Вчера ведь только об этом читал :) Спасибо большое, а то уже в какие то дебри полез!

bezumkinВасилий Наумкин
11.08.2014 18:37

На здоровье!

Александр
15.08.2014 17:55

Василий, кнопка обязательно должна быть обернута в

<form>

? В

<div>

не работает.

bezumkinВасилий Наумкин
15.08.2014 17:59

Конечно, форма обязательна - именно она и отправляется на сервер для добавления товара в корзину.

Александр
15.08.2014 18:07

Спасибо.

4epenaxa@mail.ruAndrey Aksyuta
19.09.2014 06:13

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

4epenaxa@mail.ruAndrey Aksyuta
19.09.2014 06:36

ООоо)) оперативно) сейчас буду изучать) Спасибо)

4epenaxa@mail.ruAndrey Aksyuta
21.09.2014 06:56

Еще раз здравствуйте, я вчера вечером создал демо-сайт который 24 часа живет, чтобы попробовать ваши платные "допы" для минишопа, а сегодня утром, уже ничго не работает)) Даже по ссылке tefile.modx.pro/create по которой вчера создавал ничего не происходит) перекидывает на админку хостинга. Подскажите, то что я вчера накидал в демо пропало? можно попасть по другому адресу, а не http://s6706.tefile.modx.pro? можно по новой создать демо?

P.S. нашел кнопку добавить демосайт... а что с моим вчерашним?( по новой все создавать?)))) как то я не удачно решил попробовать демо)))

bezumkinВасилий Наумкин
21.09.2014 06:59

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

4epenaxa@mail.ruAndrey Aksyuta
21.09.2014 07:06

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

p.s. жаль что вчерашнее "накидывание" не вернуть))))

4epenaxa@mail.ruAndrey Aksyuta
19.09.2014 06:35

Вот здесь нашел чтото похожее, но не совсем понятно как это работает... https://bezumkin.ru/modx/minishop2/admin/912/

Сергей Лелеко
20.09.2014 16:37

Привет! Штатно можно создать такого рода вывод каталога, что если есть под категории в текущей категории, то выводится список этих под категорий, а если только товары то сразу список товаров? Мне пока единственный вариант видится использовать If

Иван Петров
01.10.2014 09:08

Можно ли сделать количество товара дробным, одна цифра после запятой? и установить начальное значение, например, 1.5, с которого начинается отсчет товара? То, что считает этот сниппет [[ms2_frontend_count_unit]] вижу, но где он сам размещается, не пойму. Буду благодарен за любую подсказку.

bezumkinВасилий Наумкин
01.10.2014 09:19

Нет, нельзя, только редактированием исходников.

Иван Петров
01.10.2014 11:12

Спасибо. И еще три вопроса:) 1. Где можно задать лимит количества товара, т.е. чтобы больше данного числа в корзину добавить было нельзя? И можно ли этот лимит вынести в свойства товара? 2. Можно ли добавить две цены, т.е. если количество товара меньше некоторого n, то считается по одной цене, а если больше, то по другой? 3. Василий, а на платной консультации в скайпе, можете подсказать, что именно в исходниках править? В том числе, хотелось бы убрать отрицательные значения количества товара. В корзину с минусом добавить нельзя, но глаза мозолит.

bezumkinВасилий Наумкин
01.10.2014 11:18

1. Нигде нельзя. Можно расширить класс корзины и управлять количеством и ценами там. 2. Можно добавить новое поле в товар и расширить класс корзины, чтобы переключать цену там. 3. Вот честно, никакого желания нет. Исходники открыты, рядом лежит бесплатный курс по разработке дополнения - разбирайся, это всегда полезно.

Иван Петров
01.10.2014 11:30

Спасибо.

Иван Петров
05.10.2014 20:17

При переключении вариантов доставки с различной стоимостью итоговая сумма заказа не меняется без обновления страницы. Отключил все сторонние скрипты, не помогло. В какую сторону хоть смотреть?:( Буду благодарен за любую подсказку.

Иван Петров
08.10.2014 20:45

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

bezumkinВасилий Наумкин
09.10.2014 02:03

Хоть бы сайт показал.

Открывай консоль браузера и смотри ошибки javascript.

Иван Петров
14.10.2014 09:20

Да вроде нет ошибок. Убрал офис, все равно не пашет http://c25752.tmweb.ru/barxat

bezumkinВасилий Наумкин
14.10.2014 09:30

Я бы удивился, если бы заработало.

У тебя кнопки снаружи формы. Чтобы работать, они должны быть внутри тега form.

Иван Петров
14.10.2014 09:47

бгг я идиот. Огромное спасибо! Извини, что на такой тупняк пришлось отвлечься)

bezumkin
Василий Наумкин
04.07.2022 23:34
Что-то странное у тебя произошло: миграция есть, и вроде как выполнена, но таблицы при этом отсутств...
inetlover
Александр Наумов
03.07.2022 20:36
Василий, спасибо! Все понятно!
bezumkin
Василий Наумкин
02.07.2022 20:28
Спасибо, поправил!
bezumkin
Василий Наумкин
30.06.2022 03:58
Есть ли возможность формировать &quot;friendly URL aliases&quot;, используя аналог translit MODx? ...
bezumkin
Василий Наумкин
27.06.2022 03:32
Спасибо за исправления, очень выручаешь =) Но учитывая количество не описаных в заметке дополнительн...
bezumkin
Василий Наумкин
27.06.2022 03:10
что будет использоваться для вывода многоуровневого меню Посмотри как работают комментарии на этом ...
bezumkin
Василий Наумкин
25.06.2022 11:56
Поправил, спасибо!
bezumkin
Василий Наумкин
21.06.2022 01:58
onLoad(data) { this.total = data.total }, и onLoad({total}) { this.total = total }, В нашем случ...
bezumkin
Василий Наумкин
20.06.2022 14:01
Прекрасно тебя понимаю, я когда сам в этом разбирался - голова дымилась. Но зато теперь прямо-таки п...
bezumkin
Василий Наумкин
20.06.2022 09:30
Не надо, оно по умолчанию так - я просто чуть более подробно написал.