[magento] prototype.js와 함께 사용하면 Twitter Bootstrap 3 드롭 다운 메뉴가 사라집니다.


3 Answers

파티가 끝나기 전에이 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);
}
Question

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>



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




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



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

.dropdown {
    display: inherit !important;
}

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




Related