magento 부트스트랩 - prototype.js와 함께 사용하면 Twitter Bootstrap 3 드롭 다운 메뉴가 사라집니다.




햄버거 한글 (8)

파티가 끝나기 전에이 jsfiddle에 링크 된 이 정보 페이지 로 연결되는 이 github 문제 를 발견 했습니다 . 정말 잘 작동합니다. 그것은 모든 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);
}

magento 웹 사이트에서 부트 스트랩 3 및 prototype.js를 함께 사용할 때 문제가 있습니다.

기본적으로 드롭 다운 메뉴 (Our Products)를 클릭 한 다음 배경을 클릭하면 드롭 다운 메뉴 (Our Products)가 사라집니다 (prototype.js는 li에 "display : none;"을 추가합니다).

다음은 이슈의 데모입니다 : 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는 magento 스킨에 prototype.js 앞에 있어야합니다. 예 :

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

이 답변을 통해 bootstrapprototype 충돌 문제를 없앨 수있었습니다.

@ GeekNum88에서이 문제를 설명 할 때,

PrototypeJS는 Element 프로토 타입에 메서드를 추가하므로 jQuery가 요소에서 hide() 메서드를 트리거하려고 할 때 jQuery hide() 메서드와 동일한 PrototypeJS hide() 메서드를 실제로 실행하고 해당 요소의 스타일을 display:none;

질문 자체에서 제안하는 것처럼 bootstrap 친화적 인 prototype 을 사용할 수도 있고 그렇지 않으면 bootstrap 몇 줄을 주석으로 간단히 주석으로 달아 볼 수 있습니다.

Tooltip.prototype.hide 함수 내부

this.$element.trigger(e)
if (e.isDefaultPrevented()) return

지금 쯤이면 꽤 오래된 게시물이라는 것을 알지만 아무도 언급하지 않은 것으로 보이는 대답은 단순히 "jQuery 수정"입니다. jQuery의 트리거 함수에 몇 가지 추가 검사가 필요하다.이 함수 는 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 라이브러리로 작업하는 경우 해당 문자열을 빠르게 확인할 수 있습니다.


* selector를 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);
        }
    });
})();

Magento의 prototype.js 파일을 MWD에서 제안한 부트 스트랩 버전과 교체하면 구성 가능한 제품을 저장할 수없는 오류가 발생합니다.

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);
        }
    });
})();

또한 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);
        }
    });
})();

매우 늦은 파티 : 여분의 스크립트를 실행하는 것 같은 기분이 들지 않으면 간단한 CSS 덮어 쓰기를 추가하여 숨길 수 있습니다.

.dropdown {
    display: inherit !important;
}

일반적으로 !important CSS를 사용하는 것이 좋습니다.하지만 제 의견에는 받아 들일만한 사용으로 간주됩니다.


아래 코드 줄을 사용하여 모달 팝업의 기본 동작을 설정할 수 있습니다.

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';




magento twitter-bootstrap prototypejs twitter-bootstrap-3