Frontend Filtering / Run Snippet Call onClick?

13 Posts

Michael Leipold-Haas Reply #1, 12 years, 6 months ago

Hi,

hope somebody can give me a tip or an idea how can i get this thing to work

...

I use addon "Minishop2" from bezumkin for a small webshop.
For product listing i use addon "pdoPage" from "pdoTools" (it's like getPage, also from bezumkin).

What I have: A working snippet call with some parameters to list the products + pagination.

<ul id="productFilter">
[[!pdoPage? &element=`msProducts` &sortby=`pagetitle` &limit=`100` &where=`{"Data.tags:LIKE":"%Oranges%"}`]]
<div class="pagination">
<ul>[[!+page.nav]]</ul>
</div>

What I want: A set of filter buttons at the top of the products listings for onClick filtering the content like the following example.
I know it's not working, but it shows the idea of the functionality.

<ul id="productFilter">
<li><a href="[[!pdoPage? &element=`msProducts` &sortby=`pagetitle` &limit=`100`]]">Show all Products</a></li>
<li><a href="[[!pdoPage? &element=`msProducts` &sortby=`pagetitle` &limit=`100` &where=`{"Data.tags:LIKE":"%Oranges%"}`]]">Show only Oranges</a></li>
<li><a href="[[!pdoPage? &element=`msProducts` &sortby=`pagetitle` &limit=`100` &where=`{"Data.tags:LIKE":"%Apples%"}`]]">Show only Apple</a></li>
<li><a href="[[!pdoPage? &element=`msProducts` &sortby=`pagetitle` &limit=`100` &where=`{"Data.tags:LIKE":"%Pinapples%"}`]]">Show only Pinapples</a></li>
</ul>

All product data comes from Minishop2 database tables within the MODX Database.

How can I resolve my problem?
Is there an easy way without writing big super script ;-) or a fitting MODX addon?

Thanks for help and greetings from Germany

Michael

☆ A M B ☆
894 Posts

benmarte Reply #2, 12 years, 6 months ago

If you use something like AngularJS or any MVC/MVVM JS framework you can do this pretty easily.

Here's a JSFiddle I did a while ago that shows you how easy it is to do filtering with AngularJS.

Hopefully that points you in the right direction, good luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

5,888 Posts

Bruno17 Reply #3, 12 years, 6 months ago

what you need is just something like that:

<?php
//[[!pdoPageFilter? &element=`msProducts` &sortby=`pagetitle` &limit=`100`]]

$tag = $modx->getOption('tag',$_GET,'');

if (!empty($tag)){
    $where = array('Data.tags:LIKE'=>'%'.$tag.'%');
    $scriptProperties['where'] = $modx->toJson($where);
}
return $modx->runSnippet('pdoPage',$scriptProperties);

<ul id="productFilter">
<li><a href="[[~[[*id]]]]">Show all Products</a></li>
<li><a href="[[~[[*id]]? &tag=`Oranges`]]">Show only Oranges</a></li>
<li><a href="[[~[[*id]]? &tag=`Apples`]]">Show only Apple</a></li>
<li><a href="[[~[[*id]]? &tag=`Pinapples`]]">Show only Pinapples</a></li>
</ul>

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

13 Posts

Michael Leipold-Haas Reply #4, 12 years, 6 months ago

Hi Bruno,

many thanks for writing that code example for me.

I'm not the snippet programming superprofessional ;-) ... so, do you mean I should use the below shown new snippet call to list the products instead of the original pdoPage snippet call:

[[!pdoPageFilter? &element=`msProducts` &sortby=`pagetitle` &limit=`100`]]

If I understand it correctly ...

you set the $tag variable
then looking for the tag array in the database
then ... What does this line? > $scriptProperties['where'] = $modx->toJson($where);
then you run the original pdoPage Snippet.

I'm right? It's not working this way, I got a blank screen.
How can I see what's going on/wrong with the script > Debugging?

If you can help me with this, you'll receive your beer – i promise

Greetings again

Michael [ed. note: mleipoldhaas last edited this post 12 years, 6 months ago.]

5,888 Posts

Bruno17 Reply #5, 12 years, 6 months ago

so, do you mean I should use the below shown new snippet call to list the products instead of the original pdoPage snippet call:
[[!pdoPageFilter? &element=`msProducts` &sortby=`pagetitle` &limit=`100`]]

yes, this should replace your original pdoPage - call.

<?php
//[[!pdoPageFilter? &element=`msProducts` &sortby=`pagetitle` &limit=`100`]]
 
$tag = $modx->getOption('tag',$_GET,'');//get the tag from REQUEST
 
if (!empty($tag)){
    $where = array('Data.tags:LIKE'=>'%'.$tag.'%'); //setup the where as an array.
    $scriptProperties['where'] = $modx->toJson($where); //this should convert the where-array into a json like: {"Data.tags:LIKE":"%Oranges%"}
}

print_r($scriptProperties);//debug the generated scriptProperties

return $modx->runSnippet('pdoPage',$scriptProperties);//run pdoPage with all Properties

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!