0

Есть кастомная корзина на woocommerce с двумя вкладками: на первом шаге отображается заказ, а на втором - форма контактной информации покупателя для заполнения.

Вопрос в следующем: если не заполнить обязательное поле, то при нажатии на кнопку оформить заказ (на 2ом шаге) - перебрасывает на первую вкладку с стандартным сообщением об ошибке.

Как сделать так, чтобы при перезагрузке страницы оставалась открытой вторая вкладка на которой она произошла? Сообщение об ошибке можно совсем убрать.

введите сюда описание изображения

Код: фидл

.navtop {
  margin-top: 50px;
}

.tab-content {
  padding: 40px;
  margin-top: -20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <ul class="nav nav-pills nav-fill navtop">
    <li class="nav-item">
      <a class="nav-link active" href="#menu1" data-toggle="tab">Ваш заказ</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#menu2" data-toggle="tab">Контактные данные</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" role="tabpanel" id="menu1">Шаг первый</div>
    <div class="tab-pane" role="tabpanel" id="menu2">Шаг второй
      <form name="checkout" method="post" class="checkout woocommerce-checkout form-horizontal" action="/cart/" enctype="multipart/form-data" novalidate="novalidate">
        <input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="Номер телефона *" value="" autocomplete="tel">
        <input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="Ваше имя" value="" autocomplete="given-name">
        <button type="submit" class="btn btn-primary" name="woocommerce_checkout_place_order" id="place_order" value="Подтвердить заказ" data-value="Подтвердить заказ">Подтвердить заказ</button>
      </form>
    </div>
  </div>
</div>

Здесь в коде проверка на ошибку:

// Validation: Required fields.
if ( ! empty( $field['required'] ) && empty( $_POST[ $key ] ) ) {
wc_add_notice( sprintf( __( '%s is a required field.', 'woocommerce' ), $field['label'] ), 'error' );
}
5
  • 1
    через localStorageили sessionStorage сделайте
    – Dmytro
    12 дек 2018 в 10:49
  • @Дмытрык поясните, пожалуйста, что именно делать?
    – Вася
    12 дек 2018 в 10:58
  • При клике на вкладку, необходимо записать информацию о выбранной вкладке в localStorage. При загрузки страницы, необходимо проверять, есть наличие информации о выбранной вкладке. Если есть - активировать соответствующую вкладку.
    – Dmytro
    12 дек 2018 в 12:24
  • @Дмытрык пока до конца не догоняю. Ну вот: $('.nav-pills a[href="#pane-checkout"]').click(function(e){ localStorage.setItem('pane',$(this)); }); if(localStorage.getItem('pane')) { }
    – Вася
    12 дек 2018 в 13:16
  • 1
    Вроде бы так. Единственно, что при установке значения в localStorage - this - это избыточная информация (в Вашем случае), достаточно id или другого флага + значение должно быть представлено строкой
    – Dmytro
    12 дек 2018 в 13:25

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.