Автор Тема: Как подключить скрипт Jquery?  (Прочитано 1502 раз)

28 Апреля 2015, 15:52:14
  • Новичок
  • *
  • Сообщений: 17
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Подскажите, как подключить скрипт Jquery? Вставил в header.tpl в head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
        (function(jq) {
            jq.autoScroll = function(ops) {
            ops = ops || {};
            ops.styleClass = ops.styleClass || 'scroll-to-top-button';
            var t = jq('<div class="+ops.styleClass+"></div>'),
            d = jq(ops.target || document);
            jq(ops.container || 'body').append(t);

            t.css({
                opacity: 0,
                position: 'absolute',
                top: 0,
                right: 0
            }).click(function() {
                jq('html,body').animate({
                    scrollTop: 0
                }, ops.scrollDuration || 1000);
            });

            d.scroll(function() {
                var sv = d.scrollTop();
                if (sv < 10) {
                    t.clearQueue().fadeOut(ops.hideDuration || 200);
                    return;
                }

                t.css('display', '').clearQueue().animate({
                    top: sv,
                    opacity: 0.8
                }, ops.showDuration || 500);
            });
        };
    })(jQuery);

    $(document).ready(function(){
        $.autoScroll({
            scrollDuration: 2000,
            showDuration: 600,
            hideDuration: 300
        });
    });
   
</script>
в body div блок:

<div style="opacity: 0.8; position: absolute; top: 450px; right: 0px; display:none;" class="scroll-to-top-button"></div>
в global.css вставил:

.scroll-to-top-button{
            background: #777 url(ссылка на картинку на хостинге) center center no-repeat;
            width: 32px;
            height: 32px;
            color: #fff;
            font-family: verdana;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -o-border-radius: 5px;
            cursor: pointer;
            padding: 15px;
            margin: 20px;
        }


Что сделал неправильно, помогите! Prestashop 1.6
Заранее благодарю!
28 Апреля 2015, 16:05:05
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86335
  • Репутация: +25417/-0
  • Сообщество PrestaShop
    • Просмотр профиля
1. Библиотека jQuery подключается в шаблоне.
2. Плагины jQuery также подключаются в модулях и шаблоне.
Не нужно подключать по нескольку библиотек jquery, это вызывает ошибку.
Проверьте версию jQuery в вашей теме, плагины, которые подключаются в вашей теме. Так как вы добавили можно делать только если нет нужных файлов.   
28 Апреля 2015, 18:40:46
Ответ #2
  • Новичок
  • *
  • Сообщений: 17
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо за ответ. Буду разбираться.
Может подскажите скрипт для прокрутки страницы вверх, который не составит особого труда внедрить.
Заранее благодарю!
28 Апреля 2015, 23:24:26
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 980
  • Репутация: +5/-0
  • Иногда заглядываю
    • Просмотр профиля
    • Помощь патентообладателям по продаже патентов.
Вставьте в футер:
<div align="right"> <a href="#" id="gotop"><img src="/img/стрелка.png"></a></div>
Не боги горшки обжигают, не зачем им такой хренью заниматься.
29 Апреля 2015, 10:41:26
Ответ #4
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22215
  • Репутация: +17111/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
В prestashop подключен плагин UItoTop jQuery Plugin с ним можно сделать такую кнопку.
1. В шаблоне добавить код:
<a id="toTop" href="#"><span id="toTopHover"></span>Вверх</a>
2. В js файле добавить код:
jQuery.noConflict()(function($){
$(window).load(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
});

3. Добавить стили для кнопки в css файл.
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
13 Мая 2015, 15:01:17
Ответ #5
  • Новичок
  • *
  • Сообщений: 42
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В prestashop подключен плагин UItoTop jQuery Plugin с ним можно сделать такую кнопку.
1. В шаблоне добавить код:
<a id="toTop" href="#"><span id="toTopHover"></span>Вверх</a>
2. В js файле добавить код:
jQuery.noConflict()(function($){
$(window).load(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});

});

3. Добавить стили для кнопки в css файл.
А в какие именно файлы нужно добавлять код? Если можно конкретнее, для меня это полные дебри.
13 Мая 2015, 16:26:06
Ответ #6
  • Новичок
  • *
  • Сообщений: 42
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
1. Библиотека jQuery подключается в шаблоне.
2. Плагины jQuery также подключаются в модулях и шаблоне.
Не нужно подключать по нескольку библиотек jquery, это вызывает ошибку.
Проверьте версию jQuery в вашей теме, плагины, которые подключаются в вашей теме. Так как вы добавили можно делать только если нет нужных файлов.
На просмотре кода элемента показывает здесь jQuery(document).ready(function() { ошибку. Как её исправить, простите за тупость.
13 Мая 2015, 17:35:31
Ответ #7
  • Новичок
  • *
  • Сообщений: 42
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Уважаемые, вот так выглядит часть файла
jQuery(document).ready(function() {

 //show new item panel
 $('.button-new-item').on('click', function() {
  $('.new-item').find('.item-container').slideToggle();
 });
Как она  должна выглядеть после редактирования?
И нужно ли в моем случае добавлять этот код
<a id="toTop" href="#"><span id="toTopHover"></span>Вверх</a> в шаблон?
13 Мая 2015, 17:36:58
Ответ #8
  • Ветеран
  • *****
  • Сообщений: 782
  • Репутация: +7/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Как файл называется?
13 Мая 2015, 17:46:07
Ответ #9
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86335
  • Репутация: +25417/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Для того чтобы добавить кнопку нужно:
1. Добавить в шаблон код, можно в footer.tpl
<a id="toTop" href="#"><span id="toTopHover"></span>Вверх</a>2. Добавить код в js файл, можно в global.js
jQuery.noConflict()(function($){
$(window).load(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
});
13 Мая 2015, 18:09:14
Ответ #10
  • Новичок
  • *
  • Сообщений: 42
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Как файл называется?
/theme/modules/ptsthemepanel/assets/js/admin.js
13 Мая 2015, 18:16:06
Ответ #11
  • Новичок
  • *
  • Сообщений: 42
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Для того чтобы добавить кнопку нужно:
1. Добавить в шаблон код, можно в footer.tpl
<a id="toTop" href="#"><span id="toTopHover"></span>Вверх</a>2. Добавить код в js файл, можно в global.js
jQuery.noConflict()(function($){
$(window).load(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
});
Спасибо, первый файл перепутал с этим <div style="opacity: 0.8; position: absolute; top: 450px; right: 0px; display:none;" class="scroll-to-top-button"></div>   Сам запутался и вас запутал. Пошел приводить мысли в порядок)))
13 Мая 2015, 23:10:00
Ответ #12
  • Новичок
  • *
  • Сообщений: 42
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля

2. Добавить код в js файл, можно в global.js
jQuery.noConflict()(function($){
$(window).load(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
});
Добавил, ничего не изменилось. Вернул назад.Вот код элемента, одинаково на всех неисправных модулях.
14 Мая 2015, 12:58:26
Ответ #13
  • Ветеран
  • *****
  • Сообщений: 33028
  • Репутация: +26761/-0
    • Просмотр профиля
Не понятно, что вы вообще хотите сделать?
Код добавляете для фронт-офиса, ошибка у вас в бек-офисе.
14 Мая 2015, 19:09:06
Ответ #14
  • Новичок
  • *
  • Сообщений: 42
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Не понятно, что вы вообще хотите сделать?
Код добавляете для фронт-офиса, ошибка у вас в бек-офисе.
Хотелось исправить ошибку, но моих знаний для этого очень мало. Ошибка заключается в том, что при открытии некоторых модулей для настройки, не отображаются инструменты настройки. Ранее выкладывал скрин. Мне посоветовали для устранения конфликта, подключить библиотеку jQuery. Воспользовался этим советом, но не помогло. Ошибка не исчезает. Возможно библиотека опаздывает с подключением, но без специалиста по JS мне не устранить эту проблему. Прошу прощения за несвязные объяснения, я не владею навыками программирования.