Și astfel, filtrul pe care îl puteți face pentru site-ul dvs. este foarte universal!
Poate fi aplicat oricărui proiect și, în același timp, economisește mult timp

Mai întâi trebuie să instalați pachetul pdoResources, care face parte din pachetul pdoTools. Puteți instala fie întregul set de pachete pdo (pdoTools), fie doar pdoResources ca pachet separat pentru a crea un filtru pe MODx Revolution.

După instalarea pachetelor, haideți să conectăm fragmentul pe care l-ați descărcat de pe GitHub la proiectul dvs. Dacă în prezent dezvoltați un director de la zero, atunci vă sfătuiesc să rămâneți la utilizarea unor clase specifice pentru filtrarea Ajax.

Cu toate acestea, dacă aveți deja un director gata făcut, puteți defini clasele de elemente de filtru Ajax în fișierul JS (vezi mai jos).

Rețineți că .ajax-item trebuie să fie un copil imediat al .ajax-container. Dacă utilizați o grilă Bootstrap pentru aranjarea coloanelor, puteți defini clasa de container ca „row ajax-container” și coloanele de item ca „col-md-4 ajax-item”.

Conectarea filtrului Ajax de script JS

Să conectăm scriptul JS la proiect. Îl puteți conecta fie ca fișier separat, fie direct în fișierul de scripturi personalizate al proiectului. Scriptul necesită jQuery pentru a rula.

$(function() ( //MODx pdoResources Ajax Filter //Setări filtru var fadeSpeed ​​​​= 200, // Fade Animation Speed ​​​​ajaxCountSelector = ".ajax-count", // Selector CSS de contor de articole ajaxContainerSelector = ". ajax-container" , // Selector CSS al containerului Ajax ajaxItemSelector = ".ajax-item", // Selector CSS al articolului Ajax ajaxFormSelector = ".ajax-form", // Selector CSS al formularului de filtru Ajax ajaxFormButtonStart = ".ajax -start", // Selector CSS al Butonului Start Filtering ajaxFormButtonReset = ".ajax-reset", // Selector CSS al Butonului Resetare Ajax Form sortDownText = "Descendent", sortUpText = "Ascendent"; funcția ajaxCount() ( if($ (" .ajax-filter-count").length) ( var count = $(".ajax-filter-count").data("count"); $(ajaxCountSelector).text(count); ) else ( $ (ajaxCountSelector ).text($(ajaxItemSelector).length )ajaxCount(); function ajaxMainFunction() ( $.ajax(( data: $(ajaxFormSelector).serialize()).done(function(response) ( var $ răspuns = $(răspuns); $(ajaxContainerSelector).fadeOut(fadeSpeed);

• Rândurile 5-13: Definirea variabilelor pentru selectoarele CSS ale filtrului Ajax. Nu ne schimbam daca folosim valori standard, ca in figura de mai sus;
• Rândurile 15-22: scriptul contorului de resurse în filtrarea rezultatelor;
• Liniile 24-35: funcția principală de filtrare Ajax;
• Rândurile 37-49: handler de evenimente pentru a face clic pe butonul „Încărcați mai multe”;
• Rândurile 51-54: handler de evenimente pentru a face clic pe butonul „filtru”. Acest buton poate fi absent, deoarece filtrarea are loc automat.
• Filtrarea automată poate fi dezactivată prin eliminarea liniilor 68-70;
• Rândurile 56-66: handler de evenimente pentru ștergerea formularului și resetarea filtrului. Rândurile 59-63 sunt responsabile pentru resetarea colării;
• Rândurile 68-70: funcție de sortare automată la schimbarea câmpurilor formularului de filtrare;
• Rândurile 72-82: funcție universală pentru sortarea după parametrul TV.

Conectarea unui fragment PHP la MODx Revolution

Între comentarii //Setări câmpuri de filtrare și //Setări de sfârșit există parametri pe care trebuie să îi editați pentru a se potrivi cu proiectul dvs. Nu este nimic complicat aici, doar scrieți numele câmpurilor de intrare și verificați-le cu o condiție if. Pentru câmpuri precum Radio, Select și Text, folosim exemplul de la rândurile 5-8. Pentru a determina valoarea intermediară de la și la, puteți folosi exemplul din rândurile 11-16. Pentru casetele de selectare, exemplul de la rândurile 19-21 este potrivit.

În rândul 74 al fragmentului vă puteți defini clasele, dar nu eliminați marcajul curent, deoarece este folosit în scripturi pentru încărcarea conținutului.

Exemplu de valori posibile în panoul de control MODx pentru butoanele radio: First==1||Second==2||Third==3

Un exemplu de afișare a butoanelor radio în interfață:

Aici numele de denumire = „etaj” corespunde rândurilor 6-8 din fragmentul nostru de catalog Filtru. Procesarea altor câmpuri de formular este implementată în mod similar. Cred că acest lucru este de înțeles și crearea propriilor câmpuri nu va fi o problemă pentru tine.

Fragmentul este scos în șablonul de catalog după cum urmează:

[[!catalogFilter?

• &tpl=`tplCatItem` &limit=`3` &parents=`5` &fields=`imagine,zonă,etaj,garaj,preț`]]
• tpl=`tplCatItem` - bucată de articol din lista de catalog;
• limit=`3` - Câte înregistrări să afișați și câte înregistrări să încărcați când faceți clic pe butonul „Încărcați mai multe”;
• parents=`5` - indică id-ul documentului părinte pentru directorul de resurse;

Exemplu de bucată tplCatItem

[[+tv.floor]] `]]

[[+pagetitle]]	Podea
[[+tv.area:isnot=``:then=`	Pătrat
[[+tv.area]] mp.	Garaj
[[+tv.garage:is=`1`:then=`Da`:else=`Nu`]]	[[+tv.price]]

Sortare Ajax după TV
Scriptul nostru are o soluție gata făcută pentru sortarea rezultatelor de filtrare în funcție de orice domeniu TV. Introduceți următoarele câmpuri ascunse în formularul de filtrare și nu modificați valoarea acestora, trebuie doar să fie în formularul de filtrare:

Oriunde în șablonul HTML, faceți un buton de ieșire și în atributul de date specificați câmpul după care doriți să filtrați rezultatele:

Sortați după preț: Ascendent

Când faceți clic, clasa buton-sort-asc este comutată, pe care o puteți utiliza pentru a proiecta un buton atunci când schimbați direcția de sortare, adăugați săgeți etc. Puteți scrie orice televizor implicat în filtrare în atributul data-sort-by. Asta e tot cu sortarea.

Așadar, ne-am uitat la crearea unui filtru simplu de resurse Ajax în MODx cu rezultate rezultate în fragmentul pdoResources.

Multa sanatate tuturor. În acest articol vă voi spune cum să faceți un filtru de document pe baza parametrilor TV pe un site care rulează Modx Revolution. Vom folosi fragmentul tagManager2 din Andchir. Acest fragment poate funcționa cu mai multe televizoare simultan, precum și cu date numerice (sub formă de preț) și o listă multiplă. Vom analiza în continuare fiecare dintre aceste exemple.

1. Mai întâi trebuie să instalați tagManager2

Pentru a face asta mergem la Aplicații/Instalar/

apăsați butonul „Descărcați suplimentul”și introduceți în bara de căutare tagManager2

De asemenea, mai trebuie să instalați fragmentul getPage și getProducts. Astfel sectiunea „Gestionarea pachetelor” ar trebui să arate așa (fragmentul translit, apropo, este responsabil pentru transliterarea aliasurilor în latină)

Descărcați, instalați pachete și accesați „Setări de sistem”

2. Configurați fragmentul tagManager2

În Setări de sistem, selectați secțiunea tag_manager2

Vom vedea opțiunile de setări ale filtrului

Totul acolo este destul de simplu și clar, dar totuși:

• ÎN „ID-ul resursei directorului de nivel superior” specificați id-ul șablonului sau categoriei de catalog în care vor fi filtrate produsele sau paginile
• ÎN „Delimitator suplimentar de liste multiple” pune semnul #. Mai jos vei afla de ce este nevoie
• ÎN „Nume de câmpuri TV sau liste multiple”înregistrați televizorul cu o listă multiplă. Vă voi arăta mai jos cum să le creați.
• „Numele TV sau câmpurile cu valori numerice”- aici trebuie să specificați parametrii TV, care vor conține numere. Acesta este de obicei un parametru de preț. Acest filtru va fi afișat ca un glisor „de la și către”
• ÎN „ID-uri șabloane de produs” notăm id-ul paginilor care trebuie filtrate și la care sunt atașați parametrii TV specificați mai sus
• ÎN „Numele setului de parametri folosit pentru filtrare”înregistrare catalog_filters. Vom folosi acest șablon în șabloane de parametri getPageŞi getProducts
• Înregistrează-te „Fragment asociat cu un set de parametri” numele fragmentului care va afișa și pagina paginile sau produsele. De obicei asta getPage.

3. Creați un set de parametri catalog_filters în getPage

Să mergem la fragmentul getPage

Accesați fila „Opțiuni”și apăsați butonul „Adăugați set de parametri”. Puteți, desigur, să îl editați pe cel existent, dar atunci există șansa de a suprascrie parametrii pe care îi vom crea acum la actualizarea getPage. Dacă nu aveți de gând să actualizați, puteți doar să editați.

Editați parametrii existenți și atribuiți valori:

Creați noi parametri și atribuiți valori

Parametrii editați vor fi afișați în verde, parametrii creați vor fi afișați în violet

4. Creați sau editați parametrii TV pentru filtru

Am creat 3 parametri TV de exemplu

Aș dori să atrag o atenție deosebită asupra faptului că trebuie să specificați Numele (Titlul) parametrului TV, altfel este posibil să nu fie afișat pur și simplu în modulul de control al filtrului

5.Creați o bucată filtr_tpl

Această bucată este responsabilă pentru afișarea fiecărui rezultat individual în getProducts

6. Creați o structură în arborele de documente

Pentru mine arata asa:

Pagina noastră principală are ID-ul 1, iar produsele au ID-ul șablonului 1 (avem acest lucru în setările tag_manager2, dacă aveți alte valori, nu uitați să-l schimbați în setări)

7. Editați filters.js

Hai sa mergem la adresa /assets/components/tag_manager2/js/web/filters.js iar în schimb

Etichete multiple: [„etichete”],//Nume suplimentare. câmpuri cu valori multiple

introduceți codul cu valorile noastre înlocuite

Etichete multiple: ["filtr1", "filtr2"],//Nume suplimentare. câmpuri cu valori multiple

Totul aici este extrem de simplu și clar. Am inserat câmpurile noastre TV cu mai multe valori. În general, aceasta este o configurație a tuturor setărilor (dar este mai bine să nu le atingeți fără permisiunea băieților mari, mă refer la sfaturile creatorilor modulului)

8. Afișați filtrul și rezultatele de filtrare

Filtrul în sine

Afișarea rezultatelor cu paginare

[[!+page.nav]]

Sortarea rezultatelor

9. Activați filtrul

Acum trebuie doar să ne activăm filtrul. Pentru a face asta mergem la Aplicații/Gestionare filtre.

Aici trebuie să bifați casetele de lângă fiecare filtru și să faceți clic pe butonul„Salvează”.

Dacă ați făcut totul corect, filtrul ar trebui să funcționeze. Asta e tot. Dacă aveți întrebări, întrebați în comentarii, voi încerca să vă răspund. În general, aici este documentația pentru tagManager2 . Mult succes in dezvoltare. ÎN "Demo" unul dintre site-urile mele care implementează un filtru folosind tagManager2

MODx are o sintaxă încorporată pentru utilizarea construcțiilor if else.

Modificatori de ieșire

Tabelul prezintă câțiva modificatori și exemple de utilizare a acestora. În exemple, modificatorii sunt aplicați substituenților, dar ar trebui să vă amintiți că aceștia pot fi aplicați oricăror etichete MODX. Asigurați-vă că eticheta pe care o utilizați scoate cel puțin ceva pe care modificatorul îl va procesa.

Modificatori de ieșire condiționate

Filtrele pot fi folosite și pentru a modifica rezultatul fragmentelor. Filtrul trebuie specificat înaintea tuturor parametrilor (înainte de semnul întrebării):

De asemenea, pentru a putea folosi structuri imbricate, puteți folosi un pachet suplimentar, care are un nume scurt și succint If. Îl puteți descărca accesând System->Package Management.

Iată cum va arăta codul de stare:

[ [!Dacă? &subject=`[ [+total]]` &operator=`GT` &operand=`3` &then=`Aveți mai mult de 3 articole!`]]

Dacă parametrii pachetului:

subiect- Parametrul prin care sunt îndeplinite condițiile.

operator- Operator de comparare cu subiect

operand- Folosit după cum este necesar și reprezintă valoarea operatorului care utilizează subiectul.

apoi- Cod care este afișat dacă condiția este evaluată la adevărată

altfel- Cod care este afișat dacă condiția este falsă

depanare- Dacă este adevărat, vor afișa toți parametrii trecuți

muri- Dacă depanarea (debag) a avut succes și corespunde valorii true, atunci după afișarea parametrilor, utilizați funcția die().

Opțiuni

Operatori:

Salutări, prieteni! Astăzi vom învăța cum să creăm un filtru de resurse în MODx Revolution cu posibilitatea de a sorta după orice câmp TV și de a încărca rezultatele făcând clic pe „Încărcați mai multe”. Pentru a afișa rezultatele vom folosi fragmentul pdoResources.

Rece

Bâlbâi

Descărcați toate fragmentele și fișierele de lecție necesare.

Mai întâi trebuie să instalați pachetul pdoResources, care este inclus în pachet pdoTools. Puteți instala fie întregul set de pachete pdo (pdoTools), fie doar pdoResources ca pachet separat pentru a crea un filtru pe MODx Revolution.

După instalarea pachetelor, să includem fragmentul pe care l-ați descărcat în proiect. Dacă în prezent dezvoltați un director de la zero, atunci vă sfătuiesc să rămâneți la utilizarea unor clase specifice pentru filtrarea Ajax. Schema de denumire a clasei:

Cu toate acestea, dacă aveți deja un director gata făcut, puteți defini clasele de elemente de filtru Ajax în fișierul JS (vezi mai jos).

Rețineți că .ajax-articol trebuie să fie un descendent direct .ajax-container. Dacă utilizați grila Bootstrap pentru aspectul coloanei, puteți defini clasa containerului ca "rând ajax-container", iar coloanele de articole sunt ca "col-md-4 ajax-item".

Conectarea filtrului Ajax de script JS

Să conectăm scriptul JS la proiect. Îl puteți conecta fie ca fișier separat, fie direct în fișierul de scripturi personalizate al proiectului. Scriptul necesită jQuery pentru a rula.

$(function() ( //MODx pdoResources Ajax Filter //Setări filtru var fadeSpeed ​​​​= 200, // Fade Animation Speed ​​​​ajaxCountSelector = ".ajax-count", // Selector CSS de contor de articole ajaxContainerSelector = ". ajax-container" , // Selector CSS al containerului Ajax ajaxItemSelector = ".ajax-item", // Selector CSS al articolului Ajax ajaxFormSelector = ".ajax-form", // Selector CSS al formularului de filtru Ajax ajaxFormButtonStart = ".ajax -start", // Selector CSS al Butonului Start Filtering ajaxFormButtonReset = ".ajax-reset", // Selector CSS al Butonului Resetare Ajax Form sortDownText = "Descendent", sortUpText = "Ascendent"; funcția ajaxCount() ( if($ (" .ajax-filter-count").length) ( var count = $(".ajax-filter-count").data("count"); $(ajaxCountSelector).text(count); ) else ( $ (ajaxCountSelector ).text($(ajaxItemSelector).length )ajaxCount(); function ajaxMainFunction() ( $.ajax(( data: $(ajaxFormSelector).serialize()).done(function(response) ( var $ răspuns = $(răspuns); $(ajaxContainerSelector).fadeOut(fadeSpeed);

• Rândurile 5-13: Definirea variabilelor pentru selectoarele de filtre CSS Ajax. Nu ne schimbam daca folosim valori standard, ca in figura de mai sus;
• Rândurile 15-22: scriptul contorului de resurse în filtrarea rezultatelor;
• Liniile 24-35: funcția principală de filtrare Ajax;
• Liniile 37-49: handler de evenimente pentru a face clic pe butonul „Încărcați mai multe”;
• Liniile 51-54: handler de evenimente pentru a face clic pe butonul „filtru”. Acest buton poate fi absent, deoarece filtrarea are loc automat. Filtrarea automată poate fi dezactivată prin eliminarea liniilor 68-70;
• Liniile 56-66: handler de evenimente pentru ștergerea formularului și resetarea filtrului. Rândurile 59-63 sunt responsabile pentru resetarea colării;
• Liniile 68-70: funcție de sortare automată la schimbarea câmpurilor formularului de filtrare;
• Liniile 72-82: functie de sortare universala dupa parametrul TV.

Am încercat să fac acest script cât mai universal posibil, așa că dacă utilizați selectoare standard de elemente de filtru Ajax, atunci nu trebuie să editați nimic.

Conectarea unui fragment PHP la MODx Revolution

Creați un nou fragment în panoul de control MODx catalogFilterși completați-l cu următorul conținut:

Între comentarii //Setări pentru câmpuri de filtrareŞi //Încheiați setările Există parametri pe care trebuie să îi editați pentru a se potrivi proiectului dvs. Nu este nimic complicat aici, doar scrieți numele câmpurilor de intrare și verificați-le cu o condiție if. Pentru câmpuri precum Radio, Select și Text, folosim exemplul de la rândurile 5-8. Pentru a determina valoarea intermediară de la și la, puteți folosi exemplul din rândurile 11-16. Pentru casetele de selectare, exemplul de la rândurile 19-21 este potrivit.

În rândul 74 al fragmentului vă puteți defini clasele, dar nu eliminați marcajul curent, deoarece este folosit în scripturi pentru încărcarea conținutului.

Exemplu de valori posibile în panoul de control MODx pentru butoanele radio: Primul==1||Al doilea==2||Al treilea==3

Un exemplu de afișare a butoanelor radio în interfață:

Iată denumirea nume = " podea " se potrivește cu rândurile 6-8 din fragmentul nostru catalogFilter. Procesarea altor câmpuri de formular este implementată în mod similar. Cred că acest lucru este de înțeles și crearea propriilor câmpuri nu va fi o problemă pentru tine.

Fragmentul este scos în șablonul de catalog după cum urmează:

[[!catalogFilter?

• &tpl=`tplCatItem` &limit=`3` &parents=`5` &fields=`imagine,zonă,etaj,garaj,preț`]] tpl=`tplCatItem`
• - bucată articol din lista de catalog; limit=`3`
• - Câte înregistrări să afișați și câte înregistrări să încărcați când faceți clic pe butonul „Încărcați mai multe”; parinti=`5`
• - indicați id-ul documentului părinte pentru catalogul de resurse; fields=`imagine,zona,etaj,garaj,pret`

- enumerați televizoarele care trebuie afișate în fragmentul tplCatItem și care trebuie procesate la filtrare. Exemplu de bucată

Exemplu de bucată tplCatItem

[[+tv.floor]] `]]

[[+pagetitle]]	Podea
[[+tv.area:isnot=``:then=`	Pătrat
[[+tv.area]] mp.	Garaj
[[+tv.garage:is=`1`:then=`Da`:else=`Nu`]]	[[+tv.price]]

tplCatItem Puteți vedea un exemplu complex de ieșire către front-end în depozitul de proiect de pe Github în fișier.

demo.html

Sortare Ajax după televizor

Oriunde în șablonul HTML, faceți un buton de ieșire și în atributul de date specificați câmpul după care doriți să filtrați rezultatele:

Scriptul nostru are o soluție gata făcută pentru sortarea rezultatelor de filtrare în funcție de orice domeniu TV. Introduceți următoarele câmpuri ascunse în formularul de filtrare și nu modificați valoarea acestora, trebuie doar să fie în formularul de filtrare:

Sortați după preț: Crescător Când se face clic, clasa este comutată buton-sortare-asc , pe care îl puteți folosi pentru a proiecta un buton atunci când schimbați direcția de sortare, adăugați săgeți etc. la un atribut sortare-date-după

Puteți scrie orice televizor care participă la filtrare. Asta e tot cu sortarea. pdoResources.

Așadar, ne-am uitat la crearea unui filtru de resurse Ajax simplu în MODx cu afișarea rezultatelor într-un fragment

Filtrele din Revolution vă permit să procesați și să modificați valorile etichetelor în interiorul șabloanelor, fragmentelor și fragmentelor dvs.

Filtre de intrare

În prezent, filtrele de intrare sunt utilizate în pregătirea pentru procesarea filtrelor de ieșire. Ele sunt de obicei utilizate numai în cadrul nucleului MODX.

Filtre de ieșire

În MODX Revolution, filtrele de ieșire sunt folosite ca unul sau mai mulți modificatori de ieșire, sunt similare cu apelurile PHx din MODx Evolution, dar diferă prin faptul că sunt deja încorporate în nucleu.

Sintaxa modificatorului:

Filtrele pot fi aplicate secvenţial (scrise de la stânga la dreapta):

[[+element:modifier=`value`:anothermodifier=`value2`:andanothermodifier:yetanother=`value3`]]

Asemenea filtrele pot fi folosite pentru a modifica rezultatul fragmentelor. Filtrul trebuie specificat înaintea tuturor parametrilor (înainte de semnul întrebării):

Modificatori de ieșire

Tabelul prezintă câțiva modificatori și exemple de utilizare a acestora. În exemple, acestea se aplică substituenților, dar trebuie să vă amintiți asta modificatorii pot fi aplicați oricăror etichete MODX Revolution.

Modificatori pentru lucrul cu șiruri

Utilizarea modificatorilor de ieșire cu parametri

Dacă o etichetă are parametri, atunci aceștia trebuie să fie scrisi imediat după modificator:

Crearea unui modificator personalizat

Orice fragment poate fi folosit și ca modificator de ieșire. Pentru a-l folosi, pur și simplu specificați numele fragmentului în loc de modificator. De exemplu, să creăm un fragment makeExciting care adaugă un anumit număr de semne de exclamare la rezultat:

[[*pagetitle:makeExciting=`4`]]

Un astfel de apel de etichetă va transmite următorii parametri fragmentului makeExciting pentru procesare:

Modificator UserInfo

Acces direct la datele dintr-un tabel modx_user_attributesîntr-o bază de date, folosind modificatori de ieșire în loc de fragmente, se poate realiza pur și simplu folosind modificatorul UserInfo.

Selectați coloana dorită din tabel și specificați-o ca proprietate modificatoare, de exemplu astfel: