WooCommerce оформить заказ почтовый индекс порядок полей

Question

WooCommerce оформить заказ почтовый индекс порядок полей

Я пытаюсь изменить страницу оформления заказа. Используя плагин, я смог заменить две адресные строки по умолчанию на улицу, номер дома и «дополнительное» поле (они все в одной строке). Ниже вы найдете почтовый индекс и поле города.
Однако я хочу сгенерировать улицу и город, когда пользователь вводит свой почтовый индекс и номер дома, поэтому я хочу поменять поля.
Это вот так:

Улица — Housenumber — Экстра

Почтовый индекс — Город

Я хочу, чтобы это было:

Почтовый индекс — Housnumber — Extra

Улица — Город

Я использую обычный хук:

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;

}

Однако … попытка переместить поле почтового индекса не удалась. Если я перемещаю почтовый индекс и поле города вместе, я могу переместить их, но просто попытка переместить отдельное поле почтового индекса показывает странное поведение (Например: отключение улицы и поля почтового индекса).

Что мне не хватает?

2

checkout form-fields php woocommerce wordpress

Решение

Другие решения

Это будет сложно. Это из-за класса ввода.

Сначала вы должны сделать что-то вроде этого:

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 класс, добавив немного поплавка во входы

0

Источник

Accepted Answer

Как сказал @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, чтобы убедиться, что селектор правильный, но это должно решить вашу проблему слишком надеюсь.

Ой! И также стоит отметить, что это будет работать, только если вы не откладывает загрузку jQuery, но это относится ко всем встроенным jQuery, включая все, что WooCommerce вставляет на страницу оформления заказа.

1