WordPress встроенный Javascript Правила Woocommerce

Question

Итак, у меня есть некоторый JavaScript, который мне нужен для вызова встроенного шаблона.

Ниже приведен код, который я написал в файле шаблона для вызова этого javascript.Параметр $ website_grouped_validation хранит файл javascript, размещенный ниже.

Чего я не могу понять, так это того, почему журнал консоли «Код попал сюда» появляется без проблем, но нужный мне скрипт не компилируется и не доступен для поиска на странице.

Я пытался заменить $ на jQueries, не повезло.Я пытался найти и заменить все возвраты каретки и вкладки и т. Д., Но все же не повезло.

Есть ли что-то, что может заставить движок WordPress блокировать этот скрипт, которого я не вижу?

Справка!

Вызов функции внутри шаблона

function website_grouped_product_validation() {
echo $website_grouped_validation;?>
<script>console.log("code got here1");</script><?php
}
add_action('wp_print_footer_scripts', 'website_grouped_product_validation');

Javascript нам нужен

<script type=\"text\/javascript\">\r\n\t(function($){\r\n\t \t$(document).ready(function () {\r\n\t \t\t$(\"#gform_4\").validate({\r\n\t \t\t\tignore: '.warning, .qty',\r\n\t \t\t\tonfocusout: function(element) {\r\n\t\t\t\t\tthis.element(element);\r\n\t\t\t\t},\r\n\t\t\t\tonkeyup: false,\r\n\t\t\t\tfocusCleanup: true\r\n\t \t\t});\r\n\r\n\t \t\t$(\".FormItem--customRise input\").rules(\"add\", \"validateRiseHalf\");\r\n\t \t\t$(\".FormItem--customRise input\").rules(\"add\", \"validateRiseHalfOver\");\r\n\t \t\t$(\".FormItem--customRise input\").rules(\"add\", \"validateRiseThree\");\r\n\r\n\t \t\t$(\".FormItem--customDepth input\").rules(\"add\", \"validateDepth\");\r\n\t \t\t$(\".FormItem--customDepth input\").rules(\"add\", \"validateDepthTwo\");\r\n\t \t\t$(\".FormItem--customDepth input\").rules(\"add\", \"validateDepthThree\");\r\n\r\n\t \t\t$(\".FormItem--customWidth input\").rules(\"add\", \"validateWidth\");\r\n\t \t\t$(\".FormItem--customWidth input\").rules(\"add\", \"validateWidthTwo\");\r\n\t \t\t$(\".FormItem--customWidth input\").rules(\"add\", \"validateWidthThree\");\r\n\r\n\r\n\t\t\t$.validator.addMethod(\"validateRiseHalf\", function(value) {\r\n\t\t\t\tvar width = 0;\r\n\t\t\t\tvar rise = 0;\r\n\r\n\t\t\t\trise = Number( value.replace(' in', '') );\r\n\t\t\t\t\r\n\t\t\t\tif ( $('.FormItem--customWidth input').val() ) {\r\n\t\t\t\t\twidth = Number( $('.FormItem--customWidth input').val().replace(' in', '') );\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif ( rise === 0 && width === 0 ) {\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif ( rise === width\/2 ) {\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Error: This is a half-circle arch and NOT a soft arch. \");\r\n\r\n\t\t\t$.validator.addMethod(\"validateRiseHalfOver\", function(value) {\r\n\t\t\t\tvar width = 0;\r\n\t\t\t\tvar rise = 0;\r\n\r\n\t\t\t\trise = Number( value.replace(' in', '') );\r\n\t\t\t\t\r\n\t\t\t\tif ( $('.FormItem--customWidth input').val() ) {\r\n\t\t\t\t\twidth = Number( $('.FormItem--customWidth input').val().replace(' in', '') );\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif ( rise === 0 && width === 0 ) {\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif ( rise > width\/2 ) {\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Error: Your rise can not be greater than half your width. \");\r\n\r\n\t\t\t$.validator.addMethod(\"validateRiseThree\", function(value) {\r\n\t\t\t\tvar width = 0;\r\n\t\t\t\tvar rise = 0;\r\n\r\n\t\t\t\trise = Number( value.replace(' in', '') );\r\n\t\t\t\t\r\n\t\t\t\tif ( $('.FormItem--customWidth input').val() ) {\r\n\t\t\t\t\twidth = Number( $('.FormItem--customWidth input').val().replace(' in', '') );\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif ( rise === 0 && width === 0 ) {\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif ( rise > width*0.45 ) {\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Error: The rise you've chosen is too close to a half-circle arch. Either lower your rise, visit the half-circle archways page or call the office to discuss. \");\r\n\r\n\t\t\t$.validator.addMethod(\"validateDepth\", function(value) {\r\n\t\t\t\tvar depth = Number( value.replace(' in', '') );\r\n\r\n\t\t\t\tif ( depth > 24.001 ) {\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Error: Depths over 24 inches are considered barrel vaults. \");\r\n\r\n\t\t\t$.validator.addMethod(\"validateDepthTwo\", function(value, element) {\r\n\t\t\t\tvar depth = Number( value.replace(' in', '') );\r\n\r\n\t\t\t\tif ( depth > 3.5 && depth < 4.001 ) {\r\n\t\t\t\t\t$(element).addClass('warning');\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Attention: A 2x4 has an actual depth of 3.5 inches. \");\r\n\r\n\t\t\t$.validator.addMethod(\"validateDepthThree\", function(value, element) {\r\n\t\t\t\tvar depth = Number( value.replace(' in', '') );\r\n\r\n\t\t\t\tif ( depth > 5.5 && depth < 6.001 ) {\r\n\t\t\t\t\t$(element).addClass('warning');\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Attention: A 2x6 has an actual depth of 5.5 inches. \");\r\n\r\n\t\t\t$.validator.addMethod(\"validateWidth\", function(value, element) {\r\n\t\t\t\twidth = Number( value.replace(' in', '') );\r\n\r\n\t\t\t\tif ( width > 144 && width <= 192 ) {\r\n\t\t\t\t\t$(element).addClass('warning');\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Attention: This soft arch kit will be made in 3 pieces. \");\r\n\r\n\t\t\t$.validator.addMethod(\"validateWidthTwo\", function(value, element) {\r\n\t\t\t\tvar width = Number( value.replace(' in', '') );\r\n\r\n\t\t\t\tif ( width > 192 && width <= 300 ) {\r\n\t\t\t\t\t$(element).addClass('warning');\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Attention: This soft arch kit will be made in 4 pieces. \");\r\n\r\n\t\t\t$.validator.addMethod(\"validateWidthThree\", function(value) {\r\n\t\t\t\tvar width = Number( value.replace(' in', '') );\r\n\r\n\t\t\t\tif ( width > 300 ) {\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn true;\r\n\t\t\t}, \"Error: Given that the width of your soft archway is greater than 300 inches, please call the office to discuss. \");\r\n\r\n\t \t});\r\n\t}(jQuery));\r\n<\/script>

Краткий обзор контекста. Это функция проверки формы, которая интегрирована со старым магазином WordPress Woocommerce.

Заранее благодарим за любые идеи!

Answer 1

Да, Wordpress Core удаляет теги и добавляет свои собственные, поэтому ваш скрипт не будет отображаться должным образом, если вы попытаетесь повторить его из этого действия.

Вы почти у цели.Вот запись кодекса для метода wp_enqueue_script .Измените ваше действие на wp_enqueue_scripts.

    add_action( 'wp_enqueue_scripts', 'website_grouped_product_validation' );

Затем создайте файл для хранения ваших Js в относительной папке с именем js и поставьте в очередь его из функции:

    function website_grouped_product_validation() {
        wp_register_script('your-script-slug', get_stylesheet_directory_uri() . '/js/your-script.js', '', '', true );
        wp_enqueue_script('your-script-slug');
    }

или, если вам нужен jQueryили другие библиотеки, которые вы добавляете их в зависимости, чтобы избежать двойной загрузки:

    function website_grouped_product_validation() {
        wp_register_script('your-script-slug', get_stylesheet_directory_uri() . '/js/your-script.js', array('jquery'), '', true );
        wp_enqueue_script('your-script-slug');
    }

Это позволяет вам ставить сценарии на определенные страницы, заключая метод enqueue в такое условие, как:

if ( is_front_page() && is_home() ) {
    // load only on the Default homepage
    wp_enqueue_script('your-awesome-script');

}

И безопасная оболочка jQuery:

jQuery( document ).ready( function( $ ) {
    $(".FormItem--customRise input").rules('do stuff');
});

Answer 2

Переменная $website_grouped_validation содержит только код JS или содержит также теги script?

Попробуйте это в своем коде

function website_grouped_product_validation() {
  echo printf('<script>%s</script>', $website_grouped_validation;);
}

здесь этодокументы для функции printf в php

, если ваша переменная $website_grouped_validation содержит только JS-код, вы должны прослушивать wp_enqueue_scripts ловушку для WordPress, поэтому вы можете визуализировать встроенный JS-код с помощью этой функции

mytheme_enqueue_typekit () {wp_add_inline_script ('your-woocommerce-custom-code', $ website_grouped_validation;);} add_action ('wp_enqueue_scripts', 'mytheme_enqueue_typekit');

взгляните документация WordPress