Փոփոխիչի զտիչներ. Պարզ AJAX զտիչ MODX-ի համար՝ օգտագործելով pdoPage

Ողջույններ, ընկերներ: Այսօր մենք կսովորենք, թե ինչպես ստեղծել ռեսուրսների զտիչ MODx Revolution-ում ցանկացած հեռուստատեսային դաշտով տեսակավորելու և արդյունքները բեռնելու հնարավորությամբ՝ սեղմելով «Բեռնել ավելին»: Արդյունքները ցուցադրելու համար մենք կօգտագործենք pdoResources հատվածը:

Թույն

Կակազող

Ներբեռնեք բոլոր հատվածները և անհրաժեշտ դասի ֆայլերը:

Նախ անհրաժեշտ է տեղադրել փաթեթը pdoResources, որը ներառված է փաթեթում pdoTools. Դուք կարող եք տեղադրել կամ Pdo փաթեթների ամբողջ փաթեթը (pdoTools) կամ պարզապես pdoResources-ը որպես առանձին փաթեթ MODx Revolution-ի վրա զտիչ ստեղծելու համար:

Փաթեթները տեղադրելուց հետո եկեք ներառենք ձեր ներբեռնած հատվածը ձեր նախագծի մեջ: Եթե ​​ներկայումս զրոյից գրացուցակ եք մշակում, ապա խորհուրդ եմ տալիս հավատարիմ մնալ Ajax-ի զտման համար հատուկ դասերի օգտագործմանը: Դասի անվանման սխեման.

Այնուամենայնիվ, եթե դուք արդեն ունեք պատրաստի գրացուցակ, կարող եք սահմանել Ajax ֆիլտրի տարրերի դասերը JS ֆայլում (տես ստորև):

նշեք, որ .ajax-հատպետք է լինի անմիջական ժառանգ .ajax-container. Եթե ​​դուք օգտագործում եք Bootstrap ցանց սյունակի դասավորության համար, կարող եք սահմանել կոնտեյների դասը որպես «շար Այաքս-կոնտեյներ», իսկ տարրի սյունակները նման են «col-md-4 ajax-item».

JS սցենարի միացում Ajax ֆիլտրին

Եկեք JS սկրիպտը միացնենք նախագծին։ Դուք կարող եք այն միացնել կա՛մ որպես առանձին ֆայլ, կա՛մ ուղղակիորեն նախագծի հատուկ սկրիպտների ֆայլի մեջ: Սցենարը պահանջում է jQuery գործարկել:

$(function() (//MODx pdoResources Ajax Filter //Filter Settings var fadeSpeed ​​= 200, // Fade Animation Speed ​​‎ajaxCountSelector = ".ajax-count", // CSS ընտրիչ իրերի հաշվիչ ajaxContainerSelector = ": ajax-container" , // CSS Selector of Ajax Container ajaxItemSelector = ".ajax-item", // CSS Selector of Ajax Item ajaxFormSelector = ".ajax-form", // CSS Selector of Ajax Filter Form ajaxFormButtonStart = ".ajax: -start", // CSS ընտրիչ կոճակը Սկսել զտել ajaxFormButtonReset = ".ajax-reset", // CSS ընտրիչ կոճակի վերակայման Ajax Form sortDownText = "Նվազող", sortUpText = "Աճող"; ֆունկցիա 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((տվյալներ՝ $(ajaxFormSelector).serialize())).կատարված(function(response) ( var $ պատասխան = $ (պատասխան);$ (ajaxContainerSelector).fadeOut (fadeSpeed); setTimeout(function() ($(ajaxContainerSelector).html($response.find(ajaxContainerSelector).html()).fadeIn(fadeSpeed); ajaxCount(); ), fadeSpeed); )); ) $(ajaxContainerSelector).on("click", ".ajax-more", ֆունկցիա(e) (e.preventDefault(); var offset = $(ajaxItemSelector).length; $.ajax((տվյալներ՝ $(ajaxFormSelector) ).serialize()+"&offset="+offset )).կատարված(function(response) ($(".ajax-more").remove(); var $response = $(response);$response.find( ajaxItemSelector).hide();$(ajaxContainerSelector).append($response.find(ajaxContainerSelector).html());$(ajaxItemSelector).fadeIn();));)) $(ajaxFormButtonStart).սեղմեք(function( ե) ( e.preventDefault(); ajaxMainFunction(); )) $(ajaxFormButtonReset). սեղմեք(function(e) (e.preventDefault(); $(ajaxFormSelector).trigger("reset"); $("input" ).val ("էջի վերնագիր"); $("ներածում").val("asc"); setTimeout(function() ($("").data("sort-dir", "asc").toggleClass( "button-sort-asc").text(sortUpText); ), fadeSpeed);ajaxMainFunction();ajaxCount(); )) $(""+ajaxFormSelector+" մուտքագրում").change(function() (ajaxMainFunction(); )) $("").data("sort-dir", "asc").click(function() ( var ths = $(this); $("input").val($(this).data("sort-by")); $("input").val($(this).data("sort-dir")); setTimeout(function() ($("").not(this).toggleClass("button-sort-asc").text(sortUpText); ths.data("sort-dir") == "asc" ths .data("sort-dir", "desc").text(sortDownText): ths.data("sort-dir", "asc").text(sortUpText);$(this).toggleClass("button-sort"): -asc"); ), fadeSpeed); ajaxMainFunction(); )); ));

  • 5-13 տողեր: CSS Ajax ֆիլտրի ընտրիչների համար փոփոխականների սահմանում: Մենք չենք փոխվում, եթե օգտագործենք ստանդարտ արժեքներ, ինչպես վերը նշված նկարում;
  • 15-22 տողեր:ռեսուրսների հաշվիչի սցենար արդյունքների զտման մեջ;
  • 24-35 տողեր:հիմնական Ajax ֆիլտրման գործառույթը;
  • 37-49 տողեր:իրադարձությունների մշակիչ՝ «Բեռնել ավելին» կոճակը սեղմելու համար;
  • 51-54 տողեր:իրադարձությունների մշակիչ՝ «ֆիլտր» կոճակի վրա սեղմելու համար: Այս կոճակը կարող է բացակայել, քանի որ զտումը տեղի է ունենում ավտոմատ կերպով: Ավտոմատ զտումը կարող է անջատվել՝ հեռացնելով 68-70 տողերը;
  • 56-66 տողեր:իրադարձությունների մշակիչ՝ ձևը մաքրելու և ֆիլտրը վերականգնելու համար: 59-63 տողերը պատասխանատու են համադրումը վերականգնելու համար.
  • 68-70 տողեր:ավտոմատ տեսակավորման գործառույթ՝ ֆիլտրի ձևի դաշտերը փոխելիս.
  • 72-82 տողեր:ունիվերսալ տեսակավորման գործառույթ ըստ հեռուստացույցի պարամետրի:

Ես փորձեցի այս սցենարը հնարավորինս ունիվերսալ դարձնել, այնպես որ, եթե դուք օգտագործում եք ստանդարտ Ajax ֆիլտրի տարրերի ընտրիչներ, ապա ձեզ հարկավոր չէ որևէ բան խմբագրել:

PHP հատվածի միացում MODx Revolution-ին

Ստեղծեք նոր հատված MODx կառավարման վահանակում կատալոգՖիլտրև լրացնել հետևյալ բովանդակությամբ.

=".$_GET["area_from"]; ) if($_GET["area_to"]) ( $filter = "տարածք<=".$_GET["area_to"]; } //Checkbox Type if($_GET["garage"]) { $filter = "garage=1"; } //End Settings //Sort if($_GET["sortby"]) { $sortby = $_GET["sortby"]; } else { $sortby = "pagetitle"; } if($_GET["sortdir"]) { $sortdir = $_GET["sortdir"]; } else { $sortdir = "asc"; } //End Sort //Offset $offset = 0; if($_GET["offset"]){ $offset = $_GET["offset"]; } if($filter) { $where = $modx->toJSON (զանգված ($ֆիլտր)); ) else ( $where = ""; ) $params_count = array("parents" => $parents, "limit" => 0, "tpl" => "@INLINE ,", "select" => "id", "includeTVs" => $fields, "showHidden" => "1", "where" => $where); $count = $modx->runSnippet("pdoResources",$params_count); $count = count(պայթել(",",$count)) -1; $modx->setPlaceholder("count",$count); $params = զանգված ("parents" => $parents, "limit" => $limit, "offset" => $offset, "tpl" => $tpl, "select" => "id,pagetitle,introtext,content ", "includeTVs" => $fields, "showHidden" => "1", "sortby" => $sortby, "sortdir" => $sortdir, "where" => $where); $ more = $count - $offset - $limit; $lim = $more > $limit ? $limit՝ $ավելի; $button = ""; if($more > 0)($button = "
Բեռնել ավելին «.$lim»: «.$more»-ից:
";) վերադարձնել $modx->runSnippet("pdoResources",$params).$button;

Մեկնաբանությունների միջև //Զտիչ դաշտերի կարգավորումներԵվ // Վերջի կարգավորումներԿան պարամետրեր, որոնք դուք պետք է խմբագրեք ձեր նախագծին համապատասխանելու համար: Այստեղ ոչ մի բարդ բան չկա, պարզապես գրեք մուտքագրման դաշտերի անվանումը և ստուգեք դրանք if պայմանով։ Ռադիո, Ընտրել և տեքստի նման դաշտերի համար մենք օգտագործում ենք 5-8 տողերի օրինակը: Միջանկյալ արժեքը որոշելու համար կարող եք օգտագործել 11-16 տողերի օրինակը: Վանդակների համար 19-21 տողերի օրինակը հարմար է:

Հատվածի 74-րդ տողում դուք կարող եք սահմանել ձեր դասերը, բայց մի հանեք ընթացիկ նշումը, քանի որ այն օգտագործվում է բովանդակության բեռնման համար նախատեսված սցենարներում:

Հնարավոր արժեքների օրինակ MODx կառավարման վահանակում ռադիո կոճակների համար. Առաջին==1||Երկրորդ==2||Երրորդ==3


Ռադիո կոճակները ճակատային մասում ցուցադրելու օրինակ.

Ահա անվանումը անուն = "հատակ"համապատասխանում է մեր հատվածի 6-8 տողերին կատալոգՖիլտր. Նմանապես իրականացվում է ձևի այլ դաշտերի մշակումը: Կարծում եմ՝ սա հասկանալի է, և սեփական դաշտեր ստեղծելը քեզ համար խնդիր չի լինի։

Հատվածը կատալոգի ձևանմուշում թողարկվում է հետևյալ կերպ.

[[!catalogFilter? &tpl=`tplCatItem` &limit=`3` &ծնողներ=`5` &fields=`պատկեր,տարածք,հատակ,ավտոտնակ,գին`]]

  • tpl=`tplCatItem`- կտոր կտոր կատալոգի ցանկում;
  • սահման =`3`- Քանի գրառում պետք է ցուցադրվի և քանի գրառում պետք է բեռնել, երբ սեղմում եք «Բեռնել ավելին» կոճակը;
  • ծնողներ=`5`- նշել ռեսուրսների կատալոգի մայր փաստաթղթի ID-ն.
  • fields=`պատկեր,տարածք,հատակ,ավտոտնակ,գին`- թվարկեք հեռուստացույցները, որոնք պետք է ցուցադրվեն tplCatItem հատվածում և որոնք պետք է մշակվեն զտելիս:

Հատված օրինակ tplCatItem

[[+էջի վերնագիր]]

[[+tv.տարածք:isnot=``:հետո=` `]]
Հատակ [[+tv.floor]]
Քառակուսի [[+tv.տարածք]] քառ.
Ավտոտնակ [[+tv.garage:is=`1`:then=`Այո`:else=`Ոչ`]]
Գինը: [[+tv.price]]

Դուք կարող եք տեսնել ֆայլում Github-ի նախագծի շտեմարանում ելքի բարդ օրինակ demo.html.

Ajax տեսակավորում ըստ հեռուստատեսության

Մեր սկրիպտն ունի պատրաստի լուծում՝ ըստ ցանկացած հեռուստատեսային դաշտի զտման արդյունքների տեսակավորման: Տեղադրեք հետևյալ թաքնված դաշտերը ֆիլտրի ձևի մեջ և մի փոխեք դրանց արժեքը, դրանք պարզապես պետք է լինեն ֆիլտրի ձևի մեջ.

Ձեր HTML ձևանմուշի ցանկացած վայրում կատարեք կոճակի ելք և տվյալների հատկանիշում նշեք այն դաշտը, որով ցանկանում եք զտել արդյունքները.

Դասավորել ըստ գնի՝ աճող

Երբ սեղմվում է, դասը փոխարկվում է կոճակ-տեսակավորել-asc, որը կարող եք օգտագործել կոճակ նախագծելու համար, երբ փոխում եք տեսակավորման ուղղությունը, սլաքներ ավելացնելիս և այլն հատկանիշին: տվյալների տեսակավորում ըստԴուք կարող եք գրել ցանկացած հեռուստացույց, որը մասնակցում է զտմանը: Այս ամենը տեսակավորման հետ է կապված:

Այսպիսով, մենք նայեցինք MODx-ում Ajax ռեսուրսների պարզ ֆիլտրի ստեղծմանը` արդյունքները հատվածում դուրս բերելով: pdoResources.

PHx-ը (Placeholders Xtended) նոր հնարավորություններ է ավելացնում տեղապահեր, MODx թեգեր (ներառյալ հեռուստացույցի պարամետրերը) և կայքի կարգավորումների պիտակները ցուցադրելու համար: Ռեկուրսիվ վերլուծիչը թույլ է տալիս օգտագործել nested tags: Հնարավոր է ստեղծել ձեր սեփական մոդիֆիկատորները՝ ստեղծելով հատվածներ:

Դուք կարող եք ներբեռնել PHx-ի վերջին տարբերակը MODX պահոցից՝ օգտագործելով այս հղումը:

Նոր տեղադրում

  1. Ներբեռնեք և բացեք արխիվը:

Թարմացնել

  1. Ներբեռնեք և բացեք արխիվը:
  2. Վերանվանեք /assets/plugins/phx գրացուցակը /assets/plugins/phx-old
  3. Ստեղծեք «phx» գրացուցակ /assets/plugins պանակում:
  4. Վերբեռնեք FTP-ի միջոցով կամ պարզապես պատճենեք արխիվի բովանդակությունը /assets/plugins/phx
  5. Ստեղծեք նոր «PHx» plugin MODx Control Panel-ում (Elements - Element Management - Plugins) և պատճենեք phx.plugin.txt ֆայլի բովանդակությունը դրա մեջ:
  6. Ստուգեք «OnParseDocument» իրադարձությունը «Համակարգի իրադարձություններ» ներդիրում

Կոնֆիգուրացիա

Կազմաձևման ներդիրում, plugin-ը խմբագրելիս, պատճենեք «Plugin configuration» դաշտում.

&phxdebug=Իրադարձությունների գրանցամատյան;int;0 &phxmaxpass=Մաքս. անցումների քանակը;int;50

Առաջադեմ օգտվողների համար

Դուք կարող եք փոխել լռելյայն կարգավորումները PHx հավելվածի համար.

Իրադարձությունների մատյան

0 = Հաշմանդամ
1 = PHx իրադարձությունների գրանցումը միացված է
Եթե ​​միացված է, PHx-ը մանրամասն տեղեկամատյան է ստեղծում իրադարձությունների մատյանում գրանցված յուրաքանչյուր իրադարձության համար (Reports->Event Viewer)

Մաքս. անցումների քանակը

Սահմանում է մշակման ենթակա պիտակների առավելագույն խորությունը: Խորհուրդ է տրվում արժեքը թողնել 50-ի վրա։

PHx-ը (Placeholders Xtended) ընդլայնում է տեղապահների, բովանդակության պիտակների (ներառյալ հեռուստացույցի պարամետրերը) և կայքի կարգավորումների պիտակների օգտագործումը: Դրա շնորհիվ դուք հեշտությամբ կարող եք որոշել վերջնական արդյունքի ելքային ձևաչափը: PHx-ը ներկառուցված է MODX վերլուծիչի մեջ՝ ընդլայնելով դրա ֆունկցիոնալությունը փոփոխիչներով, պայմաններով և որպես բոնուս՝ դարձնելով այն իսկապես ռեկուրսիվ:

Աջակցվող պիտակներ

PHx-ն աջակցում է հետևյալ MODx պիտակներին.

  • [+ տեղապահ+]
  • [*բովանդակության պիտակներ*] (օրինակ՝ [*բովանդակություն*], [*pagetitle*] և այլն)
  • [*Հեռուստացույցի պարամետրեր*]
  • [(անհատականացման պիտակներ)] (օրինակ՝ [(base_url)], [(site_name)] և այլն)

Հատվածներ, որոնք աջակցում են PHx-ին

  • Նույնպես
  • MaxiGallery

Դուք կարող եք օգտագործել PHx շարահյուսությունը այս ցանկում չգտնվող հատվածների կողմից օգտագործվող հատվածներում, սակայն դրա համար անհրաժեշտ է այլ մեթոդ (տես Խորհուրդներ և հնարքներ բաժինը)

Կանոնավոր դիտման տեղապահ

[+ տեղապահ+]

հեշտությամբ վերածվում է PHx տեղապահի.

[+ placeholder:esc+]

Նույնը կարող եք անել բովանդակության պիտակի հետ՝

[*ստեղծվել է*]

Ավելացնել փոփոխիչ.

[*createdby:date=`%a %B %d, %Y at %H:%M`*]

Կարող եք նաև օգտագործել միանգամից մի քանի փոփոխիչներ: Դրանք կմշակվեն ձախից աջ.

Somevar:esc:nl2br:strip

Ընդլայնված հավելվածներ

Հատուկ «phx» տեղապահի առկայությունը թույլ է տալիս օգտագործել PHx շարահյուսություն՝ առանց իրական փոփոխական ունենալու։

[+phx:if=`[+this+]`:is=`[+that+]`:then=`արա սա`:else=`արա դա`+]

Որոշ փոփոխիչներով այս տեղապահը որոշակի նշանակություն է ստանում: «userinfo» փոփոխիչի դեպքում այն ​​վերադարձնում է համապատասխան արժեքը ընթացիկ օգտատիրոջ մասին տեղեկություններից.

[+phx:userinfo=`օգտվողի անուն`+]

Հայտնի հարցեր

Շարահյուսություն

Սա տրամաբանական է թվում, բայց արժե կենտրոնանալ: Խուսափեք կաղապարում հետևյալ կառուցվածքները օգտագործելուց, եթե դրանք MODx թեգի մաս չեն կազմում.

[+
[*
[(
+]
*]
)]
]]

Վերլուծիչը կփորձի մշակել դրանք, և MODx-ը սխալ կթողնի: Սովորաբար այս խնդիրը չի առաջանում։ Բայց JavaScript-ի դեպքում դուք կարող եք ունենալ նման կառուցվածք.

Զանգված

Ինչը կառաջացնի տարօրինակ վարքագիծ +]-ի պատճառով։ Նաև CDATA փակման պիտակը.

/* ]]> */

Կարող է խնդիրներ առաջացնել։

Հիշեք, որ դուք չեք կարող կորցնել ձեր կայքի տվյալները՝ օգտագործելով սխալ PHx շարահյուսություն: Ամենավատը, որ կարող է պատահել, այն է, որ ձեր ձևանմուշը ճիշտ չցուցադրվի:

Լարային

դեպքում

ucase

Փոխակերպում է տողի բոլոր նիշերը մեծատառերի:

[+string:ucase+]

Մուտքի մոտ.

Սա լար է

ՍԱ ՏԱՐԱՆ Է

առաջին հերթին

Տողում առաջին տառը կդառնա մեծատառ:

[+string:ucfirst+]

Մուտքի մոտ.

երկարությունը | լեն

Վերադարձնում է տողի երկարությունը։

Մուտքի մոտ.

Սա լար է

նշումներ

Կկտրի բոլոր HTML պիտակները տողից:

[+string:notags+]

Մուտքի մոտ.

Սա էա լար

Սա լար է

esc

Հեռացնում է html պիտակները և տողերի ընդմիջումները

htmlent

Փոխակերպում է բնօրինակ փոփոխականը html էության: Նմանատիպ htmlentities() PHP-ում:

nl2br

Նոր տողերի նիշերը վերափոխում է պիտակների:

[+string:nl2br+]

Մուտքի մոտ.

Սա
մի լար

Սա
մի լար

քերթել

Հեռացնում է նոր տողի նիշերը (\n), ներդիրները (\t) և հաջորդական բացատները:

[+string:strip+]

Մուտքի մոտ.

Սա
ա
լար

Սա լար է

Այլ փոփոխիչներ

հակադարձ

Հետ շրջում է տառերը:

բառապաշար

Կտրում է ընթացիկ արժեքի բառերը ավելի երկար, քան նիշերի տրված երկարությունը՝ միջակայքում բացատ դնելով:

Կանխադրված՝ 70 նիշ:

Wordwrap (=`երկարություն`)

երկարությունը - նիշ

սահման

Վերադարձնում է առաջին X նիշերը ընթացիկ արժեքից:

Կանխադրված՝ 100 նիշ:

սահմանափակում (=`երկարություն`)

Հատուկ

ամսաթիվը

Փոխակերպում է unix-ի ժամանակի դրոշմակնիքը՝ նշված ձևաչափին համապատասխանելու համար:

ամսաթիվ (=`ամսաթվի ձևաչափ`)

dateformat: Ըստ PHP ֆունկցիայի strftime ձևաչափի

[*createdon:date=`%d.%m.%Y`*]

Որպեսզի ամսաթիվը ցուցադրվի ընթացիկ կայքի լեզվին համապատասխան, դուք պետք է սահմանեք տեղայնությունը PHx հավելվածի կոդի սկզբում: Ստորև բերված օրինակը գերմաներենի համար.

setlocale (LC_ALL, «de_DE@euro», «de_DE», «de», «ge»);

md5

Ստեղծում է ընթացիկ արժեքի MD5 հեշ:

օգտվողի տեղեկատվություն

MODx տվյալների բազայում օգտագործվող դաշտերը user_attributes աղյուսակից (օրինակ՝ օգտվողի անուն, օգտվողի էլ.փոստ):

Օգտվողի տեղեկատվություն=`դաշտ`

  • cachepwd: Քեշի գաղտնաբառը
  • մեկնաբանել: Մեկնաբանություն
  • երկիր: Մի երկիր
  • դոբԾննդյան ամսաթիվը UNIX ժամանակի ձևաչափով
  • էլ: Էլ
  • ֆաքս: Ֆաքս
  • լրիվ անվանումըԼրիվ անուն
  • սեռ: Հատակ
  • ներքինԲանալինՕգտագործողի ներքին բանալի
  • վերջին մուտքՎերջին մուտք, UNIX ժամանակի ձևաչափով
  • մուտքի հաշվիչՄուտքագրումների քանակը
  • Բջջային հեռախոս: Բջջային հեռախոս
  • գաղտնաբառը: Գաղտնաբառ
  • հեռախոս: Հեռախոս
  • լուսանկարԼուսանկարը
  • դերը: Դեր
  • պետությունԿարգավիճակը
  • այս մուտքըԱյս մուտքը UNIX ժամանակի ձևաչափով
  • օգտագործողի անունը: Մուտք
  • zip: Ինդեքս

Մաթեմատիկա

Օգտագործեք այնպիսի հաշվարկներ, ինչպիսիք են - * + /:

Մաթեմատիկա=`հաշվարկ`

«? խորհրդանիշը փոխարինվում է ընդլայնման ընթացիկ արժեքով, բայց կարող եք նաև օգտագործել ներդիր պիտակներ:

Հաշվարկի օրինակ՝ ?+1+(2+3)+4/5*6

դատարկ

Օգտագործեք «այլ արժեք», եթե տեղապահ/կաղապարի արժեքը դատարկ է:

Ifempty=`այլ արժեք`

ընտրել

Ընդունում է արժեք՝ կախված տեղապահի/կաղապարի արժեքներից:

Ընտրել=`տարբերակներ`

պարամետրեր՝ արժեք1=ելք1&արժեք2=ելք2

Մուտքի մոտ՝ 1

[+placeholder:select=`0=OFF&1=ON&2=ԱՆՀԱՅՏ՝+]

Վերադարձ՝ ՄԻԱՑՎԱԾ

Պայմանական արտահայտություններ

է

ne

կեղծանունը` չէ, չէ

ոչ հավասար (!=)

օր

մեծ կամ հավասար է (>=)

էլ

պակաս կամ հավասար (<=)

ԳՏ

ավելին (>)

լ

ավելի քիչ (<)

mo=`Վեբ-խմբեր`

հոմանիշներ (փոխանուններ)՝ isinrole, ir, անդամ

Ընդունում է ստորակետերով բաժանված վեբ խմբերի ցուցակը որպես պարամետր և վերադարձնում է true/false՝ կախված նրանից, թե ընթացիկ օգտվողը պատկանում է այս խմբերից որևէ մեկին, թե ոչ (փոխարինում է փոփոխիչը «ներդիր», որը պետք է զուգակցվեր պայմանական օպերատորի հետ)։

[+phx:mo=`myWebgroup`:then=`Ես անդամ եմ`:else=`Ես անդամ չեմ`+]

եթե =`արժեքը

Որպես պարամետր ընդունում է համեմատական ​​փոփոխականը: Կարող է օգտագործվել նաև հետ համատեղ :կամկամ .

[+phx:if=`[+price+]`:gt=`0`:then=`Գինը՝ [+price+]`+]

կամ

Տրամաբանական OR (ստուգում է առաջին կամ երկրորդ պայմանը ճիշտ է):

[+phx:if=`[*id*]`:is=`2`:կամ:is=`3`:then=`((Chunk))`:else=`((OtherChunk))`+]

Այս օրինակում, եթե ընթացիկ ID-ն 2 կամ 3 է, ապա ցուցադրվում է հատվածը ((Chunk)), հակառակ դեպքում՝ հատվածը ((OtherChunk)):

և

Տրամաբանական AND (ստուգում է, թե երկու պայմաններն էլ ճշմարիտ են):

[+phx:if=`[!UltimateParent!]`:is=`1`:and:isnot=`[*id*]`:then=`((ChildChunk))`:else=`((ParentChunk)) `+]

Այս օրինակում, եթե UltimateParent-ը հավասար է 1-ի և հավասար չէ ընթացիկ ID-ին, ապա ցուցադրվում է հատվածը ((ChildChunk)), հակառակ դեպքում՝ հատվածը ((ParentChunk)):

ապա =`կաղապար`

Իմաստը կաղապարցուցադրվում է, երբ բոլոր պայմանները ճշմարիտ են: Այստեղ դուք կարող եք նշել զանգ ((հատված)), [[հատված]] կամ մաքուր HTML:

else =`կաղապար`

Իմաստը կաղապարցուցադրվում է, երբ պայմանները չեն համապատասխանում իրականությանը: Այստեղ դուք կարող եք նշել զանգ ((հատված)), [[հատված]] կամ մաքուր HTML:

ցուցադրում

Օգտագործվում է նմանապես ապա, բայց սկզբնական արժեքը օգտագործվում է որպես ելքային ձևանմուշ։ Իրականացնում է, եթե պայմանները ճշմարիտ են:

[+myplaceholder:len:gt=`3`:ցուցադրել+]

Այս օրինակում տեղապահի արժեքը կցուցադրվի, եթե դրա երկարությունը 3 նիշից ավելի է:

Պատվերով փոփոխիչներ

Փոփոխիչը պարզ հատված է, որը մշակում է տվյալ արժեքը: Հնարավոր է ստեղծել ձեր սեփական մոդիֆիկատորները/մինի հատվածները՝ ավելացնելով նոր հատված MODx ռեսուրսների մենեջերում կամ ֆայլ ստեղծելով PHx հավելվածի մոդիֆիկատորների պանակում։

Քանի որ մոդիֆիկատորի կոդը պարզ է, այն ոչ մի պարամետրի կարիք չունի, բացառությամբ այն պարամետրերի, որոնք նա ստանում է վերլուծիչից։

Կան երկու հիմնական փոփոխականներ.

$ ելք- պարունակում է փոփոխման կարիք ունեցող փոփոխականի ընթացիկ արժեքը:
$տարբերակներ- կամընտիր պարամետր, որի արժեքը փոխանցվում է փոփոխողին:

Օրինակ.

Բերենք մոդիֆիկատորների օգտագործման մի քանի օրինակ։ Ասենք, որ տեղապահը myplaceholderիմաստ ունի "փորձարկում":

[+myplaceholder:mymodifier+]

$output փոփոխականը պարունակում է «test» արժեքը։
$options փոփոխականը ոչինչ չի պարունակում, քանի որ ոչ մի պարամետր չի փոխանցվել փոփոխիչին:

[+myplaceholder:mymodifier=`իմ տարբերակները`+]

$output փոփոխականը դեռ պարունակում է «test» արժեքը։
$options փոփոխականն այժմ պարունակում է «my options» արժեքը

Այլ փոփոխականներ (առաջադեմ օգտվողների համար)

$input - պարունակում է սկզբնական չփոփոխված արժեքը:
$condition-ը զանգված է, որը պարունակում է պայմանական արտահայտությունը կազմող տարրերը (0, 1, || և &&):

Ստեղծելով ձեր սեփական մոդիֆիկատորը

Օրինակ 1. Ես սիրում եմ MODx-ը

Օգտագործելով ձեռք բերված գիտելիքները՝ մենք կստեղծենք նոր մաքսային փոփոխիչ։ Սա կլինի առանց պարամետրի փոփոխիչ, որը պարզապես կավելացնի «քանի որ ես սիրում եմ MODx» տեքստը փոփոխականին: Դա անելու համար դուք պետք է կատարեք հետևյալ քայլերը.

1. Ռեսուրսների կառավարիչում գնացեք Ռեսուրսներ (տարրեր) -> Կառավարեք ռեսուրսները (տարրեր) -> հատվածներ

2. Սեղմեք «Նոր հատված»

phx:love"

Որպեսզի հատվածը ընկալվի որպես PHx-ի փոփոխիչ, նրա անունը պետք է ունենա «phx:» նախածանց՝ առանց դրա և հենց հատվածի անվան միջև: Այնուհետև կարող եք օգտագործել այն որպես փոփոխիչ՝ ավելացնելով. love ցանկացած տեղապահին, օրինակ՝ [+myplaceholder:love+]:

4. Այժմ եկեք ավելացնենք փոփոխիչի կոդը կոդի դաշտում: Ենթադրենք, սա այսպիսի ծածկագիր է.

5. Պահպանեք փոփոխությունները և մեր նոր փոփոխիչը ( :Սեր) պատրաստ է օգտագործման!

Օրինակ 2. Ես ավելի շատ եմ սիրում MODx-ը

Եկեք ստեղծենք փոփոխիչի նման փոփոխիչ :Սերնախորդ օրինակից, բայց մենք նրան լրացուցիչ հնարավորություն կտանք աղբյուրի տողին ավելացնել փոխանցված պարամետրի արժեքը, եթե այն նշված էր:

1. Ռեսուրսների կառավարիչում գնացեք Ռեսուրսներ (տարրեր) -> Կառավարեք ռեսուրսները (տարրեր) -> հատվածներ

2. Սեղմեք «Նոր հատված»

3. Հատվածի անունը դրեք « phx:love2"

Որպեսզի հատվածը ընկալվի որպես PHx-ի փոփոխիչ, դրա անունը պետք է նախածանցով լինի «. phx:առանց բացատների դրա և հատվածի անվան միջև: Այնուհետև կարող եք այն օգտագործել որպես փոփոխիչ՝ ավելացնելով. love ցանկացած տեղապահի, օրինակ՝ [+myplaceholder:love2+]:

ChunkGood.

Այլ օրինակներ

[+myplaceholder:gt=`1`:then=`Այո`:else=`Ոչ`+]
[+myplaceholder:lt=`3`:and:gt=`1`:then=`Այո`:else=`Ոչ`+]
[+myplaceholder:lt=`[+someplaceholder+]`:then=`Այո`:else=`Ոչ`+]
[+myplaceholder:islt=`2`:then=`Այո`:else=`Ոչ`+]
[+myplaceholder:isnot=`2`:or:lt=`3`:then=`Այո`:else=`Ոչ`+]

Բոլոր օրինակները կվերադարձվեն Այո՛.

[+myplaceholder:isnot=`2`:then=`Այո`:else=`Ոչ`+]
[+myplaceholder:gt=`[+someplaceholder+]`:then=`Այո`:else=`Ոչ`+]
[+myplaceholder:lt=`2`:then=`Այո`:else=`Ոչ`+]
[+myplaceholder:gt=`2`:then=`Այո`:else=`Ոչ`+]
[+myplaceholder:lt=`1`:then=`Այո`:else=`Ոչ`+]

Բոլոր օրինակները կվերադարձվեն Ոչ.

MODx-ն ունի ներկառուցված շարահյուսություն if else կառուցումների օգտագործման համար:

Ելքային փոփոխիչներ

Աղյուսակը ցույց է տալիս որոշ փոփոխիչներ և դրանց օգտագործման օրինակներ: Օրինակներում մոդիֆիկատորները կիրառվում են տեղապահների վրա, սակայն պետք է հիշել, որ դրանք կարող են կիրառվել ցանկացած MODX պիտակների վրա։ Համոզվեք, որ ձեր օգտագործած թեգը թողարկում է առնվազն մի բան, որը փոփոխիչը կմշակի:

Պայմանական ելքային փոփոխիչներ

Փոփոխիչ Նկարագրություն Օգտագործման օրինակ
եթե, մուտքագրում if - սահմանում է լրացուցիչ պայմանի մուտքագրում - ավելացնում է մշակված տվյալներ պիտակին
կամ Բազմաթիվ մոդիֆիկատորների համատեղում, օգտագործելով OR կապը

[*id:is=`5`:or:is=`6`:then=`համար 5 կամ 6`:else=`այլ թիվ`]]

և Բազմաթիվ մոդիֆիկատորների համատեղում AND-ի հետ

[[*id:is=`1`:and:if=`[ [*id]]`:ne=`2`:then=`da`:else=`net`]]

հավասարազոր, հավասար, հավասար, հավասար, է, հավասար Համեմատում է անցած արժեքը սահմանված արժեքի հետ: Եթե ​​արժեքները համընկնում են, ապա ցուցադրվում է «ապա» արժեքը, եթե ոչ՝ «այլ»

[*id:is=`5`:then=`համար 5`:else=`համարը ոչ 5`]]

notequalto, notequals, isnt, isnot, neq, ne Համեմատում է անցած արժեքը սահմանված արժեքի հետ: Եթե ​​արժեքները ՉԵՆ համընկնում, ցուցադրվում է «ապա» արժեքը, եթե ոչ՝ «այլ»:

[*id:isnot=`5`:then=`համարը 5 չէ`:else=`ըստ երեւույթին թիվ 5`]]

ավելի մեծ քանօրհավասար, հավասարամեծ, ge, օրինակ, isgte, gte Նույնը, միայն պայմանն է «մեծ կամ հավասար»

[*id:gte=`5`:then=`թիվ 5 կամ ավելի`:else=`փոքր քան 5`]]

մեծից, մեծից, իսգտ, գթ Նույնը, միայն պայմանը «Խիստ ավելի»

[*id:gt=`5`:then=`հինգից մեծ թիվ`:else=`թիվ 5 կամ պակաս`]]

հավասարազանց քան, պակաս, հավասար հավասար, էլ, լե, islte, lte Նույնը, միայն պայմանն է «պակաս կամ հավասար»

[*id:lte=`5`:then=`թիվ 5 կամ պակաս`:else=`մեծ քան 5`]]

ավելի ցածր, անուղղակի, ավելի ցածր, պակաս, կղզի, lt Նույնը, միայն պայմանը «Խիստ պակաս»

[*id:lte=`5`:then=`թիվը հաստատ 5-ից փոքր է`:else=`թիվը 5 կամ ավելի է`]]

թաքցնել Թաքցնում է տարրը, եթե պայմանը ճշմարիտ է

[*id:lt=`1`:hide]]

ցուցադրում Ցուցադրում է տարր, եթե պայմանը ճշմարիտ է

[*id:gt=`0`:ցուցադրել]]

ապա Օգտագործվում է պայմաններ ստեղծելու համար

[*id:gt=`0`:then=`Գրքեր պահեստում`]]

ուրիշ Օգտագործվում է պայմաններ ստեղծելու համար («ապա»-ի հետ միասին)

[*id:gt=`0`:then=`Գրքեր պահեստում:`:else=`Կներեք, բայց ամեն ինչ սպառված է:]]

ընտրել Սահմանեք ձեր արժեքը՝ կախված փոփոխիչից և պիտակի ելքից: Կարող եք նաև օգտագործել «այլ», օրինակ, եթե [+controls]] արժեքը չի համապատասխանում ընտրված օրինակին

[+controls:select=`0=OFF&1=ON&2=ХЗ`:else=`Սխալ`]]

անդամ, անդամ, mo Ստուգում է արդյոք օգտատերը նշված օգտատերերի խմբի անդամ է

[+modx.user.id:memberof=`Administrator`]]

Զտիչները կարող են օգտագործվել նաև հատվածների ելքը փոփոխելու համար: Զտիչը պետք է նշվի բոլոր պարամետրերից առաջ (հարցական նշանից առաջ).

Ինչպես նաև, որպեսզի կարողանաք օգտագործել բնադրված կառուցվածքները, կարող եք օգտագործել լրացուցիչ փաթեթ, որն ունի If կարճ և լակոնիկ անվանումը։ Այն կարող եք ներբեռնել՝ անցնելով System->Փաթեթների կառավարում:

Ահա թե ինչ տեսք կունենա պայմանի կոդը.

[[!Եթե. &subject=`[ [+ընդհանուր]]` &operator=`GT` &operand=`3` &then=`Դուք ունեք 3-ից ավելի տարր:]]

Եթե ​​փաթեթի պարամետրերը.

առարկա- Պարամետրը, որով բավարարվում են պայմանները.

օպերատոր- Համեմատության օպերատոր առարկայի հետ

օպերանդ- Օգտագործվում է ըստ անհրաժեշտության և ներկայացնում է օպերատորի օգտագործմամբ առարկայի արժեքը:

ապա- Կոդ, որը ցուցադրվում է, եթե պայմանը գնահատվում է ճշմարիտ

ուրիշ- Կոդ, որը ցուցադրվում է, եթե պայմանը գնահատվում է որպես false

վրիպազերծել- Եթե ճիշտ է, կցուցադրվեն բոլոր անցած պարամետրերը

մեռնել- Եթե վրիպազերծումը (debag) հաջող էր և համապատասխանում է true արժեքին, ապա պարամետրերը դուրս բերելուց հետո օգտագործեք die() ֆունկցիան:

Ընտրանքներ

Անուն Նկարագրություն Կանխադրված
առարկա Պարամետրը, որով կատարվում են պայմանները.
օպերատոր Համեմատության օպերատոր առարկայի հետ =
օպերանդ Օգտագործվում է ըստ անհրաժեշտության և ներկայացնում է իմաստըառարկա (համեմատության առարկա) օգտագործելովօպերատոր (համեմատության օպերատոր):
ապա ճիշտ
ուրիշ Կոդ, որը ցուցադրվում է, եթե պայմանը արժեք է ընդունումկեղծ
վրիպազերծել Եթե ​​ճիշտ է , կցուցադրի բոլոր անցած պարամետրերը 0
մեռնել Եթե ​​վրիպազերծել (debag ) հաջողությամբ անցել է և համապատասխանում է արժեքինճիշտ , ապա պարամետրերը դուրս բերելուց հետո կիրառեք ֆունկցիանմեռնել () . 0

Օպերատորներ:

Անուն: Նկարագրություն:
!=,neq,not,not,isnt, անհավասար,notequal Ստուգում է, թե առարկան է հավասար չէ նշված արժեքինօպերանդ
==,=,հավասար է,հավասար է,հավասար է,հավասար Ստուգում է, թե առարկան է հավասար է նշված արժեքինօպերանդ
< ,lt,less,lessthan Ստուգեք, թե առարկան է նշված արժեքից պակասօպերանդ
> ,gt,մեծ,մեծ քան Ստուգում է, թե առարկան է սահմանված արժեքից ավելի մեծօպերանդ
< =,lte,lessthanequals,lessthanorequalto Ստուգում է, թե առարկան է պակաս կամ հավասար նշված արժեքիցօպերանդ
> =,gte,մեծհավասար,մեծհավասար Ստուգում է, թե առարկան է նշված արժեքից մեծ կամ հավասարօպերանդ
դատարկ, դատարկ Ստուգում է, թե առարկան է դատարկ արժեք ունի
!դատարկ,նշված,անթերի Ստուգում է, թե առարկան է ինչ-որ իմաստ ունի
զրոյական է, զրոյական Ստուգում է, թե արդյոք առարկան զրոյական է
inarray,in_array,ia Ստուգում է, թե արդյոք առարկան գտնվել է օպերանդների ցանկում (ստորակետերով առանձնացված տող)

Այո, կայքէջում Ajax ֆիլտրի ներդրման ևս մեկ միջոց =)

Սկսենք էջի ռեսուրսների կանոնավոր ցանկի պարզ ցուցադրումից: Համոզվեք, որ AJAX էջագրումը ճիշտ է աշխատում, քանի որ մենք չենք գրելու AJAX-ի հետ աշխատելու մեր սեփական մեխանիզմները, այլ կօգտագործենք AJAX մեթոդները, որոնք կան pdoPage-ում։

("!pdoPage" | հատված. [ "ajaxMode" => "default", "parents" => 0, "limit" => 3, "includeTVs" => "height,weight,speed_type,price", "tvPrefix" => "", "tpl" => "@INLINE

($pagetitle)

Քաշը՝ ($ քաշ)

Բարձրություն ($ բարձրություն)

Տեսակ՝ ($speed_type)

", ]}
(«page.nav» | տեղապահ)

Զտիչների համար ես կօգտագործեմ այս դասավորությունը: Բայց դասավորությունը այստեղ հատուկ դեր չի խաղում. գլխավորը JS կոդում ճիշտ դասեր նշելն է:


Ֆիլտրի մշակման JS կոդը մոտավորապես այսպիսի տեսք ունի.

$(document).on("change keyup", "#filters input", function())( // Ստուգեք, որ pdoPage-ը միացված է, եթե (typeof(pdoPage) == "undefined") վերադարձնի; // Հավաքեք արժեքները ​​բոլոր զտիչներ մեկ զանգվածի var դաշտերում = (); $.each($("#filters").serializeArray(), function())( // Եթե պարամետրը զանգված չէ (ստուգման տուփ), ապա ամեն ինչ պարզ, եթե (this.name.indexOf( "")<= 0) { fields = this.value; } else { // Для чекбоксов посложнее var name = this.name.replace("",""); if (typeof(fields) == "undefined") { fields = ; } fields.push(this.value); } }); // И отправляем этот массив на сервер. $.post(document.location.href, { action: "filter", fields: fields, // Параметр hash - обязательный (он содержит настройки pdoPage) hash: pdoPage.configs.page.hash }, function(data) { // Просим pdoPage загрузить новый список ресурсов var tmp = document.location.href.split("?"); pdoPage.keys.page = 0; pdoPage.loadPage(tmp, pdoPage.configs.page); }); });
Արդեն հիմա, ֆիլտրի արժեքները փոխելիս, ռեսուրսների ցանկը կթարմացվի։ Այժմ մնում է միայն «բացատրել», թե ինչպես մշակել ֆիլտրերը: Դա անելու համար ստեղծեք միջոցառման հավելված OnHandleRequest:

համատեքստ-> բանալի == «mgr» || դատարկ ($_SERVER["HTTP_X_REQUESTED_WITH"]) || $_SERVER["HTTP_X_REQUESTED_WITH"] != "XMLHttpRequest") վերադարձ; անջատիչ ($_POST["գործողություն"]) (գործի «զտիչ»: $output = array("success" => false, "message" => ""); // Ստուգեք, որ հեշը ստացվել է և pdoPage պարամետրերը գոյություն ունի, եթե ( isset($_POST["hash"]) && !empty($_POST["hash"]) && isset($_SESSION["pdoPage"][$_POST["hash"]]) && !empty($ _SESSION[" pdoPage"][$_POST["hash"]])) ($hash = (string) $_POST["hash"]; // Նշեք միայն հեռուստացույցները, որոնք հասանելի են $tvs = array ("բարձրություն"," զտման համար: weight" ,"speed_type"); // Լրացրեք ընտրության պայմանը $where = array(); foreach ($tvs որպես $tv) ( switch ($tv) ( case "price": // Վերամշակման վանդակների օրինակ, եթե ( isset($_POST[ "դաշտեր"]["գին"]) && !empty($_POST["fields"]["price"])) ($where_price = ; foreach ($_POST["fields"]["price "] որպես $range ) ( $value = explode("-", $range); if (count($value) != 2) (շարունակել; ) $min = (int) $value; $max = (int) $value; $where_range = "CAST(`TVprice`.`value` AS TECIMAL(13,3)) >= ". $min; if ($max) ($where_range .= " AND CAST(`TVprice`:" արժեքը՝ ՈՐՊԵՍ ՏՈՆԱԿԱՆ (13.3))<= " . $max; } $where_price = "(" . $where_range . ")"; } $where = "(" . implode(" OR ", $where_price) . ")"; } break; default: if (isset($_POST["fields"][$tv]) && $_POST["fields"][$tv] !== "") { $where[$tv] = $_POST["fields"][$tv]; } break; } } // Добавляем это условие в параметры pdoPage "на лету" $_SESSION["pdoPage"][$hash]["where"] = $where; $output["message"] = $where; $output["success"] = true; } else { $output["message"] = "Error"; } echo $modx->toJSON ($ելք); մահանալ (); ընդմիջում; լռելյայն՝ ընդմիջում; )
Այժմ մեր զտիչները աշխատում են։ Միակ բանն այն է, որ pdoPage-ը «չգիտի», թե ինչ ցույց տալ, երբ արդյունքներ չեն գտնվել։ Այս դեպքը հաշվի առնելու համար ստեղծենք ֆայլ pdopage.custom.jsև նշեք այն պարամետրում frontend_js:

("!pdoPage" | հատված. [ "ajaxMode" => "default", "frontend_js" => "/assets/components/pdotools/js/pdopage.custom.js", "parents" => 0, "limit" => 3, // ...)
Ստանդարտ կոդում մենք միայն կավելացնենք պայմանը ուրիշայն դեպքում, երբ սերվերի պատասխանը դատարկ է.

// ... pdoPage.loadPage = ֆունկցիա (href, կազմաձևում, ռեժիմ) ( // ... $.post(config["connectorUrl"], պարամներ, ֆունկցիա (պատասխան) ​​( if (պատասխան && պատասխան["ընդհանուր" ]) ( // ... ) else ( // Ավելացնել պայման else wrapper.find(տողեր).html("Ոչինչ չի գտնվել"); wrapper.find(էջադրում).html(""); wrapper.removeClass(" բեռնում"); wrapper.css((անթափանցիկություն: 1)); if (config["mode"] == "default") ($("html, body").animate((scrollTop: wrapper.position(): վերև - 50 || 0), 0); ))), «json»); ); //...
Սա լրացնում է պարզ AJAX ֆիլտրը:

Առողջություն բոլորին։ Այս հոդվածում ես ձեզ կպատմեմ, թե ինչպես կարելի է փաստաթղթի ֆիլտր պատրաստել՝ հիմնված հեռուստատեսային պարամետրերի վրա Modx Revolution-ի վրա աշխատող կայքում: Մենք կօգտագործենք հատվածը tagManager2-ից Անճիր. Այս հատվածը կարող է աշխատել միաժամանակ մի քանի հեռուստացույցների, ինչպես նաև թվային տվյալների (գնի տեսքով) և բազմակի ցանկի հետ։ Մենք կվերլուծենք այս օրինակներից յուրաքանչյուրը հետագա:

1. Նախ պետք է տեղադրել tagManager2

Դա անելու համար մենք գնում ենք Հավելվածներ/Տեղադրող/

սեղմել կոճակը «Ներբեռնել հավելումը»և մուտքագրեք որոնման տողում tagManager2

Դուք նաև դեռ պետք է տեղադրեք հատվածը getPage և getProducts. Այսպիսով բաժին «Փաթեթների կառավարում»պետք է այսպիսի տեսք ունենա (տրանսլիտ հատվածը, ի դեպ, պատասխանատու է լատինատառ փոխանունների տառադարձման համար)

Ներբեռնեք, տեղադրեք փաթեթներ և անցեք «Համակարգի կարգավորումներ»

2. Կարգավորեք tagManager2 հատվածը

Համակարգի կարգավորումներում ընտրեք tag_manager2 բաժինը

Մենք կտեսնենք ֆիլտրի կարգավորումների ընտրանքները

Այնտեղ ամեն ինչ բավականին պարզ և պարզ է, բայց դեռ.

  • IN «Բարձր մակարդակի գրացուցակի ռեսուրսի ID»նշեք կատալոգի կաղապարի կամ կատեգորիայի ID-ն, որտեղ ապրանքները կամ էջերը կզտվեն
  • IN «Լրացուցիչ բազմակի ցուցակի սահմանազատող»դրեք # նշանը։ Ստորև կիմանաք, թե ինչու է դա անհրաժեշտ
  • IN «Հեռուստացույց կամ մի քանի ցուցակի դաշտերի անուններ»գրանցել հեռուստացույց մի քանի ցուցակով: Ես ձեզ ցույց կտամ, թե ինչպես ստեղծել դրանք ստորև:
  • «Հեռուստացույցի կամ թվային արժեքներով դաշտերի անվանումներ»- այստեղ դուք պետք է նշեք հեռուստացույցի պարամետրերը, որոնք կպարունակեն թվեր: Սա սովորաբար գնային պարամետր է: Այս զտիչը կցուցադրվի որպես «ից և դեպի» սահիչ
  • IN «Ապրանքի ձևանմուշների ID-ներ»մենք գրում ենք այն էջերի ID-ն, որոնք պետք է զտվեն, և որոնց կցված են վերը նշված հեռուստացույցի պարամետրերը
  • IN «Զտման համար օգտագործվող պարամետրերի հավաքածուի անվանումը»գրանցել կատալոգ_ֆիլտրերը: Մենք կօգտագործենք այս ձևանմուշը պարամետրերի ձևանմուշներում getPageԵվ getProducts
  • Գրանցվեք «Հատված՝ կապված մի շարք պարամետրերի հետ»հատվածի անվանումը, որը կցուցադրի և կտեղադրի էջերը կամ ապրանքները: Սովորաբար սա getPage.

3. GetPage-ում ստեղծեք catalog_filters պարամետրերի մի շարք

Եկեք գնանք getPage հատվածին

Գնացեք ներդիր «Ընտրանքներ»և սեղմեք կոճակը «Ավելացնել պարամետրերի հավաքածու». Դուք, իհարկե, կարող եք խմբագրել գոյություն ունեցողը, բայց հետո հնարավորություն կա վերագրանցել այն պարամետրերը, որոնք մենք այժմ կստեղծենք getPage-ը թարմացնելիս: Եթե ​​դուք չեք պատրաստվում թարմացնել, կարող եք պարզապես խմբագրել:

Խմբագրել առկա պարամետրերը և նշանակել արժեքներ.

Ստեղծեք նոր պարամետրեր և նշանակեք արժեքներ

Խմբագրված պարամետրերը կցուցադրվեն կանաչ գույնով, ստեղծված պարամետրերը՝ մանուշակագույն

4. Ստեղծեք կամ խմբագրեք հեռուստացույցի պարամետրերը ֆիլտրի համար

Ես, օրինակ, ստեղծել եմ հեռուստացույցի 3 պարամետր

Ես կցանկանայի հատուկ ուշադրություն հրավիրել այն փաստի վրա, որ դուք պետք է նշեք հեռուստացույցի պարամետրի անունը (վերնագիրը), հակառակ դեպքում այն ​​պարզապես կարող է չցուցադրվել ֆիլտրի կառավարման մոդուլում:

5. Ստեղծեք մի կտոր filtr_tpl

Այս հատվածը պատասխանատու է getProducts-ում յուրաքանչյուր առանձին արդյունքի դուրսբերման համար

6. Փաստաթղթերի ծառի մեջ ստեղծեք կառուցվածք

Ինձ համար այն կարծես հետևյալն է.

Մեր գլխավոր էջն ունի ID 1, իսկ ապրանքներն ունեն կաղապարի ID 1 (մենք սա ունենք tag_manager2 կարգավորումներում, եթե այլ արժեքներ ունեք, մի մոռացեք փոխել այն կարգավորումներում)

7. Խմբագրել filters.js

Գնանք հասցեով /assets/components/tag_manager2/js/web/filters.jsև փոխարենը

Բազմապիտակներ՝ ["պիտակներ"],//Լրացուցիչ անուններ. բազմաթիվ արժեքներով դաշտեր

տեղադրեք կոդը մեր փոխարինված արժեքներով

Բազմապիտակներ՝ ["filtr1", "filtr2"],//Լրացուցիչ անուններ: բազմաթիվ արժեքներով դաշտեր

Այստեղ ամեն ինչ չափազանց պարզ է և պարզ: Մենք տեղադրեցինք մեր հեռուստատեսային դաշտերը բազմաթիվ արժեքներով: Ընդհանուր առմամբ, սա բոլոր պարամետրերի կոնֆիգուրացիա է (բայց ավելի լավ է նրանց չդիպչել առանց մեծ տղաների թույլտվության, նկատի ունեմ մոդուլի ստեղծողների խորհուրդը)

8. Ցուցադրել ֆիլտրի և զտման արդյունքները

Զտիչը ինքնին

[]
[[+զտիչներ]]

Արդյունքների ցուցադրում էջադրությամբ

[[!tmCatalog]]
    [[!+page.nav]]

Տեսակավորման արդյունքներ

9. Ակտիվացրեք ֆիլտրը

Այժմ մենք պարզապես պետք է ակտիվացնենք մեր զտիչը: Դա անելու համար մենք գնում ենք Հավելվածներ/Ֆիլտրերի կառավարում.

Այստեղ դուք պետք է ստուգեք յուրաքանչյուր ֆիլտրի կողքին գտնվող վանդակները և սեղմեք կոճակը«Պահպանել».

Եթե ​​ամեն ինչ ճիշտ եք արել, ֆիլտրը պետք է աշխատի: Այսքանը: Եթե ​​ունեք հարցեր, հարցրեք մեկնաբանություններում, ես կփորձեմ պատասխանել։ Ընդհանուր առմամբ, ահա փաստաթղթերը tagManager2-ի համար: Հաջողություն զարգացման մեջ: IN «Դեմո»իմ կայքերից մեկը, որն իրականացնում է զտիչ tagManager2-ի միջոցով