Question

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

街 - Housenumber - 额外
邮政编码 - 城市

我希望它是：

邮政编码 - Housnumber - 额外
街 - 城市

我正在使用常规钩子：

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;

}

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

我错过了什么？

Answer 1

正如@XciD所说in his answer，问题不在于实际的字段排序，因为您的woocommerce_checkout_fields挂钩可以重新排序它们。问题出在WooCommerce的排队address-i18n.js脚本中，该脚本检查您商店的区域设置，并根据该区域重新订购结帐（和帐户地址）字段（非常烦人，表面上给你一个钩子，首先重新订购它们......）。

<强>买者

不幸的是，没有非常简单的方式;我最终想出了一个相当hacky内联jQuery shiv来将字段移回我最初设置的顺序;但值得注意的是，WooCommerce团队可能完全refactoring all of this with the 2.7 release，所以我不知道这与多长时间有关。

随着说：哈哈！

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在结帐页面中插入的所有内容。

Answer 2

这将很难。这是因为输入的类。

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

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地址-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类在输入中添加了一些浮点数

WooCommerce结帐邮政编码字段顺序

2 个答案: