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.
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!!?
Best Answer
Its because the path is not rendered properly. Please check this link Custom js fie not working Magento 2
Guess it will help you.