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

Jquery событие на изменение контейнера товаров

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

Добрый день! Знатоки, кто разбирается в jquery, подскажите, можно ли отловить действие, которое я сейчас опишу. У меня стоит filter pro от freelancer, и мне необходимо выполнять javascript каждый раз, когда контейнер product-grid меняется. То есть либо там подгружаются товары при переходе по страницам (фильтра, которые ajaxом берутся), либо при выборе опции у фильтра тоже страница меняется и мой яваскрипт выполняться должен. Я сперва вызывал мою функцию напрямую в js фильтра, в функции getCont - но если не кэшировано при переходе по страницам появлялись косяки. Помогите чем можете, хоть советами, хоть маленьким кусочком кодика. Ocstore 1.5.5.1.2

Изменено пользователем chemark23

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


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

Еще можно попробовать отлавливать ajaxComplete

$(document).ajaxComplete(function(event, request, settings) {
  if (request['status'] == 200) {
    if (settings['url'] == 'index.php?route=.. get/filter/products ..') {
      // Update content
    }  
    
    if (settings['url'] == 'index.php?route=.. get/products/options ..') {
      // Update content
    }      
  }   
});
  • +1 1

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


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

Не получается. Есть функция 

 
function equalheight(container){
            
        var currentTallest = 0,
            currentRowStart = 0,
            rowDivs = new Array(),
            $el,
            topPosition = 0, a = 0;
            
            $(container).each(function(){
                $el = $(this);
                $($el).height('auto');
                topPosition = $el.position().top;
                if(currentRowStart != topPosition){
                    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++){
                        rowDivs[currentDiv].height(currentTallest);
                    }
                    
                    rowDivs.length = 0;
                    currentRowStart = topPosition;
                    currentTallest = $el.height();
                    rowDivs.push($el);
                } else {
                    rowDivs.push($el);
                    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
                }
                for(currentDiv = 0; currentDiv < rowDivs.length; currentDiv++){
                    rowDivs[currentDiv].height(currentTallest);
                    
                }
                              });
        }

Она вычисляет наибольшую высоту между соседними блоками на одном ряду. Вызываю обработчиками

.resize и .load . Всё работает, переходит по страницам, каждая страница выводится как и задумывалось.

Но в категориях у меня стоит FilterPro, очень хорошая и удобная вещь, отказываться я от него конечно не буду.

 

 

И так, есть файл filterpro_products.tpl - он можно сказать заменяет определенный блок в category.tpl, который выводит товары (product-list/grid). 

<div class="product-grid">
  <div>

     <div class="equalheight">
     </div>

     <div class="cart">
     </div>

  </div>
</div>

Работаем с блоком equalheight. Хочется на все страницах получать блоки equalheight одинаковой высоты. Но пока что (спасибо Otvet) получилось так. Первая страница с фильтром норм, последующая рушится, высота блоков становится непонятная. Если обновить страницу или заново на неё перейти, всё хорошо, я так понимаю с кэшем связано. Ещё фото прикреплю для наглядности. Прошу помощи

U9Hte7bfAqc.jpg

ZSeOnJgkt24.jpg

 

Вызываю в filterpro_products.tpl таким образом:

            $(document).ajaxComplete(function(event, request, settings) {
  if (request['status'] == 200) {
    if (settings['url'] == 'index.php?route=module/filterpro/getproducts') {
      equalheight('.equalheight');
    }  
    
    if (settings['url'] == 'index.php?route=module/filterpro/getproducts') {
      equalheight('.equalheight');
    }      
  }    
});
Изменено пользователем chemark23

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


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

Если тупо вызывать функцию каждые 100 миллисекунд всё пашет, но лишняя нагрузка на браузер

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


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

Есть подозрение, что это связано с незагруженными картинками. Или частично загруженными.

 

Попробуйте эту строку:

currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

Заменить на это:

$el.find('img').height(0);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
$el.find('img').height('auto');
Изменено пользователем mpn2005

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


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

Точнее там немного не так:

Надо завети пустой div для выравнивания.

И туда писать разность высоты блока (с картинками нулевой высоты) и максимальной высоты (с картинками нулевой высоты).

 

Вот пример функции:

function setEqualHeight(cols, align) {
    var maxh = 0;
    $(cols).find('img').height(0);
    $(cols).each(function(){
        if($(this).height() > maxh) {
            maxh = $(this).height();
        }
    });
    $(cols).each(function(){
        $align = $(this).find(align).first();
        $align.height($align.height() + maxh - $(this).height());
    });
    $(cols).find('img').height('auto');
}

Вот приер вызова:

setEqualHeight('.product-grid > div', '.equalheight');

где .equalheight - это пустой див для выравнивания.

 

Ну и дописать на построчную работу всего этого.

Изменено пользователем mpn2005
  • +1 1

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


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

Точнее там немного не так:

Надо завети пустой div для выравнивания.

И туда писать разность высоты блока (с картинками нулевой высоты) и максимальной высоты (с картинками нулевой высоты).

 

Вот пример функции:

function setEqualHeight(cols, align) {
    var maxh = 0;
    $(cols).find('img').height(0);
    $(cols).each(function(){
        if($(this).height() > maxh) {
            maxh = $(this).height();
        }
    });
    $(cols).each(function(){
        $align = $(this).find(align).first();
        $align.height($align.height() + maxh - $(this).height());
    });
    $(cols).find('img').height('auto');
}

Вот приер вызова:

setEqualHeight('.product-grid > div', '.equalheight');

где .equalheight - это пустой див для выравнивания.

 

Ну и дописать на построчную работу всего этого.

спасибо. я попытался так сделать, но что-то не вышло. Но я согласен, что скорее всего это из-за того, что картинки не успевают подгрузится. Эх, ну может функция-обработчик какая есть. Ну уже всё перелопатил...

 

Теперь я уже в самом коде фильтра .js поставил вызов функции с задержкой в 1 сек, всё работает. Но это всеравно не верно, ведь сервер может и дольше обрабатывать запрос. Нужно как-то автоматизировать...

Изменено пользователем chemark23

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


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

С задержкой это вообще не вариант.

С кртиками точно всё верно сделали?

Элемент .equalheight должен быть именно пустым. например в конце каждого блока.

Туда записывается дельтовка по высоте между блоком и максимальной выстотй.

Что и приводит к выравниванию.

P.S.: Этот блок логично расположить сразу после названия товара.

Изменено пользователем mpn2005

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


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

С задержкой это вообще не вариант.

С кртиками точно всё верно сделали?

Элемент .equalheight должен быть именно пустым. например в конце каждого блока.

Туда записывается дельтовка по высоте между блоком и максимальной выстотй.

Что и приводит к выравниванию.

P.S.: Этот блок логично расположить сразу после названия товара.

Я так и делал. Поместил equalheight каждому блоку, перед кнопкой корзины. Но я ещё раз попробую так сделать завтра, может просто не получилось.

 

А ещё потестировав всё, я точно понял причину. И так, если ставим задержку 100 миллисекунд, то примерно половина блоков уже нормально выглядят, другая половина ещё нет, 200 миллисекунд уже хватает для страницы. Нужно вызывать мою функцию в тот момент, когда произошел ajax запрос и при это все картинки блока .product-grid были загружены.

Изменено пользователем chemark23

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


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

Кто-нибудь может знает, как запустить функцию после того, как получен ajax ответ и все элементы этого запроса уже подгрузились в определенном блоке? Ну всю голову сломал, не могу ответ найти. Потому-что моему скрипту нужно знать высоты всех элементов, чтобы потом их переопределить

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


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

Не знаю почему не получилось, но я описанным способом делал что бы небыло зависимости от картинок.

Скинте в личку ссылку с реализацией по моему примеру.

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


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

Точнее там немного не так:

Надо завети пустой div для выравнивания.

И туда писать разность высоты блока (с картинками нулевой высоты) и максимальной высоты (с картинками нулевой высоты).

 

Вот пример функции:

function setEqualHeight(cols, align) {
    var maxh = 0;
    $(cols).find('img').height(0);
    $(cols).each(function(){
        if($(this).height() > maxh) {
            maxh = $(this).height();
        }
    });
    $(cols).each(function(){
        $align = $(this).find(align).first();
        $align.height($align.height() + maxh - $(this).height());
    });
    $(cols).find('img').height('auto');
}

Вот приер вызова:

setEqualHeight('.product-grid > div', '.equalheight');

где .equalheight - это пустой див для выравнивания.

 

Ну и дописать на построчную работу всего этого.

Благодарю, Ваш метод работает!

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


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

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

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

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

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

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

Войти

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

Войти

  • Последние посетители   0 пользователей онлайн

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

×

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

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