How can I run the following woodmart theme jquery script based on a php condition?

The jQuery script here asks for age validation on the website and restricts the page if there is no validation.

I just want to use this code for some category products but I don't know how to add condition to jQuery script and I am bad at javascript.

(function($) {
    woodmartThemeModule.ageVerify = function() {
        
        if ( typeof Cookies === 'undefined' ) {
            return;
        }

        if ( woodmart_settings.age_verify !== 'yes' || Cookies.get('woodmart_age_verify') === 'confirmed') {
            return;
        }
        

        $.magnificPopup.open({
            items          : {
                src: '.wd-age-verify'
            },
            type           : 'inline',
            closeOnBgClick : false,
            closeBtnInside : false,
            showCloseBtn   : false,
            enableEscapeKey: false,
            removalDelay   : 500,
            tClose         : woodmart_settings.close,
            tLoading       : woodmart_settings.loading,
            callbacks      : {
                beforeOpen: function() {
                    this.st.mainClass = 'mfp-move-horizontal wd-promo-popup-wrapper';
                }
            }
        });

        $('.wd-age-verify-allowed').on('click', function(e) {
            e.preventDefault();
            Cookies.set('woodmart_age_verify', 'confirmed', {
                expires: parseInt(woodmart_settings.age_verify_expires),
                path   : '/',
                secure : woodmart_settings.cookie_secure_param
            });

            $.magnificPopup.close();
        });

        $('.wd-age-verify-forbidden').on('click', function(e) {
            e.preventDefault();
            $('.wd-age-verify').addClass('wd-forbidden');
        });
    };

    $(document).ready(function() {
        woodmartThemeModule.ageVerify();
    });
    
})(jQuery);

UPDATE
The code here is working now, echo is no more, I also added 999 as priority and it works fine that way.

<?php

add_action( 'wp_footer', 'add_age_verify', 999 );
 function add_age_verify() {

 if( is_product_category( array( 4201, 4500, 4300 ) ) ) {

?>
<script type="text/javascript"> (function($) {
     woodmartThemeModule.ageVerify = function() {
        
        if ( typeof Cookies === 'undefined' ) {
            return;
        }

        if ( woodmart_settings.age_verify !== 'yes' || Cookies.get('woodmart_age_verify') === 'confirmed') {
            return;
        }
        

        $.magnificPopup.open({
            items          : {
                src: '.wd-age-verify'
            },
            type           : 'inline',
            closeOnBgClick : false,
            closeBtnInside : false,
            showCloseBtn   : false,
            enableEscapeKey: false,
            removalDelay   : 500,
            tClose         : woodmart_settings.close,
            tLoading       : woodmart_settings.loading,
            callbacks      : {
                beforeOpen: function() {
                    this.st.mainClass = 'mfp-move-horizontal wd-promo-popup-wrapper';
                }
            }
        });

        $('.wd-age-verify-allowed').on('click', function(e) {
            e.preventDefault();
            Cookies.set('woodmart_age_verify', 'confirmed', {
                expires: parseInt(woodmart_settings.age_verify_expires),
                path   : '/',
                secure : woodmart_settings.cookie_secure_param
            });

            $.magnificPopup.close();
        });

        $('.wd-age-verify-forbidden').on('click', function(e) {
            e.preventDefault();
            $('.wd-age-verify').addClass('wd-forbidden');
        });
    };

    $(document).ready(function() {
        woodmartThemeModule.ageVerify();
    });
    
   })(jQuery); </script>
<?php
  }
}

CodePudding user response：

You can send a JQuery ajax call to the php script, the php script then sends it back to the javascript file and then you can easily use the variable within javascript.

$.ajax({
  url: 'path/to/your/php/file',
  type: 'get',
  success: (res) => {
   //do things when you get the response
  },
  error: (err) => {
   //do things when you get the error, error is optional
  },
})

or you can even simplify it

$.get('url/to/your/script', (res) => {
  //do things with the response
})

CodePudding user response：

I copied the jQuery script into the child theme and then <script src='/wp-content/themes/woodmart-child/js/scripts/global/ageVerify.js'></script> to show the jQuery script, while doing this I added the conditions with PHP and now it works fine.

The final version of the code with PHP is like this.

add_action( 'wp_footer', 'add_age_verify_jquery', 999 );
 function add_age_verify_jquery() {

if ( has_term( array( 'jacket', 'fridge', 'hats', 'magic wand' ), 'product_cat' ) ) {
    
?>
<script src='/wp-content/themes/woodmart-child/js/scripts/global/ageVerify.js'></script>
<?php
  
   }
}