Обзор Shopkeeper 3.0 для MODX Revolution. Shopkeeper modx evo корзина
Shopkeeper - Школа MODX
Теперь, когда у нас есть установленные MODx Evolution и Shopkeeper, давайте подберем шаблон для нашего будущего сайта.
Если у вас есть свой шаблон, который вы хотите использовать, то можете пропустить этот раздел. Вам необходимо только создать два шаблона Категория и Товар и создать ресурс Каталог, а в нем несколько категорий с шаблоном Категория, а в категориях страницы для товара с шаблоном Товар. Затем в TV-параметрах найти параметр price, который был установлен вместе с Шопкипером и назначить его шаблону Товар.
Мы же воспользуемся готовым бесплатным шаблоном, это будет шаблон Wing the Air, посмотреть его можно по этой ссылке, а скачать по этой. Наш интернет-магазин будет продавать обувь.
1. Скачанный файл разархивируем и помещаем в папку C:/xampp/htdocs/shop/www/assets/templates/.
2. Открываем файл index.html из папки WingtheAirFree скачанного архива, копируем содержимое и помещаем в шаблон Minimal Template. Меняем пути в тегах link, script, img, добавляя к ним следующий путь:
Меняем название шаблона на Главная.
3. Переименовываем ресурс MODx CMS Install Success в Главная, удаляем все из поля Содержимое ресурса.
4. Создаем в дереве ресурсов еще четыре ресурса Каталог, Доставка, Акции, Контакты. У ресурса Каталог убираем галочку с Показывать в меню.
5. В папке Каталог создаем три дочерних ресурса, к примеру, такие: Мужская обувь, Женская обувь, Детская обувь. В каждом из этих ресурсов создадим еще несколько дочерних ресурсов, назовем их, к примеру, Модель 1, Модель 2 и т.д.
6. Разбиваем шаблон на чанки. Создаем чанк HEAD и добавляем в него специальные теги MODx, не забывая вырезать из шаблона код и вставлять на его месте вызов соответствующего чанка:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-type" content="text/html; charset=[(modx_charset)]" /> <title>[(site_name)] | [*longtitle*]</title> <base href="[(site_url)]" /> <meta name="keywords" content="[*myKey*]" /> <meta name="description" content="[*description*]" /> <link rel="stylesheet" href="/assets/templates/WingtheAirFree/css/style.css" type="text/css" media="all" /> <!--[if lte IE 6]> <style type="text/css" media="screen"> .tabbed { height:420px; } </style> <![endif]--> <script src="/assets/templates/WingtheAirFree/js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="/assets/templates/WingtheAirFree/js/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="/assets/templates/WingtheAirFree/js/jquery.slide.js" type="text/javascript"></script> <script src="/assets/templates/WingtheAirFree/js/jquery-func.js" type="text/javascript"></script> </head>Теперь создаем три чанка First_Tab_Content, Second_Tab_Content и Third_Tab_Content поместив в них код, находящийся между комментариями с аналогичным текстом. Из-за большого размера кода, приводить его здесь не буду.
Далее, создаем чанк BRANDS с логотипами брендов:
<!-- Brands --> <div> <h4>Brands</h4> <div> <a href="#"><img src="/assets/templates/WingtheAirFree/css/images/logo1.gif" alt="" /></a> <a href="#"><img src="/assets/templates/WingtheAirFree/css/images/logo2.gif" alt="" /></a> <a href="#"><img src="/assets/templates/WingtheAirFree/css/images/logo3.gif" alt="" /></a> <a href="#"><img src="/assets/templates/WingtheAirFree/css/images/logo4.gif" alt="" /></a> <a href="#"><img src="/assets/templates/WingtheAirFree/css/images/logo5.gif" alt="" /></a> </div> </div> <!-- End Brands --><!-- Main --><div> <div> {{SEARCH_CART}} <!-- Content --> <div> {{TABS}} <!-- Container --> <div> <div> {{First_Tab_Content}} {{Second_Tab_Content}}{{Third_Tab_Content}} </div> {{BRANDS}} {{FOOTER}} </div> <!-- End Container --> </div> <!-- End Content --> </div></div><!-- End Main --> </body></html>
7. Создаем шаблон Внутренняя для страниц меню, помещаем в шаблон следующий код:
{{HEAD}}<body><!-- Top --><div> <div> {{HEADER}}{{SLIDER}} </div></div><!-- Top --><!-- Main --><div> <div> {{SEARCH_CART}} <!-- Content --> <div>
<!-- Container --> <div> <div> [*content*] </div> {{BRANDS}} {{FOOTER}} </div> <!-- End Container --> </div> <!-- End Content --> </div></div><!-- End Main --> </body></html>
Назначаем шаблон ресурсам Доставка, Акции, Контакты, а так же категориям товаров Мужская, Женская и Детская обувь.
8. Создаем главное меню. В чанке HEADER в контейнере с меню, вместо ненумерованного списка помещаем вызов сниппета Wayfinder:
[!Wayfinder? &startId=`0` &level=`1`!]Логотип и ссылку на главную страницу в чанке HEADER вы поправите самостоятельно. Картинку логотипа можно поменять в файле со стилями в 29 строке.
9. Создаем слайдер. Можно пойти несколькими путями, но мы привяжем к каждой категории товаров свою картинку, которую будем выводить в слайдере. Для этого создаем TV-параметр slide с типом ввода Image и привяжем его к шаблону Внутренняя. Теперь добавляем ресурсам Мужская, Женская и Детская обувь картинки слайдов. Для собственного интернет-магазина вам придется создать свои картинки с размером 980х418 пикселей, для урока я буду использовать уже созданные дизайнером слайды. Создадим чанк slide_tpl с шаблоном вывода слайдов:
<li><img title="[+longtitle+]" src="[+slide+]" alt="[+longtitle+]" /></li>В чанке SLIDER помещаем вызов сниппета Ditto:
<!-- Slider --> <div> <div> <ul> [!Ditto? &parents=`2` &tpl=`slide_tpl` &depth=`1`!] </ul> </div> <div> <a href="#">Previous</a> <a href="#">Next</a> </div> </div> <!-- End Slider -->Теперь в чанке SEARCH_CART в контейнере с классом search вместо формы с поиском, помещаем еще один вызов сниппета:
<div>[!AjaxSearch? &ajaxSearch=`0` &landingPage=`27` &showResults=`0`!] </div>где &landingPage=`27`- ID ресурса Результаты поиска. У вас он может отличаться.
Теперь необходимо отредактировать шаблон формы ввода поискового запроса в соответствии с нашим дизайном.
Это первый сложный момент. Нужно сравнить код из шаблона сайта, с кодом шаблона сниппета и попытаться их объединить. Я добавил необходимые классы и убрал подпись под формой. Но можно поступить и другим путем и сделать все с помощью CSS, что было бы более правильным решением. Но мне хотелось показать вам и такой вариант решения. Недостаток в том, что при обновлении сниппета обновится и шаблон и придется занова решать этот вопрос. Плюс же этого решения - быстрота реализации.
Код шаблона сниппета находится в файле C:/xampp/htdocs/shop/www/assets/snippets/ajaxSearch/templates/input.tpl.html. Я не буду описывать все шаги по правке шаблона, а просто приведу конечный ркезультат. Открываем этот файл в Notepad++ и вместо того, что в нем находится, помещаем следующий код:
[+as.showInputForm:is=`1`:then=`<form action="[+as.formAction+]" method="post"> <fieldset>[+as.showAsId:is=`1`:then=`<input type="hidden" name="[+as.asName+]" value="[+as.asId+]" />`+] <input type="hidden" name="advsearch" value="[+as.advSearch+]" /> <label> <span><input type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] /></span> </label> [+as.liveSearch:is=`0`:then=` <label> <input type="submit" name="sub" value="[+as.submitText+]" /> </label> `+] </fieldset> </form>`+]Мы просто убрали лишнее и добавили необходимые нам классы. Но совсем без правки CSS файла не обойтись. Дело в том, что тег <fieldset> отображается браузерами с рамкой. Добавляем в наш css-файл /assets/templates/WingtheAirFree/css/style.css следующую конструкцию:
fieldset { border:none;}Заодно из чанка SEARCH_CART удалим код, отвечающий за ссылку на расширенный поиск, так как такого у нас не предполагается, вот этот код:
<span><a href="#">Advanced Search</a></span>11. Редактируем чанк TABS. Создаем три чанка, tabs_tpl с шаблоном вывода закладки:
<li><a href="#"><span>[+pagetitle+]</span></a></li>tabs_tpl_active - с шаблоном вывода активной закладки:
<li><a href="#"><span>[+pagetitle+]</span></a></li>и tabs_tpl_red для вывода последней закладки:
<li><a href="#"><span>[+pagetitle+]</span></a></li>Теперь в чанке TABS помещаем вызов сниппета Ditto:
<!-- Tabs --> <div> <ul> [!Ditto? &parents=`2` &tpl=`tabs_tpl` &tplCurrentDocument=`tabs_tpl_active` &tplLast=`tabs_tpl_red` &depth=`1` &orderBy=`menuindex ASC`!] </ul> </div> <!-- Tabs -->12. Создаем шаблон для страниц с товаром. Копируем код из шаблона Внутренняя и вставляем в новый шаблон Товар. Назначаем этот шаблон всем дочерним документам в папках с категориями Мужская, Женская и Детская обувь.
13. Создаем TV-параметр tovar_img с типом ввода Image и назначаем его шаблону Товар. В этом параметре будут находиться картинки с изображением товара. Добавляем всем страницам с товаром изображения. Размер изображения 136х83 пикселя. Заодно, давайте TV-параметр price тоже назначим шаблону Товар. Этот параметр был создан при установке Shopkeeperа. Он будет содержать стоимость товара. Можно сразу ее проставить.
14. Создаем шаблон для вывода товара. В новый чанк tovar_tpl помещаем следующий код:
<li> <div> <a title="[+pagetitle+]" href="[~[+id+]~]"><img src="[+tovar_img+]" alt="[+pagetitle+]" /></a> </div> <p> Номер изделия: <span>125515</span><br /> Размер : <span>8/8.5/9.5/10/11</span><br /> Производитель: <a href="#">Adidas Shoes</a> </p> <p>Цена: <strong>[+price+]</strong></p></li>К редактированию этого чанка мы еще вернемся, когда будем подключать модуль Shopkeeper.
15. Открываем чанк First_Tab_Content и в нем удаляем все, что находится между тегами <ul> и </ul> и вместо удаленного кода помещаем вызов сниппета Ditto, где &parents=`6` - ID ресурса Мужская обувь, у вас он может отличаться:
<!-- First Tab Content --> <div> <div> <div> </div> <ul>[!Ditto? &parents=`6` &tpl=`tovar_tpl` &depth=`1`!] </ul> <div> </div> </div> </div> <!-- End First Tab Content -->Аналогично поступаем с чанком Second_Tab_Content, только меняем в вызове Ditto id папки на id ресурса Женская обувь:
<!-- Second Tab Content --> <div> <div> <div> </div> <ul>[!Ditto? &parents=`7` &tpl=`tovar_tpl` &depth=`1`!] </ul> <div> </div> </div> </div> <!-- End Second Tab Content -->и с чанком Third_Tab_Content поступаем точно так же, только указываем id ресурса Детская обувь:
<!-- Third Tab Content --> <div> <div> <div> </div> <ul>[!Ditto? &parents=`8` &tpl=`tovar_tpl` &depth=`1`!] </ul> <div> </div> </div> </div> <!-- End Third Tab Content -->16. Для вывода брендов на странице, давайте создадим в дереве ресурсов новый ресурс Бренды, убираем галочку с Показывать в меню, назначаем ему шаблон Внутренняя. Теперь в этой папке создадим еще несколько ресурсов с названием наших брендов. Для этих ресурсов мы создадим новый шаблон Бренды, поместив в него код из шаблона Внутренняя. Затем создадим два TV-параметра brands_foto с типом ввода Image и brands_link с типом ввода URL и назначим их шаблону Бренды. Добавляем в ресурсах с шаблоном Бренды картинки и ссылки на сайты производителей.
Создаем чанк brands_tpl:
<a href="[+brands_link+]"><img src="[+brands_foto+]" alt="[+pagetitle+]" /></a>В чанке BRANDS помещаем вызов сниппета Ditto, где &parents=`28` - id ресурса Бренды:
<!-- Brands --> <div> <h4>Наши бренды</h4> <div> [!Ditto? &parents=`28` &tpl=`brands_tpl` &depth=`1` &orderBy=`menuindex ASC`!] </div> </div> <!-- End Brands -->17. Остался последний чанк FOOTER. В нем находится меню сайта и копирайт. Сложность в том, что пункты меню разделены вертикальной чертой. Поэтому, сниппет Wayfinder для вывода этого меню нам не подходит, воспользуемся сниппетом Ditto. Для начала создадим два чанка footer_tpl
<a href="[~[+id+]~]">[+pagetitle+]</a> <span>|</span>и footer_tpl_last
<a href="[~[+id+]~]">[+pagetitle+]</a>Затем в чанке FOOTER помещаем вызов Ditto:
<!-- Footer --> <div> <div>[!Ditto? &parents=`0` &tpl=`footer_tpl` &tplLast=`footer_tpl_last` &depth=`1` &orderBy=`menuindex ASC` &showInMenuOnly=`1`!]</div> <div> © Shop.ru </div> </div> <!-- End Footer -->
На этом интеграция дизайна в MODx завершена. Чтобы заполнить контентом страницы Доставка, Акции и Контакты, достаточно разместить в окне Содержимое ресурса нужную информацию и отформатировать ее с помощью встроенного редактора.
i--gu.ru
Evo Shopkeeper - передать в корзину произвольную цену / Вопросы / MODX.im
Приветствую!Шопкипер понадобился для параллельного учета платежей на сайте оплаты транспортно-экспедиционных услуг. Оплата должна производиться согласно счета, выданного заказчику, т.о. в корзину должны попадать произвольные данные. И если с передачей даты выписания счета, его номера, типа услуги проблем не возникло (input type=«text» name=«test__[*id*]__add» value=«дополнительные данные»), то с суммой так не вышло. По совету бывалых проверил такие конструкции:
<input type="number" name="[*id*]__price" placeholder="Сумма" value="[*price*]">и<input type="number" name="price__[*id*]__add" placeholder="Сумма" value="0">и<input type="number" name="price__[*id*]__add" placeholder="Сумма" value="0"> вот так выглядит код формы оплаты услуги <form method="post" action="[~[*id*]~]"> <input type="hidden" name="shk-id" value="[*id*]" /> <input type="hidden" name="shk-name" value="[*longtitle*]" /> <input type="hidden" name="shk-count" value="1" size="2" maxlength="1" /> <div> <div> <div> <label for="date">Счет от *</label> <input type="date" name="date__[*id*]__add" placeholder="Счет от" > </div> </div> <div> <div> <label for="number">Номер счета *</label> <input type="number" name="number__[*id*]__add" placeholder="Номер" > </div> </div> <div> <div> <label for="sum">Сумма *</label> <input type="number" name="[*id*]__price" placeholder="Сумма" value="[*price*]"> </div> </div> <div> <div> <label for="service">Услуга *</label> <select name="service__[*id*]__add" > <option value=""></option> <option value="Зафрахтовать фуру">Зафрахтовать фуру</option> <option value="Экспедирование по городу">Экспедирование по городу</option> <option value="Погрузка-выгрузка">Погрузка-выгрузка</option> <option value="Перевозка ж/д транспортом">Перевозка ж/д транспортом</option> <option value="Перевозка авто-транспортом">Перевозка автотранспортом</option> </select> </div> </div> </div> <div> <input type="submit" name="submit" value="Оплатить заказ"/> <small>Важно! Внимательно заполняйте все данные</small> </div> </form> в шопкипере ничего не менял — установлен чз extras. Его вызов выше формы: <section> <div> [!Shopkeeper? &noJQuery=`1` &flyToCart=`nofly` &priceTV=`price`!] </div> </section> иные параметры пока не ставил — не до них) Значение цены в админке — 0…Прошу совета участников сообщества.
modx.im
Обзор Shopkeeper 3.0 для MODX Revolution / Хабр
Shopkeeper — это модуль для создания интернет-магазина на CMS MODX. В этой статье я расскажу что нового в Shopkeeper 3.0, какие новые возможности и какие отличия от предыдущей версии. Но сначала немного истории.
История создания
Первая версия Shopkeeper вышла больше 5 лет назад, в 2009 году. Тогда очень не хватало решения для создания интернет-магазина на MODX. Shopkeeper не был первым, но был довольно не плохо востребован. До сих пор кто-то использует его на MODX Evolution, хотя последняя версия для этой платформы вышла в 2011 году. Затем был выпущен SHK 2.x для MODX Revolution. Для Revo первым был компонент VisionCart, но мне он сразу не понравился запутанным интерфейсом. Его развитие похоже заглохло ещё в 2011 году. Вскоре за Шопкипером вышли ещё достойные компоненты интернет-магазинов и приятно осознавать, что всё это выпущено российскими разработчиками. Теперь пришло время Shopkeeper 3.Что нового в Shopkeeper 3
Интерфейс создан с использованием Bootstrap и AngularJS. Конечно, скрещивание этих инструментов с ExtJS, который используется в MODX Revo, может показаться излишеством, но уживаются они довольно не плохо. После того как я попробовал AngularJS использовать что-то другое совсем не хотелось. Тем более это лишний раз доказывает универсальность MODX. Думаю вы не будете разочарованы этим решением.В конфигурации компонента теперь можно задать не только статусы заказов, но и курсы валют, поля в таблице заказов, контактные данные заказов, методы доставки и способы оплаты. Для доставки можно указать сумму заказа, при которой доставка станет бесплатной. Для каждого статуса заказа можно указать свой шаблон письма пользователю, если оставить поле пустым, письмо отправляться не будет.
Есть раздел «Статистика». Пока он только показывает статистику числа заказов по месяцам, но планируется его расширение.
Так выглядит редактирование заказа:
Сниппеты и плагины
Сниппет Shopkeeper в шаблоне сайта теперь нужно вызывать так:[[!Shopkeeper3@cart_catalog]] cart_catalog — Имя набора параметров. Рекомендуется все параметры указывать в наборе параметров, т.к. нужно синхронизировать эти параметры при аякс-запросе.Можно выводить две и более корзины на одной странице. В настройках системы нужно перечислить все используемые наборы параметров для SHK (параметр «shk3.property_sets»), а в чанке корзины для оберточного элемента добавить атрибут «data-shopcart» с номером набора параметра. По этому номеру будет производиться обновление корзины.
Пример чанка корзины товаров<div data-shopcart="1"> <div><b>Корзина</b></div> <div> <div>Пусто</div> </div> </div> <!--tpl_separator--> <div data-shopcart="1"> <div><a name="shopCart"></a><b>Корзина</b></div> <div> <form action="[[+this_page_url]]#shopCart" method="post"> <fieldset> <div > <a href="[[+empty_url]]">Очистить корзину</a> </div> <table> <colgroup> <col /> <col /> <col /> <col /> </colgroup> <tbody> [[+inner]] </tbody> </table> <div > Доставка: [[+delivery_name]] ([[+delivery_price]] [[+currency]]) </div> <div > Общая сумма: <b>[[+price_total]]</b> [[+currency]] </div> <noscript> <div><input type="submit" name="shk_recount" value="Пересчитать" /></div> </noscript> <div> <a href="[[+order_page_url]]">Оформить заказ</a> </div> </fieldset> </form> </div> </div> Как и в версии 2.x, чанк состоит из двух частей со специальным разделителем <!--tpl_separator--> Первая часть — чанк пустой корзины товаров. Вторая часть — чанк корзины с товарами.Уже готовы к использованию опциональные дополнения:shkOptions — новый сниппет для вывода конфигурации Shopkeeper. Например можно выводить список способов доставки и оплаты.hk_fihook — хук для FormIt, который используется для отправки писем после оформления заказа.num_format — сниппет-модификатор для разделения чисел цен на разряды.shk_curr_rate — сниппет-модификатор для вывода цен по курсу, если в магазине используется мультивалютность.shk_contextSwitch — плагин для автоматического переключения контекстов.shk_updateInventory — плагин для учета количества товаров на складе.shk_multicurrency — плагин для пересчета цен при изменении валюты. Подробнее в документации, которая всегда идет в комплекте ("/core/components/shopkeeper3/docs/readme.txt").
Переписаны shopkeeper.js и shopkeeper.class.php, но по функционалу отличия не значительные.
Как перейти с Shopkeeper 2.x на 3.0
Примерный список действий по обновлению:- Сделать резервную копию сайта (файлов и БД).
- Удалить вручную сниппеты и плагины в категории «Shopkeeper» (от старой версии). Сам компонент удалять не обязательно.
- Установить SHK 3 и обновить вызовы сниппета Shopkeeper в шаблонах.
- Создать наборы параметров для сниппета. Произвести настройки в соответствии с новой документацией.
- Отредактировать чанки корзины, добавить атрибут «data-shopcart».
- Настроить новые плагины, если они используются.
- Если используется вывод способов доставки, обновить в соответствии с новой документацией (сниппет «shkOptions»).
- Если вы создавали свои сниппеты или плагины и использовали обращение в таблицам SHK в БД, нужно изменить имена пакета и объектов в коде.
На данный момент доступна версия Shopkeeper 3.0rc5.
Компонент в репозитории MODX: http://modx.com/extras/package/shopkeeper3 Сайт проекта: http://modx-shopkeeper.ru/ Форум поддержки: http://modx-shopkeeper.ru/forum/ Исходный код: https://bitbucket.org/andchir/shopkeeper-3 Демо-сайт: http://demo.modx-shopkeeper.ru/ (в разработке, работает не всё что запланировано)
habr.com
