Page de contacts 'Alphabet Bar'
Joomla 3.6.5
Je souhaite afficher une "barre alphabétique" sur ma page de contacts, le type d'élément de menu est Liste des contacts dans une catégorie.
J'ai 150 contacts, et ils sont tous dans la même catégorie. Actuellement, ma page affiche un total de 20 contacts par page .
Idéalement, je veux avoir quelque chose comme la barre ci-dessous;
| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O..
Le bar pourrait fonctionner de deux manières, je suppose.
- Lorsque vous cliquez sur une lettre, la page affiche les résultats filtrés correspondants.
OR
- J'affiche tous mes contacts sur une seule page et lorsque l'on clique sur une lettre, la page défile automatiquement jusqu'à la lettre correspondante.
J'ai créé un remplacement dans /html/com_contact/category/default_items.php - qui ressemble actuellement à ce qui suit;
<?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'); ?> 
<?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; ?>
Quelqu'un pourrait-il me conseiller sur la façon dont je peux accomplir cela?
J'ai lu l'article suivant , mais c'est lié à des catégories et non à des contacts.
Ok, donc dans votre remplacement, sur les lignes 47 et 49 , vous 'je verrai <li> Mots clés. Dans les deux cas, ajoutez l'attribut de données suivant:
data-category="<?php echo substr($this->escape($item->name), 0, 1); ?>"
Ensuite, en ligne 111 , vous verrez la fermeture </ul> tag. Directement au-dessous, ajoutez ce qui suit pour créer votre liste d’alphabets:
<?php
$alphas = range('A', 'Z');
foreach ($alphas as $item)
{
echo '<a href="#" data-alpha="' . $item . '">' . $item . '</a> | ';
}
?>
Juste en dessous de cela, vous pouvez utiliser JS pour masquer/afficher la catégorie en fonction de la lettre sur laquelle vous avez cliqué:
<?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();
});
});
");
?>
Voici un aperçu:
J'espère que cela t'aides
Je sais que ce n'est pas une réponse directe à votre question, mais il existe un module gratuit qui fait exactement ce que vous voulez:
http://www.aftercube.com/demo/free-extensions/ac-contacts
À votre santé!
J'ai également apporté quelques modifications à l'excellent message de Lodder pour revenir à la liste de tous les éléments:
echo '| <a href="#" data-alpha="000">All</a> | ';
$alphas = range('A', 'Z');
foreach ($alphas as $item)
{
echo '<a href="#" data-alpha="' . $item . '">' . $item . '</a> | ';
}
et pour le script JS:
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();
}
});
});
");