Bootstrap 5与e-junkie购物车不兼容。

huangapple
go评论60阅读模式
英文:

Bootstrap 5 not working with e-junkie shopping cart

问题

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 work when clicked. I made some bootstrap 5 fixes to navbar and simplified code and found the issue is the Javascript required by e-junkie to show the shopping cart.

如果我在Firefox的开发者工具中查看，当我点击按钮时，我看到一个错误：

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

但我不理解它。

Full example below:

<head>
<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 I 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 the shopping cart then doesn't 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
英文:

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 work when clicked. I made some bootstrap 5 fixes to navbar and simplified code and found the issue is the Javascript required by e-junkie to show the shopping cart.

If I look at the developer tools in Firefox, I see an error when I click the button:

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 don't understand it.

Full example below:

<head>
<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 I 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 the shopping cart then doesn't 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 navbar it still causes an issue. So I guess that clicking the collapse button is causing it to be called when we don't even want to call it but I don't understand how it works.

https://www.e-junkie.com/

答案1

得分: 1

Simple answer: bootstrap和e-junkie购物车不兼容。联系制造商并询问他们是否可以修复它。

Long answer: 你可以解决这个问题。

问题是：bootstrap不需要jQuery，但如果jQuery存在，bootstrap会实现一些它的方法，所以你可以在与bootstrap结合使用jQuery语法。请参阅文档：

Bootstrap 5设计为不需要jQuery，但仍然可以在jQuery中使用我们的组件。如果Bootstrap在window对象中检测到jQuery，它将在jQuery的插件系统中添加所有我们的组件；这意味着你可以执行$('[data-bs-toggle="tooltip"]').tooltip()来启用工具提示。对于我们的其他组件也是一样的。

现在，对于e-junkie，也实现了类似的功能。如果e-junkie注意到页面上没有加载jQuery，它将在页面上添加自己的jQuery实现。这个实现是基本的：它只实现了e-junkie需要的一些方法，而不是全部。

一旦e-junkie在页面上添加了jQuery，问题就开始了。bootstrap认为jQuery已安装并尝试与e-junkie的实现一起工作。但是bootstrap认为存在的原始jQuery实际上是由e-junkie实现的精简版本。因此，bootstrap发出了警告，指出jQuery对象的Event属性不是一个函数。

现在，你可以做两件事：自己将jQuery添加到页面上。你应该在bootstrap和e-junkie脚本之前添加它。如果你使用的是最新的jQuery版本（当前为3.7.0），你还应该添加jquery-migrate，因为bootstrap 5与最新版本不兼容。（jquery-migrate确保jQuery向后兼容。）

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script>

一个更简单的解决方案是告诉bootstrap即使在页面上加载了jQuery也不要使用它。你可以通过向body标签添加以下属性来实现：

<body style="padding-top: 100px;" data-bs-no-jquery="true">

请参阅bootstrap的文档：

如果在window对象中存在jQuery并且<body>标签上没有设置data-bs-no-jquery属性，Bootstrap将检测到jQuery。

问题解决了：bootstrap将远离jQuery，不使用由e-junkie创建的jQuery对象。

英文:

Simple answer: bootstrap and e-junkie shopping cart are not compatible. Contact the makers and ask them if they can fix it.

Long answer: you can remedy this.

The thing is: bootstrap does not need jQuery, but if jQuery is present, bootstrap implements some of its methods, so you can use jQuery syntax in combination with bootstrap. See the documentation:

> Bootstrap 5 is designed to be used without jQuery, but it’s still possible to use our components with jQuery. If Bootstrap detects jQuery in the window object it’ll add all of our components in jQuery’s plugin system; this means you’ll be able to do $('[data-bs-toggle="tooltip"]').tooltip() to enable tooltips. The same goes for our other components.

Now, for e-junkie a similar thing is implemented. If e-junkie notices that jQuery is not loaded on the page, it will add its own implementation of jQuery to the page. This implementation is rudimentary: it only implements some methods needed by e-junkie, not all of it.

Once e-junkie has added jQuery to the page, that's when the problems start. bootstrap thinks jQuery is installed and tries to work with e-junkie's implementation. But the original jQuery that bootstrap thinks is there, is actually a stripped down version implemented by e-junkie. Hence the warning emitted by bootstrap that the Event property of the jQuery object is not a function.

Now, there are two things you can do: add jQuery to the page yourself. You should add that before your bootstrap and e-junkie scripts. If you're using the latest jQuery version (currently 3.7.0), you should also add jquery-migrate, since bootstrap 5 is not compatible with the latest version. (jquery-migrate makes sure jQuery is backwards compatible.)

&lt;script src=&quot;https://code.jquery.com/jquery-3.7.0.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-migrate-3.4.1.js&quot;&gt;&lt;/script&gt;

An easier solution is to tell bootstrap to NOT use jQuery, even if it is loaded on the page. You can do this by adding the following attribute to the body tag:

&lt;body style=&quot;padding-top: 100px;&quot; data-bs-no-jquery=&quot;true&quot;&gt;

See bootstrap's documentation:

> Bootstrap will detect jQuery if jQuery is present in the window object and there is no data-bs-no-jquery attribute set on &lt;body&gt;.

Problem solved: bootstrap will stay away from jQuery and not use the jQuery object created by e-junkie.

huangapple
  • 本文由 发表于 2023年5月17日 17:12:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76270409.html
  • bootstrap-5
  • javascript
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定