Aplică script jquery doar pe paginile și categoriile de produse WooCommerce

Question

Aplică script jquery doar pe paginile și categoriile de produse WooCommerce

14 mar. 2017, 12:50:49

Vizualizări: 19.8K

Voturi: 3

Am acest script care derulează automat pagina până la conținutul principal la încărcarea paginii.

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

1. Totuși, aș dori să îl aplic doar pe paginile și categoriile de produse WooCommerce, astfel încât să nu funcționeze pe pagina principală/paginile de blog. Cum aș putea face asta?

Pot face acest lucru în mod necorespunzător editând fișierele core ale WooCommerce, dar știu că e o idee teribilă, așa că caut ajutor pentru a face acest lucru corect prin intermediul fișierului functions.php.

2. De asemenea, aș dori să știu cum să îl aplic pe toate paginile cu excepția paginii principale, în cazul în care aceasta ar fi o opțiune mai bună mai târziu.

Mulțumesc mult!

Patrick

295

funcții jquery javascript woocommerce offtopic

Toate răspunsurile la întrebare

Comentarii

Dacă folosesc JavaScript... Cum ar arăta exact asta? Am pus acest cod în partea de jos a fișierului meu footer.php și nu reușesc să-l fac să funcționeze. (funcționează fără instrucțiunea if)

Patrick

14 mar. 2017 14:16:51

@PortalP Am actualizat răspunsul meu cu codul tău. Partea jQuery(document).... ar trebui să fie cea mai exterioară.

RRikesh

14 mar. 2017 14:23:33

Mulțumesc! Totuși, din nu știu ce motiv, nu reușesc să-l fac să funcționeze. :(

Patrick

14 mar. 2017 14:28:55

Nu-i nimic, am reușit să funcționeze! :) MULȚUMESC! Asta va fi atât de util în atâtea situații.

Patrick

14 mar. 2017 14:33:07

Scriptul meu pentru lățimea ecranului nu funcționează. Ar trebui să funcționeze doar pe lățimi mai mici de 768px sau mai puțin. Este în regulă să pun o instrucțiune if în interiorul alteia? Nu ar trebui combinate într-o singură instrucțiune if?

Mulțumesc!

Patrick

14 mar. 2017 14:41:27

Arată celelalte 4 comentarii

Pasul 1: salvează codul ca un nou fișier js, de exemplu main.js

Pasul 2: adaugă o funcție condițională în fișierul function.php al temei tale care ar trebui să conțină ceva de genul:

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

Verifică această pagină pentru tag-uri condiționale în funcție de nevoile tale:

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

Sper că te ajută!

Edit:

Pentru scripting inline ai putea face (de exemplu în 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

Comentarii

Mulțumesc! Dar cum pot adăuga scriptul inline? Mi se pare inutil să fac o altă apelare către un fișier de script când scriptul în sine (furnizat mai sus) este mic.

Patrick

14 mar. 2017 13:29:53

Presupun că ai putea folosi exact aceeași instrucțiune IF în footer.php dar în loc să încarci scriptul, ai putea scrie scriptul tău între tag-urile <script>, dar nu recomand acest lucru, mai ales pentru scripturile jQuery.

Dragos Micu

14 mar. 2017 13:52:38

De ce nu? De asemenea, poți actualiza acel răspuns cu un fragment de cod exemplu?

Patrick

14 mar. 2017 13:53:14

Am actualizat răspunsul.

Dragos Micu

14 mar. 2017 14:00:15

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

Există două modalități prin care poți realiza acest lucru.

1. Folosind doar JavaScript

Temele WordPress folosesc în mod normal funcția body_class(). Ca urmare, vei observa că tag-ul <body> va avea multe clase. Poți apoi să ții în evidență paginile cu o anumită clasă pentru a rula codul tău în JavaScript:

if( $('body.whateverclass').length || $('body.anotherclass').length ){
   // Codul tău JS aici
}

2. Folosind PHP

Poți utiliza wp_localize_script() pentru a trimite un indicator către codul tău.

Să presupunem că ai încărcat un fișier numit site.js cu un nume de handle site, în functions.php vei avea:

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

Acum poți adăuga câțiva indicatori:

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

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

 wp_enqueue_script( 'site' ); # Nemodificat

Poți apoi verifica variabila MYSITE în JavaScript:

if( 'yes' === MYSITE ){
  // Codul tău JS aici
}

Editare: Ai întrebat cum să-l pui în 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>