it-swarm.com.ru

Применить скрипт jquery только к страницам и категориям продуктов woocommerce

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

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

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

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

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

Большое спасибо!

1
Patrick

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

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

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

if( $('body.whateverclass').length || $('body.anotherclass').length ){
   // Your JS code here
}

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

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

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

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

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

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

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

 wp_enqueue_script( 'some_handle' ); # Unchanged

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

if( 'yes' === MYSITE ){
  // Your JS code here
}

Правка: Вы спросили как поместить его в 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> 
1
RRikesh

Шаг 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}
2
Dragos Micu