自定义添加的顶级菜单项的活动状态 [Magento topmenu]

Question

要在类别菜单项之后添加 "HOME" 菜单项和其他菜单项：在文件 project\app\design\frontend\rwd\default\template\page\html\topmenu.phtml 中添加两个块 home-link 和 post-menu-links

<nav id="nav">
        <ol class="nav-primary">
            <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home-link')->toHtml(); ?>
            <?php echo $_menu ?>
            <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('post-menu-links')->toHtml(); ?>
        </ol>
</nav>

并且相应地成功添加了菜单项现在如何保持其活动状态，例如在通过这些块添加的活动菜单项上添加 "active" class？

我试过的

我尝试在 jquery cookie 中的点击设置菜单 (li) 索引上使用 jquery cookie。但它失败了

点击停止加载时
或稍后在网站上出现（以前的 cookie 处于活动状态，在错误的菜单项上激活。）

Answer 1

在您的模板文件中：

project\app\design\frontend\rwd\default\template\page\html\topmenu.phtml

如果链接指向 CMS 页面，您应该找出当前页面标识符。

<li id="the-cms-link">
    <a href="/the-cms-link">The CMS Link</a>
</li>

//Then in the PHP below the menu:
<script>
    var currentPageId = '';

    <?php if (Mage::getSingleton('cms/page')): ?>
        currentPageId = '<?php echo Mage::getSingleton('cms/page')->getIdentifier(); ?>';
    <?php endif; ?>

    if (jQuery('#'+currentPageId).is('li')) {
        jQuery('#'+currentPageId).addClass('active');
    }
</script>

您也可以使用页面 ID 执行此操作，但请记住，您需要从 CMS 块中设置

ID。

如果您使用不同的链接，例如来自自定义模块的链接，您需要找出当前模块、控制器和操作，并检查它们是否与任何链接匹配，然后再次使用 jQuery 来设置活动 class。获取当前模块、控制器和动作：

$moduleName = Mage::app()->getRequest()->getModuleName();
$controllerName = Mage::app()->getRequest()->getControllerName();
$actionName = Mage::app()->getRequest()->getActionName();

Answer 2

我们可以将 CMS 页面菜单项添加到活动 class。

在此顶部菜单中，我添加了 CMS-links 块，它显示为静态块。

我必须创建 jQuery 才能在 url

中添加活跃的 claas

<?php if ($block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block-name')->toHtml()) { ?>
    <div class="top-menu-nav">
        <ul>
            <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block-name')->toHtml(); ?>
        </ul>
    </div>
<?php } ?>

<!-- Add custom block Active urls -->

<script type="text/javascript">
require(['jquery', 'jquery/ui'], function($){
  $(document).ready( function() {
    var url = window.location.href; //sets the variable "url" to the pathname of the current window
    var lastChar = url.substr(url.length - 1); 
    if(lastChar == "/") {url = url.substring(0, url.length-1);}
    //console.log(url);
    $('.top-menu-nav a.active').removeClass('active');
    $('.top-menu-nav a').each(function () { 
        url2 = $(this).attr('href');
        if(url2.substr(url2.length - 1) == "/"){ url2 = url2.substring(0, url2.length-1);  } 
        //console.log(url2);
        if(url2 == url){
            $(this).addClass('active');
        }
    });
  });
});
</script>

自定义添加的顶级菜单项的活动状态 [Magento topmenu]

Active status of custom added top-menu items [Magento topmenu]

css

jquery

magento