I was using Bootstrap 4 and E-junkie shopping cart. I then wanted to update to using Bootstrap 5 and I had a problem that on smaller screens the navbar showed the collapse button but it did not worked when clicked. I made some boostrap 5 fixes to navabar and simplified code and found the issue is the Javascript required by e-junkie to show the shopping cart
If I enable developer tools in Firefox browser i see error when I click on button is
Uncaught TypeError: n.Event is not a function
trigger event-handler.js:274
show collapse.js:129
toggle collapse.js:107
<anonymous> collapse.js:287
n event-handler.js:118
event-handler.js:274:22
trigger event-handler.js:274
show collapse.js:129
toggle collapse.js:107
<anonymous> collapse.js:287
n event-handler.js:118
but I dont understand it.
Full example below:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SongKong Music Tagger</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<!-- /head -->
<body style="padding-top: 100px;">
<!-- header -->
<div class="container-fluid fixed-top" style="background-image: url(/songkong/images/songkongheader.png);">
<div class="navbar container-fluid navbar-expand-lg navbar-dark mx-auto justify-content-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://www.jthink.net/songkong/en/news.jsp">
News
</a>
<a class="nav-item nav-link" href="https://www.fatfreecartpro.com/ecom/gb.php?c=cart&ejc=2&cl=347010" target="ej_ejc" onclick="return EJEJC_lc(this);">
View Cart
</a>
</div>
</div>
</div>
</div>
<!-- footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script type="text/javascript">function EJEJC_lc(th) { return false; }; </script>
<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript"></script>
</body>
</html>
Collapse button doesn't work, but if comment out the line <script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript">
then it does work (but of course shopping cart then doiesnt work)
Content of the Javascript is:
/*var d = document;
var EJV1_cart_version = 1;
var EJV1_loadFlag = false; // this defines whether or not box.js should search for ?cl
var url = "https://www.e-junkie.com/ecom/box.js";
var t=d.createElement('script');
t.setAttribute('src', url);
d.getElementsByTagName('head')[0].appendChild(t);*/
var d = document;
var EJV1_cart_version = 1;
var EJV1_loadFlag = false; // this defines whether or not box.js should search for ?cl
var EJV1_box_preloaded = true;
var url = "https://www.e-junkie.com/ecom/restified/checkStatusL.php?cl="+EJV1_cart_version;
var t=d.createElement('script');
t.setAttribute('src', url);
d.getElementsByTagName('head')[0].appendChild(t);
How I fix the Javascript so it is compatible with Bootstrap 5?
Update I can see the javascript has a load of defunct lines at start,i did add it my example directly with defunct lines removed but that made no difference.
......
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script type="text/javascript">function EJEJC_lc(th) { return false; }; </script>
<script>
var d = document;
var EJV1_cart_version = 1;
var EJV1_loadFlag = false; // this defines whether or not box.js should search for ?cl
var EJV1_box_preloaded = true;
var url = "https://www.e-junkie.com/ecom/restified/checkStatusL.php?cl="+EJV1_cart_version;
var t=d.createElement('script');
t.setAttribute('src', url);
d.getElementsByTagName('head')[0].appendChild(t);
</script>
</body>
</html>
Also even if I remove the View Cart button from the Nav bar it still causes an issue. So I guess that clicking the collapse button is causing it to be called when we dont even want to call it but I dont understand how it works.
from Bootstrap 5 not working with e-junkie shopping cart
No comments:
Post a Comment