Shopkeeper Интернет-магазин на MODX

Для создания интернет-магазина на MODx Evolution мы воспользуемся готовым решением - Shopkeeper. Это бесплатный программный модуль для создания интернет-магазина, написанный на языке PHP. Хочу сразу предупредить, что данный модуль подойдет лишь для небольшого интернет-магазина, работающего без связки с 1С. На момент написания урока, последней версией модуля была Shopkeeper 1.3.4, а последней версией MODx Evolution 1.0.5.

Наш урок будет состоять из двух частей, в первой части урока мы выберем шаблон для нашего интернет-магазина и интегрируем его в MODx. Здесь мы совершим такие же шаги, как и в предыдущих уроках, только в более сжатом виде. Поэтому, многие из вас могут пропустить первую часть и сразу перейти ко второй части нашего урока, где мы будем интегрировать Shopkeeper в дизайн нашего сайта.

Хочется добавить, что создатели модуля Shopkeeper снабдили нас подробной документацией.

Так как данный урок я решил не разбивать на отдельные уроки, он получился довольно объемным. Но вы всегда можете воспользоваться кратким изложением урока, чтобы впоследствии отыскать необходимую информацию. Итак, приступим.

Установка Shopkeeper 1.3.4 для MODx Evolution 1.х.х.

Скачайте свежую версию CMS MODx Evolution (1.x.x) и свежую версию Shopkeeper.

В скачанном архиве Shopkeeper в файле shopkeeper_1.3.4/shopkeeper/docs/ru/_rus_doc_install.html вы найдете инструкцию по установке модуля. Существует три варианта установки:

Автоматическая установка Shopkeeper на уже установленный MODx
Установка MODx вместе с Shopkeeper
Ручная установка Shopkeeper на уже установленный MODx

Так как я заранее знаю, что мой сайт будет интернет-магазином, я выбираю второй вариант - установку Shopkeeper вместе с MODx. Локальный сервер XAMPP у нас уже установлен (если нет, то инструкция по установке находится в Уроке 1), поэтому переходим к установке MODx и модуля интернет-магазина.

1. Создаем в папке C:/xampp/htdocs/ папку shop, а в ней папки www и logs

2. В папку www помещаем файлы из папки modx-1.0.5 из скачанного архива MODx.

3. Создаем в PhpMyadmin новую базу shop и пользователя shop с паролем shop. Назначаем полные привелегии пользователю shop.

4. В файл C:/xampp/apache/conf/extra/httpd-vhosts.conf добавляем следующую конструкцию:

<VirtualHost 127.0.0.1>
  ServerName shop
  ServerAlias www.shop
  ServerAdmin admin@shop.ru
  DocumentRoot "C:/xampp/htdocs/shop/www/"
  ErrorLog "C:/xampp/htdocs/shop/logs/error.log"
  CustomLog "C:/xampp/htdocs/shop/logs/access.log" combined
<Directory "C:/xampp/htdocs/shop/www/">
  AllowOverride All
  Order allow,deny
  Allow from all
</Directory>
</VirtualHost>

5. В файл hosts находящийся в Windows 7 по адресу C:/Windows/Sistem32/drivers/etc/ добавляем:

127.0.0.1 shop

6. Помещаем папку shopkeeper/ из скачанного архива Shopkeeper в каталог assets/snippets/ .

7. Дополняем содержимое папки assets/ файлами из папки _upload/assets/.

8. Перемещаем из архива Shopkeeper папку install/assets/ в папку install/ в корне сайта.

9. Запускаем установку MODx (http://shop/install/).

Тут будет один важный момент, когда будем вводить префикс таблиц, указываем его как shop_  и запоминаем, нам он потом пригодится. Но если не запомнили, не беда, всегда можно его посмотреть в PhpMyadmin.

На втором шаге в списке компонентов, кроме компонентов MODx, вы увидите устанавливаемые компоненты Shopkeeperа:
Параметры (TV) - Price
Модули - Shopkeeper
Cниппеты - Shopkeeper, catalogView, include.
Завершаем установку, следуя указаниям программы установки.

10. Переименовываем файл ht.access в .htaccess.

11. Заходим в административную панель MODx (http://shop/manager/) и настраиваем Конфигурацию (подробная инструкция в Уроке 2).

Интегрируем шаблон в 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, добавляя к ним следующий путь:

/assets/templates/WingtheAirFree/

Меняем название шаблона на Главная.

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>

Создаем чанк HEADER - шапка нашего сайта:

<!-- Header -->
        <div id="header">
            <h1 id="logo"><a href="#">Urgan Gear</a></h1>
            <div id="navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">My Account</a></li>
                    <li><a href="#">The Store</a></li>
                    <li class="last"><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <!-- End Header -->

Создаем чанк SLIDER - слайдер в шапке сайта:

        <!-- Slider -->
        <div id="slider">
            <div id="slider-holder">
                <ul>
                    <li><a href="#"><img src="/assets/templates/WingtheAirFree/css/images/slide1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="/assets/templates/WingtheAirFree/css/images/slide2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="/assets/templates/WingtheAirFree/css/images/slide1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="/assets/templates/WingtheAirFree/css/images/slide2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="/assets/templates/WingtheAirFree/css/images/slide1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="/assets/templates/WingtheAirFree/css/images/slide2.jpg" alt="" /></a></li>
                </ul>
            </div>
            <div id="slider-nav">
                <a href="#" class="prev">Previous</a>
                <a href="#" class="next">Next</a>
            </div>
        </div>
        <!-- End Slider -->

Создаем чанк SEARCH_CART, блок с поиском и корзиной:

        <!-- Search, etc -->
        <div class="options">
            <div class="search">
                <form action="" method="post">
                    <span class="field"><input type="text" class="blink" value="SEARCH" title="SEARCH" /></span>
                    <input type="text" class="search-submit" value="GO" />
                </form>
            </div>
            <span class="left"><a href="#">Advanced Search</a></span>
            
            <div class="right">
                <span class="cart">
                    <a href="#" class="cart-ico">&nbsp;</a>
                    <strong>$0.00</strong>
                </span>
                <span class="left more-links">
                    <a href="#">Checkout</a>
                    <a href="#">Details</a>
                </span>
            </div>
        </div>
        <!-- End Search, etc -->

Создаем чанк TABS - закладки с категориями товаров:

            <!-- Tabs -->
            <div class="tabs">
                <ul>
                    <li><a href="#" class="active"><span>Safety Shoes</span></a></li>
                    <li><a href="#"><span>Sport Shoes</span></a></li>
                    <li><a href="#" class="red"><span>More Shoes</span></a></li>
                </ul>
            </div>
            <!-- Tabs -->

Теперь создаем три чанка First_Tab_Content, Second_Tab_Content и Third_Tab_Content поместив в них код, находящийся между комментариями с аналогичным текстом. Из-за большого размера кода, приводить его здесь не буду.

Далее, создаем чанк BRANDS с логотипами брендов:

                <!-- Brands -->
                <div class="brands">
                    <h3>Brands</h3>
                    <div class="logos">
                        <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 -->

Ну и наконец, последний чанк FOOTER:

                <!-- Footer -->
                <div id="footer">
                    <div class="left">
                        <a href="#">Home</a>
                        <span>|</span>
                        <a href="#">Support</a>
                        <span>|</span>
                        <a href="#">My Account</a>
                        <span>|</span>
                        <a href="#">The Store</a>
                        <span>|</span>
                        <a href="#">Contact</a>
                    </div>
                    <div class="right">
                        &copy; Sitename.com. Design by <a href="http://chocotemplates.com" target="_blank" title="CSS Templates">ChocoTemplates.com</a>
                    </div>
                </div>
                <!-- End Footer -->

После всех изменений, шаблон Главная должен принять следующий вид:

{{HEAD}}
<body>
<!-- Top -->
<div id="top">
    
    <div class="shell">
                
{{HEADER}}
{{SLIDER}}
        
    </div>
</div>
<!-- Top -->

<!-- Main -->
<div id="main">
    <div class="shell">
        
{{SEARCH_CART}}
        
        <!-- Content -->
        <div id="content">
            
{{TABS}}
            
            <!-- Container -->
            <div id="container">
                
                <div class="tabbed">
                    
{{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 id="top">
    
    <div class="shell">
                
{{HEADER}}
{{SLIDER}}
        
    </div>
</div>
<!-- Top -->

<!-- Main -->
<div id="main">
    <div class="shell">
        
{{SEARCH_CART}}
        
        <!-- Content -->
        <div id="content">
            

            
            <!-- Container -->
            <div id="container">
                
                <div class="tabbed">
                    
[*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 id="slider">
            <div id="slider-holder">
                <ul>
                     [!Ditto? &parents=`2` &tpl=`slide_tpl` &depth=`1`!]
                </ul>
            </div>
            <div id="slider-nav">
                <a href="#" class="prev">Previous</a>
                <a href="#" class="next">Next</a>
            </div>
        </div>
        <!-- End Slider -->

10. Делаем поиск по сайту, сниппет AjaxSearch. Для начала создаем в дереве ресурсов еще один ресурс Результаты поиска, убираем галочку с Показывать в меню, а в настройках страницы убераем галочки с Доступен для поиска, Кэшируемый и Использовать HTML-редактор. Назначаем ресурсу шаблон Внутренняя. Сохраняем, затем открываем и помещаем в Содержимое ресурса вызов сниппета AjaxSearch:

[!AjaxSearch? &ajaxSearch=`0` &pagingType=`0` &showInputForm=`0` !]

Теперь в чанке SEARCH_CART в контейнере с классом search вместо формы с поиском, помещаем еще один вызов сниппета:

            <div class="search">
[!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 id="[+as.formId+]" 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 class="field"><input id="[+as.inputId+]"  class="blink" type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] /></span>
    </label>
    [+as.liveSearch:is=`0`:then=`
        <label>
            <input id="[+as.submitId+]" class="search-submit" 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 class="left"><a href="#">Advanced Search</a></span>

11. Редактируем чанк TABS. Создаем три чанка, tabs_tpl с шаблоном вывода закладки:

<li><a href="#"><span>[+pagetitle+]</span></a></li>

tabs_tpl_active - с шаблоном вывода активной закладки:

<li><a href="#" class="active"><span>[+pagetitle+]</span></a></li>

и tabs_tpl_red для вывода последней закладки:

<li><a href="#" class="red"><span>[+pagetitle+]</span></a></li>

Теперь в чанке TABS помещаем вызов сниппета Ditto:

            <!-- Tabs -->
            <div class="tabs">
                <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 class="image">
            <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 class="price">Цена: <strong>[+price+]</strong></p>
</li>

К редактированию этого чанка мы еще вернемся, когда будем подключать модуль Shopkeeper.

15. Открываем чанк First_Tab_Content и в нем удаляем все, что находится между тегами <ul> и </ul> и вместо удаленного кода помещаем вызов сниппета Ditto, где &parents=`6` - ID ресурса Мужская обувь, у вас он может отличаться:

                    <!-- First Tab Content -->
                    <div class="tab-content" style="display:block;">
                        <div class="items">
                            <div class="cl">&nbsp;</div>
                            <ul>
[!Ditto? &parents=`6` &tpl=`tovar_tpl` &depth=`1`!]
                            </ul>
                            <div class="cl">&nbsp;</div>
                        </div>
                    </div>
                    <!-- End First Tab Content -->

Аналогично поступаем с чанком Second_Tab_Content, только меняем в вызове Ditto id папки на id ресурса Женская обувь:

                    <!-- Second Tab Content -->
                    <div class="tab-content">
                        <div class="items">
                            <div class="cl">&nbsp;</div>
                            <ul>
[!Ditto? &parents=`7` &tpl=`tovar_tpl` &depth=`1`!]
                            </ul>
                            <div class="cl">&nbsp;</div>
                        </div>
                    </div>
                    <!-- End Second Tab Content -->

и с чанком Third_Tab_Content поступаем точно так же, только указываем id ресурса Детская обувь:

                    <!-- Third Tab Content -->
                    <div class="tab-content">
                        <div class="items">
                            <div class="cl">&nbsp;</div>
                            <ul>
[!Ditto? &parents=`8` &tpl=`tovar_tpl` &depth=`1`!]
                            </ul>
                            <div class="cl">&nbsp;</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 class="brands">
                    <h3>Наши бренды</h3>
                    <div class="logos">
                        [!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 id="footer">
                    <div class="left">
[!Ditto? &parents=`0` &tpl=`footer_tpl` &tplLast=`footer_tpl_last` &depth=`1` &orderBy=`menuindex ASC` &showInMenuOnly=`1`!]
                

                    </div>
                    <div class="right">
                        &copy; Shop.ru
                    </div>
                </div>
                <!-- End Footer -->

На этом интеграция дизайна в MODx завершена. Чтобы заполнить контентом страницы Доставка, Акции и Контакты, достаточно разместить в окне Содержимое ресурса нужную информацию и отформатировать ее с помощью встроенного редактора.

Подключаем программный модуль Shopkeeper

Давайте разберемся, что же это такое Shopkeeper из чего он состоит.

Shopkeeper — это программный модуль для создания интернет-магазина, написанный на языке PHP, для системы управления сайтом (CMS) MODx. 

Состоит же он много из чего, это и корзина товаров (сниппет Shopkeeper), и форма заказа (сниппет eForm), и модуль управления заказами, и модификатор shk_widget для плагина PHx (для создания виджетов), и плагин paramEdit (для управления дополнительными параметрами), и много чего еще, в том числе платные и бесплатные дополнения и сниппеты. Вот со всем этим мы и будем разбираться на этом уроке. Но не стоит пугаться раньше времени, все не так страшно.

Модуль (административная часть) Shopkeeper

Модуль у нас уже установлен и находится в административной части MODx (Модули >> Shopkeeper). При первом заходе в модуль, мы увидим кнопку Установить. Жмем ее.  Затем заходим в Конфигурацию и в поле ID TV-параметра цены: помещаем ID TV-параметра price, это цифра в круглых скобках, рядом с названием параметра, у меня это 4. Сохраняем.

Модуль (административная часть) Shopkeeper предназначен для редактирования и удаления поступивших заказов; позволяет установить заказу статус (новый, в процессе выполнения, отправлен, выполнен, возникли проблемы); писать заметки к каждому заказу; сортировать заказы; управлять товарами в каталоге (создание, редактирование).

Ссылка на документацию модуля: /assets/snippets/shopkeeper/docs/ru/rus_doc_module.htm

Устанавливаем плагин PHx

Создатели Shopkeeperа настоятельно рекомендуют нам установить данный плагин. Этот плагин не является частью Shopkeeperа и его необходимо устанавливать отдельно.

PHx (Placeholders Xtended) добавляет новые возможности для отображения плейсхолдеров, тегов MODx (включая TV параметры) и теги настроек сайта. Рекурсивный парсер позволяет использовать вложенные теги. Возможно создавать свои модификаторы, путем создания сниппетов. 

1. Скачиваем плагин по этой ссылке. Разархивируем.
2. Создаем новую папку phx в директории /assets/plugins, если такой у вас еще нет. Но если вы устанавливали MODx вместе с Shopkeeperом, то она у вас уже должна быть.
3. Копируем из папки PHx_2.1.4 (у вас возможна другая версия) скачанного архива все файлы и помещаем их в папку /assets/plugins/phx.
4. В административной панели идем в Элементы >> Управление элементами >> Плагины и создаем новый плагин phx, а в код плагина вставляем содержимое файла phx.plugin.txt из скаченного архива.
5. На закладке Системные события находим и отмечаем событие "OnParseDocument", это во второй группе событий сверху. Сохраняем плагин.

Создаем корзину заказов, сниппет Shopkeeper

Сниппет выводит корзину заказов двух типов (расширенный и простой). Письмо с заказом можно отправлять на почту и в модуль Shopkeeper (рекомендуется). Товарам можно задавать дополнительные параметры, которые пользователь сможет выбрать. Для создания формы заказа нужно использовать сниппет eForm, для вывода списка товаров - CatalogView или Ditto.

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

1. Создание шаблона простой корзины
2. Размещение вызова простой корзины
3. Размещение вызова расширенной корзины
4. Создание формы заказа
5. Создание шаблона для вывода краткой информации о товаре (на главной странице с помощью сниппета Ditto)
6. Создание шаблона для вывода расширенной информации о товаре (на странице товара)

Начнем по порядку.

1. Шаблон простой корзины

Готовые примеры шаблонов корзины находятся в файле assets/snippets/shopkeeper/chunks/ru/chunk_shopCart.tpl.

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

Давайте изучим код корзины в нашем шаблоне и сравним с кодом шаблонов из файла chunk_shopCart.tpl.

Этот код из чанка SEARCH_CART нашего шаблона, который отвечает за внешний вид корзины:

            <div class="right">
                <span class="cart">
                    <a href="#" class="cart-ico">&nbsp;</a>
                    <strong>$0.00</strong>
                </span>
                <span class="left more-links">
                    <a href="#">Checkout</a>
                    <a href="#">Details</a>
                </span>
            </div>

А этот из файла chunk_shopCart.tpl, где <!--tpl_separator--> служит разделителем между типами корзин:

<div id="shopCart" class="shop-cart">
  <div class="shop-cart-head"><b>Корзина</b></div>
  <div id="cartInner" class="empty">
    <div id="cartEmpty" style="text-align:center;">Пусто</div>
  </div>
  [+plugin+]
</div>
<!--tpl_separator-->
<div id="shopCart" class="shop-cart">
  <div class="shop-cart-head"><a name="shopCart"></a><b>Корзина</b></div>
  <div id="cartInner" class="full">
    <form action="[+this_page_url+]#shopCart" method="post">
    <fieldset>
      <div  style="text-align:right;">
        <a href="[+empty_url+]" id="butEmptyCart">Очистить корзину</a>
      </div>
      <table width="100%">
        <tbody>
          [+inner+]
        </tbody>
      </table>
      <div  style="text-align:right;">Общая сумма: <b>[+price_total+]</b> [+currency+]</div>
      <noscript>
        <fieldset><input type="submit" name="shk_recount" value="Пересчитать" /></fieldset>
      </noscript>
      <div class="cart-order">
        <a href="[+order_page_url+]" id="butOrder">Оформить заказ</a>
      </div>
    </fieldset>
    </form>
  </div>
  [+plugin+]
</div>
<!--tpl_separator-->
<div id="shopCart" class="shop-cart">
  <div class="shop-cart-head"><b>Корзина</b></div>
  <div id="cartInner" class="full">
    <div  style="text-align:right;">
      <a href="[+empty_url+]" id="butEmptyCart">Очистить корзину</a>
    </div>
    <div class="shop-cart-body">Выбрано: <b>[+total_items+]</b> [+plural+]</div>
    <div  style="text-align:right;">Общая сумма: <b>[+price_total+]</b> [+currency+]
    </div>
    <div class="cart-order">
      <a href="[+order_page_url+]" id="butOrder">Оформить заказ</a>
    </div>
  </div>
  [+plugin+]
</div>

Нам необходимо объединить эти коды. Первым делом обращаемся к документации сниппета /assets/snippets/shopkeeper/docs/ru/rus_doc_snippet.html и из таблицы «Необходимые CSS-классы, Id и имена полей» узнаем, что обязательными элементами в шаблоне корзины являются id HTML-элементов:

shopCart - id "обертывающего" элемента блока корзины;
butEmptyCart - id кнопки-ссылки очистки корзины;
butOrder - id ссылки на страницу оформление товара.

а так же

shk_recount - значение атрибута name кнопки "Пересчитать".

Там же в документации в таблице «Шаблоны (чанки) и плейсхолдеры» находим информацию об используемых плейсхолдерах:

[+inner+] - строка с информацией о товаре (cartRowTpl);
[+price_total+] - Общая сумма;
[+this_page_url+] - URL текущей страницы;
[+empty_url+] - URL для очистки корзины;
[+order_page_url+] - URL страницы оформления заказа;
[+currency+] - валюта;
[+total_items+] - Число выбранных товаров;
[+plural+] - слово "товар" во множественном числе в зависимости от числа выбранных товаров;

Еще нам необходимо оставить в шаблоне следующий плейсхолдер:

[+plugin+] - используется для вывода информации в чанке &cartTpl

Давайте теперь начнем объединять коды. Мы оставим все обязательные id HTML-элементов и плейсхолдеры.

И вот что у меня получилось:

<div id="shopCart" class="right">
    <span class="cart">
        <a href="#" class="cart-ico">&nbsp;</a>
        <strong>0 руб.</strong>
    </span>
  [+plugin+]
</div>
<!--tpl_separator-->
<div id="shopCart" class="right">
    <form action="[+this_page_url+]#shopCart" method="post">
    <fieldset>
        <span class="cart">
            <a href="#" class="cart-ico">&nbsp;</a>
            <strong>[+price_total+] [+currency+]</strong>
        </span>
        <span class="left more-links">                        
            <a href="[+empty_url+]" id="butEmptyCart">Сброс</a>               
            <a href="[+order_page_url+]" id="butOrder">Оформить заказ</a>            
        </span>

        <noscript>
            <fieldset><input type="submit" name="shk_recount" value="Пересчитать" /></fieldset>
        </noscript>
    </fieldset>
    </form>

  [+plugin+]
</div>          

Здесь два типа сокращенной корзины пустая и не пустая, корзина содержит только общую стоимость заказанного товара без его описания.  Сохраняем данный код как чанк cartTpl с описанием Шаблон сокращенной корзины.

Ссылка на документацию сниппета: /assets/snippets/shopkeeper/docs/ru/rus_doc_snippet.html

2. Размещение вызова простой корзины

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

[!Shopkeeper? &cartTpl=`cartTpl` &priceTV=`price` &orderFormPage=`34`  &hideOn=`34` &currency=`руб.` &noJQuery=`1`!]

где обязательные параметры:

&cartTpl=`cartTpl` - чанк с шаблоном сокращенной крозины, обязательно указать, если мы используем шаблон из чанка в системе управления MODx. По умолчанию `@FILE:chunk_shopCart.tpl`.
&orderFormPage=`34` - ID страницы с формой заказа (вы эту страницу еще не создали, запомните где нужно указать ее ID)

и не обязательные параметры

&lang=`russian` - Язык системы управления. В настоящее время доступны языки:
`russian`, `english`, `german`, `francais`
&style=`0` - если не нужен отдельный стилевой файл для корзины. По умолчанию значение `default` стили из файла (assets/snippets/shopkeeper/style/default/style.css).
&cartType=`small` - тип корзины: `full` - расширенный, `small` - простой, `empty` - только очистка корзины без вывода на странице. По умолчанию `full`.
&currency=`руб.` - если используется другая валюта, необходимо применить этот параметр, указав нужную валюту. По умолчанию `руб.`
&priceTV=`price` - если ваш TV для цены имеет название не "price", обязательно укажите это имя в данном параметре.
&noJQuery=`1` - если на сайте уже используется библиотека JQuery, для корректной работы необходимо указывать данный параметр. По умолчанию `0`.
&noConflict=`1` - если на сайте используется другая JS-библиотека (не JQuery), например Mootools, Prototype. По умолчанию `0`.
&noCounter=`1` - скрывать (значение `1`) или нет (значение `0`) счетчик товаров при добавлении в корзину. По умолчанию `0`.
&linkAllow=`0` - Выводить названия товаров в корзине без ссылок. По умолчанию `1`. Если этот параметр указан (=`0`) на странице оформления заказа, письмо с составом заказа и список товаров в модуле будут без ссылок.
&stuffCont=`элемент.css-селектор` - CSS-селектор элемента, внутри которого находится информация о товаре. По умолчанию `div.shk-item`. Пример чанка: /assets/snippets/shopkeeper/chunks/ru/chunk_shopStuff.tpl
&debug=`1` - запустить отладку JavaScript-функций (вывод информации). По умолчанию `0`.
&tplPath=`Путь` - путь до папки с чанками. По умолчанию `assets/snippets/shopkeeper/chunks/ru/`.
&cartRowTpl=`Имя чанка` - чанк шаблона строки с информацией товара в расширенной корзине. По умолчанию `@FILE:chunk_shopCartRow.tpl`.
&cartHelperTpl=`Имя чанка` - чанк шаблона "хелпера" - блока, который появляется для подтверждения действий.
&additDataTpl=`Имя чанка` - чанк для доп. параметров товаров в корзине ([+addit_data+])
&orderDataTpl=`Имя чанка` - чанк списка товаров в отчете о заказе ([+orderData+]). Используется в письме с отчетом о заказе (eForm &report) и в модуле.
&flyToCart=`image` - действие при добавлении товара в корзину: `helper` - появляется блок со счетчиком кол-ва товаров и летит в корзину, `image` - в корзину летит картинка товара, `nofly` - в корзину ничего не летит. По умолчанию `helper. При &flyToCart=`image` тег <img> должен иметь CSS-класс "shk-image".
&noLoader=`1` - не паказывать прелоадер (анимационная картинка). По умолчанию `0`.
&excepDigitGroup=`1` - разделять числа цен в корзине на разряды. По умолчанию `1`.
&changePrice=`1` - при изменении параметров с ценой - изменяется цена товара, а индекс с плюсом не появляется. По умолчанию `0`.
&counterField=`1` - добавить ко всем полям <input name="shk-count"> (кол-во товара) стрелки больше/меньше. По умолчанию `0`.
&noJavaScript=`1` - работа без JavaScript. По умолчанию `0`. Обратите внимание, что в чанке "shopCart" кнопка "Пересчитать" находится внутри тега "noscript". Если используется режим &noJavaScript=`1`, рекомендуется тег "noscript" удалить.
&hideOn=`ID ресурса с подробным видом корзины` - отключить корзину на странице. Обычно используется в вызове сниппета краткого вида корзины. Указывается ID страницы с подробным видом корзины (оформление заказа). На этой странице краткий вид корзины будет отключен.

Теперь помещаем вызов чанка shop в чанк SEARCH_CART:

        <!-- Search, etc -->
        <div class="options">
            <div class="search">
[!AjaxSearch? &ajaxSearch=`0` &landingPage=`27` &showResults=`0`!]
            </div>        
            {{shop}}

        </div>
        <!-- End Search, etc -->

3. Размещение вызова расширенной корзины

Для начала, давайте создадим ресурс для вывода расширенной корзины и формы заказа. Назовем его Форма заказа, шаблон Внутренняя, убираем галочки с Показывать в меню, Использовать HTML-редактор,  Доступен для поиска и Кэшируемый и помещаем в содержимое ресурса вызов расширенной корзины:

[!Shopkeeper? &cartType=`full` &priceTV=`price` &orderFormPage=`34`  &currency=`руб.` &noJQuery=`1`!]

Запоминаем ID этого ресурса и указываем его в параметре &orderFormPage=`34` при вызове как сокращенной, так и расширенной корзины, у меня этот ID=34.

Как видите, вызов расширенной корзины у нас не сильно отличается от вызова сокращенной, только для шаблона корзины мы теперь используем готовый шаблон из чанка assets/snippets/shopkeeper/chunks/ru/chunk_shopCart.tpl.

4. Создание формы заказа

Форма заказа делается при помощи сниппета eForm. При вызове этого сниппета нужно обзательно указать параметры:

&eFormOnBeforeMailSent=`populateOrderData` - функция для заполнения данных о выбранных товарах.

Для того чтобы заказы отправлялись в модуль Shopkeeper, в вызов сниппета eForm добавить параметр &eFormOnMailSent=`sendOrderToManager`.

Прежде, чем вызвать сам сниппет, нам необходимо создать чанк с шаблоном формы заказа и чанк с шаблоном письма с информацией о заказе, а еще необходимо создать ресурс, куда будет перенаправляться посетитель после отправки заказа:

a) Создаем чанк shopOrderForm и помещаем в него содержимое файла assets/snippets/shopkeeper/chunks/ru/chunk_shopOrderForm.tpl - форма оформление заказа.

b) Создаем чанк shopOrderReport и помещаем в него содержимое файла assets/snippets/shopkeeper/chunks/ru/chunk_shopOrderReport.tpl - чанк письма с информацией о заказе.

c) Создаем ресурс Спасибо!, шаблон Внутренняя, убираем галочки с Показывать в меню, Использовать HTML-редактор,Доступен для поиска и Кэшируемый и помещаем в содержимое ресурса текст:

Ваш заказ принят. Наши менеджеры свяжутся  с вами для подтверждения заказа.

Таким образом, вызов сниппета принимает следующий вид:

[!eForm? &formid=`shopOrderForm` &tpl=`shopOrderForm` &report=`shopOrderReport` &vericode=`1` &ccsender=`1` &gotoid=`35` &subject=`Новый заказ` &eFormOnBeforeMailSent=`populateOrderData` &eFormOnMailSent=`sendOrderToManager`!]

где

&formid=`shopOrderForm` - идентификатор формы заказа (чанк chunk_shopOrderForm).
&tpl=`shopOrderForm` - шаблон формы заказа.
&report=`shopOrderReport` -  чанк письма с информацией о заказе.
&vericode=`1` - включаем использование капчи.
&ccsender=`1` - включаем отправку копии данных формы пользователю
&gotoid=`35` - Переход на документ после отправки формы. ID ресурса Спасибо!
&subject=`Новый заказ` - Тема сообщения
&eFormOnBeforeMailSent=`populateOrderData` - Обязательный параметр. Функция для заполнения данных о выбранных товарах.
&eFormOnMailSent=`sendOrderToManager` - отправляем заказ в модуль Shopkeeper.

Помещаем этот вызов в содержимое ресурса Форма заказа, под вызовом расширенной формы корзины.

Настраиваем слова для генерации CAPTCHA-кода

В форме заказа код, который нужно ввести, состоит из английских слов и цифр. Для удобства наших покупателей, давайте оставим только цифры, так как их вводить гораздо легче. Для этого идем в Инструменты >> Конфигурация >> Пользователи находим Слова для генерации CAPTCHA-кодов: и удаляем все слова из списка. Теперь у нас будут отображаться только цифры.

5. Создание шаблона для вывода краткой информации о товаре

Мы уже создавали чанк вывода краткой информации о товаре, когда разбивали шаблон на чанки, это чанк tovar_tpl, и нам вновь необходимо вписать в дизайн обязательные елементы интернет-магазина. Разработчики  Shopkeeperа в свою очередь подготовили для нас пример такого шаблона, который находится в файле assets/snippets/shopkeeper/chunks/ru/chunk_shopStuff.tpl.

Вновь обращаемся к документации и узнаем необходимые css-классы:

shk-item - класс "обертывающего" элемента блока с информацией о товаре;
shk-image - картинка товара (если используется &flyToCart=`image`);
shk-price -класс элемента с ценой товара.

и имена полей и кнопок:

shk-id - имя скрытого поля с id товара;
shk-count - имя скрытого поля с кол-вом товара.

Удаляем все из чанка tovar_tpl и помещаем туда код, который получился у меня:

<li>
    <div class="shk-item">
      <div class="image">
            <a title="[+pagetitle+]" href="[~[+id+]~]"><img class="shk-image" 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>
    <form action="[~[*id*]~]" method="post">         
      <fieldset>
        <input type="hidden" name="shk-id" value="[+id+]" />
        <input type="hidden" name="shk-name" value="[+pagetitle+]" />
        <input type="hidden" name="shk-count" value="1" size="2" maxlength="3" />
        <div>
            <p class="price">Цена: <span class="shk-price">[+price+]</span></p>     
           <button type="submit" class="shk-but">В корзину</button>

        </div>
      </fieldset>    
    </form>      
    </div>
</li>

Теперь уже можно проверить работу нашего интернет-магазина: добавить товар в корзину и оформить заказ. Если вы все сделали правильно, то в модуле управления заказами появится новый заказ, а в папке C:\xampp\tmp\sendmail появится отправленное письмо с информацией о заказе.

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

Создаем дополнительные параметры товаров (плагин paramEdit и модификатор shk_widget)

Для того, чтобы мы могли добавлять в корзину необходимые параметры товара, такие, как размер и артикул, или сопутствующие товары, такие как крем и щетка для обуви, нам понадобятся плагин paramEdit и модификатор shk_widget. Плагин предназначен для удобства работы с дополнительными параметрами, а модификатор служит для визуального отображения этих параметров в виде выпадающего списка, радиокнопки или чекбокса.

Некоторые из этих параметров будут влиять на стоимость товара (крем и щетка для обуви), некоторые не будут влиять на стоимость, но будут выступать в качестве дополнительной характеристики товара (размер и артикул).

Плагин paramEdit

Плагин paramEdit позволяет удобно добавлять и редактировать данные дополнительных параметров для товаров в интернет-магазине. Название и цена параметра (TV) вводятся в отдельные поля. Для вывода TV-параметров на сайте нужно использовать PHx модификатор shk_widget (входит в состав Shopkeeper).

1. В системе управления откройте Элементы >> Управление элементами >> Плагины >> Создать плагин.

Название плагина: paramEdit

В поле Код плагина пишем:

    require MODX_BASE_PATH.'assets/plugins/paramEdit/paramEdit_plugin.inc.php';

В закладке Конфигурация в поле Конфигурация плагина:

    &tv_ids=ID TV-параметров;string; &f_width=Ширина полей;string;180 &f_rows=Число строк в полях;string;1 &f_number=Число полей в руду;string;2 &f_rows=Число строк в полях;string;1

Установите системное событие: OnDocFormRender

2. Создайте TV-параметр (для нашего урока давайте создадим TV-параметр additional в заголовке намишем Сопутствующие товары). Тип ввода - Textarea. Назначаем шаблону Товар.

3. Откройте созданный плагин paramEdit и в конфигурации в поле "ID TV-параметров" введите ID вашего TV-параметра (пишется в скобках в списке TV). Можно ввести несколько через запятую (без пробелов). Настройте другие параметры.

Если после всех вышеописанных действий открыть документ с шаблоном Товар в режиме редактирования, на месте поля TV-параметра появятся две кнопки - и +:

жмем плюс:

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

Добавим второй товар:

Данный плагин сформирует из значений нашего параметра такую конструкцию:

Крем для обуви=120||Щетка для обуви=90

ну или если изобразить схематично:

Параметр1==Цена1||Параметр2==Цена2

Ну а для того, чтобы данный параметр отобразился в шаблоне с информацией о товаре, нам понадобится:

Модификатор shk_widget для плагина PHx

Модификатор служит для создания виджетов (выпадающий список, радиокнопка, чекбокс) параметров товаров в интернет-магазине. Работает совместно со сниппетом Shopkeeper. Можно использовать на странице подробного описания товара или в чанке сниппета catalogView (или Ditto).

Другими словами, данный модификатор берет конструкцию типа:

Параметр1==Цена1||Параметр2==Цена2||...

или (когда первое значение пусто):

 ==||Подарочная упаковка==35||Подарочная сумочка==50

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

Если в значении доп.параметра указать его цену с символом "*" (звездочка без кавычек), то цена товара умножится на цену доп. параметра. Пример значения доп. параметра:

100 г.==*1|150 г.==*1.5||200 г.==*2

Давайте разберем наглядный пример использования этого модификатора:

[+param1:shk_widget=`radio:param1:wraptag:first_selected`+]

или так:

[*param1:shk_widget=`radio:param1:wraptag:first_selected`*]

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

В нашем случае вызов модификатора в чанке tovar_tpl будет выглядеть так:

[+additional:shk_widget=`checkbox:additional:wraptag`+]

что в переводе на русский будет означать примерно следующее: берем параметр additional и отдаем его на обработку модификатору shk_widget, который должен представить наш параметр в виде переключателя checkbox и обернуть его тегом div.

Давайте рассмотим более подробно параметры модификатора:

первый параметр - тип создаваемого элемента. Возможные значения: select, radio, checkbox, radioimage;
второй параметр - имя параметра TV;

Далее параметры можно вводить в произвольном порядке

first_selected - отметить первое значение элемента;
wraptag - обернуть тегом DIV. Может использоваться для radio и checkbox;
desc_page - указать, если параметр выводится на странице товара-документа MODx.

Помещаем в чанк tovar_tpl созданный параметр:

Дополнительно:<br /> <span>[+additional:shk_widget=`checkbox:additional:wraptag`+]</span>

Создаем TV-параметр для номера изделия (article)

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

1. Создаем TV-параметр article. Описание: Номер изделия. Тип ввода Text. Назначем его шаблону Товар.

2.  Идем Элементы >> Управление элементами >> Плагины >> paramEdit >> Конфигурация и в поле ID TV-параметров через запятую и без пробелов добавляем ID созданного параметра:

3. Заходим на страницу редактирования товара и заполняем параметр следующим образом:

Так как номер изделия не влияет на стоимость товара, в правом поле указываем 0.

4. В чанке tovar_tpl вместо

Номер изделия: <span>125515</span><br />

пишем

Номер изделия: <span>[+article:shk_widget=`select:article:first_selected`+]</span><br />

Наш параметр готов.

Создаем TV-параметр для размера изделия (size)

Аналогично предыдущему параметру, создаем параметр для размера изделий:

1. Создаем TV-параметр size. Описание: Размер изделия. Тип ввода Text. Назначем его шаблону Товар.

2.  Идем Элементы >> Управление элементами >> Плагины >> paramEdit >> Конфигурация и в поле ID TV-параметров через запятую и без пробелов добавляем ID созданного параметра:

3. Заходим на страницу редактирования товара и заполняем данные параметра. Для того, чтобы у нас автоматически не выбирался первый размер из списка, первым значением у параметра делаем пустую строчку:

Так как размер изделия не влияет на стоимость товара, в правом поле указываем 0.

4. В чанке tovar_tpl вместо

 Размер: <span>8/8.5/9.5/10/11</span><br /> 

пишем

Размер: <span>[+size:shk_widget=`select:size`+]</span><br />

Параметр готов.

Создаем TV-параметр для вывода производителя обуви

Я думаю, что указывать производителя в форме заказа и отправлять его в корзину, а затем в модуль управления заказами, нам не обязательно, так как учет товара мы можем осуществлять по артикулу - уникальному для каждого товара. Но у нас есть одна сложность - наш шаблон подразумевает не просто название производителя, а еще и переход по ссылке на страницу производителя. Мы уже создавали страницы наших брендов и можем их здесь использовать. Создаем такой параметр:

manufacturer - в описании пишем Производитель. Тип ввода DropDown List Menu. Возможные значения: @CHUNK manufacturer

Таким образом, значения этого параметра мы вынесем в отдельный чанк. Каждое значение нашего параметра должно иметь примерно такой вид: <a href="ссылка">Название</a> и разделяться эти значения должны двумя вертикальными чертами ||. Создаем чанк manufacturer с примерно таким кодом:

Nike==<a href="[~29~]">Nike</a>||Adidas==<a href="[~30~]">Adidas</a>||Reebok==<a href="[~31~]">Reebok</a>||Umbro==<a href="[~32~]">Umbro</a>||Kappa==<a href="[~33~]">Kappa</a>

Осталось в чанк tovar_tpl вместо

Производитель: <a href="#">Adidas Shoes</a>

добавить такой код:

Производитель: [+manufacturer+]

Проставляем производителей нашим товарам.

Учет по количеству товара на складе

Если есть необходимость вести количественный учет товара, то надо создать еще один TV-параметр

inventory - Количество на складе. Тип ввода Text.

Назначаем его шаблону Товар. Затем, идем в модуль управления заказами Shopkeeper >> Конфигурация и в поле Учет товара на складе (имя TV): указываем имя нашего параметра inventory.

Обратите внимание, для вывода этого параметра плагин paramEdit и модификатор shk_widget не нужны.

Добавляем inventory в чанк tovar_tpl, после чего наш шаблон вывода краткой информации примет следующий вид:

<li>
    <div class="shk-item">
      <div class="image">
            <a title="[+pagetitle+]" href="[~[+id+]~]"><img class="shk-image" src="[+tovar_img+]" alt="[+pagetitle+]" /></a>
       </div>
    <form action="[~[*id*]~]" method="post">         
      <fieldset>       
        <p>
         Номер изделия: <span>[+article:shk_widget=`select:article:first_selected`+]</span><br />
         Размер: <span>[+size:shk_widget=`select:size`+]</span><br />
         Производитель: [+manufacturer+]<br />
         Товара на складе: <span>[+inventory+]</span> шт.<br />
         Дополнительно:<br /> <span>[+additional:shk_widget=`checkbox:additional:wraptag`+]</span>
         </p>

        <input type="hidden" name="shk-id" value="[+id+]" />
        <input type="hidden" name="shk-name" value="[+pagetitle+]" />
        <input type="hidden" name="shk-count" value="1" size="2" maxlength="3" />
        <div>
           <p class="price">Цена: <span class="shk-price">[+price+]</span></p>      
           <p><button type="submit" class="shk-but">В корзину</button></p> 

        </div>
      </fieldset>    
    </form>      
    </div>
</li>

Обратите внимание на тот факт, что все параметры, которые мы будем отправлять в корзину, должны находиться внутри формы (тег form), поэтому мы и переместили блок с параметрами товара.

Теперь можно опробовать наш магазин. Наполняем корзину, жмем на Оформить заказ, заполняем форму заказа и отправляем его. Если вы настраивали так называемую почтовую заглушку в XAMPP, то отправленное письмо с заказом можно посмотреть в папке C:/xampp/tmp/sendmail/. Так же заказ должен появиться в модуле управления заказами.

При изменении статуса заказа, у него будет меняться цвет фона. Настройки этих цветов находятся в Конфигурации модуля. Еслу статус будет изменен на Отправлен, то модуль автоматически пересчитает остатки на складе, если количественный учет ведется.

Создаем шаблон вывода расширенной информации на странице товара

Сейчас, когда у нас готов шаблон вывода краткой информации о товаре, мы можем взять его за основу и создать шаблон для вывода расширенной информации о товаре, который будет выводиться на странице самого товара. Для этого делаем копию чанка tovar_tpl и меняем в нем все + в плейсхолдерах на *, заодно добавим специальный тег MODx [*introtext*] для вывода аннотации товара. Кстати, тег <li> у нас теперь будет лишним, поэтому его убираем.

И еще один момент, чтобы дополнительные параметры товаров по прежнему добавлялись в корзину, необходимо добавить параметр :desc_page. Делается это только в чанке с выводом расширенной информации о товаре, т.е. на странице самого товара.

Вот получившийся код:

    <div class="shk-item">
      <div class="image">
            <a title="[*pagetitle*]" href="[~[*id*]~]"><img class="shk-image" src="[*tovar_img*]" alt="[*pagetitle*]" /></a>
       </div>
    <form action="[~[*id*]~]" method="post">         
      <fieldset>       
        <p>
         Номер изделия: <span>[*article:shk_widget=`select:article:first_selected:desc_page`*]</span><br />
         Размер: <span>[*size:shk_widget=`select:size:desc_page`*]</span><br />
         Производитель: [*manufacturer*]<br />
         Товара на складе: <span>[*inventory*]</span> шт.<br />
         Дополнительно:<br /> <span>[*additional:shk_widget=`checkbox:additional:wraptag:desc_page`*]</span>
         </p>
         <p>[*introtext*]</p>
        <input type="hidden" name="shk-id" value="[*id*]" />
        <input type="hidden" name="shk-name" value="[*pagetitle*]" />
        <input type="hidden" name="shk-count" value="1" size="2" maxlength="3" />
        <div>
           <p class="price">Цена: <span class="shk-price">[*price*]</span></p>      
           <p><button type="submit" class="shk-but">В корзину</button></p> 

        </div>
      </fieldset>    
    </form>      
    </div>

сохраняем его как чанк tovar_home и помещаем его вызов в шаблоне Товар сразу над специальным тегом [*content*], но я бы рекомендовал не над этим тегом, а вместо этого тега, так как мы ничего не планируем размещать в содержимом ресурса у товаров.

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

Как добавить дополнительный параметр в корзину и в письмо с информацией о заказе?

Добавлять дополнительные параметры товаров в корзину можно и без плагина paramEdit.

В шаблоне товара используем такое поле:

<input type="text" name="test__[+id+]__add" value="дополнительные данные" />

на странице самого товара такое:

<input type="text" name="test__[*id*]__add" value="дополнительные данные" />

В шаблоне CartRow этот параметр отобразится на месте плэйсхолдера [+addit_data+].

Например, чтобы добавить в корзину описание товара из поля introtext, надо добавить в чанк tovar_tpl скрытое поле:

<input type="hidden" name="dop1__[+id+]__add" value="[+introtext+]" />

Итоги

В процессе создания этого интернет-магазина, у нас должно получиться

четыре шаблона:

Главная - шаблон для главной страницы
Внутренняя - шаблон для всех внутренних страниц
Бренды - шаблон для страниц в папке Бренды
Товар - шаблон для страниц товара

Десять TV-параметров:

slide - изображение для слайда. Тип ввода Image. Для шаблона Внутренняя. 980х418 пикселей.
brands_foto - изображение для брендов. Тип ввода Image. Для шаблона Бренды. Выстота фото 59 пикселей.
brands_link - URL для брендов. Тип ввода: URL. Для шаблона Бренды.
tovar_img - изображение товара. Тип ввода: Image. Для шаблона Товар. 136х83 пикселя.
price - стоимость товара. Тип ввода: Text. Для шаблона Товар.
inventory - учет количества товара. Тип ввода: Text. Для шаблона Товар.
article - номер изделия. Тип ввода: Text. Для шаблона Товар.
manufacturer - производитель. Тип ввода: DropDown List Menu. Возможные значения: @CHUNK manufacturer. Для шаблона Товар.
size - размер обуви. Тип ввода: Text. Для шаблона Товар.
additional - сопутствующие товары. Тип ввода: Textarea. Для шаблона Товар.

24 чанка:

HEAD - заголовок документа
HEADER - шапка сайта
SLIDER - слайдер
slide_tpl - шаблон вывода слайдов
SEARCH_CART - поиск и сокращенная корзина
TABS - закладки с категориями товаров
First_Tab_Content - первая закладка
Second_Tab_Content - вторая закладка
Third_Tab_Content - третья закладка
tabs_tpl - шаблон вывода закладки
tabs_tpl_active - шаблон вывода активной закладки
tabs_tpl_red - шаблон вывода последней закладки
tovar_tpl - шаблон вывода краткой информации о товаре
tovar_home - шаблон расширенной информации о товаре
BRANDS - логотипы брендов
brands_tpl - шаблон вывода брендов
FOOTER - футер сайта
footer_tpl - шаблон пункта меню в футере
footer_tpl_last - шаблон последнего пункта меню в футере
cartTpl - шаблон сокращенной корзины
shop - чанк с вызовом сокращенной корзины
shopOrderForm - форма оформления заказа
shopOrderReport - чанк письма с информацией о заказе
manufacturer - чанк с возможными значениями TV-параметра manufacturer

17 страниц нашего сайта (не считая страниц товаров):

Кроме этого, у нас дополнительно установлены сниппеты:

catalogView - для вывода товаров в каталоге Shopkeeper (>=1.0) или документов MODx. Может использоваться вместо Ditto.
Shopkeeper - корзина заказов
include - для вывода постраничной навигации (при установленом плагине PHx, так как он может вырезать плейсхолдеры)

и плагины:

paramEdit - для добавления и редактирования дополнительных параметров.
phx - добавляет новые возможности для отображения плейсхолдеров

По просьбам читателей выкладываю архив сайта:

shop.zip (5,45 МБ)

Для установки сайта на локальном компьютере, скопируйте файлы из этого архива в папку C:\xampp\htdocs\shop\

Создайте новую базу в phpMyAdmin с кодировкой utf8_general_ci и пользователя базы, например, имя базы shop, имя пользователя shop, пароль пользователя shop. При установке сайта на хостинг, выбирайте более сложные названия и пароли.  Если вы укажите другое имя базы, пользователя или пароль, не забудьте отредактировать файл \manager\includes\config.inc.php.

В поле SQL-запросов поместите содержимое файла shop.sql.

Для входа в административную панель используйте логин admin и пароль shop.

При установке на хостиг воспользуйтесь уроком по переносу сайта на хостинг.

Поделитесь ссылкой

Статистика

Яндекс цитирования
© 2011 - 2023 Школа MODX
Напишите нам в Telegram