Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Sort Vertical rather than Horizontal
 
melvynanderson
Jr. Member
 
Total Posts:  20
Joined:  2012-12-24
 

I’m using the following code to produce a list of text links to our categories at the bottom of our footer.  The problem is that it sorts alphabetically horizontally and wraps around rather than sorting each column vertically downward.  I saw another post that was asking about sorting products this way and the response was to use floating divs for each column and a float:clear on the final one.  I’m not really sure how to integrate that into my code as shown.  Could anyone give me a pointer on how to accomplish this?

<?php
$cats 
Mage::getModel('catalog/category')->load(2)->getChildren();
$catIds explode(',',$cats);

$categories = array();
foreach(
$catIds as $catId{
       $category 
Mage::getModel('catalog/category')->load($catId); 
       
$categories[$category->getName()$category->getUrl();
}

asort
($categoriesSORT_STRING);
?>

<ul style="list-style-type: none; width:900px; overflow:hidden">
<?php foreach($categories as $name => $url): ?>
    
<li style="float:left; display:inline; width:20%">
    <
a href="<?php echo $url; ?>" style="color:white;"><?php echo $name?></a>
    </
li>
<?php endforeach; ?>
</ul>
 
Magento Community Magento Community
Magento Community
Magento Community
 
Lyonscg
Sr. Member
 
Avatar
Total Posts:  173
Joined:  2009-11-13
Chicago IL
 

Hey melvynanderson,

I was the one that suggested using div tables to do this since pure html/css using only unordered lists can’t do this. I used inline css below which should be replaced with CSS classes. I also set a column count of 3. You can change this in the code to have as many columns as you need and then style them accordingly.

Also, I would say do this in a module and then just echo the returned values if you know how. It will keep the code much cleaner and really is best practice. With that being said, here is a snippet of code that should work where you got your code example from.

This hasn’t been tested so if you run into any errors let me know. Otherwise, good luck

*Update*
I forgot to add the closing div that will clear all floating divs (this will keep the container from collapsing in on itself)

<?php
    $cats 
Mage::getModel('catalog/category')->load(2)->getChildren();
    
$catIds explode(',',$cats);
    
$categories = array();
    
    foreach(
$catIds as $catId
    
{
        $category 
Mage::getModel('catalog/category')->load($catId); 
        
$categories[$category->getName()$category->getUrl();
    
}

    asort
($categoriesSORT_STRING);
    
    
//How many columns should we break the list into?
    
$columns 3;
    
    
//Count the returned array to figure out how many should go in each column
    //ceil will round the number to the next highest integer if uneven (ex: 9.5 => 10, 2.5 => 3)
    
$count ceil(count($categories));
    
    
//Divide the counted items by columns, this is how many items will be in each column
    
$each $count $columns;    

    
//This will help us remember where we are in the list. Don't change this
    
$i 1;
?>

<?php 
foreach($categories as $name => $url): ?>

    <?php 
if($i == 1): //Is this the first time through for this column? ?> 

        
<div style="float:left;">
            <
ul style="list-style-type: none; width:300px; overflow:hidden">
                <
li style="float:left; clear:left;">
                    <
a href="<?php echo $url; ?>" style="color:white;"><?php echo $name?></a>
                </
li>
        
<?php $i++; ?>
    
    <?php 
elseif($i >= $each): //Should we end this column and start a new one? ?>

                
<li style="float:left; clear:left;">
                    <
a href="<?php echo $url; ?>" style="color:white;"><?php echo $name?></a>
                </
li>                
            </
ul>
        </
div>
        
<?php $i 1?>
        
    <?php 
else: //Not the first time through and not the end. Just a middle item ?>
    
                
<li style="float:left; clear:left;">
                    <
a href="<?php echo $url; ?>" style="color:white;"><?php echo $name?></a>
                </
li>    
        
<?php $i++; ?>
    
    <?php 
endif; ?>

<?php 
endforeach; ?>

<div style="clear:both"></div>
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top