Call script inside if statement Wordpress

Question

Im trying to conditionally call script depending of language in Wordpress with polylang. I can see the script in Google Inspector but it doesn't work. Script works correctly in customizer. Code:

<?php 

if(pll_current_language() == 'en') : ?>
<script type="text/javascript">
    const cartBtn = document.querySelector('.cart button');
const formCart = document.querySelector('div.product.elementor form.cart');
var newBtn = document.createElement('a');
newBtn.innerHTML = "<h1>Back to shop</h1>";
newBtn.classList.add('cart-custom-link');
newBtn.setAttribute("href", "/shop/");

cartBtn.addEventListener('click', function() {
   formCart.appendChild(newBtn);
   console.log('click');
});

</script>
<?php endif; ?>
<?php 
if(pll_current_language() == 'uk') : ?>
<script type="text/javascript">
    const cartBtn = document.querySelector('.cart button');
const formCart = document.querySelector('div.product.elementor form.cart');
var newBtn = document.createElement('a');
newBtn.innerHTML = "<h1>Повернутися до магазину</h1>";
newBtn.classList.add('cart-custom-link');
newBtn.setAttribute("href", "/shop-uk/");

cartBtn.addEventListener('click', function() {
   formCart.appendChild(newBtn);
   console.log('click');
});

</script>
<?php endif; ?>

Is there any solution?

Damocles · Accepted Answer · 2020-06-26 09:36:36Z

1

My assumption why the code does not work is because the script code is added (and therefore run) before the DOM tree is ready. Thus, it has to be wrapped in a window.onload handler (or jQuery's $(document).ready();). Also, copy&pasting the JS code for every language isn't really pretty. There's a cleaner solution:

place the code in a .js-file
use a JS-object for the text to be translated
enqueue the script, then use wp_localize_script() on it

like so: my_cart.js

window.onload = function () {
  const cartBtn = document.querySelector('.cart button');
  const formCart = document.querySelector('div.product.elementor form.cart');
  var newBtn = document.createElement('a');
  newBtn.innerHTML = "<h1>"+cart_localize.back_to_shop+"</h1>";
  newBtn.classList.add('cart-custom-link');
  newBtn.setAttribute("href", "/shop-uk/");

  cartBtn.addEventListener('click', function() {
    formCart.appendChild(newBtn);
    console.log('click');
  });
}

Next, within PHP, enqueue the script like so:

function load_localized_scripts() {
  $cart_localize = array(
    'back_to_shop' => 'Back to shop', // default
  );
  if (pll_current_language() == 'uk') {
    $cart_localize['back_to_shop'] = 'Повернутися до магазину';
  }
  if (pll_current_language() == 'de') {
    $cart_localize['back_to_shop'] = 'Zurück zum Shop';
  }
  wp_enqueue_script('my-cart', plugin_dir_url( __FILE__ ) . 'js/my_cart.js');
  wp_localize_script('my-cart', 'cart_localize', $cart_localize); 
}
add_action('wp_enqueue_scripts', 'load_localized_scripts');

The $cart_localize array may contain as many key → value pairs of label => text translation as you like. It is inserted into the JavaScript object named like the 2nd argument of the wp_localized_script function. Then, you can access it within JS using cart_localize.key_name.

Technically, you can also register a Polylang string using pll_register_string named back_to_shop and easily insert the translations you entered under Languages → String translations using the pll__() function:

    $cart_localize['back_to_shop'] = pll__('back_to_shop');

I won't fully cover this here, since I'm not sure this matches the way you want to manage translations.

edited Jun 26, 2020 at 9:36

answered Jun 26, 2020 at 9:28

Damocles

1,3271 gold badge8 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Артем Over a year ago

Thx for help. How i can correctly enqueue script? And where i should put php code? In functions.php?

Damocles Over a year ago

If you do not want to make your own plugin - yes, you can put it into your theme's or child theme's functions.php. Next, place your custom JS file (e.g., my_cart.js) in your active theme's directory (e.g., wp-content/themes/my_theme/js/my_cart.js - if the js subdirectory doesn't exist, create it). Then, you can enqueue it with ` wp_enqueue_script('my-cart', get_template_directory() . '/js/my_cart.js');`. Make sure the script and directory are readable for the webserver.

Артем Over a year ago

So I put php snippet in functions.php with wp_enqueue_script('my-cart', get_template_directory() . '/assets/js/my_cart.js'); line. And put js in /wp-content/themes/oceanwp/assets/js but it still not work. Maybe you can check website? is there any changes in DOM?

Damocles Over a year ago

Whoops, sorry. My bad.. I accidentally wrote get_template_directory() instead of get_template_directory_uri(). Change the enqueue script line to: wp_enqueue_script('my-cart', get_template_directory_uri() . '/assets/js/my_cart.js');

Collectives™ on Stack Overflow

Call script inside if statement Wordpress

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related