TransWikia.com

Using magento 2 accordion widget with href links

Magento Asked by Korbin on October 2, 2021

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?

3 Answers

Try moving the link from trigger part to content part.

Answered by Magnus on October 2, 2021

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

Answered by rex on October 2, 2021

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>

Answered by Ritesh Santra on October 2, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP