Modx filtresi. CMF MODx Revolution'da filtreler, değiştiriciler. Yeni parametreler oluşturulur ve değerler atanır

Devrimdeki filtreler, verilerin sunulmasında keruvati'ye izin veriyor. Şablonların ortasındaki değerleri değiştirmenize olanak sağlarlar.

Devrimde, çıkış filtresi, PHx tıklamalarına benzer bir dizi çıkış değiştiriciden bir veya daha fazla kez ayarlanır. MODx Evrimi- Suçluluk için koku çekirdeğe aşılanır. Sözdizimi şöyle görünür:

[ ]

Kokular da tanımlanabilir (sağa bakacak şekilde):

[ ]

Ayrıca snippet'in çıktısını değiştirmek için bunları vikorize edebilirsiniz; Lütfen değiştiricinin snippet adından sonra ve beslenme işaretinden önce geldiğini unutmayın; örneğin,

[ ]

Aşağıdaki tabloda ana değiştiricilerin eylemleri ve uygulamaları gösterilmektedir. Belirli etiketler için daha düşük değerler uygulamak isterseniz herhangi bir MODx etiketiyle çıktı değiştiriciler oluşturulabilir. Değiştiricinin verileri kaldırdığını kontrol edin.

Akıllı değiştiriciler:

Dize değiştiriciler:

Değerler dinamik olarak değişebileceğinden iz önbelleğe alınmaz. Örneğin:

[ [+placeholder:default=`Varsayılan bir değer!`] ​​]

Bu, bazı düğümlerin değerinin boş olabileceği, bazılarının ise boş olabileceği anlamına gelir. Önbelleğinizden neleri kaydetmelisiniz? Anlamın ortaya çıkabilmesi için bu kapatılabilir.

Çulluk yazıldığında sonucun ne olacağını bilmiyorsanız, yorumun değerlerini hesaplamak mantıklıdır:

[ [!getResources:default=`Üzgünüz - aramanız çalışmıyor.`? &tplFirst=`blogTpl` &parents=`2,3,4,8` &tvFilters=`blog_tags==%%` &includeTVs=`1`] ]

Phx filtreleri ve bunların MODX Revo değiştiricileri hakkında günümüzün ilginç makalesi, yardımıyla doğrudan şablonların ortasında farklı etiketlerin değerlerini değiştirebilirsiniz.

Kokuya mı ihtiyacın var?

phx değiştiriciler Modx perakendecileri için hayatı kolaylaştırın. Gerekli olan atlıkarınca resmine (veya banner'a) sahip bir web sitemizin olması mümkündür. yalnızca üzerinde görüntüle ana Sayfa . Bunun için aynı yığına yerleştirip bu ek yapı için şablona girmeniz yeterlidir.

De: 1 - ana sayfa kimliği,
$atlıkarınca- Atlıkarınca (afiş) kodu içeren yığın.
Sadece çaydanlıklar demleniyor yeni şablon atlıkarınca kodu satır sayısı başına. Ben de böyleyim, dağılmaya düşmez.

Raporun yapısına bakalım:

[[*id:is=`1`:then=`[[$carusel]]`]]

*İD- Akış sayfasının kimliğini girin;

:is=`1`:sonra=

- kontrol ediyor *kimlik == 1? ve eğer bir şey varsa, bunun yerine görüntülenecektir Daha sonra;
$atlıkarınca- Atlıkarınca yığınına girin.

*id yerine diğer alanları değiştirebilirsiniz, örneğin *template - tam şablonu görüntüleyin. Veya TV alanının içeriğini kontrol edebilir (*anahtar kelimeler varsa) ve tamamlanmışsa görüntüleyebilirsiniz. Rozberomo Danimarka Vipadok daha fazla detay. Standart düzen göz önüne alındığında:

Zavdannya: TV anahtar kelimeleri saklanmadığı için bu satıra girmeyin.
Karar.

[[*anahtar kelimeler:!empty=` `]]

Navantazhennya

Değiştiricilerin değiştirilmesi konusunda dikkatli olmanız, akılsızca doğru olanı seçmeniz gerekir. Hadi atlıkarıncaya geri dönelim, bu giriş soldan sağa doğru hesaplanır ve MODH, aklın doğru olup olmadığına veya bunun yerine tam sayfada neyin görüntülendiğine bakılmaksızın aklın tüm girdilerini görüntüler. [[$atlıkarınca]] Birisinin acil bir durumu varsa bunun bedelini ödemek yerine. Bununla bağlantılı olarak girişi yeniden yazmak daha iyidir:

[[$caru[[*id:is=`1`:then=`sel`]]]]

Bir yığın yerine damla nedir? $atlıkarınca, akıl biter bitmez hemen toplanacak

*id:is=`1`

Çünkü aynı fikirde

[[*id:is=`1`:then=`sel`]]

ve akış sayfasının kimliği 1'den büyükse işlenmeye devam eder [[$atlıkarınca]] Kimlik 1'e eşit değilse, o zaman - [[$caru]]. Ve yakshcho chunka $caru- elementlerde mevcut değilse vurgu olmayacaktır.

Ve sonra mükemmel şaheser şuna benziyor.

[[$[[*id:is=`1`:then=`carusel`]]]]

Düzenin doğru bir şekilde nasıl entegre edileceği hakkında modx revo Burayı okumanızı tavsiye ederim.

Not! Web sitesi bileşenlerinin mantığına uyacak şekilde mümkün olduğunca çok sayıda değiştiriciyi birleştirebilirsiniz ancak bunların ana özünü aklınızda bulundurun. rozrobka'da sakin ol ve neden karmaşık şeyleri bir araya getirmeyesiniz? Çağrı, en etkili ve canlı yöntem- en basitidir çünkü tasarım daha basit ve daha akıllıdır - gelecekte onunla çalışmak bizim için daha kolaydır. Aşağıda herhangi bir MODH Revo etiketi için kullanılabilecek ana değiştiriciler verilmiştir.

Değiştiricilerin Lancer'ları

Tarih satırını farklı bir biçimde biçimlendirmek iyi bir fikir olabilir; örneğin:

[[+mydate:strtotime:date=`%Y-%m-%d`]]

Veritabanındaki "modx_user_attributes" tablosuna, bir kod parçası yerine vicoristan çıktı değiştiricileri ile doğrudan erişim, vicoristan değiştirici yolu seçilerek kolayca yapılabilir. Kullanıcı bilgisi. Tablodan uygun sütunu seçin ve çıktı değiştiricinin gücünü örneğin şu şekilde belirtin:

İstemcinin dahili anahtarı: [[!+modx.user.id:userinfo=`internalKey`]] Oturum Açma: [[!+modx.user.id:userinfo=`username`]] Harici ad: [[!+modx .user .id:userinfo=`tam ad`]] Rol: [[!+modx.user.id:userinfo=`role`]] E-posta: [[!+modx.user.id:userinfo=`email` ]] Telefon: [[!+modx.user.id:userinfo=`phone`]] Cep telefonu: [[!+modx.user.id:userinfo=`mobilephone`]] Faks: [[!+modx.user .id :userinfo=`fax`]] Halk Günü: [[!+modx.user.id:userinfo=`dob`:date=`%Y-%m-%d`]] Olun: [[!+modx .user .id:userinfo=`gender`]] Ülke: [[!+modx.user.id:userinfo=`country`]] Eyalet: [[!+modx.user.id:userinfo=`state`]] Posta kodu: [[!+modx.user.id:userinfo=`zip`]] Fotoğraf: [[!+modx.user.id:userinfo=`photo`]] Yorum: [[!+modx.user.id :userinfo =`comment`]] Son oturum açma tarihi: [[!+modx.user.id:userinfo=`lastlogin`:date=`%Y-%m-%d`]] Oturum açma sayısı: [[!+ modx .user .id:userinfo=`girişsayısı`]]

Özel saygıyla, dolu işaretine tabiyiz [[ ! +modx.user.id]]. Vіn izin veriyor Keshuvati YAPMAYINçekilmek yerine. Nakit para kazanmamak neden gerekli? Görünüşe göre şöyle: Sitede 5 koristuvach var. Blogun kenarına ilk koristuvach geldi:

Lütfen şunu rica ediyoruz, [[!+modx.user.id:userinfo=`username`]]!

Fikir, geliştirici hakkında detaylı bilgilerin yer aldığı bu sayfada yayınlanacaktır. Yani, eğer sonuç önbelleğe alınırsa, bu sayfaya ilk girdiğinizde, yalnızca giren koristuvach'ın adından kurtulacaksınız - ve kararlar onların adına göre değil, o koristuvach'ın adına göre gösterilecektir. ilk önce bu sayfaya girildi Neden bu etiketi önbelleğe almıyorum, lütfen yardım isteyin dolu işareti Wikilik'ten önce [[ ! +modx…

Not: Unutmayın aç gerektiği gibi önbellek etiketleri! Kazanmanız gereken şey gereklidir KONUŞMAK dolu işaretleri şeklinde ( ! ). Çoğu parçacığın sonuçları tamamen önbellekten işlenebilir. Gelecek derste bunu çözeceğiz.

Uçuyorum arkadaşlar! Bugün için bir kaynak filtresi oluşturmayı öğreneceğiz. MODx Devrimi Herhangi bir TV alanına göre sıralama ve "Daha Fazla Gir"e tıklayarak sonuçları geliştirme imkanı. Sonuçları görmek için snipe pdoResources'u kullanacağız.

Klasnuti

Zapiniti

Ders için tüm parçacıkları ve gerekli dosyaları büyüleyin.

Başlamak için paketi yüklemeniz gerekir pdoKaynaklar Paket depoda neler içeriyor? pdoAraçlar. MODx Revolution'da bir filtre oluşturmak için tüm pdo paketleri setini (pdoTools) yükleyebilir veya yalnızca pdoResources paketini ekleyebilirsiniz.

Paketleri kurduktan sonra projenizden indirdiğiniz snippet'i ekleyelim. Kataloğu sıfırdan bölüyorsanız, Ajax filtrelemesi için çeşitli şarkı sınıfları oluşturmanız gerekecektir. Sınıf adlandırma şeması:

Ancak, zaten hazır bir dizininiz varsa, JS dosyalarında (aşağıdaki div.) Ajax filtre öğelerinin sınıflarını belirtebilirsiniz.

Saygıyı geri ver .ajax-item Ortası olmayabilir .ajax-konteyner. Sütunları düzenlemek için Bootstrap ızgarasını kullanıyorsanız konteyner sınıfını şu şekilde ayarlayabilirsiniz: "satır ajax konteyneri" ve öğe sütunları "col-md-4 ajax öğesi".

JS betiği Ajax filtresini bağlama

JS betiğini projeye bağlayalım. Bunu bir dosyayla veya doğrudan projenin özel komut dosyaları dosyasına bağlayabilirsiniz. Robot betiği için jQuery gereklidir.

$(function() ( //MODx pdoResources Ajax Filtresi //Filtre Ayarları var fadeSpeed ​​= 200, // Animasyon Hızını Azalt ajaxCountSelector = ".ajax-count", // Öğe Sayacı CSS Seçicisi ajaxContainerSelector = ". ajax-container" , // Ajax Konteynerinin CSS Seçicisi ajaxItemSelector = ".ajax-item", // Ajax Öğesinin CSS Seçicisi ajaxFormSelector = ".ajax-form", // CSS Seçici Ajax Filtre Formu ajaxFormButtonStart = ".ajax- start", // Düğme Başlangıç ​​Filtrelemesinin CSS Seçicisi ajaxFormButtonReset = ".ajax-reset", // Düğme Sıfırlama Ajax Formunun CSS Seçicisi sortDownText = "Düşüş için", sortUpText = "Yükseliş için"; function ajaxCount() ( if( $(" .ajax-filter-count").length) ( var count = $(".ajax-filter-count").data("count"); $(ajaxCountSelector).text(count); ) else ( $(ajaxCountSelector).text($(ajaxItemSelector).length); ) )ajaxCount(); yanıt = $(response);$(ajaxCont ainerSelector).fadeOut(fadeSpeed); setTimeout(function() ( $(ajaxContainerSelector) ).html($response.find(ajaxContainerSelector).html()).fadeIn(fadeSpeed); ajaxCount(); ), fadeSpeed); )); ) $(ajaxContainerSelector).on("click", ".ajax-more", function(e) ( e.preventDefault(); var offset = $(ajaxItemSelector).length; $.ajax(( data: $(ajaxFormSelector) ) ).serialize()+"&offset="+offset )).done(function(response) ( $(".ajax-more").remove(); var $response = $(response); $response.find ( $(ajaxContainerSelector).append($response.find(ajaxContainerSelector).html()); $(ajaxItemSelector).fadeIn(); )); )) $(ajaxFormButtonStart).click(function( e) ( e.preventDefault (); ajaxMainFunction(); )) $(ajaxFormButtonReset).click(function(e) ( e.preventDefault(); $(ajaxFormSelector).trigger("reset"); $("input" ).val("pagetitle) "); $("input").val("artan"); setTimeout(function() ( $()).data("sort-dir", "artan").toggleClass( "button-sort-asc " ).text(sortUpText); ), fadeSpeed), ajaxMainFunction(); ajaxCount(); )) $("").data("sort-dir", "artan").click(function() ( var ths = $(this) ); $("input").val($(this).data("sıralama ölçütü")); $("input").val($(this).data("sıralama- dizin) ")); setTimeout(function() ( $("").not(this).toggleClass("button-sort-asc").text(sortUpText); ths.data("sıralama-dizini") == "artan" ? ths .data("sort-dizini", "desc").text(sortDownText) : ths.data("sort-dizini", "artan").text(sortUpText); $(this).toggleClass("button-sort -artan "); ), fadeSpeed); ajaxMainFunction(); )); ));

• Satırlar 5-13: için değişikliklerin tahsisi CSS seçiciler Ajax filtresi. Standart değerler miniklerin değerlerine benzer olduğundan değiştirilemez;
• Satırlar 15-22: sonuçları filtrelemek için kaynak şifacı komut dosyası;
• Satırlar 24-35: Ajax filtrelemenin ana işlevi;
• Satırlar 37-49:"Daha Fazla Girin" düğmesine tıklandığında verilen yanıtın örnekleyicisi;
• Satırlar 51-54:“Filtre” düğmesine tıklamak için örnekleyici. Bu buton her gün açık bırakılabilir, aksi takdirde filtreleme otomatik olarak gerçekleştirilecektir. Otomatik filtreleme 68-70. sıraların seçiminden etkilenebilir;
• Satır 56-66: Formu nasıl temizleyeceğinizi ve filtreyi nasıl çıkaracağınızı öğrenin. Sıralama parametrelerinin düşürülmesi için 59-63. satırlar dikkate alınır;
• Satırlar 68-70: filtre formu alanlarını değiştirmek için otomatik sıralama işlevi;
• Satırlar 72-82: TV parametresine göre sıralama için evrensel işlev.

Para kazanmaya çalıştım Danimarka yazısı Mümkün olduğu kadar evrensel, standart Ajax filtre öğesi seçicilerini kullandığınız için hiçbir şeyi düzenlemenize gerek yok.

MODx Devrimi'nde PHP bağlantıları kesiti

MODx panelinde yeni bir parçacık oluşturun katalogFiltre Ve bunun yerine şu şekilde doldurun:

Yorumlar arasında //Filtre Alanları Ayarlarıі //Ayarları Sonlandır Projeniz için ayarlamanız gereken parametreleri öğrenin. Burada karmaşık bir şey yok, sadece giriş alanlarının adını yazın ve bunları zihninizle kontrol edin. Radyo, Seçim ve Metin gibi alanlar için 5-8. satırlardan örneği seçin. İçerideki ve yukarıdaki ara değeri belirlemek için dipçik ile 11-16. sıraları hızlandırabilirsiniz. Onay kutuları için 19-21. satırlardaki ucu kullanın.

74 parçadan oluşan bir satırda kendi sınıflarınızı ayarlayabilirsiniz, ancak tam düzeni seçmeyin, aksi takdirde içerik oluşturmak için komut dosyalarında yer alırsınız.

Radyo düğmeleri için MODx panelindeki olası değerlere örnek: Birinci==1||Diğer==2||Üçüncü==3

Ön uçta radyo düğmelerinin görüntülenmesine bir örnek:

Burada işe alım isim = "kat" Bu, snippet'imizin 6-8. satırlarına karşılık gelir katalogFiltre. Diğer form alanlarının işlenmesi de benzer şekilde gerçekleştirilir. Sanırım bu netleşti ve ıslak alanların oluşturulması sizin için sorun olmayacak.

Parçacık katalog şablonunda şu şekilde görünür:

[[!katalogFiltre? &tpl=`tplCatItem` &limit=`3` &parents=`5` &fields=`resim,alan,kat,garaj,fiyat`]]

• tpl=`tplCatItem`- katalog listesindeki parça ögesi;
• sınır=`3`- “Daha Fazla Girin” düğmesine tıkladığınızda kaç girişin görüntüleneceğini ve kaç girişin vurgulanacağını;
• ebeveynler=`5`- kaynak kataloğu için belge kimliğini belirtin;
• alanlar=`resim,alan,kat,garaj,fiyat`- tplCatItem bölümünde gösterilmesi gereken ve filtreleme sırasında işlenmesi gereken aşırı kullanılmış TV'ler.

büyük popo tplCatItem

[[+sayfa başlığı]]

[[+tv.area:isnot=``:then=` `]]

üstte	[[+tv.kat]]
Kare	[[+tv.area]] metrekare
Garaj	[[+tv.garage:is=`1`:then=```:else=`Ні`]]
Fiyat:	[[+tv.fiyatı]]

Dosyadaki GitHub'daki proje deposundaki ön uç geliştirmenin karmaşık örneğine bakabilirsiniz. demo.html.

Ajax TV'ye göre sıralama

Komut dosyamız, filtreleme sonuçlarını herhangi bir TV alanına göre sıralamak için hazır bir çözüme sahiptir. Aşağıdaki alanları filtre formuna ekleyin ve değerlerini değiştirmeyin; bunlar yalnızca filtre formundan kaynaklanmaktadır:

HTML şablonunuzda yeni bir düğme oluşturun ve veri özelliğinde görünümü filtrelemek istediğiniz alanı belirtin:

Fiyata göre sırala: Boyuta göre

Tıkladığınızda sınıf yapışır düğme-sıralama-artan Doğrudan sıralamayı değiştirirken, ok veya özellik eklerken düğmeyi süslemek için kullanabileceğiniz veri sıralama ölçütü Filtrasyonla aynı kaderi paylaşan her türlü TV'yi yazabilirsiniz. Her şey halledildi.

SNIPET'te görüntülenen sonuçlarla MODx'ta garip Ajax kaynak filtresinin oluşturulmasına bir göz attık pdoKaynaklar.

Herkese sağlık. Bu makale size Modx Revolution tarafından yönetilen bir web sitesinde TV parametrelerine dayalı bir belge filtresinin nasıl oluşturulacağını gösterecektir. Vikorist olacağız ve snippet'leyeceğiz tagManager2 görüş Andçir. Bu kod parçası doğrudan TV kanalından işlenebileceği gibi sayısal verilerden (fiyatlar biçiminde) ve çoğul listeden de işlenebilmektedir. Bu kıçın derisini parçalayacağız.

1. Başlamak için tagManager2'yi yüklemeniz gerekir

Kimin için gidiyoruz Program/Yükleyici/

kabartma düğmesi "Daha fazla zavantazhit" ve art arda arama başlatılıyor tagManager2

Ayrıca bir snippet yüklemeniz gerekir getPage ve getProducts. Bu şekilde ayrıldı "Paketlerdeki Keruvannya"şöyle görünebilir (konuşmadan önce metnin çevirisi, takma adların Latince'ye çevrildiğini gösterir)

Paketleri yükleyeceğiz ve şuraya gideceğiz: “Sistemin kurulması”

2. Özelleştirilebilir snippet tagManager2

Sistem ayarları için tag_manager2 bölümünü seçin

Filtreyi ayarlamak için birçok parametremiz var

Orada her şey basit ve anlaşılır, ama yine de:

• sen "Üst düzey dizinin kaynak kimliği" Katalog şablonuna kimliği belirtin ve kategoriler, ürünler ve sayfalar filtrelenir
• sen “Çarpma listesi için ek dağıtıcı”# işaretini koyun. Aşağıda neye ihtiyacınız olduğunu bulacaksınız
• sen “Birden fazla listeden TV adları veya alanlar” TV'yi çoklu listeden kaydedin. Aşağıda bunları nasıl oluşturacağınızı göstereceğim
• "TV adları veya sayısal değerleri olan alanlar"- burada sayıların olacağı TV parametrelerini girmeniz gerekir. Ara, bu fiyat parametresidir. Bu filtre "başlangıç ​​ve bitiş" çubuğunda görünecektir.
• sen "Ürün şablonu kimlikleri" Eklenen herhangi bir TV parametresi belirtilmeden önce filtrelenmesi gereken sayfaların kimliğini girin
• sen "Filtreleme için kullanılan bir dizi parametrem var" katalog_filters'ı kaydedin Bu şablonu parametre şablonlarında kullanacağız getPageі GetProducts
• Kayıt ol "Bir dizi parametre içeren örgü parçası" sayfalarda veya ürünlerde görüntülenen ve sayfalara ayrılan yazının adı. Zazviçay tse getPage.

3. getPage'de bir dizi katalog_filtresi parametresi oluşturun

Snipe getPage'deki demo

Haydi sekmeye gidelim "Parametre" sonra düğmeye basın “Bir dizi parametre ekle”. Elbette orijinali düzenleyebilirsiniz, aksi takdirde parametrelerin üzerine yazma şansı vardır ve bu, güncellenmiş bir getPage ile hemen yapılabilir. Aşık olmak istemiyorsanız düzenleme yapabilirsiniz.

Temel parametreler düzenlenebilir ve değerler atanabilir:

Yeni parametreler oluşturulur ve değerler atanır

Düzenlenen parametreler yeşil renkte, oluşturulan parametreler ise mor renkte görüntülenir.

4. Filtre için TV parametreleri oluşturun veya düzenleyin

Popo için 3 TV parametresi oluşturdum

TV parametresinin Adını (Başlığını) belirtmenin gerekli olduğunu özellikle belirtmek isterim, aksi takdirde filtre yönetim modülünde görünmeyebilir.

5. Bir filtre_tpl yığını oluşturun

Bu parça getProducts'taki sonucu gösterir

6. Belge ağacında yapı oluşturmak

Benim için şöyle görünüyor:

Ana sayfamızın ID 1'i, ürünlerimizin şablon ID'si 1'dir (ayarlarımızda tag_manager2 vardır, farklı değerleriniz varsa ayarlardan değiştirmeyi unutmayın)

7. Düzenlenebilir filtreler.js

Adres için ideo /assets/components/tag_manager2/js/web/filters.js ve değiştirme

Çoklu etiketler: ["etiketler"], // Adları ekleyin. birden fazla değere sahip alanlar

Kodu yedek değerlerimizden ekliyoruz

Çoklu etiketler: ["filtr1", "filtr2"], / / ​​Eklenti adları. birden fazla değere sahip alanlar

Burada her şey çok basit ve anlaşılır. TV alanlarımıza birden fazla değer ekledik. Ve şimdi bu yapılandırma ayarlandı (veya daha iyisi, büyük amcaların izni olmadan onlara dokunmayın, modülün yaratıcılarının zevkine saygı duyuyorum)

8. Filtre ve filtreleme sonuçları görüntülenir

Filtrenin kendisi

Sayfalandırmalı sonuçlar gösteriliyor

[[!+sayfa.nav]]

Sonuçları sıralama

9. Filtre etkinleştirildi

Şimdi filtremizi aktif etmemiz gerekiyor. Kimin için gidiyoruz Program/Keruvannya filtreleri.

Burada cilt filtresi kutularını işaretlemeniz ve düğmeye basmanız gerekir."Kaydetmek".

Her şeyi doğru yaptıysanız filtre çalışmalıdır. Bu kadar. Yiyecek ortaya çıkarsa, yorum bırakın, ben de size bildirmeye çalışacağım. Ve artık tagManager2'nin dokümantasyonu başladı. Gelişiminizde iyi şanslar. sen "Demo" tagManager2 kullanarak filtre uygulayan sitelerimden biri