Bootstrap 5不适用于电子购物车

6vl6ewon 于 2023-05-27 发布在 Bootstrap

关注(0)|答案(1)|浏览(153)

bounty将在17小时后到期。回答此问题可获得+100声望奖励。Paul Taylor希望引起更多关注这个问题。

我使用的是Bootstrap 4和E-junkie购物车。然后我想更新到使用Bootstrap 5，我遇到了一个问题，在较小的屏幕上，导航栏显示折叠按钮，但点击时不起作用。我做了一些bootstrap 5修复导航栏和简化代码，发现问题是电子迷需要JavaScript来显示购物车。
如果我查看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

但我不明白。
完整示例如下：

<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>

折叠按钮不起作用，但如果我注解掉该行

<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript">

那么它就能工作了（当然购物车就不能工作了）。
JavaScript的内容是：

/*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);

我如何修复Javascript，使其与Bootstrap 5兼容？

更新我可以看到javascript在开始时有一堆不起作用的行，我确实直接添加了我的示例，删除了不起作用的行，但这没有什么区别。

......
<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>

此外，即使我从导航栏中删除查看购物车按钮，它仍然会导致问题。所以我猜点击折叠按钮会导致它被调用，而我们甚至不想调用它，但我不明白它是如何工作的。
https://www.e-junkie.com/

twitter-bootstrap

来源：https://stackoverflow.com/questions/76270409/bootstrap-5-not-working-with-e-junkie-shopping-cart

1条答案

按热度按时间

y53ybaqx1#

答案很简单：bootstrap和e-junkie购物车不兼容。联系制造商，问他们是否可以修复它。
长回答：你可以补救
问题是bootstrap不需要jQuery，但如果存在jQuery，bootstrap会实现它的一些方法，因此您可以将jQuery语法与bootstrap结合使用。参见documentation：
Bootstrap 5被设计为不使用jQuery，但仍然可以使用我们的组件与jQuery。如果Bootstrap在窗口对象中检测到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的文档：
如果窗口对象中存在jQuery，并且<body>上没有设置data-bs-no-jquery属性，Bootstrap将检测jQuery。
问题解决：bootstrap将远离jQuery，并且不使用由e-junkie创建的jQuery对象。

赞(0）回复(0）举报 2023-05-27

我来回答

Bootstrap 5不适用于电子购物车

1条答案

相关问题

热门标签

最新问答