Вмешательство jQuery в Magento Lightbox, меню и вкладки

Я работаю над редактированием шаблона, в котором мне нужно добавить лайтбокс, который отображает некоторый HTML-контент на страницах продуктов. А именно, вместо кнопки «Добавить в корзину» будет кнопка, которая появляется над некоторым встроенным содержимым лайтбокса.

Все альтернативы лайтбоксам, которые я рассматривал, требуют, чтобы я наследовал jQuery с помощью CDN. Вот так: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

И шаблон, который я использую, использует кучу пользовательских скриптов в head.phtml и других страницах. Нравится:

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/ver_menu.js');?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/custommenu.js');?>"></script>

Итак, когда я добавляю эту строку в head.phtml или даже на страницу продукта, мое верхнее меню перестает раскрываться, а вкладки с информацией о продукте перестают работать, и вся информация отображается прямо на моей странице продукта (вместо того, чтобы отображаться на соответствующих вкладках) .

Есть ли способ избежать этого вмешательства между сценариями jQuery, чтобы заставить работать лайтбокс (на странице продукта - view.phtml) и не затрагивать вкладки меню и информации.

Боролся с этим какое-то время, и авторы темы тоже не хотят помочь.

Я уже пытался поиграть с размещением строки jQuery, которую я разместил выше, но безуспешно. В любом случае я могу использовать основной скрипт jQuery magento, чтобы мой лайтбокс работал...

Кроме того, я использую colorbox для эффекта лайтбокса. (http://www.jacklmoore.com/colorbox)

Я мало что могу сделать, но я могу предложить ужин и пиво тому, кто поможет мне решить эту проблему. Очень рассчитываю на вас, ребята...


jquery lightbox magento colorbox magento-1.7
person BigSlick87    schedule 20.08.2012    source источник
comment
перейдите по этому URL-адресу ajax.googleapis.com/ajax/ libs/jquery/1.7.1/jquery.min.js, который вы предоставили, и загрузите файл, включите его в свою папку js и используйте его так же, как вы используете другой   -  person rahul    schedule 20.08.2012
comment
Сделал ли это Рахул, но нет решения... '‹script type=text/javascript src=‹?php echo $this-›getSkinUrl('js/jquery-1.7.1.min.js');?››‹/script ›'   -  person BigSlick87    schedule 20.08.2012
comment
Обязательно используйте jQuery в режиме noConlict().   -  person pspahn    schedule 20.08.2012
comment
Я изучил его @pspahn, но я просто не знал, с чего начать, в шаблоне работает так много скриптов jQuery, что Magento использует свой собственный. Кроме того, это не скрипт лайтбокса, который вызывает эту проблему, он наследует javascript от CDN (первая строка скрипта, которую я разместил в своем вопросе), что делает все крутым...   -  person BigSlick87    schedule 20.08.2012

Ответы (3)


arrow_upward
1
arrow_downward

я делаю это таким образом, я добавил этот код в /templatefiolder/page/html/head.phtml:

 <!-- adding jQuery -->
<script type="text/javascript" src="http://linktoJquery/jquery.tools.min.js"></script>

<script type="text/javascript">
//<![CDATA[
     var $j = jQuery.noConflict();
//]]>
</script>

Я добавил этот $j из-за конфликтов с прототипом. В этом случае вам всегда нужно делать jQuery вот так:

<script>
// execute your scripts when DOM is ready. this is a good habit
$j(function() {     

    $j(".scrollable").scrollable();

});
</script>
person boti    schedule 20.08.2012

arrow_upward
0
arrow_downward

Не используйте jQuery через CDN на сайте Magento. Это вызовет проблемы. Вместо этого разместите его на своем сервере. Откройте скрипт и добавьте:

jQuery.noConflict();

в конце файла. Переименуйте его во что-то вроде jquery.min.no-conflict.js, чтобы в будущем всем было очевидно, что он работает в режиме noConflict(), и убедитесь, что он загружается перед любым другим вашим скриптом на основе jQuery.

Поскольку вы находитесь в режиме noConflict(), вы должны создавать любые скрипты jQuery, используя «jQuery» в качестве экземпляра, а не $ (который используется Prototype, инфраструктурой javascript, используемой в Magento 1.x).

person pspahn    schedule 20.08.2012
comment
Спасибо... Я понял, где ошибся при реализации вашего первого решения... Спасибо, что сделали его более ясным. - person BigSlick87; 21.08.2012

arrow_upward
0
arrow_downward

Лайтбоксы, которые вы пробовали, представляют собой плагины jQuery, для которых требуется библиотека jQuery. Неважно, размещаете ли вы библиотеку или позволяете ее размещать кому-то другому (например, CDN). Если на вашей странице уже используется версия jQuery, вам, скорее всего, вообще ничего не нужно добавлять.

Если на вашей странице используется какой-то другой скрипт, который использует псевдоним $, вам нужно будет использовать noConflict, как сказал pspahn. После этого вы больше не сможете использовать «$» в качестве псевдонима для jQuery, не создавая локальную область видимости и не назначая ее там. Пример:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<script src='jquery.colorbox-min.js'></script>
<script>
  jQuery(document).ready(function(){
    var $ = jQuery; // create an alias for typing convenience
    $('a.example').colorbox();
  });
</script>
person Jack    schedule 20.08.2012
comment
Спасибо за то, что мне было так легко и очевидно решить проблему. - person BigSlick87; 21.08.2012