it-swarm.com.de

Wenden Sie das JQuery-Skript nur auf Woocommerce-Produktseiten und -Kategorien an

Ich habe dieses Skript, das beim Laden der Seite automatisch zum primären Inhalt gescrollt wird.

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

1. Allerdings möchte ich nur es auf unsere Woocommerce-Produktseiten und -Kategorien anwenden, damit es auf Home-/Blogseiten nicht funktioniert. Wie würde ich das machen?

Ich kann dies schlecht durch Bearbeiten von WooCommerce-Kerndateien tun, aber ich weiß, dass dies eine schreckliche Idee ist. Deshalb suche ich über meine functions.php-Datei Hilfe, wie man es richtig macht.

2. Außerdem möchte ich wissen, wie man es auf alle Seiten außer der Homepage anwendet, sollte das später eine bessere Option sein.

Danke vielmals!

1
Patrick

Es gibt zwei Möglichkeiten, wie Sie das tun können.

1. Nur mit JS

WordPress-Themes verwenden normalerweise die Funktion body_class() . Als Ergebnis sehen Sie, dass das <body> -Tag viele Klassen enthält. Sie können dann Seiten mit einer bestimmten Klasse als Ziel festlegen, um Ihren Code in JavaScript auszuführen:

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

2. Mit PHP

Sie können wp_localize_script() nutzen, um eine Flagge an Ihren Code zu senden.

Angenommen, Sie haben eine Datei mit dem Namen site.js mit dem Handle-Namen site in die Warteschlange gestellt. In Ihrem functions.php haben Sie Folgendes:

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

Sie können jetzt einige Flags hinzufügen:

 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

Sie können dann die Variable MYSITE in JavaScript überprüfen:

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

Edit: Du hast gefragt wie man es in die footer.php schreibt:

<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

Schritt 1: Speichern Sie den Code als neue js-Datei, z. B. main.js

Schritt 2: Fügen Sie function.php Ihres Themas eine bedingte Funktion hinzu, die etwas um die Zeilen herum aussagt:

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

Suchen Sie auf dieser Seite nach bedingten Tags, die Ihren Anforderungen entsprechen:

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

Ich hoffe es hilft!

Bearbeiten:

Für Inline-Skripte können Sie Folgendes tun (z. B. in 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