2

I am trying to build a category accordion in my side bar and I am using magento 2 accordion widget

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_accordion.html

<?php
$counter = 0;
foreach ($collection as $index=>$category):

    ?>
    <?php $activeClass = $category->getIsActive() ? 'active' : ''; ?>
    <div class="blog-list">
    <div class="parent-categories" id="accordion" data-mage-init=
      '{"accordion":{
      "openedState": "active", 
      "collapsible": true, 
      "active": false, 
      "multipleCollapsible": true}}'>
        <div data-role="collapsible">
            <div data-role="trigger">
                <div class="card-header" id="heading<?= $counter ?>">
                    <h5 class="category-title">
                        <button type="button" class="category-button"  data-toggle="collapse" data-target="#collapse<?= $counter ?>">
                            <a class="blog-link"
                               title="<?= $block->escapeHtml($category->getName()); ?>"
                               href="<?= $block->escapeUrl($category->getUrl()); ?>">
                                <?= $block->escapeHtml($category->getName()); ?> (<?= $block->escapeHtml($block->getPostsCount($category->getId())); ?>)
                            </a>
                            <?php if ($category->getLevel() == '1') : ?>
                                <i class="fa fa-angle-down"></i>
                            <?php endif; ?>
                        </button>
                    </h5>
                </div>
            </div>
        </div>
        <div data-role="content">
            <?php if ($category->hasActiveChildren()): ?>
                <ul class="blog-categories -level<?= $category->getLevel() + 1; ?>">
                    <?= /* @noEscape */ $block->renderChildrenItems($category->getCategoryId()); ?>
                </ul>
            <?php endif; ?>
        </div>

    </div>
</div>
    <?php
    $counter++;
endforeach; ?>

The catgeories are rendered and they are fine, but the issue is that the

<a class="blog-link" 
    title="<?= $block->escapeHtml($category->getName()); ?>" 
    href="<?= $block->escapeUrl($category->getUrl()); ?>">

does not work. So when ever I click on accordion elements or child elements it just opens/closes it. How can I make the links clickable? I guess it should have something with the data-mage-init but I am not sure how to fix it. Can someone please help me?

0

3 Answers 3

0

I have worked some with accordion, I thought I might be able to help. However, I am not getting a fair idea what are you trying to achieve, as I understood this question, Do you want to create something like this ?

example

Where Category one (title) will act as button to open close links

example 2

and clicking on blog post hyperlinks will lead to respective links.

If this is correct your logic will be something like -

div blog link with mage init 
   foreach categories as category
      title = category->Name
      content = Post->Name [Post->url]
    end foreach

If you just want nested categories like -

Parent Categories
     Sub Categories (4)
       Sub Sub categories 

this accordion widget might not be the best option to accomplish such tree like display i think.

here is the example how magento is showing categories in admin with similar tree structure -

https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/tree.phtml

0

Try moving the link from trigger part to content part.

-1

Please change the code as below

From:

<h5 class="category-title">
    <button type="button" class="category-button"  data-toggle="collapse" data-target="#collapse<?= $counter ?>">
                            <a class="blog-link"
                               title="<?= $block->escapeHtml($category->getName()); ?>"
                               href="<?= $block->escapeUrl($category->getUrl()); ?>">
                                <?= $block->escapeHtml($category->getName()); ?> (<?= $block->escapeHtml($block->getPostsCount($category->getId())); ?>)
                            </a>
                            <?php if ($category->getLevel() == '1') : ?>
                                <i class="fa fa-angle-down"></i>
                            <?php endif; ?>
    </button>
</h5>

To:

<h5 class="category-title" data-toggle="collapse" data-target="#collapse<?= $counter ?>">
                            <a class="blog-link"
                               title="<?= $block->escapeHtml($category->getName()); ?>"
                               href="<?= $block->escapeUrl($category->getUrl()); ?>">
                                <?= $block->escapeHtml($category->getName()); ?> (<?= $block->escapeHtml($block->getPostsCount($category->getId())); ?>)
                            </a>
                            <?php if ($category->getLevel() == '1') : ?>
                                <i class="fa fa-angle-down"></i>
                            <?php endif; ?>
</h5>
1
  • Hi, This didn't work. it still acts as collapsible button and just toggles. The links are not working when I click on them.
    – Korbin
    Jul 20, 2020 at 5:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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