I have this script that automatically scrolls down to the primary content on page load.
jQuery(document).ready(function($){
if ( $(window).width() < 768 || window.Touch) {
$('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000);}
});
1. However I would like to only apply it to our woocommerce product pages and categories so it doesnt work on home/blog pages. How would i do that?
I can do this poorly by editing WooCommerce core files but i know that's a horrible idea so I'm seeking out help on how to do it correctly via my functions.php file.
2. Also i would like to know how to apply it to all pages except the home page should that be a better option later on.
Many thanks!
I have this script that automatically scrolls down to the primary content on page load.
jQuery(document).ready(function($){
if ( $(window).width() < 768 || window.Touch) {
$('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000);}
});
1. However I would like to only apply it to our woocommerce product pages and categories so it doesnt work on home/blog pages. How would i do that?
I can do this poorly by editing WooCommerce core files but i know that's a horrible idea so I'm seeking out help on how to do it correctly via my functions.php file.
2. Also i would like to know how to apply it to all pages except the home page should that be a better option later on.
Many thanks!
Share Improve this question edited Mar 14, 2017 at 11:32 Patrick asked Mar 14, 2017 at 10:50 PatrickPatrick 2953 gold badges10 silver badges26 bronze badges2 Answers
Reset to default 6There are two ways you could do that.
1. Using JS only
WordPress themes normally use the body_class() function. As a result you'll see that the <body> tag will have lots of classes. You can then target pages with a specific class to run your code in JavaScript:
if( $('body.whateverclass').length || $('body.anotherclass').length ){
// Your JS code here
}
2. Using PHP
You can harness wp_localize_script() to send a flag to your code.
Let's suppose you enqueued a file called site.js with a handle name of site, in your functions.php you'll have:
wp_register_script( 'site', 'path/to/site.js' );
wp_enqueue_script( 'site' );
You can now add some flags:
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( 'site' ); # Unchanged
You can then check the MYSITE variable in JavaScript:
if( 'yes' === MYSITE ){
// Your JS code here
}
Edit: You asked how to put it in the 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>
Step 1: save the code as a new js file, say main.js
Step 2: add a conditional function to function.php of your theme that would say something around the lines:
if (is_shop() || is_product_category()) {
wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', false, false, true);
}
Check this page for conditional tags based on your needs:
https://docs.woocommerce/document/conditional-tags/
Hope it helps!
Edit:
For inline scripting you could do (e.g. inside 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}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744756552a4591918.html
评论列表（0条）