I've done something simmilar in the past to sort brands (which are basically categories).
You could inject a custom block into the static block
{{block class="Vendor\Module\Block\AlphabetCategories" template="Vendor_Module::template.phtml"}}
Create the mentioned block class and create a method that fetches the categories needed (please rewrite this so it will work in your case):
public function getBrandsCategory($limit = null, $order = 'position')
{
$brandsCatId = 123;
$rootCategory = ($this->_getRootCategoryId()) ?: '2';
$collection = $this->_categoryCollection
->addAttributeToSelect(['name', 'path', 'url_key', 'position', 'level', 'include_in_menu'])
->addFieldToFilter('path', ['like' => "1/{$rootCategory}/{$brandsCatId}/%"])
->addLevelFilter(3)
->addIsActiveFilter()
->setPageSize($limit)
->setCurPage(1)
->addOrderField('level')
->addOrderField($order);
return $collection;
}
You can then sort the collection in the template (you could or should do that in the block class)
$allBrands = $alphabet = [];
foreach ($block->getBrandsCategory(null, 'name') as $item) {
$letter = substr($item->getName(), 0, 1);
$allBrands[$letter][$item->getId()] = [
'name' => $item->getName(),
'url' => $baseUrl . $item->getRequestPath()
];
$alphabet[$letter] = $letter;
}
ksort($alphabet);
ksort($allBrands);
You can then iterate through the sorted array of categories. Note that this may only work with letters - use your imagination for the numbers/symbols bit :)
<?php foreach ($allBrands as $letter => $cats) : ?>
<div class="brands-letter" id="brands-<?php echo strtolower($letter) ?>">
<div class="big-letter"><?php echo $letter ?></div>
<div class="letter-brands-wrapper<?php echo (count($cats) <= 9) ? ' col-3' : '' ?>">
<?php foreach ($cats as $cat) : ?>
<div class="brand-item">
<a href="<?php echo $cat['url'] ?>">
<span><?php echo $cat['name'] ?></span>
</a>
</div>
<?php endforeach ?>
</div>
</div>
<?php endforeach ?>
For the top navigation you can use the other array (just letters):
<div class="brands-nav">
<ul>
<?php foreach ($alphabet as $letter) : ?>
<li><a href="#brands-<?php echo strtolower($letter) ?>"><?php echo $letter ?></a></li>
<?php endforeach ?>
</ul>
</div>