Pentru a crea un magazin online pe MODx Evolution, vom folosi soluția gata - Shopkeeper. Acesta este un modul gratuit pentru crearea unui magazin online, scris în limba PHP. Vreau să avertizez imediat că acest modul este potrivit doar pentru un mic magazin online, care funcționează fără o grămadă de 1C. La momentul scrierii lecției, cea mai recentă versiune a modulului a fost Shopkeeper 1.3.4. și cea mai recentă versiune a MODx Evolution 1.0.5.
Lecția noastră va consta din două părți, în prima parte a lecției vom selecta un șablon pentru magazinul nostru online și îl vom integra în MODx. Aici vom face aceleași pași ca în lecțiile anterioare, numai într-o formă mai condensată. Prin urmare, mulți dintre voi puteți să treceți peste prima parte și să mergeți direct la a doua parte a lecției noastre, în care vom integra Arhivatul în proiectarea site-ului nostru.
Vreau să adaug că creatorii modulului Shopkeeper ne-au furnizat o documentație detaliată.
De la această lecție am decis să nu intru în lecții separate, sa dovedit a fi destul de voluminos. Dar puteți folosi întotdeauna un scurt rezumat al lecției pentru a găsi ulterior informațiile necesare. Deci, să începem.
Instalarea magazinului 1.3.4 pentru MODx Evolution 1.x.x.
În băcanul arhivă descărcate în shopkeeper_1.3.4 / Negustor / docs / ru / _rus_doc_install.html fișier veți găsi instrucțiuni pentru instalarea modulului. Există trei opțiuni de instalare:
Instalați automat mesagerul pe un MODx deja instalat
Instalarea MODx împreună cu magazinul
Instalarea manuală a Shopkeeper pe un MODx deja instalat
Din moment ce știu în avans că site-ul meu va fi un magazin on-line, aleg opțiunea a doua - instalarea magazinului împreună cu MODx. Am instalat deja serverul local XAMPP (dacă nu, instrucțiunile de instalare sunt în Lecția 1), mergeți la instalarea MODx și modulul magazin online.
2. În folderul www am pus fișierele din folderul modx-1.0.5 din arhiva MODx descărcată.
3. Noi creăm în PhpMyadmin un nou magazin și un magazin de bază de utilizatori cu un magazin de parole. Acordăm privilegii complete magazinului de utilizatori.
4. În fișierul C: /xampp/apache/conf/extra/httpd-vhosts.conf, adăugați următoarea construcție:
6. Am pus paznicul / din arhiva descărcată a Shopkeeper în directorul assets / snippets /.
7. Completăm conținutul dosarului / fișierelor din folderul _upload / assets / folder.
8. Deplasăm directorul install / assets / folder în directorul install / root din arhiva Shopkeeper.
Va fi un moment important când vom intra în prefixul de masă, vom arăta ca magazin și amintiți-vă, va fi util mai târziu. Dar dacă nu vă amintiți, nu contează, puteți să vă uitați întotdeauna la PhpMyadmin.
În a doua etapă, în lista de componente, în plus față de componentele MODx, veți vedea componentele Shopkeeper instalate:
Setări (TV) - Preț
Module - Magazin
Snipets - Magazin. catalogView. includ.
Finalizați instalarea, urmând instrucțiunile din programul de instalare.
10. Redenumiți fișierul ht.access la. htaccess.
Integram șablonul în MODX
Acum, că avem MODx Evolution și Shopkeeper instalat, să selectăm un șablon pentru site-ul nostru viitor.
Vom folosi un șablon gratuit, va fi un model pentru Wing the Air. O puteți vedea din această legătură. și descărcați pe aceasta. Magazinul nostru online va vinde pantofi.
1. Desfaceți fișierul descărcat și puneți-l în directorul C: / xampp / htdocs / shop / www / assets / templates /.
2. Deschideți fișierul index.html din dosarul WingtheAirFree din arhiva descărcată, copiați conținutul și puneți-l în șablonul Șablon minim. Schimbați căile din etichetele de link. script-ul. img. adăugând următoarea cale spre ele:
Schimbați numele șablonului la Acasă.
3. Redenumiți resursele MODx CMS Install Success to Home. ștergem totul din câmpul Resurse.
4. Creați în arborele de resurse patru resurse suplimentare. Livrarea. Acțiuni. Contacte. În resursele directorului, eliminați marcajul de selectare din meniul Afișare în.
5. În directorul Director vom crea trei resurse copil, de exemplu: Pantofi pentru bărbați. Încălțăminte pentru femei. Încălțăminte pentru copii. În fiecare din aceste resurse, vom crea mai multe resurse pentru copii, le vom numi, de exemplu, Model 1, Model 2, etc.
6. Împărțiți modelul în bucăți. Creați o bucată HEAD și adăugați tag-uri speciale MODx, fără a uita să tăiați codul din șablon și să introduceți piesa corespunzătoare în locul său:
Creați o bucată HEADER - antetul site-ului nostru:
Creați o bucată SLIDER - un cursor în antetul site-ului:
Creați o bucată SEARCH_CART. bloc cu o căutare și un coș:
Apoi, creați un candelabru BRANDS cu logo-uri de brand:
Și în cele din urmă, ultima bucată FOOTER:
După toate modificările, șablonul de domiciliu trebuie să aibă următoarea formă:
7. Creați un șablon intern pentru paginile de meniu, puneți în șablon următorul cod:
8. Creați meniul principal. În bucla HEADER din containerul cu meniu, în loc de lista neimprimată, apelați apelul la fragmentul Wayfinder:
Logo-ul și link-ul către pagina principală din bucata HEADER vor fi corectate de dvs. Imaginea logo-ului poate fi schimbată într-un fișier cu stiluri pe linia 29.
În piesa SLIDER, plasați apelul fragmentului Ditto:
Acum, în piesa SEARCH_CART din containerul cu clasa de căutare în loc de formularul de căutare, plasăm un alt apel în fragment:
unde landingPage = '27` - ID-ul resurselor. Poți să o ai diferit.
Acum trebuie să editați șablonul de formular al intrării de căutare în concordanță cu designul nostru.
Acesta este primul moment dificil. Trebuie să comparați codul din șablonul site-ului cu codul șablonului de fragment și să încercați să îl îmbinați. Am adăugat clasele necesare și am scos semnătura sub formular. Dar poți să o faci invers și să faci totul cu ajutorul CSS, care ar fi o soluție mai corectă. Dar am vrut să vă arăt o astfel de soluție. Dezavantajul este că atunci când actualizați fragmentul, șablonul va fi actualizat și va trebui să rezolvați această problemă. În plus, această soluție - viteza de punere în aplicare.
Codul de șablon fragmentul este în fișierul C: /xampp/htdocs/shop/www/assets/snippets/ajaxSearch/templates/input.tpl.html. Nu voi descrie toți pașii pentru corectarea șablonului, ci pur și simplu dau rezultatul final. Deschideți acest fișier în Notepad ++ și în locul a ceea ce se află în el, puneți următorul cod:
Tocmai am scos-o în plus și am adăugat orele de care aveam nevoie. Dar fișierul CSS nu poate fi evitat complet fără editare. Faptul este că eticheta