A
A
alexiusgrey2021-11-19 16:50:51
JavaScript
alexiusgrey, 2021-11-19 16:50:51

How to make bilingual strings I added in js file?

By design, the checkout is very unfriendly to the default in woocommerce. It was necessary to add several static blocks just before some inpets inside the form. That is, hooks that would add them before or after the checkout form would not solve the problem, they need to be right inside the form.
I hardcoded them in my main.js with before-after methods exactly where they are by design.

jQuery('p#billing_first_name_field').before('<div class="form-row form-row-first personal_details_toggle"><div class="woocommerce-input-wrapper"><div class="input-text form-control" id="personal_details_toggle">Personal details of recepient<span class="fa-arrow-down"></span></div></div></div>');
jQuery('p#billing_country_field').before('<div class="form-row form-row-first delivery_address"><div class="woocommerce-input-wrapper"><div class="input-text form-control" id="delivery_address">Delivery address<span class="fa-arrow-down"></span></div></div></div>');

This would be fine if the site was in one language. But it turned out that there should be two of them.
Delivery address, Personal details of the recipient and a couple of analogues should be in different languages ​​in different versions of the site's languages. And these are not official lines from the plugins that the loco-translate will get to, this is just my code from the file.
You cannot add <?php echo get_theme_mod('delivery-address_text');?> inside js.
It’s like in acf the_field(), but I didn’t set it, I don’t have many such lines, I’ll get by with a customizer.

I found that using the localize script method, the translation of strings from js to php can be done, the formula is as follows.
// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' ); 
// Localize the script with new data
$translation_array = array(
    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array ); 
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

I have this code in main.js, I do it like this
// Register the script
wp_register_script( 'some_handle',  get_template_directory_uri() . '/assets/js/main.js' );
 
// Localize the script with new data
$translation_array = array(
    'Delivery address' => get_theme_mod('delivery_address_text'),    
);
wp_localize_script( 'some_handle', 'main_js', $translation_array );
 
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

But it doesn't work. This is the first time I've come across this method. What am I doing wrong and how should I? Move these pieces of code where translation is required to a new file, make the same some_handle, or what is object in this case?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question