3

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

  1. 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.

3

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:

enter image description here

Hope this helps

  • 1
    @johnny_s - Ahh ok, in which case, add the data attribute to the <tr> element instead. – Lodder Jan 24 '17 at 14:27
  • Ah cause you're using pagination. This is all client side, so you'd need to display all contacts at once. I think you can change the List Limit in the Global Config but there may be a better approach with the pagination settings. – Lodder Jan 24 '17 at 15:04
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!

  • This is a great module @pippo8765 - thanks for the suggestion! – jonboy Jan 25 '17 at 9:19
1

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();
           }
       });
   });
");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.