Перейти к содержанию
komarekk33

[Решено] jQuery плагин на главной странице

Рекомендуемые сообщения

Здравствуйте.

 

Нужно встроить jQuery плагин в featured.tpl:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('button').click(function() {
jQuery.scrollTo('#target-el');
});
});
</script>
Как это сделать?

 

Заранее спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

зайти в  featured.tpl и вставить 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

зайти в  featured.tpl и вставить 

Пробовал – не работает.

 

Может как-то по-особенному вставлять нужно? Подскажите, пожалуйста.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

это скрипт от чего вообще ? какая-то карусель ? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Нет, это скроллинг:

http://xiper.net/collect/js-plugins/effects/scrollto

У Вас наверно сам плагин не подключен, проверьте в хедере 

 

 

Не посмотрел что не тот скролл и написал, но тоже может пригодиться 

 

так вы не туда вставляете, данная приблуда вставляется в footer.tpl

$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});

if ($(this).scrollTop() > 100 <= это значения в px через сколько должна появляться кнопка прокрутки, в расчете от низа экрана 

600 <= время скрола в миллисекундах

 

Кнопка <a href="#" class="scrollup">Scroll</a> добавляете тоже же в футер  

 

.scrollup {
    display: none;
   а дальше сами
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

У Вас наверно сам плагин не подключен, проверьте в хедере 

 

 

Не посмотрел что не тот скролл и написал, но тоже может пригодиться 

 

так вы не туда вставляете, данная приблуда вставляется в footer.tpl

$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});

if ($(this).scrollTop() > 100 <= это значения в px через сколько должна появляться кнопка прокрутки, в расчете от низа экрана 

600 <= время скрола в миллисекундах

 

Кнопка <a href="#" class="scrollup">Scroll</a> добавляете тоже же в футер  

 

.scrollup {
    display: none;
   а дальше сами
}

 

Вот header.tpl:

 

3qknm3r.png

 

Вот featured.tpl:

 

3qknmlN.png

 

Всё ещё не работает.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

1) откуда у вас в featured.tpl взялись теги head?!

 

2) подобный код нужно вставлять в конце шаблона

уберите теги head и пробуйте код в конце featured.tpl вставить

 

3) если что-то из кода js не работает - в первую очередь смотрите консоль браузера

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Обновил jQuery и плагин, переместил код в нижнюю часть документа – всё работает.

 

Спасибо за помощь.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От klaos27
      300.00 руб
      Скачать/Купить дополнение


      OCDfeatured - рекомендуемые товары
      OCDfeatured - рекомендуемые товары
      Многофункциональный модуль для вывода рекомендуемых товаров на вашем сайте. 

      Нового ничего не придумано. Обычный модуль рекомендуемых товаров со своими настройками.

      Настройки:
      1) Три режима отображения:
         - горизонтальные вкладки
         - вертикальные вкладки
         - если ничего не выбрано, то блоки товаров выводятся один под другим
      2) Мультиязычное название вкладки
      3) Рядом с названием вкладки можно отобразить иконку Font Awesome или загрузить свое изображение
      4) Мультиязычный баннер для каждой вкладки + расположение баннера (справа, слева)
      5) Статус вкладки
      6) Порядок сортировки

      Настройки товаров:
      1) Сортировка
        - заданная в товарах
        - по названию
        - по дате добавления
        - по цене
        - по рейтингу
        - по остатку на складе
      2) Показ категории, в которой находится товар
      3) Показ модели
      4) Показ краткого описания + настройка количества символов
      5) Показ рейтинга
      6) Показ артикула
      7) Показ остатка на складе
      8) Показ наличия на складе
      9) Настройки показа атрибутов товаров:
         - разделитель для атрибутов
         - замена значения атрибута на название
      10) Карусель
          - автопрокрутка
          - скорость автопрокрутки
          - навигация
          - пагинация
          - количество рядов товаров
          - лимит товаров в видимой части карусели (неограниченное количество разрешений экрана)
      11) Прочие настройки
          - текст на кнопке "В корзину"
          - текст на кнопке "В корзину" когда товара нет в наличии
          - настройка отключения добавления товара в корзину когда его нет в наличии
          - показ "В Закладки"
          - показ "В Сравнение"

      Уровни доступа:
      1) Показ баннеров для разных магазинов
      2) Показ баннеров для разных групп покупателей
      К каждому модулю можно подключить пользовательский шаблон, тем самым при обновлении ммодуля не потеряются какие-либо сделанные изменения.


      Не перезаписывает системных файлов движка
      Не использует VQmod
      Не использует OCMOD
      Не использует ioncube
       
      Демо модуля:
      1) Слайдер товаров
      2) Карусель
      3) Без карусели

      Административная часть: http://demo.oc-day.com/admin/index.php?route=extension/module/ocdfeatured
      Логин: demo
      Пароль: demo

      Установка
      1) Загрузить архив соответствующей версии через Дополнения / Установка дополнений (Extensions / Extension Installer)
      2) Перейти в Система/Группы пользователей и для администратора установить права доступа (в блоках "Разрешить просмотр" и "Разрешить редактировать" отметить галочкой extension/module/ocdfeatured)
      3) В настройках модуля на вкладке "Доступы" обязательно отметить магазин и группу покупателей, для которых необходимо показывать модуль.
      4) Вывести созданный модуль на необходимой странице.

      Лицензия!
      1) Данный модуль реализуется по принципу: одна лицензия - один домен.
      2) Запрещена перепродажа модуля без согласия автора.
      3) Запрещена передача модуля третьим лицам, распространение и публикация от своего имени без получения разрешения автора модуля.
      Добавил klaos27 Добавлено 04.08.2018 Категория Модули Системные требования Сайт разработчика Старая цена 500 Метод активации По запросу в ЛС
      По запросу на почту Ioncube Loader Нет OpenCart 2.3 ocStore 2.3 OpenCart.Pro, ocShop Opencart.pro 2.3  
    • От klaos27
      OCDfeatured - рекомендуемые товары
      Многофункциональный модуль для вывода рекомендуемых товаров на вашем сайте. 

      Нового ничего не придумано. Обычный модуль рекомендуемых товаров со своими настройками.

      Настройки:
      1) Три режима отображения:
         - горизонтальные вкладки
         - вертикальные вкладки
         - если ничего не выбрано, то блоки товаров выводятся один под другим
      2) Мультиязычное название вкладки
      3) Рядом с названием вкладки можно отобразить иконку Font Awesome или загрузить свое изображение
      4) Мультиязычный баннер для каждой вкладки + расположение баннера (справа, слева)
      5) Статус вкладки
      6) Порядок сортировки

      Настройки товаров:
      1) Сортировка
        - заданная в товарах
        - по названию
        - по дате добавления
        - по цене
        - по рейтингу
        - по остатку на складе
      2) Показ категории, в которой находится товар
      3) Показ модели
      4) Показ краткого описания + настройка количества символов
      5) Показ рейтинга
      6) Показ артикула
      7) Показ остатка на складе
      8) Показ наличия на складе
      9) Настройки показа атрибутов товаров:
         - разделитель для атрибутов
         - замена значения атрибута на название
      10) Карусель
          - автопрокрутка
          - скорость автопрокрутки
          - навигация
          - пагинация
          - количество рядов товаров
          - лимит товаров в видимой части карусели (неограниченное количество разрешений экрана)
      11) Прочие настройки
          - текст на кнопке "В корзину"
          - текст на кнопке "В корзину" когда товара нет в наличии
          - настройка отключения добавления товара в корзину когда его нет в наличии
          - показ "В Закладки"
          - показ "В Сравнение"

      Уровни доступа:
      1) Показ баннеров для разных магазинов
      2) Показ баннеров для разных групп покупателей
      К каждому модулю можно подключить пользовательский шаблон, тем самым при обновлении ммодуля не потеряются какие-либо сделанные изменения.


      Не перезаписывает системных файлов движка
      Не использует VQmod
      Не использует OCMOD
      Не использует ioncube
       
      Демо модуля:
      1) Слайдер товаров
      2) Карусель
      3) Без карусели

      Административная часть: http://demo.oc-day.com/admin/index.php?route=extension/module/ocdfeatured
      Логин: demo
      Пароль: demo

      Установка
      1) Загрузить архив соответствующей версии через Дополнения / Установка дополнений (Extensions / Extension Installer)
      2) Перейти в Система/Группы пользователей и для администратора установить права доступа (в блоках "Разрешить просмотр" и "Разрешить редактировать" отметить галочкой extension/module/ocdfeatured)
      3) В настройках модуля на вкладке "Доступы" обязательно отметить магазин и группу покупателей, для которых необходимо показывать модуль.
      4) Вывести созданный модуль на необходимой странице.

      Лицензия!
      1) Данный модуль реализуется по принципу: одна лицензия - один домен.
      2) Запрещена перепродажа модуля без согласия автора.
      3) Запрещена передача модуля третьим лицам, распространение и публикация от своего имени без получения разрешения автора модуля.
    • От Exzik
      Добрый день , форумчане 
      Появилась проблема, которую я не могу решить сам 
      На страницу категорий добавил скрипт прокрутки, работает как часы  и грузит все отлично.
      Проблема в том, что из-за этого скрипта перестали работать кнопки (Добавить в корзину и т.д )
      Не могли бы подсказать в чем именно проблема ? 
      Ссылка на сайт  тут
       
       
      Скрипт 
      $(function() { function scrollLoader() { console.log('---', 123) if ($(window).scrollTop() == $(document).height() - $(window).height()) { console.log('---', 'ok') setTimeout(function() { $('#endless').trigger('click') }, autoscroller.delay) } } var autoscroller = [] //setting autoscroller.hidePagination = 1 autoscroller.autoScroll = 0 autoscroller.catcher = '#endless' autoscroller.delay = 1000 autoscroller.loading = 0 $(window).scroll(function() { scrollLoader() if (inWindow(autoscroller.catcher) && !autoscroller.loading && autoscroller.autoScroll) { autoscroller.loading = true $('#endless .fa-refresh').addClass('btn-load-new') } }) if ($('.category-catalog').length) { if ($('.pagination').length && !$('.pagination > li:last-child').hasClass('active')) { $('#content col-12 col-md-9 order-2').hide() $('.pagination') .parent() .before( '<div class="col-xs-12 text-center"><button class="btn btn-success btn-lg" id="endless" style="margin: 15px auto; padding: 10px 120px;" ><span class="btn-load-new">Еще товары</span></i></button></div>') $('#endless').on('click', function(e) { var lastProduct = $('.pagination') .closest('.category-catalog') .find('.front-top-products li:last-child') var nextPage = $('ul.pagination li.active').next().find('a:first-child') var nextPageHref = nextPage.attr('href').substring(7) // console.log('---',nextPageHref); // console.log('---', nextPage.attr('href')); $.ajax({ url: 'https://' + nextPageHref, beforeSend: function() { $('#endless .fa-refresh').addClass('btn-load-new') }, success: function(data) { var products = $(data).find('.category-catalog .front-top-products') lastProduct.after(products) $('.pagination').html($(data).find('.pagination > *')) nextPage = $('ul.pagination li.active').next().find('a:first-child') if (nextPage.length == 0) { $('#endless').remove() } else { $('#endless .fa-refresh').removeClass('btn-load-new') } autoscroller.loading = 1 }, }) return false }) } } function inWindow(el) { if ($(el).length) { var scrollTop = $(window).scrollTop() var windowHeight = $(window).height() var offset = $(el).offset() if (scrollTop <= offset.top && ($(el).height() + offset.top) < (scrollTop + windowHeight)) { return true } } return false } })  
    • От Aky
      Как передать POST параметр через ajax в файл controller модуля OpenCart ?
       
      Есть модуль "latest"  Файл контроллера latest.php, нужно передать туда параметр width через Ajax/Jquery  
       
      Как обратится к этому файлу? 
       
      Как работать с Ajax знаю, как параметры передать знаю, как принять знаю, но как обратится к нужному файлу в OpenCart?
       
      При попытках обращения по "url:' скрипт выдает ошибку  "404 (not found)"
       
      Пробовал вот так:
      url: 'index.php?route=extension/module/latest',  url: 'index.php?route=module/latest',  url: '/catalog/controller/extension/module/latest',   
      Если перейти на прямую по ссылки: "/catalog/controller/extension/module/latest.php"  выдает ошибку HTTP ERROR 500
    • От Techno1og
      Обнаружили на страницах сайта множество ссылок дублирующих друг друга, эти ссылки располагаются в разных блоках, виджетах и разделах сайта.
       
      Например в  блоке с новостями: ссылка дублируется аж 3 раза: ссылка на статью, ссылка с изображения, ссылка на кнопке подробнее. Есть дублирующие ссылки в главном слайдере, дубли в миниатюрах каждого слайда, Дубли в кнопках вида «далее», «подробнее» - даже во внутренних ссылках нельзя использовать не точные анкоры, анкор должен соответствовать теме URL , поэтому такие кнопки лучше завернуть в JS.   Категории товаров.  Принято считать, что сквозные элементы сайта, в частности меню, поисковиками не учитываются, либо учитываются очень слабо, т.к. присутствуют на каждой странице. Тем не менее имеют место быть различные варианты. Возьмем для примера 4 крупных интернет-магазина:  www.mvideo.ru, www.eldorado.ru и www.dns-shop.ru, www.tehnosila.ru. На сайте М.Видео абсолютно всё меню навигации с категориями и подкатегориями закрыто в тег noindex. Аналогичная картина на сайте Эльдорадо. Закрывать меню в noindex имеет смысл только чтобы не учитывать его текстовую составляющую, чтобы меню не попадало в сниппет на поисковой выдаче, чтобы не мешало определению релевантной страницы. Если запустит Краулер и посмотреть как он определить релевантные страницы, то можно увидеть что некоторые стр. определяются не верно. Так же есть повторяющиеся ссылки в Footer , микроразметке, и т.д, и прочих элементах...  
      судя по отчету ScreaminFrog - google видит все  внутренние ссылки, воспринимает, и распределяет вес с учетом всех внутренних факторов. Ссылки нужно закрыть, но по умолчанию такого решения в Opencart не предлагается, поэтому ищем альтернативные способы, изучаем правила закрытия ссылок:
       
      Внутренние ссылки не должны содержать атрибута rel=”nofollow”. В противном случае вес со страницы будет утекать, то есть будет попросту испаряться. Атрибут rel=”nofollow” необходимо использовать в редких случаях случаях, когда ссылка ведет на неиндексируемую страницу. Ссылки всегда должны вести на индексируемые страницы сайта, иначе будет повторяться история, описанная в пункте №1 выше. Даже при формировании внутренних ссылок при перелинковке следует использовать уникальные анкоры. Внутренние ссылки всегда должны быть прямыми и идти строго на целевые страницы. Это значит, что переход по ссылке должен отдавать ответ 200 OK. Я не говорю о том, что битые ссылки недопустимы, это очевидно, а я говорю о том, что ссылки должны идти без промежуточных 301-редиректов (а если там еще и не 301, а 302-редирект, то совсем беда). Не редко, когда меняют структуру, либо по вине верстальщика  
      отследить на глаз многие мелочи трудно, и чтобы потом не удивляться - советую использовать краулер. (XENU или родной Screaming Frog)
       
      Нашел следующие методы закрытия внешних и внутренних ссылок на jQuery AJAX:
      (взяты со стороннего ресурса; там где проводили эксперимент пишут, что все способы  рабочие)
       
      Вариант №1 —
      <a href="#" class="link" data-link="http://goo.gl">ссылка</a> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('a.link').click(function(){window.open($(this).data("link"));return false;});</script> В этом варианте вам не надо будет производить никаких дополнительных доработок стилей в css, наша ссылка будет выглядеть как и все остальные «нормальные» ссылки.
      Вариант №2 —
      Код ссылки на странице:
      <a href="#" class="link" rel="http://goo.gl">ссылка</a> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('a.link').click(function(){window.open($(this).attr("rel"));return false;});</script> Вариант №3 —
      Код ссылки на странице:
      <span class="hidden-link" data-link="http://goo.gl">ссылка</span> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('.hidden-link').click(function(){window.open($(this).data('link'));return false;});</script> как пишет автор данный вариант100% не вызовет никаких подозрений у поисковика, так как даже структурно в коде нет ссылки, а просто кусок текста (он же анкор) выделен спаном <span>, что довольно часто используется при разметке документов.
      Однако и отображаться такая «ссылка» будет как обычный текст на странице. Придется пошаманить с css, чтобы имитировать ссылку. Например, добавить в свой css:
      span.hidden-link { color: #00ff00; /*-цвет ссылки-*/ text-decoration: underline; /*-подчеркивание-*/ cursor: pointer; /*-указатель в виде пальца-*/ } Вариант №4 — Еще один вариант скрытия ссылки
      <span class="hidden-link" data-link="http://goo.gl">ссылка</span> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('.hidden-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).text()+'</a>';})</script> Отличие этого способа от предыдущего в том, что js-скрипт меняет на странице html-код «якобы» ссылки на нормальную ссылку после полной загрузки документа. Поэтому никаких правок в css вносить не придется, а ссылка будет открываться как и обычная.
      Способ так же прошел проверку экспериментом — ссылка не индексируется и не видится поисковыми роботами и, соответстенно, не учитывается.
       
      Вариант №5 — Универсальный вариант скрытия любого контента, например, картинок
      ..... Предыдущий вариант не работает в том случае, если в анкоре ссылки стоит картинка. А такие варианты довольно часто встречаются: счётчики, информеры, партнёрские баннеры. Поэтому предлагаю использовать вместо метода .text () метод .html (), он будет более универсальным.
      Код элемента, в данном случае ссылки, на странице, будет такой:
      <span class="hidden-link" data-link="http://goo.gl">внешняя ссылка</span> * — Чтобы закрыть картинку, в коде, указанном выше, необходимо заменить «внешняя ссылка» на код <img src="...">.
      Скрипт, который будет обрабатывать ссылку или любой другой элемент:
      <script>$('.hidden-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).html()+'</a>';})</script> Как вы понимаете, отличие данного способа от всех других в том, что в скрипт можно «спрятать» не только ссылку, но и картинку со ссылкой или еще что-нибудь. Все проверено — все работает
       
      6.  Вариант №6 —  как пишут в коментариях самый лучший.
      $('.hidden-link').replaceWith (function (){return'<a href="'+$(this).data ('link')+'" title="'+$(this).text ()+'">'+$(this).html ()+'</a>';})  
      Интересно кто какие варианты использует и на что нужно обратить внимание еще.
       
       
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.