MODX क्रांति के लिए फ़िल्टरिंग और फ़िल्टर प्रबंधन घटक 1.2

अंत में, हम "फ़िल्टरिंग एंड फ़िल्टर मैनेजमेंट" घटक (टैग मैनजर) को ध्यान में रखते हुए आए। इसका पहला संस्करण बहुत क्रूड था, यहां तक ​​कि फ़िल्टरिंग का एक अतिरिक्त सरलीकृत संस्करण भी बनाना पड़ा। अब जो कुछ कल्पना की गई थी, वह अपने सामान्य रूप में लागू की गई थी और मैं इस घटक के बारे में MODX समुदाय और रुचि रखने वाले सभी लोगों को बताना चाहता हूं।

कार्य:

• फ़िल्टर समूहों और उनके मूल्यों को अलग-अलग क्रमबद्ध करें।
• फ़िल्टर समूहों और व्यक्तिगत मूल्यों (चेकबॉक्स) की गतिविधि निर्धारित करना।
• उन सभी उत्पादों के लिए मानों का परिवर्तन (एक डबल-क्लिक फ़ील्ड प्रकट होता है) जिनका यह मान है।
• अजाक्स फ़िल्टरिंग और कैटलॉग में उत्पादों की छंटाई।
• प्रत्येक फ़िल्टर के लिए उत्पादों की संख्या प्रदर्शित की जाती है। खाली खोज परिणाम की प्राप्ति अवरुद्ध है।
• एक ही समय में कई मानों के चयन के साथ टीवी इनपुट प्रकारों के लिए समर्थन - चेकबॉक्स, सूची (एकाधिक चयन)।

फ़िल्टर प्रबंधन घटक कैसे काम करता है यह वर्णन करने के लिए लंबा और थकाऊ है, इसलिए मैंने एक वीडियो बनाने का फैसला किया:


एक कार्य था जो फ़िल्टर करते समय परिणाम प्राप्त करना असंभव था "कुछ भी नहीं मिला"। इसी समय, प्रत्येक फ़िल्टर के लिए एक फ़िल्टर प्रदर्शित किया जाना चाहिए, इस फिल्टर के लिए उत्पादों की संख्या दिखाएगा। यानी एक अनुरोध के बजाय यह लगभग 20 निकला (विशेषकर मेरे मामले में)। बेशक, माल का डेटा अनुक्रमित और कैश किया जा सकता है, लेकिन गणना द्वारा यह भी वांछित परिणाम नहीं देगा। जितना हो सके सब कुछ तेजी से काम करना चाहिए। इसलिए, फ़िल्टरिंग कार्य (अधिक सटीक, मुख्य भाग) के भाग को "क्लाइंट" (जावास्क्रिप्ट) में स्थानांतरित करने का निर्णय लिया गया।

साइट पर फ़िल्टर ब्लॉक प्रदर्शित करने के लिए, tmCatalogFilters स्निपेट का उपयोग किया जाता है।

कॉल उदाहरण:

[[tmCatalogFilters? &jsMap=`1` &innerTpl=`filters_innerTpl` &outerTpl=`filters_outerTpl` ]] 

इनरटेल - एक फिल्टर के साथ एक लाइन टेम्पलेट का हिस्सा। डिफ़ॉल्ट रूप से, `@ फ़ाइल कोर / घटकों / tag_manager / तत्वों / विखंडू / innerTpl.tpl`।
आउटरप्लांट - फिल्टर ब्लॉक टेम्पलेट का हिस्सा। डिफ़ॉल्ट रूप से, `@ फ़ाइल कोर / घटकों / tag_manager / तत्वों / विखंडू / आउटरप्लेट .pl`।
स्किपटीवी - आईडी टीवी को कॉमा द्वारा अलग किया जाता है, जिसे फ़िल्टर करने की आवश्यकता नहीं है।
jsMap - उत्पाद डेटा की एक JS ऑब्जेक्ट बनाएँ। फ़िल्टर करने के लिए उपयोग किया जाता है और प्रत्येक फ़िल्टर के लिए उत्पादों की संख्या को जल्दी से प्रदर्शित करता है।

इनरप्लेट और एक्सटर्नल चंक्स के उदाहरणों में शामिल हैं (कोर / घटक / टैग_मनगर / तत्व / विखंडू /)।

इस स्निपेट को कॉल करने की सलाह दी जाती है कि इसे कैश किया जाए (बिना कोष्ठक ("!")। जेएस ऑब्जेक्ट को सामानों के सभी मापदंडों के साथ बनाया जाता है, और यह डेटा (जावास्क्रिप्ट में) खोजा जाता है। केवल उत्पाद आईडी की एक सूची सर्वर को भेजी जाती है।

माल वापस लेने के लिए tmGetProducts स्निपेट का उपयोग किया जाता है। इस स्निपेट का कोई पैरामीटर नहीं है। यह एक रैपर है जो getPage और getResources स्निपेट्स का उपयोग करता है। वह getPage स्निपेट के लिए बनाए गए पैरामीटर सेट के नाम से पैरामीटर लागू करता है। यह नाम घटक कॉन्फ़िगरेशन ("सिस्टम सेटिंग्स" -> "tag_manager" -> "tag_mgr.propertySetName") में निर्दिष्ट होना चाहिए। साथ ही, मापदंडों का यह सेट एक php स्क्रिप्ट का उपयोग करता है जो ajax अनुरोधों (सेटिंग्स सिंक्रनाइज़ होने पर) डेटा लौटाता है।

कैटलॉग टेम्पलेट में जहां फिल्टर प्रदर्शित किए जाएंगे, आपको आवश्यक जेएस स्क्रिप्ट और सीएसएस फाइलें (एक उदाहरण संलग्न है) कनेक्ट करने की आवश्यकता है।

 <link type="text/css" rel="stylesheet" href="assets/components/tag_manager/css/ui-lightness/jquery-ui-1.8.23.custom.css" /> <script type="text/javascript" src="assets/components/tag_manager/js/web/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="assets/components/tag_manager/js/web/filters.js"></script> 

आपको अपने लेआउट के लिए filter.js स्क्रिप्ट को कॉन्फ़िगर करने की आवश्यकता है। कोड में टिप्पणियां हैं।

यह एक त्वरित गाइड है। पैकेज (कोर / घटकों / tag_manager / डॉक्स / readme.txt) में अधिक विस्तृत उदाहरण शामिल हैं।

स्टूडियो सिंपल ड्रीम के लिए कंपोनेंट बनाया गया, फिर फाइनल किया गया। जनता के साथ साझा करने के लिए उन्हें धन्यवाद।

डेमो
डाउनलोड (व्यवस्थापक पैनल में "पैकेज प्रबंधन" के माध्यम से स्थापित किया जा सकता है)
स्रोत कोड