A-Z Category Listing Magento 2 Static Block

Question

I am attempting to create a A-Z category listing within a static block, something like the attached image.

The static block will be on the parent category, and the listing will show the parent categories children.

Can anyone please suggest how I can achieve this in Magento 2?

Answer 1

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>