Using select attributes to change the output of PageList Items in 5.7.3
Permalink 1 user found helpful
Hello Community :)
I am currently working on a site for a sports club that wishes to display all upcoming events on its landing page.
The special request is: They want to display the 'level' of the event/course just in this list.
So we talk about three levels: Starter, Medium, Master.
What I plan on doing is checking each item in the pagelist for the values of that select attribute and if one of these attributes is found - output the title of that page with different CSS classes.
What I tried so far:
Create a custom template for pagelist and in view.php, put this in the top section
Then, below, where the pagelist loops through the items and outputs everything:
and to view.css I'll just put:
Or whatever. In the end it will be something more beautiful, but first I need to even apply the CSS call...
Of course the attributes are created with the handle 'levels'...
I suppose this will be much useful for many people, so if anyone can point me to the right direction (I can't be very wrong), I'd like to make a HowTo from it.
Thanks!
I am currently working on a site for a sports club that wishes to display all upcoming events on its landing page.
The special request is: They want to display the 'level' of the event/course just in this list.
So we talk about three levels: Starter, Medium, Master.
What I plan on doing is checking each item in the pagelist for the values of that select attribute and if one of these attributes is found - output the title of that page with different CSS classes.
What I tried so far:
Create a custom template for pagelist and in view.php, put this in the top section
$starter = $c->getCollectionAttributeValue('starter'); $medium = $c->getCollectionAttributeValue('medium'); $master = $c->getCollectionAttributeValue('master');
Then, below, where the pagelist loops through the items and outputs everything:
<?php if ($starter): ?> <div class="ccm-block-page-list-starter"><?php echo $title ?></div> <?php endif; ?> <?php if ($medium): ?> <div class="ccm-block-page-list-medium"><?php echo $title ?></div> <?php endif; ?> <?php if ($master): ?> <div class="ccm-block-page-list-master"><?php echo $title ?></div> <?php endif; ?>
and to view.css I'll just put:
div.ccm-block-page-list-starter {border-left:1px solid yellow;} div.ccm-block-page-list-medium {border-left:1px solid blue;} div.ccm-block-page-list-master {border-left:1px solid red;}
Or whatever. In the end it will be something more beautiful, but first I need to even apply the CSS call...
Of course the attributes are created with the handle 'levels'...
I suppose this will be much useful for many people, so if anyone can point me to the right direction (I can't be very wrong), I'd like to make a HowTo from it.
Thanks!
Head of view.php of PageList
So I just check for the attributeValue of the select attribute I created (handle: level). If there is a OptionsList available, I get the current (first) value. This only works for "single option"-select attributes, if you have multi-select, it will return only the first value.
Then I get the value from the option and if it is of a certain name, i will call the name of a css class.
Down below where the list is being rendered, I just place $cssname as a spanclass around the Title/Link of the item.
Everything else is pure CSS, I just place the span class into view.css:
and do the same for the other classes and style them as I like.
I hope this helps someone in the future :)