CODEWITHSUNDEEP
javascriptphpwordpress
Артем
Артем

Reputation: 119

Call script inside if statement Wordpress

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?

Upvotes: 0

Views: 464

Answers (1)

Damocles
Damocles

Reputation: 1317

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.

Upvotes: 1

Related Questions