web-dev-qa-db-fra.com

Appliquer le script jQuery aux seules pages et catégories de produits woocommerce

J'ai ce script qui défile automatiquement jusqu'au contenu principal lors du chargement de la page.

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

1. Cependant, je voudrais seulement l’appliquer à nos pages et catégories de produits woocommerce afin que cela ne fonctionne pas sur les pages de maison/blog. Comment je ferais ça?

Je peux le faire médiocrement en modifiant les fichiers de base de WooCommerce mais je sais que c'est une idée horrible et que je cherche de l'aide pour le faire correctement via mon fichier functions.php.

2. J'aimerais aussi savoir comment l'appliquer à toutes les pages, à l'exception de la page d'accueil, si cela s'avérait une meilleure option plus tard.

Merci beaucoup!

functionsjqueryjavascriptwoocommerce
1
Patrick

Vous pouvez le faire de deux manières.

1. Utilisation de JS uniquement

Les thèmes WordPress utilisent normalement la fonction body_class() . En conséquence, vous verrez que la balise <body> aura beaucoup de classes. Vous pouvez ensuite cibler les pages avec une classe spécifique pour exécuter votre code en JavaScript:

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

2. Utiliser PHP

Vous pouvez utiliser wp_localize_script() pour envoyer un drapeau à votre code.

Supposons que vous ayez mis en file d'attente un fichier appelé site.js avec un pseudonyme de site. Dans votre functions.php, vous aurez:

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

Vous pouvez maintenant ajouter des drapeaux:

 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

Vous pouvez ensuite vérifier la variable MYSITE en JavaScript:

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

Edit: Vous avez demandé comment le mettre dans le 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

Étape 1: enregistrez le code dans un nouveau fichier js, dites main.js

Étape 2: ajoutez une fonction conditionnelle à function.php de votre thème qui dirait quelque chose autour des lignes:

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

Consultez cette page pour les balises conditionnelles en fonction de vos besoins:

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

J'espère que ça aide!

Modifier:

Pour les scripts en ligne, vous pouvez faire (par exemple, dans 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