Un exemplu de implementare a coșului pe care îl puteți vedea la aceste două site-uri, adăugând produsele în coș: best-instrument.com.ua și kamzol.com.ua. Dar vreau să vă cer să adăugați câteva elemente la coș pentru ao face mai vizibil 😉
Implementarea editării coșului de reciclare fără reîncărcarea paginii pe UMI.CMS este foarte ușoară. Să vedem cum să facem asta
Vreau doar să observ că lucrez cu un șablon tpl. Dar într-o remorcă, această metodă poate fi implementată pe XSLT. Încearcă-o;)
Pasul 1. Conectarea fișierelor JS pentru a lucra cu AJAX pe UMI.CMS
Descărcați fișierele care sunt responsabile pentru procesarea coșului de reciclare AJAX pe care îl puteți găsi aici. Aceste fișiere sunt relevante pentru versiunea 2.9 și cea mai recentă.
Dacă aveți UMI.CMS versiunea 2.8.X, atunci aveți nevoie de aceste fișiere. Apropo, în aceste fișiere este implementată metoda AJAX de adăugare a mărfurilor la coșul de cumpărături, lucru pe care l-am scris în detaliu în articol - Ajax adăugând mărfurile la coșul de cumpărături.
Acum trebuie să conectați fișierele la șablon. Pentru aceasta, trebuie să descărcați fișierele descărcate și să le dezarhivați în folderul cu șablonul.
Arhiva are doi clienți și foldere demo. Fișierele din dosarul clienților pe care le aruncați în rădăcina site-ului, iar fișierele din dosarul demo-drop scad la rădăcina șablonului.
Deschideți, dacă aveți un file header.inc.tpl, dacă nu fișierul în care există linii:
după care conectați fișierul __common.js:
Rețineți numele șablonului de demo în cale, poate fi diferit de calea spre fișier.
Acum trebuie să deschideți __common.js și să găsiți metoda site.utils.js.init
Ei bine, după cum ați ghicit deja, schimbați calea către fișierele care urmează să fie conectate, în loc de demodulare. scrieți numele șablonului.
După ce fișierele care sunt responsabile pentru lucrul cu coșul de gunoi fără a fi reîncărcate sunt conectate, puteți să vă distrați pe 😉
Pasul 2. Crearea unui șablon t-temp UMI.CMS responsabil pentru afișarea coșului
Nu voi face nici o schimbare de coordonate în aspectul meu, este pentru mine să arăt principiul implementării. Acum coșul meu arată astfel:
Îl voi edita puțin pentru a arăta ca exemplele de la începutul articolului 😉
Trebuie să deschideți fișierul default.tpl, care este localizat \ templates \ template_name \ tpls \ emarket \. Acum trebuie să găsim o secțiune
În această secțiune, trebuie să adăugați un buton care solicită formularul pentru editarea coșului de reciclare:
Acum adăugați în fișierul de stil designul acestui buton, permiteți-i să fie frumos decorate
Apoi, trebuie să utilizați o macrocomandă care afișează un formular pentru editarea coșului de reciclare. Pentru a face acest lucru, utilizați coșul% emarket ()%
Marca% emarket cart ()% afișează conținutul coșului de reciclare pentru utilizatorul curent.
După linkul "Editați coșul", trebuie să introduceți:
Apoi, trebuie să stilizați forma de editare a coșului de reciclare UMI.CMS, pentru aceasta trebuie să adăugați codul css în foaia de stil:
După ce ați adăugat css-ul, trebuie să adăugați codul js-ului la forma editării coșului de cumpărături. Pentru a face acest lucru, trebuie să utilizați acest cod jQuery:
Vă atrag atenția asupra faptului că totul este legat de clase și identificatori, deci dacă editați pentru dvs., cu atenție 😉
Apoi, trebuie să modificați fișierul basket.js, cel care se află în dosarul șablonului dvs. Deschideți fișierul, găsiți metoda site.basket.init și apoi adăugați această metodă:
Dacă ați făcut totul corect, atunci va trebui să:
- declanșează butonul "Editați coșul";
- capacitatea de a scoate bunurile din coșul de gunoi UMI.CMS fără a reîncărca pagina
- posibilitatea de a edita cantitatea de bunuri din coșul UMI.CMS
Apropo, această metodă poate fi utilizată pentru a crea un coș de reciclare mini pentru UMI.CMS. Voi încerca să scriu despre acest lucru într-unul din următoarele articole.
Trimiteți-le prietenilor: