如何制作 div，由 jquery 在 woocommerce 结帐表单、动态或完全在表单内添加？

Posted 2023-05-08

【中文标题】如何制作 div，由 jquery 在 woocommerce 结帐表单、动态或完全在表单内添加？

【英文标题】：How to make divs,added by jquery in woocommerce checkout form, dynamic, or exactly inside the form?

【发布时间】：2021-12-29 19:21:28

【问题描述】：

我需要在结帐表单中添加一些静态 div，而不是在表单之前或之后，就像我发现通过钩子添加一样，所以我只是使用了 jQuery。

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>');

但现在必须翻译他们的文本“送货地址”和“收件人的个人详细信息”。 我不能粘贴（我使用定制器）而不是 jQuery 中的文本，如果我尝试它是空的。 他们必须准确地在那个地方并以某种方式翻译，解决这个问题的正确方法是什么？

【参考方案1】：

从 Wordpress 5.0 开始，您可以像使用 php 一样使您的 javascript 字符串可翻译。具体操作方法见这篇文章：New! JavaScript i18n support in WordPress 5.0

如果翻译仅在 PHP 运行时可用，您可以在将脚本排入队列时使用 wp_localize_script()。例如，

// 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' );

然后你可以像这样访问 JavaScript 中的变量：

alert( object_name.some_string );

【讨论】：

如果不是用_e或__的官方字符串翻译，是我的自定义选项，'echo get_theme_mod'，我应该写什么？

那么你是说这个值只能在运行时通过在PHP中调用get_theme_mod()来访问？

是的，我通常在customizer（或acf）中进行，它们并不多。我没有安装acf，使用customizer。

我正在尝试这样做，字符串未翻译，我错在哪里？我添加的刺在 main.js 中，我应该单独放置它们吗？ wp_register_script（'some_handle'，get_template_directory_uri（）。'/assets/js/main.js'）； // 使用新数据本地化脚本 $translation_array = array( 'Delivery address' => get_theme_mod('delivery_address_text'), ); wp_localize_script('some_handle', 'main_js', $translation_array ); // 带有本地化数据的排队脚本。 wp_enqueue_script('some_handle');

您应该编辑您的问题，以显示有关您正在做什么和什么不起作用的更多详细信息。显示您将脚本排入队列的 PHP，并显示更新后的 JavaScript 不起作用。