javascript - WordPress inline Javascript Rules Woocommerce

Question

So, I have some javascript I need to call inline from a template.

Below is the code I have written in the template file to call this javascript. The $website_grouped_validation parameter stores the javascript file posted below.

What I can't for the life of me figure out is why the "code got here" console log appears without issue, but the script I want does not compile and is not searchable on the page.

I have tried replacing the $ with jQueries, no luck. I've tried find and replace on all the carriage returns and tabs, etc., but still no luck.

Is there anything that could be causing the WordPress engine to block this script that I am not seeing?

Help!

Function call within the template

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 we need

<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>

A short background on the context: This is a form validation function that is integrated with an old WordPress Woocommerce store.

Thanks in advance for any insights!

标签： javascriptphpjquerywordpresswoocommerce

Answer 1

变量$website_grouped_validation只包含 JS 代码还是也包含它的script标签？

在你的代码中试试这个

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

这是 php 中 printf 函数的文档

如果您的变量$website_grouped_validation仅包含 JS 代码，您应该监听wp_enqueue_scriptswordpress 钩子，因此您可以使用此代码呈现内联 JS 代码

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

看看wordpress 文档