Автор Тема: Плавающий блок, замирающий над футером  (Прочитано 3572 раз)

01 Ноября 2014, 16:31:22
  • Фрилансер
  • *
  • Сообщений: 113
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Здравствуйте, и так у меня очередное усложнение... Хотелось бы прикрепить(position: fixed) блок фильтров, нашел скрипт но не могу его установить, подскажите в какой фаил его запихнуть ?
<style>
.prilip {
  position: fixed;
  z-index: 101;
}
.stop {
  position: relative;
}
</style>

<script>
  // document.documentElement.scrollHeight - высота веб-документа;
  // aside.offsetHeight - высота элемента
var aside = document.querySelector('aside'),
    t0 = aside.getBoundingClientRect().top,
    t1 = document.documentElement.scrollHeight - 800 - aside.offsetHeight;
window.addEventListener('scroll', function(e) {
  if (window.pageYOffset > t1) {
    aside.className = 'stop';
    aside.style.top = t1 - t0 + 'px';
  } else {
    aside.className = (t0 < window.pageYOffset ? 'prilip' : '');
    aside.style.top = '0';
  }
}, false);
</script>



Я так понимаю в самом скрипте нужно классы заменить, на мои, но если у меня там один айди и один класс, означает ли это что в скрипте вместо строчки aside.className = 'stop'; я должен прописать aside.idName = 'stop'; ?
01 Ноября 2014, 18:13:56
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 1217
  • Репутация: +30/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Этот скипт нужно адаптировать под модуль многоуровневой навигации. Сохранить в отдельном файле и добавить подключение в хук displayHeader.
public function hookHeader($params)
{
....
        $this->context->controller->addJS(($this->_path).'blocklayered.js');
        $this->context->controller->addJS(($this->_path).'myscript.js');
02 Ноября 2014, 12:02:44
Ответ #2
  • Фрилансер
  • *
  • Сообщений: 113
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
1. Адаптировать, вы имеете ввиду, заменить классы на свои?
2. Сохранить в отдельном файле, в файле .tpl  ??
3. Как добавить подключение в хук, типа написать: {include file="./blabla.tpl"} ?
02 Ноября 2014, 12:54:02
Ответ #3
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22126
  • Репутация: +17110/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
1.Заманить классы.
2. Сохранять код javacsript нужно в файле "название файла".js
3. Вам написали как добавить
$this->context->controller->addJS(($this->_path).'ваш файл.js');
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
02 Ноября 2014, 14:45:59
Ответ #4
  • Фрилансер
  • *
  • Сообщений: 113
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
1. Заменил классы, посмотрите правильно ли:
<script>
  // document.documentElement.scrollHeight - высота веб-документа;
  // aside.offsetHeight - высота элемента
var aside = document.querySelector('#layered_block_left'),
    t0 = aside.getBoundingClientRect().top,
    t1 = document.documentElement.scrollHeight - 800 - aside.offsetHeight;
window.addEventListener('scroll', function(e) {
  if (window.pageYOffset > t1) {
    aside.className = 'stop';
    aside.style.top = t1 - t0 + 'px';
  } else {
    aside.className = (t0 < window.pageYOffset ? 'layered_block_left' : '');
    aside.style.top = '0';
  }
}, false);
</script>

2.Сохранил фаил в моя тема\js\fixfelters.js

3.Правда не понял в какой фаил залить этот код:
public function hookHeader($params)
{
....
        $this->context->controller->addJS(($this->_path).'blocklayered.js');
        $this->context->controller->addJS(($this->_path).'fixfilters.js');
02 Ноября 2014, 16:10:32
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 763
  • Репутация: +6/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вы же модуль меняете, значит и сохранять файлы нужно в папку модуля - /modules/blocklayered/fixfelters.js
В хук добавлять тоже в этом модуле - /modules/blocklayered/blocklayered.php
03 Ноября 2014, 01:11:48
Ответ #6
  • Фрилансер
  • *
  • Сообщений: 113
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вы же модуль меняете, значит и сохранять файлы нужно в папку модуля - /modules/blocklayered/fixfelters.js
В хук добавлять тоже в этом модуле - /modules/blocklayered/blocklayered.php

Спасибо за ответ, все сделал, как Вы написали..теперь выбивает ошибку, не уверен правильно ли я классы заменил, подскажите как должно быть, а то в джаве вообще толку от меня ноль  :-[
03 Ноября 2014, 09:50:07
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 13287
  • Репутация: +14557/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В вашем файле только одна ошибка в 4 строке, в функции:
// rect is a DOMRect object with four properties: left, top, right, bottom
var rect = obj.getBoundingClientRect();
Возможно, ваш файл грузится раньше, чем jQuery. Может конфликт библиотек, плагинов. Тут нужен полный анализ. blocklayered очень капризный модуль, там много js функций и добавлять свои нужно осторожно. Плюс еще у вас показывает ошибки в других js файлов. Так что вполне возможно, что конфликт между старым и новым кодом.
03 Ноября 2014, 21:59:17
Ответ #8
  • Фрилансер
  • *
  • Сообщений: 113
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вы имеете в виду, что нужно заменить эту строку:
    t0 = aside.getBoundingClientRect().top,на ?
var rect = obj.getBoundingClientRect();
04 Ноября 2014, 12:10:20
Ответ #9
  • Ветеран
  • *****
  • Сообщений: 13287
  • Репутация: +14557/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Нет, эта функция у вас вызывает ошибку. Так как неправильно передается значение переменной. Может ид такого нет, может несколько значений у этого id.