Как сделать скролл при нажатие на катогорию товаров в мобильной версии сайта на WordPress Woocommerce?

Ссылка скопирована
WordPress
1 ответ

Всем привет!
В мобильной версии сайта nowal-wear.ru в разделе каталоги странно работает отображение товаров при нажатие на любую категорию: сначала выводятся категории, при нажатие страница обновляется, новые товары появляются в самом низу. Поэтому вопрос: как сделать так, чтобы при нажатие на категорию сайт прокручивался вниз к товарам?

Как сделать скролл при нажатие на катогорию товаров в мобильной версии сайта на Wordpress Woocommerce?

Как сделать скролл при нажатие на катогорию товаров в мобильной версии сайта на Wordpress Woocommerce?

Дополнительно:

Ответы:

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

1. Прикрутить id к элементу, до которого необходима прокрутка, например <div id="test">products...</div>.
2. Ссылке указать якорь с id этого элемента, например <a href="#test">Ссылко</a>.
3. Жмякнуть по ссылке.

  • Большое спасибо, попробую; так и думал, что сделать якорь через код, но полагался на надежу, что где-то в настройках можно покапаться
  • mishee, если это меню формируется не плагином - то Вы не сможете из админки его поправить. И наоборот, если меню формируется плагином из админки, то не получится изменить ссылки в самой теме wp и придется переписывать плагин (если же в нем нет возможности указать свою ссылку).
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Юрий Linux Ответ

Чтобы на мобильной версии после выбора категории WooCommerce страница прокручивалась к товарам, проще всего использовать якорь. Нужно, чтобы блок со списком товаров имел ID, например products-list, а ссылки категорий вели не просто на URL категории, а на URL с якорем #products-list.

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

&lt;div id="products-list"&gt;
  ... товары ...
&lt;/div&gt;
 
&lt;a href="/product-category/kurtki/#products-list"&gt;Куртки&lt;/a&gt;

&lt;div id="products-list"&gt; ... товары ... &lt;/div&gt; &lt;a href="/product-category/kurtki/#products-list"&gt;Куртки&lt;/a&gt;

Если ссылки генерирует WooCommerce/тема, можно добавить якорь фильтром или правкой шаблона категорий. Для плавной прокрутки:

html {
  scroll-behavior: smooth;
}
 
#products-list {
  scroll-margin-top: 90px;
}

html { scroll-behavior: smooth; } #products-list { scroll-margin-top: 90px; }

scroll-margin-top нужен, чтобы фиксированная шапка не закрывала начало товаров. Если товары подгружаются AJAX, обычный якорь может сработать раньше, чем товары появились. Тогда нужен JS после завершения AJAX-загрузки:

document.addEventListener('click', function (e) {
  const link = e.target.closest('.product-category a');
  if (!link) return;
 
  setTimeout(function () {
    document.querySelector('#products-list')?.scrollIntoView({ behavior: 'smooth' });
  }, 500);
});

document.addEventListener('click', function (e) { const link = e.target.closest('.product-category a'); if (!link) return; setTimeout(function () { document.querySelector('#products-list')?.scrollIntoView({ behavior: 'smooth' }); }, 500); });

Лучше начать с якоря: это проще, работает без сложного JS и не ломает SEO. JS нужен только если каталог действительно фильтруется без перезагрузки страницы.

Если после клика происходит полная перезагрузка страницы, якорь нужно добавлять именно в конечный URL категории, а не только в текущую ссылку. Например, /catalog/kurtki/#products-list. Если же фильтр работает через AJAX и URL не меняется, тогда скролл надо запускать после события обновления товаров, иначе браузер прокрутит к старому месту до появления нового списка.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ