MODX Revolutionのフィルタリングおよびフィルター管理コンポーネント1.2

tagManager 最後に、「フィルタリングとフィルター管理」コンポーネント(tagManager)を思い浮かべるようになりました。 最初のバージョンは非常に粗雑であり、フィルタリングの追加の簡易バージョンを作成する必要がありました。 これで、計画されていたすべてが通常の形式で実装されたので、このコンポーネントについてMODXコミュニティと関係者全員に伝えたいと思います。



機能:





フィルター管理コンポーネントの仕組みは長く説明するのが面倒なので、ビデオを作成することにしました。





フィルタリング時に「何も見つかりません」という結果を得ることが不可能であるというタスクがありました。 同時に、各フィルターにフィルターを表示し、このフィルターの製品数を表示する必要があります。 つまり 1つのリクエストの代わりに、約20になりました(特に私の場合)。 もちろん、商品のデータにインデックスを付けてキャッシュすることもできますが、計算によると、これでさえ望ましい結果は得られません。 すべてができるだけ速く動作するはずです。 そのため、フィルタリング作業の一部(より正確にはメイン部分)を「クライアント」(JavaScript)にシフトすることが決定されました。



サイトにフィルターブロックを表示するには、tmCatalogFiltersスニペットを使用します。



呼び出し例:



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







innerTpl-フィルター付きの行テンプレートのチャンク。 デフォルトでは、 `@ FILE core / components / tag_manager / elements / chunks / innerTpl.tpl`。

outerTpl-フィルターブロックテンプレートのチャンク。 デフォルトでは、 `@ FILE core / components / tag_manager / elements / chunks / outerTpl.tpl`。

skipTV-コンマで区切られたID TV。フィルターを表示する必要はありません。

jsMap-製品データのJSオブジェクトを作成します。 フィルターを使用して、各フィルターの製品数をすばやく表示します。



innerTplおよびouterTplチャンクの例が含まれています(コア/コンポーネント/ tag_manager /要素/チャンク/)。



このスニペットを呼び出すことをキャッシュすることをお勧めします(「!」のない括弧)。 商品のすべてのパラメーターを使用してJSオブジェクトが作成され、このデータが(JavaScriptで)検索されます。 製品IDのリストのみがサーバーに送信されます。



商品を引き出すには、tmGetProductsスニペットが使用されます。 このスニペットにはパラメーターがありません。 これは、getPageおよびgetResourcesスニペットを使用するラッパーです。 彼は、getPageスニペット用に作成されたパラメーターセットの名前でパラメーターを適用します。 この名前は、コンポーネント構成で指定する必要があります( "システム設定"-> "tag_manager"-> "tag_mgr.propertySetName")。 また、このパラメーターセットは、ajax要求(設定が同期される)時にデータを返すphpスクリプトを使用します。



フィルターが表示されるカタログテンプレートで、必要なJSスクリプトとCSSファイルを接続する必要があります(例が添付されています)。



 <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>
      
      







レイアウト用にfilters.jsスクリプトを構成する必要があります。 コードにはコメントがあります。



これはクイックガイドです。 より詳細な例がパッケージに含まれています(core / components / tag_manager / docs / readme.txt)。



このコンポーネントは、スタジオSimple Dream用に作成され、完成しました。 一般の人と共有してくれてありがとう。



デモ

ダウンロード (管理パネルの[パッケージ管理]からインストールできます)

ソースコード



All Articles