Установка Shopkeeper для MODx Evo

Скачайте свежую версию 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ниппеты - ShopkeepercatalogViewinclude.
Завершаем установку, следуя указаниям программы установки.

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

/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=UTF-8" />
   
<title>Omegicus LLC | Рецепты MODx</title>
       
<base href="https://omegicus.org/" />
       
<meta name="keywords" content="" />
       
<meta name="description" content="" />
   
<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_ContentSecond_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 -->

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


<body>
<!-- Top -->
<div id="top">
   
   
<div class="shell">
               


       
   
</div>
</
div>
<!-- Top -->

<!-- Main -->
<div id="main">
   
<div class="shell">
       

       
       
<!-- Content -->
       
<div id="content">
           

           
           
<!-- Container -->
           
<div id="container">
               
               
<div class="tabbed">
                   
                   

                   
                   
               
</div>                

               

               
            </
div>
           
<!-- End Container -->
           
       
</div>
        <!-- End Content -->
       
    </
div>
</div>
<!-- End Main -->
   
</
body>
</html>

7. Создаем шаблон Внутренняя для страниц меню, помещаем в шаблон следующий код:


<body>
<!-- Top -->
<div id="top">
   
   
<div class="shell">
               


       
   
</div>
</
div>
<!-- Top -->

<!-- Main -->
<div id="main">
   
<div class="shell">
       

       
       
<!-- Content -->
       
<div id="content">
           

           
           
<!-- Container -->
           
<div id="container">
               
               
<div class="tabbed">
                   
               
                   
               
</div>                

               

               
            </
div>
           
<!-- End Container -->
           
       
</div>
        <!-- End Content -->
       
    </
div>
</div>
<!-- End Main -->
   
</
body>
</html>

Назначаем шаблон ресурсам ДоставкаАкцииКонтакты, а так же категориям товаров МужскаяЖенская и Детская обувь.

8. Создаем главное меню. В чанке HEADER в контейнере с меню, вместо ненумерованного списка помещаем вызов сниппета Wayfinder:

Логотип и ссылку на главную страницу в чанке HEADER вы поправите самостоятельно. Картинку логотипа можно поменять в файле со стилями в29 строке.

9. Создаем слайдер. Можно пойти несколькими путями, но мы привяжем к каждой категории товаров свою картинку, которую будем выводить в слайдере. Для этого создаем TV-параметр slide с типом ввода Image и привяжем его к шаблону Внутренняя. Теперь добавляем ресурсамМужскаяЖенская и Детская обувь картинки слайдов. Для собственного интернет-магазина вам придется создать свои картинки с размером980х418 пикселей, для урока я буду использовать уже созданные дизайнером слайды. Создадим чанк slide_tpl с шаблоном вывода слайдов:

<li><img title="" src="" alt="" /></li>

В чанке SLIDER помещаем вызов сниппета Ditto:

        <!-- Slider -->
       
<div id="slider">
           
<div id="slider-holder">
               
<ul>
                     

Записей не найдено.


               
</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:

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

            <div class="search">

Введите ваш запрос для начала поиска.


           
</div>

где &landingPage=`27`- ID ресурса Результаты поиска. У вас он может отличаться.

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

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

Код шаблона сниппета находится в файле C:/xampp/htdocs/shop/www/assets/snippets/ajaxSearch/templates/input.tpl.html. Я не буду описывать все шаги по правке шаблона, а просто приведу конечный ркезультат. Открываем этот файл в Notepad++ и вместо того, что в нем находится, помещаем следующий код:

" action="" method="post">
    <fieldset>"
value="" />`+]
    <input type="hidden" name="advsearch" value="" />
    <label>
      <span class="field"><input id=""  class="blink" type="text" name="search" value="" /></span>
    </label>
    "
class="search-submit" type="submit" name="sub" value="[+as.submitT

Отправить заявку на создание сайта

Сообщение отправлено