Применение jquery скрипта только к страницам товаров и категорий WooCommerce

Question

Применение jquery скрипта только к страницам товаров и категорий WooCommerce

14 мар. 2017 г., 12:50:49

Просмотры: 19.8K

Голосов: 3

У меня есть скрипт, который автоматически прокручивает страницу вниз до основного контента при загрузке.

jQuery(document).ready(function($){
  if ( $(window).width() < 768 || window.Touch) { 
    $('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000);} 
});

1. Однако я хочу применить его только к страницам товаров и категорий WooCommerce, чтобы он не работал на главной странице и в блоге. Как это сделать?

Я могу сделать это плохим способом, редактируя основные файлы WooCommerce, но я знаю, что это ужасная идея, поэтому ищу помощь, как сделать это правильно через файл functions.php.

2. Также хотелось бы узнать, как применить его ко всем страницам, кроме главной, если это окажется лучшим вариантом в будущем.

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

Patrick

295

функции jquery javascript woocommerce offtopic

Все ответы на вопрос

Комментарии

Если я использую js... Как это будет выглядеть точно? Я поместил это внизу своего footer.php и не могу заставить это работать. (работает без условия if)

Patrick

14 мар. 2017 г. 14:16:51

@PortalP Обновил мой ответ с вашим кодом. Часть jQuery(document).... должна быть самой внешней.

RRikesh

14 мар. 2017 г. 14:23:33

Спасибо! Хотя по какой-то причине у меня не получается заставить это работать. :(

Patrick

14 мар. 2017 г. 14:28:55

Нет, я разобрался! :) СПАСИБО! Это будет так полезно во многих ситуациях.

Patrick

14 мар. 2017 г. 14:33:07

Мой скрипт для определения ширины экрана не работает. Он должен работать только на ширинах меньше 768px или меньше. Нормально ли, что один оператор if находится внутри другого? Или их нужно объединить в один if?

Спасибо!

Patrick

14 мар. 2017 г. 14:41:27

Показать остальные 4 комментариев

Шаг 1: сохраните код в виде нового js-файла, например main.js

Шаг 2: добавьте условную функцию в function.php вашей темы, которая будет выглядеть примерно так:

if (is_shop() || is_product_category()) {
  wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', false, false, true);
}

Проверьте эту страницу для условных тегов в зависимости от ваших потребностей:

https://docs.woocommerce.com/document/conditional-tags/

Надеюсь, это поможет!

Редактирование:

Для встроенного скрипта вы можете сделать (например, внутри footer.php):

if (is_shop() || is_product_category()) {?>
      <script>
          jQuery(document).ready(function($){
              if ( $(window).width() < 768 || window.Touch) { 
                  $('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000);
              } 
          });
      </script>
<?php}

Dragos Micu

213

14 мар. 2017 г. 13:28:10

Комментарии

Спасибо! Но как я могу добавить скрипт прямо в код? Мне кажется, что создавать дополнительный вызов к файлу скрипта бессмысленно, когда сам скрипт (приведенный выше) очень маленький.

Patrick

14 мар. 2017 г. 13:29:53

Полагаю, вы могли бы использовать такое же условие IF в файле footer.php, но вместо подключения через enqueue написать ваш скрипт внутри тегов <script>, однако я не рекомендую этого делать, особенно для jQuery скриптов.

Dragos Micu

14 мар. 2017 г. 13:52:38

Почему нет? И не могли бы вы обновить ответ, добавив пример кода?

Patrick

14 мар. 2017 г. 13:53:14

Я обновил ответ.

Dragos Micu

14 мар. 2017 г. 14:00:15

RRikesh 5.66K · Accepted Answer · 2017-03-14T14:09:29Z

Есть два способа сделать это.

1. Использование только JavaScript

Темы WordPress обычно используют функцию body_class(). В результате вы увидите, что тег <body> будет содержать множество классов. Затем вы можете выбрать страницы с определенным классом для выполнения вашего кода на JavaScript:

if( $('body.whateverclass').length || $('body.anotherclass').length ){
   // Ваш JS код здесь
}

2. Использование PHP

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

Предположим, вы подключили файл с именем site.js с идентификатором site, в вашем functions.php у вас будет:

wp_register_script( 'site', 'path/to/site.js' );
wp_enqueue_script( 'site' );

Теперь вы можете добавить некоторые флаги:

 wp_register_script( 'site', 'path/to/site.js' ); # Без изменений

 $value = '';
 if ( is_shop() || is_some_other_condition() ){
    $value = 'yes';
 }
 wp_localize_script( 'site', 'MYSITE', $value );

 wp_enqueue_script( 'site' ); # Без изменений

Затем вы можете проверить переменную MYSITE в JavaScript:

if( 'yes' === MYSITE ){
  // Ваш JS код здесь
}

Редактирование: Вы спросили, как добавить это в footer.php:

<script>
jQuery(document).ready(function($){
  if( $('body.product-template-default').length || $('body.anotherclass').length ){
    if ( $(window).width() < 768 || window.Touch) { 
         $('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000); 
    }
  }
});
</script>