2

我正在尝试修改结帐页面。使用插件，我能够用街道、门牌号和“额外”字段替换两个默认地址行（它们都在一行上）。在此之下，您可以找到邮政编码和城市字段。
但是，我想在用户输入他们的邮政编码和门牌号时生成街道和城市，所以我想切换字段。
就像这样：

街道 - 门牌号码 - 额​​外的
邮政编码 - 城市

我希望它是：

邮政编码 - Housnumber - Extra
Street - 城市

我正在使用常规钩子：

add_filter("woocommerce_checkout_fields", "order_fields");

function order_fields($fields) {

    $order = array(
        "billing_first_name", 
        "billing_last_name", 
        "billing_company", 
        "billing_street",                       
        "billing_house_number",
        "billing_house_number_extra",
        "billing_postcode",
        "billing_city",
        "billing_country", 
        "billing_email", 
        "billing_phone"

    );
    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields["billing"][$field];
    }

    $fields["billing"] = $ordered_fields;
    return $fields;

}

但是...尝试移动邮政编码字段是不成功的。如果我将邮政编码和城市字段一起移动，我可以移动它们，但只是尝试单独移动邮政编码字段会显示奇怪的行为（例如：切换街道和邮政编码字段）。

我错过了什么？

4

2 回答 2

1

正如@XciD在他的回答中所说，问题不在于实际的字段排序，因为woocommerce_checkout_fields重新排序它们的钩子很好。问题在于 WooCommerce 的排队address-i18n.js脚本，它检查您商店的语言环境并根据该脚本即时重新订购结帐（和帐户地址）字段（这很烦人，表面上给了您一个钩子来重新订购它们第一名...）。

警告

不幸的是，没有非常直接的方法可以解决这个问题。我最终想出了一个相当老套的内联 jQuery shiv 来将字段移回我最初设置的顺序；但是值得注意的是，WooCommerce 团队可能会在 2.7 版本中完全重构所有这些，所以我不知道这会持续多久。

话虽如此：继续破解！

function vnmTheme_addressFieldsOverride() {
    if (is_wc_endpoint_url('edit-address') || is_checkout()) {
        ?>

        <script>
            jQuery(document).ready(function($) {

                $(document.body).on('country_to_state_changing', function(event, country, wrapper) {

                    var $postcodeField = wrapper.find('#billing_postcode_field, #shipping_postcode_field');
                    var $housenoField = wrapper.find('#billing_house_number_field, #shipping_house_number_field' );

                    var fieldTimeout = setTimeout(function() {
                        $postcodeField.insertBefore($housenoField);
                    }, 50);
                });

            });
        </script>

        <?php
    }
}

add_action('wp_footer', 'vnmTheme_addressFieldsOverride', 999);

使用wp_footer（并假设我们只想在结帐页面或“我的帐户”下的“编辑地址”页面上运行它），这将插入一些内联 jQuery 来侦听与address-18n.js( 'country_to_state_changing') 中相同的事件。当该事件被触发时，它会等待 50 毫秒，然后再重新排列字段并将其放置postcode在您的自定义house_number字段之前。延迟是因为两个侦听器将同时被触发，并且看起来address-i18n.js优先级，因此setTimeout确保我们的自定义侦听器稍后完成它的工作。

我将此解决方案与常规state字段一起使用，并且效果很好。确保检查您的 house_number 字段 ID 以确保选择器正确，但这也有望解决您的问题。

哦！还值得注意的是，这仅在您不延迟 jQuery 加载时才有效，但所有内联 jQuery 都是这种情况，包括 WooCommerce 插入结帐页面的所有内容。

于 2016-07-11T17:10:19.167 回答
0

这会很难。这是因为输入的类别。

首先你必须做这样的事情：

add_filter("woocommerce_checkout_fields", "order_fields");

function order_fields($fields) {

    $order = array(
        "billing_first_name" => [],
        "billing_last_name" => [],
        "billing_company" => [],
        "billing_street" => [],
        "billing_postcode" => ["custom-css"],
        "billing_house_number" => [],
        "billing_house_number_extra" => [],
        "billing_city" => [],
        "billing_country" => [],
        "billing_email" => [],
        "billing_phone" => []
    );

    foreach($order as $key => $class)
    {
        $field = $fields["billing"][$key];

        if(sizeof($class) > 0){
            $field['class'] = $class;
        }

        $ordered_fields[$key] = $field;
    }

    $fields["billing"] = $ordered_fields;
    return $fields;
}

然后你必须想办法覆盖 WooCommerce address-i18n js 或编写自己的 js。

https://github.com/woothemes/woocommerce/blob/2.6.1/assets/js/frontend/address-i18n.js#L47

问题是form-row-first form-row-last 类在输入中添加了一些浮点数

于 2016-06-21T13:54:29.363 回答