Для створення інтернет-магазину на MODx Evolution ми скористаємося готовим рішенням - Shopkeeper. Це безкоштовний програмний модуль для створення інтернет-магазину, написаний на мові PHP. Хочу відразу попередити, що даний модуль підійде лише для невеликого інтернет-магазину, який працює без зв'язки з 1С. На момент написання уроку, останньою версією модуля була Shopkeeper 1.3.4. а останньою версією MODx Evolution 1.0.5.
Наш урок буде складатися з двох частин, в першій частині уроку ми виберемо шаблон для нашого інтернет-магазину і інтегруємо його в MODx. Тут ми зробимо такі ж кроки, як і в попередніх уроках, тільки в більш стислому вигляді. Тому, багато хто з вас можуть пропустити першу частину і відразу перейти до другої частини нашого уроку, де ми будемо інтегрувати Shopkeeper в дизайн нашого сайту.
Хочеться додати, що творці модуля Shopkeeper забезпечили нас докладною документацією.
Так як даний урок я вирішив не розбивати на окремі уроки, він вийшов досить об'ємним. Але ви завжди можете скористатися коротким викладом уроку, щоб згодом відшукати необхідну інформацію. Отже, приступимо.
Установка Shopkeeper 1.3.4 для MODx Evolution 1.х.х.
У викачаному архіві Shopkeeper в файлі shopkeeper_1.3.4 / shopkeeper / docs / ru / _rus_doc_install.html ви знайдете інструкцію по установці модуля. Існує три варіанти установки:
Автоматична установка Shopkeeper на вже встановлений MODx
Установка MODx разом з Shopkeeper
Ручна установка Shopkeeper на вже встановлений MODx
Так як я заздалегідь знаю, що мій сайт буде інтернет-магазином, я обираю другий варіант - установку Shopkeeper разом з MODx. Локальний сервер XAMPP у нас вже встановлено (якщо немає, то інструкція по установці знаходиться в Уроці 1), тому переходимо до установки MODx і модуля інтернет-магазину.
2. В папку www поміщаємо файли з папки modx-1.0.5 з завантаженого архіву MODx.
3. Створюємо в PhpMyadmin нову базу shop і користувача shop з паролем shop. Призначаємо повні привілеї користувачеві shop.
4. У файл C: /xampp/apache/conf/extra/httpd-vhosts.conf додаємо наступну конструкцію:
6. Розміщуємо папку shopkeeper / з завантаженого архіву Shopkeeper в каталог assets / snippets /.
7. Доповнюємо вміст папки assets / файлами з папки _upload / assets /.
8. Переміщаємо з архіву Shopkeeper папку install / assets / в папку install / в корені сайту.
Тут буде один важливий момент, коли будемо вводити префікс таблиць, вказуємо його як shop_ і запам'ятовуємо, нам він потім стане в нагоді. Але якщо не запам'ятали, не біда, завжди можна його подивитися в PhpMyadmin.
На другому кроці в списку компонентів, крім компонентів MODx, ви побачите що встановлюються компоненти Shopkeeperа:
Параметри (TV) - Price
Модулі - Shopkeeper
Cніппети - Shopkeeper. catalogView. include.
Завершуємо установку, слідуючи вказівкам програми установки.
10. Перейменовуємо файл ht.access в. htaccess.
Інтегруємо шаблон в MODX
Тепер, коли у нас є встановлені MODx Evolution і Shopkeeper, давайте підберемо шаблон для нашого майбутнього сайту.
Ми ж скористаємося готовим безкоштовним шаблоном, це буде шаблон 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, не забуваючи вирізати з шаблону код і вставляти на його місці виклик відповідного чанка:
Створюємо чанк HEADER - шапка нашого сайту:
Створюємо чанк SLIDER - слайдер в шапці сайту:
Створюємо чанк SEARCH_CART. блок з пошуком і кошиком:
Далі, створюємо чанк BRANDS з логотипами брендів:
Ну і нарешті, останній чанк FOOTER:
Після всіх змін, шаблон Головна повинен прийняти такий вигляд:
7. Створюємо шаблон Внутрішня для сторінок меню, поміщаємо в шаблон наступний код:
8. Створюємо головне меню. У чанка HEADER в контейнері з меню, замість ненумерованого списку поміщаємо виклик сниппета Wayfinder:
Логотип і посилання на головну сторінку в чанка HEADER ви поліпшите самостійно. Картинку логотипу можна поміняти в файлі зі стилями в 29 рядку.
У чанка SLIDER поміщаємо виклик сниппета Ditto:
Тепер в чанка SEARCH_CART в контейнері з класом search замість форми з пошуком, поміщаємо ще один виклик сниппета:
де landingPage = `27` - ID ресурсу Результати пошуку. У вас він може відрізнятися.
Тепер необхідно відредагувати шаблон форми введення пошукового запиту відповідно до нашого дизайном.
Це перший складний момент. Потрібно порівняти код з шаблону сайту, з кодом шаблону сниппета і спробувати їх об'єднати. Я додав необхідні класи і прибрав підпис під формою. Але можна поступити і іншим шляхом і зробити все за допомогою CSS, що було б більш правильним рішенням. Але мені хотілося показати вам і такий варіант вирішення. Недолік у тому, що при оновленні сниппета оновиться і шаблон і доведеться занова вирішувати це питання. Плюс ж цього рішення - швидкість реалізації.
Код шаблону сниппета знаходиться в файлі C: /xampp/htdocs/shop/www/assets/snippets/ajaxSearch/templates/input.tpl.html. Я не буду описувати всі кроки з виправлення шаблону, а просто наведу кінцевий ркезультат. Відкриваємо цей файл в Notepad ++ і замість того, що в ньому знаходиться, поміщаємо наступний код:
Ми просто прибрали зайве і додали необхідні нам класи. Але зовсім без правки CSS файлу не обійтися. Справа в тому, що тег