Characters List with Anchor Link Looping | 2008-06-14

Technology Blog » Web Development

Being a e-commerce cart programmer, it is very often that we need to generate a list with anchor link for either stores or products. So the user will get a characters navigation bar on the top start from A to Z. Clicking on a character, it will jump to that position in a web page where a list starts with that specific character.

But if we do the coding on by one from A to Z for either navigation bar or the list, it will takes too much time and it might not be efficiency for the page loading time. 

Here I would like to guide you how to do all of these in Looping to save time...... 

 

I n this exmple, I use the famous Shopping Cart System "Virtuemart" here.

Characters Anchor Navigation Bar 

First of all, we create the navigation bar from A to Z first.

<div id="store_anchor_list">
    <span>
        Goto:
    </span>
    <span>
    <?php
    //The following codes is written by Andy Ng <http://www.PCinvent.com>,
    //Please keep the above credit line to the Author
    foreach(range('a','z') as $letter)
    {
       echo "<a class='anchor_link' href='#".$letter."'>".$letter."</a> | ";
    }
    ?>
    </span>
</div>

Please note that inside the foreach looping, we already have the link with # plus the letter done in this part.

Stores List

In this store list, the counter $i is a parameter that we can set to have a max stores shows in a column. Hence, I used if($i==0) to echo the opening div first. And if there is no result for foreach, the closing div will occur.

$mf_name_firstchar here will output the first character like what we did in the first part. 

<div id="stores_list">
        <?php
        //The following codes is written by Andy Ng <[email protected]>,
        //Please keep this credit line
        $i=0;
        ?>
        <?php foreach( $res as $manufacturer)
        {
            if ($i==0)
            {
                ?>
                <div class="store_list_column">
                <?php
            }
            ?>
                <div>
                    <a href="<?php echo $sess->url( URL."index.php?option=com_virtuemart&page=shop.browse&manufacturer_id=". $manufacturer->manufacturer_id ) ?>">
                     <div class="store_letter">
                         <?php
                        $mf_name_firstchar = $manufacturer->mf_name{0};
                        if($mf_name_firstchar != $mf_name_firstchar_current)
                        {
                        echo "<a class='anchor_name' name='".$mf_name_firstchar."'>".$mf_name_firstchar."</a>";
                        }
                        $mf_name_firstchar_current = $mf_name_firstchar;
                        ?>
                     </div>
                     
                    <?php echo $manufacturer->mf_name; ?>
                   
                     <?php if( $show_image == 1 )
                     {
                         ?>
                         <br />
                         <img src="images/stores/<?php echo $manufacturer->manufacturer_id; ?>.jpg" border="0">
                         <?php
                     }
                     ?>
                    </a>
                </div>
            <?php
            if ($i==$column_qty)
            {
            ?>
            </div>
            <?php
            $i=0;
            }
            else
            {
            $i++;//andy:counter up
            }
        }
        ?>
    </div><?php /*andy:end of column list*/ ?>
</div><?php /*andy:end of store list*/ ?>