Magento Forum

how to add alternative class (odd and even for example) in list listing ? 
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Say, I want to have different background color for each listing in the category page

first listing
<div class="listing-item odd”>

second listing
<div class="listing-item even”>

third listing
<div class="listing-item odd”>

I see it has an example for ‘last’ listing item, but I don’t know how to modify it to add odd and even classes :(
<?php foreach ($_productCollection as $_product): ?>
<div class="listing-item <?php if( ++$_iterator == sizeof($_productCollection) ): ?>even<?php endif; ?>">

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

<div class="listing-item <?php if( ++$_iterator == sizeof($_productCollection) ): ?>last<?php endif; ?> <?php echo ($_iterator % 2 == 0) ? 'even' : 'odd'; ?>">
 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Thank you so much smile
Such simple line of code yet I can’t figure

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Hi Anders, can you also tell me how to do it with this one?

crossell.phtml

<ul class="generic-product-list">
<?php foreach ($this->getItems() as $_item): ?>
<li> <
</li>

I tried something like this, and it gives me errors

<?php foreach ($this->getItems() as $_item): ?>
<li class="list1 <?php if( ++$_iterator == sizeof($_getItems) ): ?>last<?php endif; ?> <?php echo ($_iterator % 2 == 0) ? 'even' : 'odd'; ?>">

Thanks again! smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

I think you need to declare the $_iterator variable before the foreach loop:

<?php $_iterator 0?>

Also, there is no $_getItems variable. Use $this->getItems().

Unfortunately, I can’t test it because I can’t find the page where cross sells are displayed.

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

Yeah, I know where the file is, but where do I go in the frontend to see it in action?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Hi Anders,
Thanks for the quick response. Still showing errors :(

Crosssell.phtml is lcoated in ‘catalog > product > list > crossell.phtml

 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

This is weird. It appears that in my installation (1.0.something), the catalog/product/list/crosssell.phtml template isn’t used anywhere.

However, there’s a checkout/cart/crosssell.phtml that’s used on the cart page. When I modify that file in the way shown above, it works fine.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Hi Anders, you are right. This is confusing to me and I was goofed. I edited the right crossell file but gave you the wrong ones, I didn’t even realized there were two crosssell files until now.

Still not working though :(

Image Attachments
crosssell.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
crius
Guru
 
Avatar
Total Posts:  623
Joined:  2007-10-16
Denmark
 

Replace $_getItems with $this->getItems(). There is no variable called $_getItems.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Thank you so much! It’s working now.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Anton Makarenko
Magento Team
 
Avatar
Total Posts:  184
Joined:  2008-05-13
Los Angeles, CA
 

In Magento 1.1, there are two ways to mark a set of elements as odd/even. Let’s call this process “decorating”.

1) It is possible to decorate an array on server side (in .phtml template)

<?php
$_someItems 
Mage::helper('core')->decorateArray($this->getItems());
?>
<ul>
<?php foreach ($_someItems as $_item):?>
<li class="<?php echo ($_item->getDecoratedIsOdd() ? 'odd' : 'even') ?>">...</li>
<?php endforeach;?>
</ul>
Also, the decorateArray() marks first and last elements of an array.
Array must consist of objects or arrays. In case of arrays, the $_item will contain assoc keys:
$_item['decorated_is_first'];
$_item['decorated_is_odd'];
$_item['decorated_is_even'];
// etc ...

2) The second (simple) way is to decorate a set of elements with javascript.
There are functions decorateList(element), decorateTable(element), decorateGeneric(setOfElements[, options])
For example, here are some list and table:

<ul id="some-list">
<
li>...</li>
<
li>...</li>
<
li>...</li>
<
li>....</li>
<
ul>

...

<
table id="some-table">
<
tbody>
<
tr><td>...</td><td>...</td></tr>
<
tr><td>...</td><td>...</td></tr>
<
tr><td>...</td><td>...</td></tr>
</
tbody>
</
table>

To mark <li> and <tr> elements as odd/even/first/last, add following code:

<script type="text/javascript">
decorateList($('some-list'));
decorateTable($('some-table'));
</script>
These functions are just wrappers to decorateGeneric(), that can decorate an arbitrary set of elements.
For example, to mark as odd/even <tr> tags of a table:
decorateGeneric($('some-table').getElementsBySelector('tr'), ['odd''even']);
Where $() and getElementsBySelector() are funcs from PrototypeJs framework, that is actively used by Magento.
 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Anton, thank you so much! This is a great tutorial.

And very happy to see a new Magento team helping smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
neocamel
Jr. Member
 
Total Posts:  29
Joined:  2010-07-06
 

Excellent bit of code!

How would this code be modified to “decorate” three products instead of two?

Example, instead of:

<li class="odd"></li>
<
li class="even"></li>
<
li class="odd"></li>

We do:

<li class="first"></li>
<
li class="second"></li>
<
li class="third"></li>
<
li class="first></li>

I tried:

<?php echo ($_iterator == 0) ? 'first' 'second' 'third'?>

But it didn’t work.  It broke my product listing.

This would be really useful for removing borders on the first or third product on each row of the listing.  Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Siggi_Schmitz
Enthusiast
 
Avatar
Total Posts:  811
Joined:  2011-07-03
 

That is not possible in PHP.

The “?” and “:” is the replace for “if” and “else”. So you cannot do this:

<?php echo ($_iterator == 0) ? 'first' 'second' 'third'?>

Because then you have one “if” and two “else”.

You can do it like this:

if ($_iterator == 0{
    $class 
"second";
else if ($_iterator == 0{
    $class 
"third";
else {
    $class 
"first";
}

Got it?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top