We Keep Coding

Using a jQuery script in a .php file and adding a condition

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

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

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.
<?php
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
}
}
?>

How can I use google translate directly on sveltekit web pages

I've been having issues using google translator directly on my sveltekit web app using the following code
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
// googleTranslateElementInit()
</script>
I've tried several approaches, for example putting the code in <svelte:head></svelte:head> but yet it's kept appearing and disappearing.
Please how can I achieve this,
Note I'm using Static adapter, thanks in advance

I had to load the script manually after mounting of component. It works with SvelteKit too.
onMount(() => {
loadTranslate()
setTimeout(function () {
googleTranslateInit()
}, 3000)
})
function googleTranslateInit() {
const checkIfGoogleLoaded = setInterval(() => {
if (google != null && google.translate != null && google.translate.TranslateElement != null) {
clearInterval(checkIfGoogleLoaded)
googleTranslateElementInit()
}
}, 1000)
}
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element')
}
function loadTranslate() {
loading = true
if (browser) {
const domElement = document.createElement('script')
domElement.setAttribute('src', '//translate.google.com/translate_a/element.js')
domElement.onload = () => {
loadedTranslate = true
}
document.body.appendChild(domElement)
}
}
</script>
<template>
<div id="google_translate_element" class="mb-2"></div>
</template>

Call function inside RequireJS

Is it possible to create an object inside RequireJS?
Because, in this way, FunctionA is visible inside the Click event:
require(["library1", "library2"], function (obj1) {
$('#loginButton').click(function () {
functionA();
});
functionA() {
obj1.value;
}
});
But if i do something like this, it doesn't work:
var library = new library();
require(["library1", "library2"], function (obj1) {
$('#loginButton').click(function () {
library.functionA();
});
});
function library() {
this.functionA = function () {
obj1.value;
}
}
or
var library = new library();
$('#loginButton').click(function () {
library.functionA();
});
functionA() {
require(["library1", "library2"], function (obj1) {
this.functionA = function () {
obj1.value;
}
});
}
Is this possible?

I'm not sure why your explicit example is not working. However, I would suggest ensuring that you make jQuery a dependency in your require statement.
The following is using dojo, which uses an AMD environment like RequireJS. I just wanted to make sure that I was able to load multiple modules for my example and RequireJS has not modules with it like dojo does.
I was able to get your second example working by fixing the dependencies.
var library = new library();
require(["dojo/dom", "jquery"], function(dom, $) {
$('#button').click(function() {
library.functionA();
});
});
function library() {
this.functionA = function() {
console.log("hello");
}
}
<script>
var dojoConfig = {
parseOnLoad: false,
isDebug: true,
async: 1,
packages: [{
name: "jquery",
location: "//code.jquery.com",
main: "jquery-1.11.3.min"
}]
};
</script>
<!-- Include the dojo 1.10.4 CDN -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<main>
<button id="button" type="button">Click me</button>
</main>

Model form with JavaScript in EF

How made JavaScript cohesion work? Lets me explain better: I have my index page that call models forms with jquery dialogs, but I don't want put all javascript in index page, instead I want the jquery separate for page.
Model form
This work
INDEX PAGE
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
function () //<--I dont want this function here
{
Alert1();
}
$(".Create").live
(
"click", function (e) {
var url = $(this).attr('href');
$("#dialog-view").dialog
(
{
title: 'Create new User',
autoOpen: false,
resizable: false,
height: 600,
width: 600,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load(url);
},
buttons:
{
"Cancel": function ()
{
$(this).dialog("close");
},
"Save": function ()
{
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('close');
}
}
);
);
function Alert1() //<--I dont want this function here
{
alert("Star!");
}
</script>
}
How should work
INDEX PAGE
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
$(".Create").live
(
"click", function (e) {
var url = $(this).attr('href');
$("#dialog-view").dialog//<--Only opening dialogs
(
{ ....
);
</script>
}
And model forms with you specifics javascripts
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>
}
Actually, when I made it the model javascript don't work.
I'm using Entity-framework, thanks for everything.
SOLUTION
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>

Just remove the section "Scripts" {} from the Model file. You must have the renderSection("scripts") method only called within the Index page, which will only render the scripts files when the Index page loads and ignore any new script loaded.
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>

Unable to logout from linkedin using javascript api

I have a piece of code to log user out from linkedin and its not working :(
any help will be greatly appreciated.
Logout code
<html>
<head>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: mykey
authorize: true
</script>
<script type="text/javascript">
try {
IN.User.logout();
} catch (err) {
console.log(err);
}
setTimeout("goToHome()", 10000);
function goToHome() {
location.href="index.php";
}
</script>
</head>
</html>
console log
TypeError
arguments: Array[2]
get message: function () { [native code] }
get stack: function () { [native code] }
set message: function () { [native code] }
set stack: function () { [native code] }
type: "non_object_property_call"
__proto__: Error
Best regards,
Pawan

It looks like you are trying to call IN.User.logout() before the LinkedIn JavaScript platform has completely loaded. You should run the code only once you are sure the library is loaded, via either the onLoad value in the platform bootstrap section:
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: mykey
authorize: true
onLoad: onLoad
</script>
<script type="text/javascript">
function onLoad() {
try {
IN.User.logout();
} catch (err) {
console.log(err);
}
setTimeout("goToHome()", 10000);
}
function goToHome() {
location.href="index.php";
}
</script>
Alternatively, use one of the event callbacks:
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: mykey
authorize: true
</script>
<script type="text/javascript">
IN.Event.onOnce(IN, 'systemReady', function() {
try {
IN.User.logout();
} catch (err) {
console.log(err);
}
setTimeout("goToHome()", 10000);
});
function goToHome() {
location.href="index.php";
}
</script>