Кодирование многошаговой проверки WooCommerceJquery

Программирование на jquery
Ответить
Anonymous
 Кодирование многошаговой проверки WooCommerce

Сообщение Anonymous »

Я пытался заставить работать какой-то код, но, похоже, он не срабатывает. Думаю, мне что-то не хватает между версиями.
Я использую базовую проверку из плагина WooCommerce. В нижней части оформления заказа вместо кнопок отображается текст, но это может быть проблема с темой, и CSS не добавлен. Я почти уверен, что поставил в очередь сценарий из всего, что смог найти.
Вот что у меня есть:
В Function.php
add_action( 'woocommerce_after_checkout_form', 'step_controls');
function step_controls() {
echo '

Back to Cart
Next
Previous

';
}
//

function cart_steps() {
wp_enqueue_script('jquery');
wp_enqueue_script('cartsteps', get_stylesheet_directory_uri() . '/js/cart-steps.js');

}
add_action( 'wp_enqueue_scripts', 'cart_steps' );

В пользовательском файле JS
var steps = [
{
name: 'Billing & Shipping Details',
selector: '#customer_details'
},
{
name: 'Order Review & Payment',
selector: '#order_review'
}
]
var activeStep;
// Adjust the array length to match zero-base
var stepsLengthAdjusted = steps.length - 1;

// Utility functions
function initSteps() {
// Set first checkout step
sessionStorage.setItem('checkout_step', '0');
}
function getCurrentStep() {
return sessionStorage.getItem('checkout_step');
}
function showCurrentStep() {
activeStep = getCurrentStep();
// Loop through the steps and see which is currently active
for (let i = 0; i < steps.length; i++){
let stepSelector = steps.selector;
if ( i != activeStep ) {
// Hide if not the current step
$(stepSelector).hide();
} else {
// Show the correct step div
$(stepSelector).fadeIn();
// Show or hide navigation buttons as appropriate
$('.step_next, .step_prev').show();
if ( getCurrentStep() == stepsLengthAdjusted ) {
// This is the last step, so remove next button
$('.step_next').hide();
}
if ( getCurrentStep() == 0 ) {
// This is the first step, so remove previous button
$('.step_prev').hide();
}
}
}
// Always go to the top of the steps
$("body").get(0).scrollIntoView();
}
function nextStep() {
if ( getCurrentStep() < stepsLengthAdjusted ) {
var nextStep = parseInt(getCurrentStep()) + 1;
sessionStorage.setItem('checkout_step', nextStep);
showCurrentStep();
}
}
function previousStep() {
if ( getCurrentStep() > 0 ) {
var previousStep = parseInt(getCurrentStep()) - 1;
sessionStorage.setItem('checkout_step', previousStep);
showCurrentStep();
}
}

// Initialise
if ( getCurrentStep() == null ) {
initSteps();
}
// Always show the correct step
showCurrentStep();
// Navigation
$('.step_next').click(function() {
nextStep();
});
$('.step_prev').click(function() {
previousStep();
});
// Hide a elements not in parent containers!
$('h3#order_review_heading').hide();

// Flush the current step when navigating away from checkout to prevent customer confusion
if ( !$('body').hasClass('woocommerce-checkout') ) {
initSteps();
}

$('body').on('checkout_error', function(){
for (let i = 0; i < steps.length; i++){
let stepSelector = steps.selector;
let fields = stepSelector + ' p';
$( fields ).each(function() {
if ( $(this).hasClass('woocommerce-invalid') ) {
sessionStorage.setItem('checkout_step', i);
showCurrentStep();
return false;
}
});
}
});


Подробнее здесь: https://stackoverflow.com/questions/781 ... p-checkout
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»