Twitter Bootstrap 3 menu déroulant disparaît lorsqu'il est utilisé avec prototype.js
J'ai un problème lors de l'utilisation de bootstrap 3 & prototype.js ensemble sur un site magento.
Fondamentalement, si vous cliquez sur le menu déroulant (Nos Produits) & cliquez ensuite sur le fond, le menu déroulant (Nos Produits) disparaît (prototype.js ajoute "display: none;" de la li).
Voici une démo de la question:
http://ridge.mydevelopmentserver.com/contact.html
Vous pouvez voir que le menu déroulant fonctionne comme il se doit, sans y compris prototype.js sur la page en lien ci-dessous:
http://ridge.mydevelopmentserver.com/
Quelqu'un d'autre a rencontré ce problème ou avez une solution pour le conflit?
SOLUTION FACILE:
Il suffit de remplacer Magento prototype.js fichier avec cette amorce l'amicale:
Vous pouvez voir les changements effectués dans le prototype.js fichier pour corriger le bootstrap question ici:
https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554
REMARQUE: JQuery doit être inclure dans votre peau avant de magento prototype.js.. Exemple:
<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>
- Jetez un oeil à ma réponse à une question similaire, stackoverflow.com/a/15095654/341491
- Génial.. je vais vérifier -, Merci 🙂
- A pris 2 jours avant, j'ai trouvé ce post et le Bootstrap version imprimable de prototype. Merci!!!! Savoir de tous les bas-côtés ou de problèmes de compatibilité? J'ai remarqué que j'avais de charger jQuery première et de cesser d'utiliser noConflict.
- oui, enfin, je vous remercie!
- Merci. Passé des heures à essayer de résoudre ce problème. jQuery doit être compris avant de prototype, de bon conseil.
- cela fixe la liste déroulante problème, mais dans le backend de magento, il a cassé le "Ajouter un Attribut" caractéristique.
- Utilisé la fonction "Easy Fix" solution thème personnalisé, bien fonctionné, mais pas encore tester d'autres prototypes de fonctions comme les pages de paiement, etc
- Merci, signet de cette question pour la référence.
Vous devez vous connecter pour publier un commentaire.
J'ai aussi utilisé le code à partir d'ici: http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework mais sans avoir besoin de modifier n'importe quelle source. Juste mettre le code ci-dessous quelque part après le prototype et jquery comprend:
hide()
qui peut potentiellement en conflit?all.on.....
ligne,TypeError: all.on is not a function
La fin de la partie, mais a trouvé cette question github qui relie cette page d'information qui relie cette jsfiddle qui fonctionne vraiment bien. Il n'a pas de patch sur chaque sélecteur jQuery et est, je pense, la plus belle correction de loin. Copier le code ici pour aider les futurs peuples:
À l'aide de l' * sélecteur jQuery n'est pas conseillé. Cela prend chaque objet DOM de la page et la met dans la variable.
Je voudrais des conseils pour sélectionner les éléments que l'utilisation de Bootstrap composant spécifique. La Solution ci-dessous utilise uniquement de l'élément déroulant:
Très en retard à la fête: si vous n'avez pas envie d'avoir des scripts en cours d'exécution, vous pouvez ajouter un simple CSS remplacent pour l'empêcher de se caché.
Généralement l'utilisation de
!important
dans le CSS est déconseillé, mais je pense que cela compte comme une utilisation acceptable à mon avis..nav .dropdown
voir http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework/.
C'est une solution facile pour valider l'espace de noms de l'élément cliqué.
Ajouter une fonction de validation pour prototype.js:
et après que, valider l'espace de noms avant de l'élément sera caché:
Remplacement de Magento prototype.js fichier avec le programme d'installation en version imprimée suggéré par MWD est de lancer une erreur qui empêche l'enregistrement des produits configurables:
(L'Exécution De Magento Magento 1.7.0.2)
evgeny.myasishchev solution a très bien fonctionné.
Cette réponse m'ont aidé à me débarrasser de
bootstrap
etprototype
problème de conflit.Comme @GeekNum88 décrire la question,
Comme vous le suggérez dans la question elle-même, soit vous pouvez utiliser
bootstrap
amicalprototype
ou vous pouvez simplement commenter quelques lignes dansbootstrap
comme ci-dessous,à l'intérieur de la
Tooltip.prototype.hide
fonctionJe me rends compte que c'est un assez vieux post, mais une réponse que personne d'autre ne semble avoir mentionné est simplement "modifier jQuery". Vous avez juste besoin d'un couple de contrôles supplémentaires en jQuery de déclenchement de la fonction qui peut être trouvé autour de la ligne 332.
Étendre cette
if
déclaration:... pour dire ceci:
"
#6170
" ne semble être mentionnés dans jQuery fois de sorte que vous pouvez faire une vérification rapide de cette chaîne si vous travaillez avec un compilé (complet) bibliothèque jQuery.