Magazin - mod școală

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

afișate de browsere cu un cadru. Adăugăm următoarea structură în fișierul css /assets/templates/WingtheAirFree/css/style.css:

În același timp, din piesa SEARCH_CART, ștergem codul responsabil pentru linkul la căutarea avansată, deoarece nu ne așteptăm la asta, aici este acest cod:

11. Editați bucata TABS. Creați trei bucăți, tabs_tpl cu un șablon de ieșire de marcaj:

tabs_tpl_active - cu un șablon de ieșire activă pentru marcaje:

și tabs_tpl_red pentru a afișa ultima filă:

Acum, în piesa TABS am pus apelul fragmentului Ditto:

13. Creați un parametru TV tovar_img cu tipul de intrare imagine și alocați-l șablonului produsului. În acest parametru vor fi imagini cu imaginea mărfurilor. Adăugăm la toate paginile mărfurile din imagine. Dimensiunea imaginii este de 136x83 pixeli. În același timp, să atribuim și prețul pentru parametrul TV în Șablon. Acest parametru a fost creat când instalați Shopkeeper. Acesta va conține costul bunurilor. Puteți să-l postați imediat.

14. Creați un șablon pentru ieșire. În noua bucată tovar_tpl, puneți următorul cod:

Pentru editarea acestei bucăți, ne vom întoarce când vom conecta modulul Shopkeeper.

15. Deschideți bucata First_Tab_Content și ștergeți tot ce există între etichetele din ea

    și
și în loc de codul la distanță, puneți apelul fragmentului Ditto, unde părinți = `6` - ID-ul resurselor pentru încălțăminte pentru bărbați, îl puteți avea diferit:

În mod similar, intrăm cu bucata de Second_Tab_Content. numai noi schimbăm într-un apel Ditto id de un dosar pe id-ul unei resurse Încălțăminte pentru femei:

și cu bucata de Third_Tab_Content facem același lucru, specificați doar ID-ul resurselor. Încălțăminte pentru copii:

16. Pentru a genera branduri pe pagină, să creăm o nouă resursă de mărci în arborele de resurse. scoateți marcajul de selectare din meniul Arată în. atribuiți-i un șablon intern. Acum, în acest dosar vom crea mai multe resurse cu numele brandurilor noastre. Pentru aceste resurse, vom crea un nou șablon de mărci. plasarea codului din șablonul intern în acesta. Apoi creați doi parametri marca_foto TV cu tipul de introducere imagine și brand_link cu tipul de adresă URL și le atribuiți șablonului de mărci. Adăugăm fotografii și linkuri către site-urile producătorilor în resursele cu șablonul.

Creați bucăți branduri:

În fragmentul BRANDS am pus apelul fragmentului Ditto. unde părinți = `28` - id de resurse Marci:

17. A fost ultima piesa FOOTER. Conține meniul site-ului și drepturile de autor. Dificultatea este ca elementele de meniu să fie separate de o linie verticală. Prin urmare, fragmentul Wayfinder nu este potrivit pentru afișarea acestui meniu, folosim fragmentul Ditto. Mai întâi, creați două bucăți footer_tpl

Apoi, în piesa FOOTER, puneți apelul Ditto:







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: