web-dev-qa-db-ja.com

ウーコマース商品ページとカテゴリーのみにjqueryスクリプトを適用する

このスクリプトは、ページが読み込まれると自動的にメインコンテンツまでスクロールします。

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

1. しかしながら、 only にしたいのは、それが私達のwoocommerce製品ページとカテゴリに適用されるので、ホームページ/ブログのページでは機能しません。どうしたらいいですか。

WooCommerceコアファイルを編集することでこれを行うことができます 悪い しかし、私はそれが恐ろしい考えであることを知っているので、私は自分のfunctions.phpファイルを通してそれを正しく行う方法について助けを求めています。

2 また、ホームページ以外のすべてのページに適用する方法を知りたいのですが、それは後でより良い選択肢になるはずです。

どうもありがとう！

functionsjqueryjavascriptwoocommerce
1
Patrick

それには2つの方法があります。

1. JSだけを使う

WordPressテーマは通常 body_class() 関数を使います。その結果、<body>タグにはたくさんのクラスがあることがわかります。 JavaScriptでコードを実行するために特定のクラスのページをターゲットにすることができます。

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

2. PHPを使う

あなたのコードにフラグを送るために wp_localize_script() を利用することができます。

site.jsに、ハンドル名siteを持つfunctions.phpというファイルをエンキューしたとしましょう。

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

いくつかのフラグを追加することができます：

 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

JavaScriptでMYSITE変数を確認することができます。

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

編集： あなたはあなたに尋ねた それを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>
1
RRikesh

ステップ1：コードを新しいjsファイルとして保存します（main.jsと言います）。

ステップ2：テーマのfunction.phpに条件付き関数を追加してください。

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

あなたの必要性に基づく条件付きタグのためにこのページをチェックしてください：

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

それが役に立てば幸い！

編集する

インラインスクリプティングのためにあなたがすることができました（例えば、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