WooCommerce結賬郵編字段訂單

我試圖修改結帳頁面。使用插件，我能夠用街道，門牌號碼和「額外」字段替換兩條默認地址線（它們都在一條線上）。在此之下，您可以找到郵政編碼和城市字段。
但是，當用戶輸入郵政編碼和房號時，我想生成街道和城市，所以我想切換字段。
是這樣的：WooCommerce結賬郵編字段訂單

街 - Housenumber - 額外
郵編 - 城市

我希望它是：

郵編 - Housnumber - 額外
街 - 市

我正在使用r如下鉤子：

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; 

}

但是...試圖移動郵編字段是不成功的。如果我將郵政編碼和城市字段一起移動，我可以移動它們，但只是試圖移動郵政編碼字段單獨顯示奇怪的行爲（例如：切換街道和郵政編碼字段）。

我錯過了什麼？

來源

2016-06-18 Sander

這將是困難的。這是因爲輸入的類。

首先，你必須做這樣的事情：

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地址國際化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-21 13:54:29 XciD

值得注意的是，我嘗試了幾次試圖包含某種jQuery shiv來解決'address-l18n.js'正在做什麼（總結在這裏：https://github.com/woothemes/woocommerce/issues/11399 ）但沒有取得進展。它一直......令人沮喪。如果我取得進展，我會在這裏包括它。 – indextwo

正如@XciD說in his answer，這個問題是不符合實際的領域訂購，如您woocommerce_checkout_fields鉤重新他們很好。問題在於WooCommerce的入隊address-i18n.js腳本，該腳本檢查商店的區域設置並基於該區域重新命令結帳（和帳戶地址）字段（這非常煩人，在表面上給了你一個掛鉤來重新訂購它們之後第一個地方......）。

買者

遺憾的是，解決這個沒有巨大的直接的方式;最後，我想出了一個相當不好的內聯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'）。當該事件被觸發時，它會在重新洗牌之前等待50ms，並在您的自定義house_number字段之前放置postcode。延遲是因爲兩個聽衆會同時被觸發，並且看起來address-i18n.js優先，所以setTimeout確保我們的自定義的一個稍後工作。

我用這個解決方案與常規state領域，它工作得很好。請務必檢查您的house_number字段ID以確保選擇器正確，但這應該可以解決您的問題。

哦！另外值得注意的是，這隻會在而不是推遲jQuery加載時才起作用，但所有內聯jQuery都是如此，包括所有WooCommerce插入到結帳頁面的內容。

來源

2016-07-11 17:10:19 indextwo

WooCommerce結賬郵編字段訂單

回答

相關問題