时间戳

首页 > 解决方案 > 结帐后如何将摩洛哥国家代码添加到wp woocomerce中的电话号码？

javascript - 结帐后如何将摩洛哥国家代码添加到wp woocomerce中的电话号码？

问题描述

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

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

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

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

所以我需要这个号码看起来像 212xxxxxxxxx

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

此致

标签： javascriptphpjquerywordpresswoocommerce

解决方案

您可以像这样在完成输入数字后重写代码国家：
这仅适用于摩洛哥数字 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/

推荐阅读