0

I am trying to implement the navigation menu with Bootstrap Smartmenus but the theme does not pick up the javaScript. Can somebody help me out?

Vendor/Name/requirejs-config.js

var config = {
  map: {
    '*': {
      'bootstrap':'js/bootstrap',
      'smartmenus':'js/jquery.smartmenus',
      'bssmartmenus':'js/jquery.smartmenus.bootstrap.min',
    }
  },
  shim: {
    'bootstrap': {
      'deps': ['jquery']
    },
    'smartmenus': {
      'deps': ['jquery', 'bootstrap']
    },
    'bssmartmenus': {
      'deps': ['jquery', 'bootstrap', 'smartmenus']
    }
  }
}

Vendor/Name/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <referenceBlock name="head">
      <block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-">
        <arguments>
          <!-- RequireJs library enabled -->
          <argument name="file" xsi:type="string">requirejs/require.js</argument>
        </arguments>
      </block>
      <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>
    </referenceBlock>
.....

Vendor/Name/Magento_Theme/templates/html/menu.phtml

<?php

/**
*  General template for displaying group of blocks devided into sections
*/
// print_r($block->getRootCategories());
$categories = $block->getRootCategories();
$nosub = [];
$count = 0;
?>
<?php if ($categories): ?>
    <nav class="navbar navbar-inverse nav2 ">
        <div id="navbar2">
            <ul class="nav navbar-nav">
            <?php foreach ($categories as $_category): ?>
                <?php
                    $subcategories = $block->getSubCategories($_category);
                    if ($subcategories):
                        $count++;
                ?>
                <li class="<?= $count==1?'nav2firstlink':''?>" ><a href="<?= $block->getCategoryUrl($_category) ?>"><?= $_category->getName(); ?><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <?php foreach ($subcategories as $_sub): ?>
                        <li><a href="<?= $block->getCategoryUrl($_sub) ?>"><?= $_sub->getName(); ?></a></li>
                        <?php endforeach;?>
                    </ul>
                </li>
                <?php else: $nosub[] = $_category; ?>
                <?php endif; ?>
            <?php endforeach;?>
            </ul>
        </div>
    </nav>
    <?php if (count($nosub) > 0) : ?>
    <nav class="navbar navbar-inverse nav3 ">
        <div id="navbar3">
            <ul class="nav navbar-nav">
            <?php foreach($nosub as $_cat): ?>
                <li><a href="<?= $block->getCategoryUrl($_cat) ?>"><?= $_cat->getName(); ?></a></li>
            <?php endforeach;?>
            </ul>
        </div>
    </nav>
    <?php endif; ?>
    <script type="text/javascript">
      requirejs(['jquery', 'bootstrap', 'smartmenus', 'bssmartmenus'], function(jQuery, Bootstrap, SmartMenus, bsSmartMenus) {
        jQuery(function(){
            jQuery('.nav2').smartmenus();
        });
      });
    </script>
<?php endif; ?>

Please let me know, how should I fix this issue. javascript error

On further checking with the logs, found these:

[2018-06-27 06:40:10] main.INFO: Broken reference: the 'requirejs' element cannot be added as child to 'head', because the latter doesn't exist [] []
[2018-06-27 06:40:10] main.INFO: Broken reference: the 'currency' tries to reorder itself towards 'store_language', but their parents are different: 'header.panel' and '' respectively. [] []
[2018-06-27 06:40:10] main.INFO: Broken reference: the 'requirejs' tries to reorder itself towards '', but their parents are different: 'head' and '' respectively. [] []
[2018-06-27 06:40:10] main.INFO: Broken reference: the 'requirejs-config' tries to reorder itself towards 'requirejs', but their parents are different: 'head' and '' respectively. [] []
[2018-06-27 06:40:20] main.CRITICAL: Unable to resolve the source file for 'frontend/Vendor/Name/en_US/bootstrap.js' [] []
[2018-06-27 06:40:20] main.CRITICAL: Unable to resolve the source file for 'frontend/Vendor/Name/en_US/jquery/jquery-storageapi.js' [] []
[2018-06-27 06:40:20] main.CRITICAL: Unable to resolve the source file for 'frontend/Vendor/Name/en_US/priceUtils.js' [] []
[2018-06-27 06:40:20] main.CRITICAL: Unable to resolve the source file for 'frontend/Vendor/Name/en_US/jquery/ui.js' [] []
[2018-06-27 06:40:20] main.CRITICAL: Unable to resolve the source file for 'frontend/Vendor/Name/en_US/bssmartmenus.js' [] []
[2018-06-27 06:40:21] main.CRITICAL: Unable to resolve the source file for 'frontend/Vendor/Name/en_US/jquery/validate.js' [] []

Looking on how to resolve this issue!!?

  • Why you added this code <block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-"> <arguments> <!-- RequireJs library enabled --> <argument name="file" xsi:type="string">requirejs/require.js</argument> </arguments> </block> <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/> – kunj Jun 26 '18 at 5:33
  • When I get this error, I found another similar post, on how to implement bootstrap. In order to enable the requirejs it's added in the default.xml. [magento.stackexchange.com/questions/107763/… – Anish Karim Jun 26 '18 at 6:11
0

Its because the path is not rendered properly. Please check this link Custom js fie not working Magento 2

Guess it will help you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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