Displaying a sorted and styled list by a custom date field [Solved]

29 Posts

kyle Reply #1, 17 years, 2 months ago

Hi,

I´m about to do some changes to the webpage www.christerwulff.com. He is a musician and wants a new Live meny item on his site. Live will contain a listing of previous and future live concerts, and if you click on a concert listing it will take you to more details on the concert. I would think this could be accomplished by having one document for each live concert, and use Ditto to make a list of them under the Live menu heading.

Now for the tricky parts:

1. The Live page needs to be sorted by date of concert.

2. Concerts that have taken place before today’s date should be displayed with different styling than upcoming concerts. Perhaps will old shows be displayed with grayed out text, and future shows be shown in white text.

I’m thinking perhaps of using a TV to hold a custom concert date field, and try to get Ditto to sort by that. But I have no idea how to apply different styling to Dittos generated list based on whether the concert date has been or not.

Any advice and help would be deeply appreciated!

-Kyle

928 Posts

kp52 Reply #2, 17 years, 2 months ago

I think you’re working on the right lines

Custom dates in TVs work fine in Ditto, as long as you remember to use the Unixtime widget so that their output is in Unix timestamp format.

Let’s say you create a TV called concertDate, with type of Date and widget Unixtime, and attach it to the relevant templates.

Your Ditto call can then specify it as the sort parameter:
&orderBy=`concertDate DESC` (for latest dates at the top).

You have two choices for using this as the date in the tpl chunk:
(1) set the TV as the date parameter and specify format in the Ditto call:
&dateSource=`concertDate` &dateFormat=`%d %B %Y%`
and use the [+date+] placeholder in the tpl chunk;
or
(2) use the PHx (placeholders extended) features built into Ditto to format the placeholder in the tpl chunk (no date parameters in the Ditto call):
[+concertDate:date=`%d %B %Y`+]

I prefer the second method, particularly since you can also use PHx for conditional formatting of the result via a custom modifier (see the Wiki for details of what PHx can do). (The placeholder’s value is fed to the modifier snippet as a parameter called $output).

First, create a snippet called phx:oldOrNew

<?php
// phx:oldOrNew
// return CSS class name for old date if older than today
// otherwise return class for live date

$oldDate = 'oldDate';
$liveDate = 'liveDate';

// need "today" to be zero hours on today's date, not time() value
$today = strtotime('today');

if ($output < $today) {
   $result = $oldDate;
} else {
   $result = $liveDate;
}

return $result;
?>

Then, in your tpl chunk, you can feed the value of the [+concertDate+] placeholder in and obtain the relevant CSS class name as the resulting string:
<span class="[+concertDate:oldOrNew+]">[+concertDate:date=`%d-%m%y`+]</span>

Powerful magic, eh?! laugh

KP

29 Posts

kyle Reply #3, 17 years, 2 months ago

Thank you very much for taking the time to explain it so well!

Much appreciated!

-Kyle

29 Posts

kyle Reply #4, 17 years, 2 months ago

This solution works well, but looking at the output I am wondering if there is anyway to reverse the order of the upcoming concerts? So that the next concert in time displays on top?

This is what I currently have:

20.sept gig
18.sept gig
1.sept gig
18.august gig
10.aug gig

What I would really like to have is:

1.sept gig
18.sept gig
20.sept gig
18.aug gig
10.aug gig

And it also needs to paginate when the list fills the page.

Is this possible in any way?

Kyle

928 Posts

kp52 Reply #5, 17 years, 2 months ago

That’s a bit more challenging! I think you’re inevitably going to end up with two Ditto calls, each filtering by date and applying the sort order DESC or ASC as required. That raises questions about how you split the page. The normal routine would be to set &paginate=`1` and &display=`n` to split after display of n items, but this could only apply to one of your lists (presumably the "archive" set). Would that fit the bill? Could you live with a varying number of items on your first page, "live" gigs + n?

In theory, of course,

when the list fills the page

is very easy to achieve, because a web page never fills! rolleyes

KP
Ditto information and examples on pogwatch

5,888 Posts

Bruno17 Reply #6, 17 years, 2 months ago

you can first run these two ditto-calls with asc and desc sorting in a snippet with $modx->runsnippet and store the result in a commaseperated list, then put this list into a new ditto-call with pagination and so on to the parameter &documents. for hold the sortings of &documents you need my docsort-extender.
have a look to my last posts, there was anywhere these extender.

here is the link:
http://modxcms.com/forums/index.php/topic,38711.msg233570.html#msg233570

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

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

29 Posts

kyle Reply #7, 17 years, 2 months ago

Thank you both for your great help!

kp52: I did try with two Ditto calls, but as you said the pagination breaks and I would prefer to be able to control the total number of documents shown.

Bruno: Your method sounds very promising, but I am not very familiar with PHP programming, so if you could elaborate a little more how I can go about this, it would be most appreciated!

This is what I have tried so far:

I tried to set up a snippet with a call to Ditto using $modx->runsnippet, and then calling that snippet instead of a standard Ditto call, but the output is very different.

Here is the Ditto call I have for future liveConcerts:

[!Ditto?  &startID=`186` &summarize=`all` &total=`20` &tpl=`FutureLiveConcerts` &sortBy=`concertDate` &sortDir=`ASC` &dateFormat=`%d. %B - %Y` &paginate=`1` &display=`200` &extenders=`summary,dateFilter` &paginateAlwaysShowLinks=`1`!]

This is the snippet I tried to have duplicate the Ditto call with (I excluded some not essential parameters), I called it DittoOutput. It is only a test for using $modx->runSnippet.

<?php
$dittoParams = array(
`startID`=>`186`,
`summarize`=>`all`,
`extenders`=>`summary,dateFilter`,
`tpl`=>`FutureLiveConcerts`,
`sortBy`=>`concertDate`,
`sortDir`=>`ASC`,
`paginate`=>`1`
                    );

$dittoOutput = $modx->runSnippet('Ditto', $dittoParams);

return $dittoOutput;

?>

Called by a [!DittoOutput!] snippet call, instead of the regular Ditto call.

But the output is not sorted by the date TV, as the Ditto call does. And it seems to completely ignore my template chunk, giving me the same output as the regular Ditto call without a template (although unsorted).
What am I doing wrong?

Also Bruno said "store the result in a commaseperated list, then put this list into a new ditto-call with pagination". How would I go about doing this?

My PHP skills are sorely lacking so any help would be very welcome!

-Kyle

928 Posts

kp52 Reply #8, 17 years, 2 months ago

You need to use normal quotes instead of the backticks - PHP strings can be enclosed in single or double quotes, e.g. ’tpl’=>’FutureLiveConcerts’.
wink

KP

29 Posts

kyle Reply #9, 17 years, 2 months ago

Thanks kp52! Goes to show how completely clueless I am wink

That took care of the template and sorting by TV problem. Now I just have to figure out how to do what Bruno suggested. Could you help me out with a code example Bruno?

-Kyle

5,888 Posts

Bruno17 Reply #10, 17 years, 2 months ago

this is the idea for the commaseperated list:

<?php

$today = strtotime('today');//stolen from KP

$dittoParams = array();
$dittoParams['parents'] = '186';
$dittoParams['display'] = 'all';
$dittoParams['sortBy'] = 'concertDate';
$dittoParams['sortDir'] = 'ASC';
$dittoParams['tpl'] = '@CODE[+id+],';
$dittoParams['filter'] = 'concertDate,'.$today.',3';//dont know if this will work??

$output = $modx->runSnippet('Ditto', $dittoParams);

$dittoParams['sortDir'] = 'DESC';
$dittoParams['filter'] = 'concertDate,'.$today.',4';//dont know if this will work??

$output.= $modx->runSnippet('Ditto', $dittoParams);

return $output;

?>

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

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!