Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WordPress inline Javascript Rules Woocommerce

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">rnt(function($){rnt t$(document).ready(function () {rnt tt$("#gform_4").validate({rnt tttignore: '.warning, .qty',rnt tttonfocusout: function(element) {rntttttthis.element(element);rntttt},rnttttonkeyup: false,rnttttfocusCleanup: truernt tt});rnrnt tt$(".FormItem--customRise input").rules("add", "validateRiseHalf");rnt tt$(".FormItem--customRise input").rules("add", "validateRiseHalfOver");rnt tt$(".FormItem--customRise input").rules("add", "validateRiseThree");rnrnt tt$(".FormItem--customDepth input").rules("add", "validateDepth");rnt tt$(".FormItem--customDepth input").rules("add", "validateDepthTwo");rnt tt$(".FormItem--customDepth input").rules("add", "validateDepthThree");rnrnt tt$(".FormItem--customWidth input").rules("add", "validateWidth");rnt tt$(".FormItem--customWidth input").rules("add", "validateWidthTwo");rnt tt$(".FormItem--customWidth input").rules("add", "validateWidthThree");rnrnrnttt$.validator.addMethod("validateRiseHalf", function(value) {rnttttvar width = 0;rnttttvar rise = 0;rnrnttttrise = Number( value.replace(' in', '') );rnttttrnttttif ( $('.FormItem--customWidth input').val() ) {rntttttwidth = Number( $('.FormItem--customWidth input').val().replace(' in', '') );rntttt}rnrnttttif ( rise === 0 && width === 0 ) {rntttttreturn true;rntttt}rnrnttttif ( rise === width/2 ) {rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "Error: This is a half-circle arch and NOT a soft arch. ");rnrnttt$.validator.addMethod("validateRiseHalfOver", function(value) {rnttttvar width = 0;rnttttvar rise = 0;rnrnttttrise = Number( value.replace(' in', '') );rnttttrnttttif ( $('.FormItem--customWidth input').val() ) {rntttttwidth = Number( $('.FormItem--customWidth input').val().replace(' in', '') );rntttt}rnrnttttif ( rise === 0 && width === 0 ) {rntttttreturn true;rntttt}rnrnttttif ( rise > width/2 ) {rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "Error: Your rise can not be greater than half your width. ");rnrnttt$.validator.addMethod("validateRiseThree", function(value) {rnttttvar width = 0;rnttttvar rise = 0;rnrnttttrise = Number( value.replace(' in', '') );rnttttrnttttif ( $('.FormItem--customWidth input').val() ) {rntttttwidth = Number( $('.FormItem--customWidth input').val().replace(' in', '') );rntttt}rnrnttttif ( rise === 0 && width === 0 ) {rntttttreturn true;rntttt}rnrnttttif ( rise > width*0.45 ) {rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "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. ");rnrnttt$.validator.addMethod("validateDepth", function(value) {rnttttvar depth = Number( value.replace(' in', '') );rnrnttttif ( depth > 24.001 ) {rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "Error: Depths over 24 inches are considered barrel vaults. ");rnrnttt$.validator.addMethod("validateDepthTwo", function(value, element) {rnttttvar depth = Number( value.replace(' in', '') );rnrnttttif ( depth > 3.5 && depth < 4.001 ) {rnttttt$(element).addClass('warning');rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "Attention: A 2x4 has an actual depth of 3.5 inches. ");rnrnttt$.validator.addMethod("validateDepthThree", function(value, element) {rnttttvar depth = Number( value.replace(' in', '') );rnrnttttif ( depth > 5.5 && depth < 6.001 ) {rnttttt$(element).addClass('warning');rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "Attention: A 2x6 has an actual depth of 5.5 inches. ");rnrnttt$.validator.addMethod("validateWidth", function(value, element) {rnttttwidth = Number( value.replace(' in', '') );rnrnttttif ( width > 144 && width <= 192 ) {rnttttt$(element).addClass('warning');rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "Attention: This soft arch kit will be made in 3 pieces. ");rnrnttt$.validator.addMethod("validateWidthTwo", function(value, element) {rnttttvar width = Number( value.replace(' in', '') );rnrnttttif ( width > 192 && width <= 300 ) {rnttttt$(element).addClass('warning');rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "Attention: This soft arch kit will be made in 4 pieces. ");rnrnttt$.validator.addMethod("validateWidthThree", function(value) {rnttttvar width = Number( value.replace(' in', '') );rnrnttttif ( width > 300 ) {rntttttreturn false;rntttt}rnrnttttreturn true;rnttt}, "Error: Given that the width of your soft archway is greater than 300 inches, please call the office to discuss. ");rnrnt t});rnt}(jQuery));rn</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!

Tags:

2

Answers


  1. 0

    The variable $website_grouped_validation only contains JS code or contains its script tags too ?

    Try this in your code

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

    here is the docs for printf function in php

    if your variable $website_grouped_validation only contains JS code you should listen for wp_enqueue_scripts wordpress hook, so you can render inline JS code by using this code

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

    take a look wordpress documentation

    Login or Signup to reply.
  2. 0

    Yes the WordPress Core strips tags and adds it’s own so your script will not be displayed properly if you try to echo it from that action.

    You are almost there. Here is the codex entry for the wp_enqueue_script method.
    Change your action to wp_enqueue_scripts.

        add_action( 'wp_enqueue_scripts', 'website_grouped_product_validation' );

    Then create a file to hold your Js in a relative folder named js and enqueue it from the function:

        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');
    }

    or if you need jQuery or other libraries you add them to the dependencies to keep from loading twice:

        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');
    }

    This allows you to enque scripts on specific pages by wrapping the enqueue method in a conditional such as:

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

}

    And the safe jQuery wrapper is:

    jQuery( document ).ready( function( $ ) {
    $(".FormItem--customRise input").rules('do stuff');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search