结帐后如何将摩洛哥国家代码添加到 wp woocommerce 中的电话号码？ [关闭]

Posted 2023-05-08

【中文标题】结帐后如何将摩洛哥国家代码添加到 wp woocommerce 中的电话号码？ [关闭]

【英文标题】：How to add morocco Country code to phone numbers in wp woocomerce after checkout? [closed]

【发布时间】：2021-12-15 22:02:35

【问题描述】：

我想在 woocomerce 输出中添加国家代码。

我有一个小问题，在我的国家，我们开始用零 (0) 编写数字，但我需要编写不带 0 和摩洛哥国家代码的数字。

例如，如果有人像 0600290157 一样编写它，它只会在后端变成这样：212600290107

其他情况如果+212600290107 ---> 212600290107 其他情况如果 00212600290107 ---> 212600290107

所以我需要数字看起来像 212xxxxxxxxx

我需要一个代码在 fonction.php 中将其添加到我的 Wordpress woocommerce 网站

最好的问候

【问题讨论】：

在结帐时创建一个新字段。在他们应该键入县代码的位置或将其设为下拉列表并列出所有代码的位置使其成为必需项。然后在完成订单合并两个字段。另一种选择是使用正则表达式来检查数字是否以 + 或 00 开头。如果您仅在您所在国家/地区销售本地产品，则第二种选择更多，因此您可以说嘿我需要 10 位数字。第三个选项是如果客户根据该国家选择县以合并到电话号码县代码。但是如果客户实际输入正确的电话号码会发生什么？

检查这个插件 - wordpress.org/plugins/country-code-selector 或这个 - codecanyon.net/item/woocommerce-international-phone-input/…

【参考方案1】：

您可以在输入完数字后重写代码国家，如下所示： 这仅适用于摩洛哥数字 06 或 07

    document.querySelector('input[name="phone_number"]').addEventListener('keyup',function(e)
        let value = this.value;
        if (value.length == 10 && ['06','07'].includes(value.slice(0, 2))) 
            this.value = '+212'+ value.slice(1);
        
    );

<input type="text" name="phone_number">

第二种解决方案是再次输入以修复代码国家 试试看：

    let ph_input = document.querySelector('input[name="phone_number"]');
    //ph_input.setAttribute('type', 'hidden');
    let clone = ph_input.cloneNode(true);
    ph_input.parentElement.appendChild(clone).setAttribute('type', 'hidden');
    let name = ph_input.getAttribute('name') + '_fix_code';
    ph_input.setAttribute('default_name', ph_input.getAttribute('name'));
    ph_input.setAttribute('name', name);


    document.querySelector(`input[name="$name"]`).addEventListener('keyup',function(e)
        let value = this.value;
        let name = this.getAttribute('default_name');
        let default_input = document.querySelector(`input[name="$name"]`);
        default_input.value = value;
        if (value.length == 10 && ['06','07'].includes(value.slice(0, 2))) 
            default_input.value = '+212'+ value.slice(1);
        
    );


    // Button For Test
    document.querySelector(`.test`).addEventListener('click', function (e) 
        let value = document.querySelector('input[name="phone_number"]').value;
        alert(value);
    );

<input type="text" name="phone_number">
<button class="test">Test</button>

要将代码添加到 wordpress 中，请转到您的活动主题编辑文件 functions.php 并将此代码放在 functions.php 的末尾

add_action('wp_footer', 'fix_code_country');
function fix_code_country()

?>
    <script type="text/javascript">
        try 
            let ph_input = document.querySelector('input[name="phone_number"]');
            //ph_input.setAttribute('type', 'hidden');
            let clone = ph_input.cloneNode(true);
            ph_input.parentElement.appendChild(clone).setAttribute('type', 'hidden');
            let name = ph_input.getAttribute('name') + '_fix_code';
            ph_input.setAttribute('default_name', ph_input.getAttribute('name'));
            ph_input.setAttribute('name', name);

            document.querySelector(`input[name="$name"]`).addEventListener('keyup', function(e) 
                let value = this.value;
                let name = this.getAttribute('default_name');
                let default_input = document.querySelector(`input[name="$name"]`);
                default_input.value = value;
                if (value.length == 10 && ['06', '07'].includes(value.slice(0, 2))) 
                    default_input.value = '+212' + value.slice(1);
                
            );
         catch 
    </script>
<?php
;

或者您可以安装插件以在页脚中插入代码 检查此文档：https://kinsta.com/knowledgebase/add-code-wordpress-header-footer/

【讨论】：

你好，M younes bennour。感谢您的回答，请告诉我如何将第二个代码作为过滤器添加到 Wordpress woocomerce 代码中，以便在 woocomerce 命令的后端获得结果。

查看更新，我提供两种可能，你可以选择适合你的

非常感谢 M younes bennour