41

在magento网站上同时使用bootstrap 3和prototype.js时遇到问题。

基本上，如果您单击下拉菜单（我们的产品）然后单击背景，下拉菜单（我们的产品）就会消失（prototype.js 将“display: none;”添加到 li）。

这是该问题的演示： http ://ridge.mydevelopmentserver.com/contact.html

您可以在以下链接的页面上看到下拉菜单正常工作，而无需在页面上包含prototype.js： http ://ridge.mydevelopmentserver.com/

之前有没有其他人遇到过这个问题或有解决冲突的可能方法？

轻松修复：

只需用这个引导友好的文件替换 Magento 的prototype.js 文件：

https://raw.github.com/zikula/core/079df47e7c1f536a0d9eea2993ae19768e1f0554/src/javascript/ajax/original_uncompressed/prototype.js

您可以在prototype.js 文件中查看为修复引导问题所做的更改：

https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554

注意：JQuery 必须在prototype.js 之前包含在您的magento 皮肤中。示例：

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/js/lib/ccard.js"></script>
<script type="text/javascript" src="/js/prototype/validation.js"></script>
<script type="text/javascript" src="/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="/js/varien/js.js"></script>
<script type="text/javascript" src="/js/varien/form.js"></script>
<script type="text/javascript" src="/js/varien/menu.js"></script>
<script type="text/javascript" src="/js/mage/translate.js"></script>
<script type="text/javascript" src="/js/mage/cookies.js"></script>
<script type="text/javascript" src="/js/mage/captcha.js"></script>
4

8 回答 8

43

我还使用了这里的代码：http: //kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework但不需要修改任何源。只需将代码放在原型之后的某个地方，jquery 包括：

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('*');
        jQuery.each(['hide.bs.dropdown', 
            'hide.bs.collapse', 
            'hide.bs.modal', 
            'hide.bs.tooltip',
            'hide.bs.popover',
            'hide.bs.tab'], function(index, eventName) {
            all.on(eventName, function( event ) {
                isBootstrapEvent = true;
            });
        });
    }
    var originalHide = Element.hide;
    Element.addMethods({
        hide: function(element) {
            if(isBootstrapEvent) {
                isBootstrapEvent = false;
                return element;
            }
            return originalHide(element);
        }
    });
})();
于 2013-12-23T17:44:28.840 回答
8

派对迟到了，但发现这个 github 问题链接到这个信息页面，该页面链接到这个 jsfiddle，它工作得非常好。它不会对每个 jQuery 选择器进行修补，而且我认为它是迄今为止最好的修复。在此处复制代码以帮助未来的人们：

jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
  var pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
  var disablePrototypeJS = function (method, pluginsToDisable) {
    var handler = function (event) {
      event.target[method] = undefined;
      setTimeout(function () {
        delete event.target[method];
      }, 0);
    };
    pluginsToDisable.each(function (plugin) {
      jQuery(window).on(method + '.bs.' + plugin, handler);
    });
  };


  disablePrototypeJS('show', pluginsToDisable);
  disablePrototypeJS('hide', pluginsToDisable);
}
于 2015-08-18T04:54:22.867 回答
7

不建议在 jQuery 中使用 * 选择器。这将获取页面上的每个 DOM 对象并将其放入变量中。我建议选择使用特定引导组件的元素。以下解决方案仅使用下拉组件：

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('.dropdown');
        jQuery.each(['hide.bs.dropdown'], function(index, eventName) {
            all.on(eventName, function( event ) {
                isBootstrapEvent = true;
            });
        });
    }
    var originalHide = Element.hide;
    Element.addMethods({
        hide: function(element) {
            if(isBootstrapEvent) {
                isBootstrapEvent = false;
                return element;
            }
            return originalHide(element);
        }
    });
})();
于 2015-01-29T12:26:59.877 回答
7

派对很晚了：如果你不想运行额外的脚本，你可以添加一个简单的 CSS 覆盖来防止它被隐藏。

.dropdown {
    display: inherit !important;
}

通常!important不建议在 CSS 中使用 ，但我认为这在我看来是可以接受的。

于 2015-10-07T05:53:12.630 回答
2

见http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework/。

验证单击的元素的名称空间是一个非常简单的修复。

在prototype.js 中添加验证函数：

之后，在元素被隐藏之前验证命名空间：

  hide: function(element) {
    element = $(element);
    if(!isBootstrapEvent)
    {
        element.style.display = 'none';
    }
    return element;
  },
于 2013-12-05T07:06:30.303 回答
2

用 MWD 建议的引导友好版本替换 Magento 的prototype.js 文件会引发错误，从而阻止保存可配置产品：

Uncaught TypeError: Object [object Array] has no method 'gsub' prototype.js:5826

（运行 Magento Magento 1.7.0.2）

evgeny.myasishchev 解决方案效果很好。

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('*');
        jQuery.each(['hide.bs.dropdown', 
            'hide.bs.collapse', 
            'hide.bs.modal', 
            'hide.bs.tooltip'], function(index, eventName) {
            all.on(eventName, function( event ) {
                isBootstrapEvent = true;
            });
        });
    }
    var originalHide = Element.hide;
    Element.addMethods({
        hide: function(element) {
            if(isBootstrapEvent) {
                isBootstrapEvent = false;
                return element;
            }
            return originalHide(element);
        }
    });
})();
于 2014-01-03T10:40:06.253 回答
0

这个答案帮助我摆脱了bootstrap冲突prototype问题。

正如@GeekNum88 描述的那样，

PrototypeJS 向 Element 原型添加方法，因此当 jQuery 尝试在hide()元素上触发该方法时，它实际上是在触发 PrototypeJShide()方法，该方法等效于 jQuery hide()方法并将元素的样式设置为display:none;

正如您在问题本身中所建议的那样，您可以使用bootstrap友好的prototype，或者您可以简单地注释掉bootstrap下面的几行，

Tooltip.prototype.hide函数内部

this.$element.trigger(e)
if (e.isDefaultPrevented()) return
于 2014-08-04T08:55:00.533 回答
-1

我意识到这是一篇相当老的帖子，但似乎没有人提到的答案只是“修改 jQuery”。您只需要在 jQuery 的 trigger 函数中进行一些额外的检查，这些检查可以在第 332 行附近找到。

扩展此if语句：

// Call a native DOM method on the target with the same name name as the event.
// Don't do default actions on window, that's where global variables be (#6170)
if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) ) {

......这样说：

// Call a native DOM method on the target with the same name name as the event.
// Don't do default actions on window, that's where global variables be (#6170)
// Check for global Element variable (PrototypeJS) and ensure we're not triggering one of its methods.
if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) &&
        ( !window.Element || !jQuery.isFunction( window.Element[ type ] ) ) ) {

" #6170" 似乎只在 jQuery 中被提及一次，因此如果您正在使用已编译（完整）的 jQuery 库，则可以快速检查该字符串。

于 2015-06-01T16:28:09.520 回答