Запустите встроенный JavaScript на определенной странице WordPress

Question

Я хочу запускать код jQuery только на простых страницах продукта в WooCommerce.

Это мой код:

jQuery(document).ready(function( $ ){

let qty = document.getElementById('qty');

qty.onblur = function(){
  let val  = this.value; // Current Value
  let step = this.getAttribute('step'); // Get step instead of hard coding it

  let roundDown = (val - (val % step)).toFixed(2);
  let roundUp   = (parseFloat(roundDown) + parseFloat(step)).toFixed(2);

  this.value = roundUp;
}

});

Как этого добиться в коде Javascript?

Answer 1

Если ваш код вызывает ошибку, потому что на остальных страницах нет элемента с идентификатором "qty", вы можете добавить этот код в ваш основной js-файл следующим образом:

$(function() {

  if ( $('#qty').length ) {
     let qty = document.getElementById('qty');

     qty.onblur = function(){
       let val  = this.value; // Current Value
       let step = this.getAttribute('step'); // Get step instead of hard coding it

       let roundDown = (val - (val % step)).toFixed(2);
       let roundUp   = (parseFloat(roundDown) + parseFloat(step)).toFixed(2);

       this.value = roundUp;
     }
  }

});

Или вы можетедобавьте этот код в footer.php перед закрывающим тегом, добавив условие вывода:

<?php is_singular( 'products' ) :?> <!--change this to your need - https://codex.wordpress.org/Conditional_Tags -->
<script>
jQuery(document).ready(function( $ ){

let qty = document.getElementById('qty');

qty.onblur = function(){
  let val  = this.value; // Current Value
  let step = this.getAttribute('step'); // Get step instead of hard coding it

  let roundDown = (val - (val % step)).toFixed(2);
  let roundUp   = (parseFloat(roundDown) + parseFloat(step)).toFixed(2);

  this.value = roundUp;
}

});
</script>
<?php endif;?>

Answer 2

Лучший способ добавить Javascript в WordPress.

1. Сохраните приведенный выше код в файл с именем only-page.js и загрузите его в папку с темой.

2. Добавьте приведенный ниже код в файл functions.php вашей темы:

   function f50668438_enqueue_script() {
       wp_enqueue_script( 'only-page-custom-script', get_stylesheet_directory_uri() . '/only-page.js', array( 'jquery' ) );
   }
   
   if( is_page(2) ){ // page ID or page slug here
       add_action( 'wp_enqueue_scripts', 'f50668438_enqueue_script' );
   }
   

3. Готово