За да създадете онлайн магазин за MODx Evolution, ние ще използваме готово решение - магазинер. Това е безплатен софтуерен модул за създаване на онлайн магазин, написани на PHP език. Искам да предупредя, че модулът е подходящ само за една малка онлайн магазин работи без кабели с 1C. Към момента на писане на урок, последната версия на модула е магазинер 1.3.4. и най-новата версия на MODx Evolution 1.0.5.
Нашият урок ще се състои от две части, първата част на урока, ще изберете шаблон за нашия онлайн магазин и да го интегрират в MODx. Тук ние ще се същите стъпки, както и в предишните уроци, само в една по-компактна форма. Ето защо, много от вас може да пропусне първата част и преминете директно към втората част на урока, където ще се интегрират продавачката в дизайна на сайта ни.
Искам да добавя, че създателите на модула магазинера ни предоставиха подробна документация.
От този урок, не реши да се раздели на отделни класове, се оказа доста голяма. Но винаги можете да се възползвате от кратко обобщение на урока, за да по-късно се намери необходимата информация. Да започваме.
Магазинер 1.3.4 Инсталация за MODx Evolution 1.h.h.
В сваления архив магазинер в shopkeeper_1.3.4 / магазинер / Документи / RU / _rus_doc_install.html файл ще намерите инструкции за инсталиране на модула. Има три опции за инсталиране:
Магазинер автоматичното инсталиране на вече инсталиран MODx
Инсталиране MODx с магазинера
Магазинер ръчно инсталиране на вече инсталиран MODx
Тъй като знам, че по-рано, че моя сайт е онлайн магазин, аз избирам втората опция - инсталация магазинер с MODx. Местната сървърът вече е инсталиран XAMPP ние (ако не, инструкциите за инсталиране са в Урок 1), така че да продължат да инсталирате MODx модул и онлайн магазин.
2. В WWW папка слагам файлове от MODx-1.0.5 папка от сваления архив MODx.
3. Създаване на нова база данни в PhpMyAdmin магазин и магазин за магазин за потребителска парола. Присвояване на пълни привилегии в рамките на обслужването на потребителите.
4. В файл C на: /xampp/apache/conf/extra/httpd-vhosts.conf добави следната структура:
6. Поставете папка магазинер / магазинер от сваления архив в директорията активи / откъси /.
7. Допълнете съдържанието на активи папки / файлове от _upload на папката / активи /.
8. Движете магазинер архива папка инсталиране / активи / папка за инсталиране / в схемата на сайта.
Има един важен момент, когато влезем маса префикс, посочете го като shop_ и не забравяйте, ние сме след това ще дойде по-удобно. Но ако не си спомняте, това няма значение, винаги можете да го гледате в PhpMyAdmin.
Във втория етап в списъка на компонентите, но MODx компоненти, ще видите инсталираните компоненти Shopkeepera:
Параметри (TV) - Цена
Модули - магазинер
Cnippety - магазинер. catalogView. включат.
Завършете инсталирането, като следвате инструкциите на инсталационната програма.
10. Преименуване на файла, за да ht.access. Htaccess.
Интегриране на шаблона в MODx
Сега, когато сте инсталирали MODx Evolution и магазинер, нека да вземем шаблона за бъдещето на нашия сайт.
Ние сме готови да използват безплатни шаблони, той ще бъде шаблон крило въздуха. го гледате на този линк. и изтегляне по този въпрос. Нашият онлайн магазин ще продават обувки.
1. Свалете razarhiviruem на файла и се поставя в папка C: / XAMPP / htdocs / Магазин / WWW / активи / шаблони /.
2. Отворете файла index.html от сваления архив WingtheAirFree папка, копирате съдържанието и го поставете в Минимална шаблон шаблон. Ние се променя начина, по който връзката тагове. скрипт. IMG. добавяне към него следния път:
Промяна на името на шаблона на Майн.
3. Преименуване на ресурса MODx CMS Инсталиране на успех в дома. изтриете цялото съдържание на полето ресурс.
4. Създаване на ресурс в каталога на ресурсите дърво четири. Доставка. Акциите. Контакти. В каталога на ресурсите премахнете отметката от Show меню.
5. В директорията на папка създаде три деца на ресурсите, например, са както следва: Мъжки обувки. Дамски обувки. Детски обувки. Всеки един от тези ресурси ще се създадат повече деца ресурси, да ги наричаме, например, образец 1, образец 2, и т.н.
6. Разделете шаблонни парчета. Създаване на парче HEAD, и да добавите специални MODx тагове, не забравяйте да изрежете кода на шаблона и го поставете на мястото му призив към съответната парче:
Създаване на парче в заглавието - ограничи нашия сайт:
Създаване на парче SLIDER - слайдер в заглавната част:
Създаване на парче SEARCH_CART. блокиране на търсене и кошница:
На следващо място, създаване на парче марки лого на марката:
И накрая, последната парче Footer:
След всички промени, страницата шаблон трябва да се появи, както следва:
7. Създаване на шаблон за вътрешните страници на менюто, поставете следния код в шаблона:
8. Създаване на главното меню. парче заглавката в контейнер с меню вместо неподреден списък сложи Wayfinder фрагмента разговор:
Лого и връзка към началната страница в заглавната парче ще отстраните и сами. лого изображение може да бъде променена в стиловете в 29-те линии на файла.
Плъзгача парче сложи Дито фрагмента разговор:
Сега SEARCH_CART парче в контейнер с клас вместо формата за търсене с търсачката, казано по друг фрагмент разговор:
където landingPage = `27` - резултати от търсенето ID ресурси. Можете да го различават.
Сега трябва да го редактирате, като форма за въвеждане на заявка за търсене в съответствие с нашия дизайн.
Това е първият труден момент. Трябва да се сравни кода от шаблон сайт, шаблона с кодовия фрагмент и се опитайте да ги комбинирате. Добавих редовните лекции и сложи подписа върху формата. Но ние можем да се процедира по различен начин и да правим всичко с помощта на CSS, че би било по-правилно решение. Но аз исках да ти покажа, че вариант решения. Недостатъкът е, че освежава шаблона и трябва отново да разгледа този въпрос при обновяване фрагмента. Плюс това, същото това решение - скоростта на изпълнение.
Шаблон програмка е във файла C на: /xampp/htdocs/shop/www/assets/snippets/ajaxSearch/templates/input.tpl.html. Няма да описвам всички стъпки за редактиране на шаблон, а просто да се получи крайният rkezultat. Отворете този файл в Notepad ++, а вместо това, че той е, поставете следния код:
Ние просто се забави твърде много и сме добавили нужните класове. Но съвсем без редактиране на CSS файл не може да се направи. Фактът, че маркерът