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

Вопрос программистам jQuery (display: list / grid)

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

Правильно ли я понимаю, что отображение товаров на странице категории формируется  и списком, и сеткой при загрузке страницы. А скрипт по клику просто показывает нужный блок и скрывает не нужный?

 

Проблема возникла в следующем:

У меня на элемент внутри класса .name подвешен скрипт...

Для каждого товара формируется уникальный id элемента и выполнение скрипта привязывается к нему (скрипт выполняется по событию hover())

И все прекрасно работает, пока не переключишь list / grid.

 

Мне кажется что это связано с конфликтом id'шников, т.к. если мое предположение в начале поста верно, то на 1 странице я получаю 2 элемента с одним и тем же id

Сейчас я решаю эту проблему подвешиванием функции location.reload() на переключатели, но это как-то не комильфо...

 

Верен ли ход моих мыслей?

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


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

 

Правильно ли я понимаю, что отображение товаров на странице категории формируется  и списком, и сеткой при загрузке страницы. А скрипт по клику просто показывает нужный блок и скрывает не нужный?

И да, и нет.

Система отдает некую структуру, например в list

Условно

list
  div
   image
   name
   description
  /div
/list

По идее переключив в grid только меняются только стили

 

Но, в зависимости от дизайна блоки внутри могут перемещаться - так иногда проще для верстки

 

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

Пропадут только при удалении/ создании новых блоков

 

Поэтому в функции display нужно стараться не испортить существующие events

  • +1 1

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


Ссылка на сообщение
Поделиться на другие сайты
По идее переключив в grid только меняются только стили

 

Это было бы логично... Я так изначально и предполагал,... Но тогда для меня остается загадкой почему при переключении скрипт не выполняется, ведь все что мы изменили - это стили... Как только страница обновляется все сразу работает...

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


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

Показывайте проблему, будем решать вместе

  • +1 1

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


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

сейчас скину в ЛС... для ветки слишком объемно...

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


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

по дефолту перелючение list/grid не скрывает/показывает определенные блоки, а по сути перевёрстывает один блок отображения товаров.

начало этого рендеринга в режиме list

            html  = '<div class="right">';
            html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
            html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
            html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
            html += '</div>';            

и начало в режиме grid

            html = '';
            
            var image = $(element).find('.image').html();
            
            if (image != null) {
                html += '<div class="image">' + image + '</div>';
            }
            
            html += '<div class="name">' + $(element).find('.name').html() + '</div>';
            html += '<div class="description">' + $(element).find('.description').html() + '</div>';

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

в общем, лучше адрес с проблемой укажите )

  • +1 1

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


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

в общем, лучше адрес с проблемой укажите )

Пока не хочу светить... т.к. делаю шаблон на продажу... сейчас приглашу Вас в разговор в личке

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


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

ой...

не делайте так

<div class="name">
				<div class="scroll-box" id="scroll-box1">
					<div class="scroller" id="scroller1">
						<a href="/index.php?route=product/product&path=20_26&product_id=42">Apple Cinema 30"  длинное название товара</a>
					</div>
				</div>
</div>

		<script type="text/javascript">
			$(document).ready(function(){
					$jScroller.add("#scroll-box1","#scroller1","left",1, true);
			});
		</script>

После рендеринга - получите весь список элементов .name a

Затем оберните link (а) в нужные контейнеры,

Затем привяжите сам скроллер...

 

Это я к чему... Не усложняйте верстку.

 

И... было бы правильным display()  выполнить в блоке $(document).ready

  • +1 1

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


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

Спасибо, выручили... а то уже голову сломал...

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


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

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

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

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

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

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

Войти

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

Войти

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

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


      Opencart минификация html, text/css, text/javascript
      Минификация (minify) — это простой подход для уменьшения размеров загружаемого контента. В процессе сжатия все комментарии к коду, переносы строк, лишние табы и пробельные символы удаляются. Это позволяет сэкономить 10...20% от оригинального размера загружаемого документа.
       
      Предлагаю свое решение минификации для Опенкарт.
       
      Пример работы можно увидеть на сайтах:
      1. Кастомный шаблон
      2. Кастомный шаблон
      3. Шаблон Barbara + JetCashe
       
      Данное решение совместимо с JetCashe, в котором на данный момент присутствует только html минификация, сделанная на основе mrclay/minify с доработками. В моем решении минификация html происходит по другой схеме, что позволяет минифицировать не только html, но и все встроенные CSS и JS на странице.
       
      Данное предложение действует для версий Опенкарт 2.х.
      Добавил ibond Добавлено 15.02.2019 Категория Услуги  
    • От ibond
      Минификация (minify) — это простой подход для уменьшения размеров загружаемого контента. В процессе сжатия все комментарии к коду, переносы строк, лишние табы и пробельные символы удаляются. Это позволяет сэкономить 10...20% от оригинального размера загружаемого документа.
       
      Предлагаю свое решение минификации для Опенкарт.
       
      Пример работы можно увидеть на сайтах:
      1. Кастомный шаблон
      2. Кастомный шаблон
      3. Шаблон Barbara + JetCashe
       
      Данное решение совместимо с JetCashe, в котором на данный момент присутствует только html минификация, сделанная на основе mrclay/minify с доработками. В моем решении минификация html происходит по другой схеме, что позволяет минифицировать не только html, но и все встроенные CSS и JS на странице.
       
      Данное предложение действует для версий Опенкарт 2.х.
    • От Dragon
      jQuery async load
      Скачать/Купить дополнение Модуль позволяет переместить javascript-скрипты из шапки в подвал сайта и подгружать их асинхронно, тем самым ускорить отрисовку страницы, увеличить баллы в Google Pagespeed и повысить ранжирование в поисковой выдаче.

      Важно: модуль распространяется по принципу – одна лицензия на один домен.
       
      С его помощью можно добиться 100/100 баллов в Google PageSpeed Insights. Но только если вы выполнили все рекомендации Google PageSpeed Insights, кроме пункта "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы". В противном случае результат может быть всего на пару процентов лучше. 
      Демо: https://matuvi.com/oc2/async/


       
      Внимание. На демо помимо самого модуля оптимизированы изображения и включен кэш (не входит в модуль). 

      Протестировано на версиях OpenCart/ocStore 2.0.1.1, 2.1.0.2 и 2.3.0.2.3 на стандартных шаблонах со стандартным набором модулей.
      Автор модуля не гарантирует стабильную работу со сторонними плагинами и шаблонами.

      Теоретически модуль будет работать и на других версиях и сборках (пока кроме 3+).
      Если самостоятельно модуль установить не удалось: пишите в тему поддержки - поможем настроить.
      Добавил Dragon Добавлено 22.01.2018 Категория Кэширование, сжатие, ускорение Системные требования Сайт разработчика https://matuvi.com/ Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика  
    • От Dragon
      Модуль позволяет переместить javascript-скрипты из шапки в подвал сайта и подгружать их асинхронно, тем самым ускорить отрисовку страницы, увеличить баллы в Google Pagespeed и повысить ранжирование в поисковой выдаче.

      Важно: модуль распространяется по принципу – одна лицензия на один домен.
       
      С его помощью можно добиться 100/100 баллов в Google PageSpeed Insights. Но только если вы выполнили все рекомендации Google PageSpeed Insights, кроме пункта "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы". В противном случае результат может быть всего на пару процентов лучше. 
      Демо: https://matuvi.com/oc2/async/


       
      Внимание. На демо помимо самого модуля оптимизированы изображения и включен кэш (не входит в модуль). 

      Протестировано на версиях OpenCart/ocStore 2.0.1.1, 2.1.0.2 и 2.3.0.2.3 на стандартных шаблонах со стандартным набором модулей.
      Автор модуля не гарантирует стабильную работу со сторонними плагинами и шаблонами.

      Теоретически модуль будет работать и на других версиях и сборках (пока кроме 3+).
      Если самостоятельно модуль установить не удалось: пишите в тему поддержки - поможем настроить.
    • От 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
  • Последние посетители   0 пользователей онлайн

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

×

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

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