Applicare script jQuery solo alle pagine dei prodotti e categorie WooCommerce

Question

Applicare script jQuery solo alle pagine dei prodotti e categorie WooCommerce

14 mar 2017, 12:50:49

Visualizzazioni: 19.8K

Voti: 3

Ho questo script che scorre automaticamente verso il contenuto principale al caricamento della pagina.

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

1. Tuttavia, vorrei applicarlo solo alle pagine dei prodotti e delle categorie WooCommerce in modo che non funzioni sulle pagine home/blog. Come posso farlo?

Posso farlo in modo approssimativo modificando i file core di WooCommerce ma so che è una pessima idea, quindi sto cercando aiuto su come farlo correttamente tramite il file functions.php.

2. Inoltre, vorrei sapere come applicarlo a tutte le pagine tranne la homepage, nel caso fosse una opzione migliore in futuro.

Grazie mille!

Patrick

295

funzioni jquery javascript woocommerce offtopic

Tutte le risposte alla domanda

Commenti

Se sto usando js.. Come sarebbe esattamente? Ho inserito questo in fondo al mio footer.php e non riesco a farlo funzionare. (funziona senza l'istruzione if)

Patrick

14 mar 2017 14:16:51

@PortalP Ho aggiornato la mia risposta con il tuo codice. La parte jQuery(document).... dovrebbe essere quella più esterna.

RRikesh

14 mar 2017 14:23:33

Grazie! anche se per qualche motivo non riesco a farlo funzionare. :(

Patrick

14 mar 2017 14:28:55

Non importa, ho risolto! :) GRAZIE! Questo sarà così utile in così tante situazioni.

Patrick

14 mar 2017 14:33:07

Il mio script per la larghezza dello schermo non funziona. Dovrebbe funzionare solo su larghezze inferiori a 768px o meno. Va bene avere un'istruzione if dentro un'altra? Non dovrebbero essere combinati in una singola istruzione if?

Grazie!

Patrick

14 mar 2017 14:41:27

Mostra i restanti 4 commenti

Passo 1: salva il codice come un nuovo file js, ad esempio main.js

Passo 2: aggiungi una funzione condizionale al file function.php del tuo tema che dovrebbe contenere qualcosa del genere:

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

Consulta questa pagina per i tag condizionali in base alle tue esigenze:

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

Spero sia utile!

Modifica:

Per lo scripting inline puoi fare (ad esempio all'interno di 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 mar 2017 13:28:10

Commenti

Grazie! Ma come posso aggiungere lo script in linea? Mi sembra inutile creare una chiamata aggiuntiva a un file script quando lo script stesso (fornito sopra) è minuscolo.

Patrick

14 mar 2017 13:29:53

Suppongo che potresti usare la stessa identica istruzione IF nel footer.php ma invece di accodare potresti scrivere il tuo script all'interno dei tag <script>, ma non lo consiglio, specialmente per script jQuery.

Dragos Micu

14 mar 2017 13:52:38

Perché no? Potresti anche aggiornare quella risposta con un esempio di snippet?

Patrick

14 mar 2017 13:53:14

Ho aggiornato la risposta.

Dragos Micu

14 mar 2017 14:00:15

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

Ci sono due modi per farlo.

1. Utilizzando solo JavaScript

I temi WordPress normalmente utilizzano la funzione body_class(). Di conseguenza, vedrai che il tag <body> avrà molte classi. Puoi quindi individuare le pagine con una classe specifica per eseguire il tuo codice in JavaScript:

if( $('body.whateverclass').length || $('body.anotherclass').length ){
   // Il tuo codice JS qui
}

2. Utilizzando PHP

Puoi sfruttare wp_localize_script() per inviare un flag al tuo codice.

Supponiamo che tu abbia accodato un file chiamato site.js con un handle di site, nel tuo functions.php avrai:

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

Ora puoi aggiungere alcuni flag:

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

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

 wp_enqueue_script( 'site' ); # Non modificato

Puoi quindi verificare la variabile MYSITE in JavaScript:

if( 'yes' === MYSITE ){
  // Il tuo codice JS qui
}

Modifica: Hai chiesto come inserirlo nel 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>