Aplicar script jQuery solo a páginas de productos y categorías de WooCommerce

Question

Aplicar script jQuery solo a páginas de productos y categorías de WooCommerce

14 mar 2017, 12:50:49

Vistas: 19.8K

Votos: 3

Tengo este script que automáticamente desplaza hacia abajo hasta el contenido principal al cargar la página.

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

1. Sin embargo, me gustaría aplicarlo solamente a nuestras páginas de productos y categorías de WooCommerce para que no funcione en las páginas de inicio/blog. ¿Cómo podría hacer esto?

Puedo hacer esto pobremente editando los archivos del núcleo de WooCommerce pero sé que es una idea horrible, así que estoy buscando ayuda sobre cómo hacerlo correctamente a través de mi archivo functions.php.

2. También me gustaría saber cómo aplicarlo a todas las páginas excepto la página de inicio en caso de que esa sea una mejor opción más adelante.

¡Muchas gracias!

Patrick

295

funciones jquery javascript woocommerce fueradetema

Todas las respuestas a la pregunta

Comentarios

Si estoy usando js... ¿Cómo se vería exactamente? Puse esto al final de mi footer.php y no puedo hacer que funcione. (funciona sin la sentencia if)

Patrick

14 mar 2017 14:16:51

@PortalP Actualicé mi respuesta con tu código. La parte jQuery(document).... debería estar en el nivel más externo.

RRikesh

14 mar 2017 14:23:33

¡Gracias! Aunque por alguna razón no logro que funcione. :(

Patrick

14 mar 2017 14:28:55

¡No importa, ya lo hice funcionar! :) ¡GRACIAS! Esto va a ser tan útil en muchas situaciones.

Patrick

14 mar 2017 14:33:07

Mi script de ancho de pantalla no funciona. Solo debería funcionar en anchos menores o iguales a 768px. ¿Está bien tener una declaración if dentro de otra? ¿No deberían combinarse en una sola declaración if?

¡Gracias!

Patrick

14 mar 2017 14:41:27

Mostrar los 4 comentarios restantes

Paso 1: guarda el código como un nuevo archivo js, por ejemplo main.js

Paso 2: añade una función condicional al archivo function.php de tu tema que diga algo como:

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

Consulta esta página para ver las etiquetas condicionales según tus necesidades:

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

¡Espero que te ayude!

Edición:

Para scripting inline podrías hacer (por ejemplo dentro de 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

Comentarios

¡Gracias! ¿Pero cómo puedo añadir el script en línea? Siento que hacer una llamada adicional a un archivo de script no tiene sentido cuando el script en sí (proporcionado arriba) es pequeño.

Patrick

14 mar 2017 13:29:53

Supongo que podrías usar la misma sentencia IF en el footer.php pero en lugar de encolarlo podrías escribir tu script dentro de las etiquetas <script>, aunque no lo recomiendo, especialmente para scripts de jQuery.

Dragos Micu

14 mar 2017 13:52:38

¿Por qué no? ¿También podrías actualizar esa respuesta con un fragmento de ejemplo?

Patrick

14 mar 2017 13:53:14

He actualizado la respuesta.

Dragos Micu

14 mar 2017 14:00:15

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

Hay dos formas en las que podrías hacerlo.

1. Usando solo JavaScript

Los temas de WordPress normalmente utilizan la función body_class(). Como resultado, verás que la etiqueta <body> tendrá muchas clases. Luego puedes apuntar a páginas con una clase específica para ejecutar tu código en JavaScript:

if( $('body.whateverclass').length || $('body.anotherclass').length ){
   // Tu código JS aquí
}

2. Usando PHP

Puedes aprovechar wp_localize_script() para enviar una bandera a tu código.

Supongamos que has encolado un archivo llamado site.js con un nombre de handle site, en tu functions.php tendrás:

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

Ahora puedes agregar algunas banderas:

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

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

 wp_enqueue_script( 'site' ); # Sin cambios

Luego puedes verificar la variable MYSITE en JavaScript:

if( 'yes' === MYSITE ){
  // Tu código JS aquí
}

Edición: Preguntaste cómo ponerlo en el 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>