Contacts Page 'Alphabet Bar'

Question

Joomla 3.6.5

I would like to display an "Alphabet Bar" on my contacts page, the menu item type is List Contacts in a Category.

I have 150 contacts, and they are all in the same category. Currently my page displays a total of 20 contacts per page.

Ideally I want to have something like the bar below;

| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O..

The bar could work in one of two ways I suppose.

1. When a letter is clicked, the page will display the corresponding filtered results.

OR

2. I display all my contacts on a single page and when a letter is clicked, the page auto-scrolls to the corresponding letter.

I have created an override in /html/com_contact/category/default_items.php - which currently looks as follows;

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_contact
 *
 * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
JHtml::_('behavior.core');

$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn  = $this->escape($this->state->get('list.direction'));

// Create a shortcut for params.
$params = &$this->item->params;

?>

<?php if (empty($this->items)) : ?>
    <p> <?php echo JText::_('COM_CONTACT_NO_CONTACTS'); ?>   </p>
<?php else : ?>

<form action="<?php echo htmlspecialchars(JUri::getInstance()->toString()); ?>" method="post" name="adminForm" id="adminForm">
    <fieldset class="filters">

    <?php if ($this->params->get('show_pagination_limit')) : ?>
        <div class="display-limit">
            <?php echo JText::_('JGLOBAL_DISPLAY_NUM'); ?>&#160;
            <?php echo $this->pagination->getLimitBox(); ?>
        </div>
    <?php endif; ?>
    <input type="hidden" name="filter_order" value="<?php echo $listOrder; ?>" />
        <input type="hidden" name="filter_order_Dir" value="<?php echo $listDirn; ?>" />
    </fieldset>

    <table class="category clergy-contact">
        <?php if ($this->params->get('show_headings')) : ?>
        <thead><tr>
            <th class="item-title">
                <?php echo JHtml::_('grid.sort', 'COM_CONTACT_CONTACT_EMAIL_NAME_LABEL', 'a.name', $listDirn, $listOrder); ?>
            </th>
            <?php if ($this->params->get('show_position_headings')) : ?>
            <th class="item-position">
                <?php echo JHtml::_('grid.sort', 'COM_CONTACT_POSITION', 'a.con_position', $listDirn, $listOrder); ?>
            </th>
            <?php endif; ?>
            <?php if ($this->params->get('show_email_headings')) : ?>
            <th class="item-email">
                <?php echo JText::_('JGLOBAL_EMAIL'); ?>
            </th>
            <?php endif; ?>
            <?php if ($this->params->get('show_telephone_headings')) : ?>
            <th class="item-phone">
                <?php echo JText::_('COM_CONTACT_TELEPHONE'); ?>
            </th>
            <?php endif; ?>

            <?php if ($this->params->get('show_mobile_headings')) : ?>
            <th class="item-phone">
                <?php echo JText::_('COM_CONTACT_MOBILE'); ?>
            </th>
            <?php endif; ?>

            <?php if ($this->params->get('show_fax_headings')) : ?>
            <th class="item-phone">
                <?php echo JText::_('COM_CONTACT_FAX'); ?>
            </th>
            <?php endif; ?>

            <?php if ($this->params->get('show_suburb_headings')) : ?>
            <th class="item-suburb">
                <?php echo JHtml::_('grid.sort', 'COM_CONTACT_SUBURB', 'a.suburb', $listDirn, $listOrder); ?>
            </th>
            <?php endif; ?>

            <?php if ($this->params->get('show_state_headings')) : ?>
            <th class="item-state">
                <?php echo JHtml::_('grid.sort', 'COM_CONTACT_STATE', 'a.state', $listDirn, $listOrder); ?>
            </th>
            <?php endif; ?>

            <?php if ($this->params->get('show_country_headings')) : ?>
            <th class="item-state">
                <?php echo JHtml::_('grid.sort', 'COM_CONTACT_COUNTRY', 'a.country', $listDirn, $listOrder); ?>
            </th>
            <?php endif; ?>

            </tr>
        </thead>
        <?php endif; ?>

        <tbody>
            <?php foreach ($this->items as $i => $item) : ?>
                <tr class="<?php echo ($i % 2) ? "odd" : "even"; ?>" itemscope itemtype="https://schema.org/Person">

                    <td class="item-title">
                        <?php if ($this->items[$i]->published == 0) : ?>
                            <span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
                        <?php endif; ?>
                        <a href="<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>" itemprop="url">
                            <span itemprop="name"><?php echo $item->name; ?></span>
                        </a>
                    </td>

                    <?php if ($this->params->get('show_position_headings')) : ?>
                        <td class="item-position" itemprop="jobTitle">
                            <?php echo $item->con_position; ?>
                        </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('show_email_headings')) : ?>
                        <td class="item-email" itemprop="email">
                            <?php echo $item->email_to; ?>
                        </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('show_telephone_headings')) : ?>
                        <td class="item-phone" itemprop="telephone">
                            <?php echo $item->telephone; ?>
                        </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('show_mobile_headings')) : ?>
                        <td class="item-phone" itemprop="telephone">
                            <?php echo $item->mobile; ?>
                        </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('show_fax_headings')) : ?>
                        <td class="item-phone" itemprop="faxNumber">
                            <?php echo $item->fax; ?>
                        </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('show_suburb_headings')) : ?>
                        <td class="item-suburb" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                            <span itemprop="addressLocality"><?php echo $item->suburb; ?></span>
                        </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('show_state_headings')) : ?>
                        <td class="item-state" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                            <span itemprop="addressRegion"><?php echo $item->state; ?></span>
                        </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('show_country_headings')) : ?>
                        <td class="item-state" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                            <span itemprop="addressCountry"><?php echo $item->country; ?></span>
                        </td>
                    <?php endif; ?>
                </tr>
            <?php endforeach; ?>

        </tbody>
    </table>

        <?php if ($this->params->get('show_pagination', 2)) : ?>
            <div class="pagination">
                <?php if ($this->params->def('show_pagination_results', 1)) : ?>
                    <p class="counter">
                        <?php echo $this->pagination->getPagesCounter(); ?>
                    </p>
                <?php endif; ?>
                <?php echo $this->pagination->getPagesLinks(); ?>
            </div>
        <?php endif; ?>

</form>
<?php endif; ?>

Could anybody advise on how I can accomplish this?

I have read the following article, but it's related to categories and not contacts.

Answer 1

Ok, so in your override, on lines 47 and 49, you'll see <li> tags. Inside both of them, add the following data attribute:

data-category="<?php echo substr($this->escape($item->name), 0, 1); ?>"

Then, on line 111, you'll see the closing </ul> tag. Directly below this, add the following to create you alphabet list:

<?php
    $alphas = range('A', 'Z');
    foreach ($alphas  as $item)
    {
        echo '<a href="#" data-alpha="' . $item . '">' . $item . '</a> | ';
    }
?>

The directly below that, you can use JS to hide/show the category based on the letter that was clicked:

<?php
    JFactory::getDocument()->addScriptDeclaration("
        jQuery(document).ready(function($) {
            $('a[data-alpha]').on('click', function(e) {
                e.preventDefault();

                $('[data-category]').hide();

                $('[data-category=\"' + $(this).attr('data-alpha') + '\"]').show();
            });
        });
    ");
?>

---

Here's a Preview:

Hope this helps

Answer 2

I know this is not direct answer to your question, but there's free module that does exactly what you want:

http://www.aftercube.com/demo/free-extensions/ac-contacts

Cheers!

Answer 3

I also made a few changes to Lodder's excellent post to go back to listing all items:

echo '| <a href="#" data-alpha="000">All</a> | ';
$alphas = range('A', 'Z');
foreach ($alphas as $item)
{
    echo '<a href="#" data-alpha="' . $item . '">' . $item . '</a> | ';
}

and for the JS script:

JFactory::getDocument()->addScriptDeclaration("
    jQuery(document).ready(function($) {
        $('a[data-alpha]').on('click', function(e) {
            e.preventDefault();

            if ($(this).attr('data-alpha') === '000') {
                $('[data-category]').show();
            } else {
                $('[data-category]').hide();
                $('[data-category=\"' + $(this).attr('data-alpha') + '\"]').show();
           }
       });
   });
");