Add category id to product item class

Question

Is it possible to add the category ids of a product into the html class of the product item itself? For example: let's say I do have 3 categories, catID: 20, ID: 21 and ID: 22. For each product I would like to see the specified cat IDs into the classes of the product in the product grid (or product list).

So my html would look something like this:

    <ul class="products-grid first odd">
        <li class="col-sm-6">
            <div class="item-inner catID-20 catID-22">
            ...
           </div>
        </li>
        <li class="col-sm-6">
            <div class="item-inner catID-21">
            ...
           </div>
        </li>
  </ul>

My main goal is to edit the css by product category. I do know how to edit a template for a category page, but that is not what I want.

Answer 1

Get all category ids of a product and echo it on the class attribute like below on the list.phtml file.

<?php $cats= $_product->getCategoryIds() ?>

<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?> <?php forEach($cats as $cat): echo " catid-".$cat; endforeach; ?>">

update:

Check array length before echo.

<?php $cats= $_product->getCategoryIds() ?>

<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?> <?php if(count($cats)>0): forEach($cats as $cat): echo "catid-".$cat." "; endforeach; endif; ?>">