We have a WordPress/Woocommerce site and we have a form (Advanced products field plugin) for customers to fill extra product options. We are using a jQuery function to make the form a multi-step form and it has been working fine on mobile and desktop. They press on a button (Continue) to proceed to next step and get an Add to Cart button at the last step.
Suddenly the form stopped working on mobile only, the jQuery is not working correctly on mobile. Whenever we change screen size or open the website on mobile the form works differently, the Add Cart Button shows at first step and the continue button does not go to next step. When we refresh on desktop the form works perfect!
We are not sure what could cause this type of issue. We tried debugging and it is not plugin or theme related.
You check this product https://staging.f1mats.com/product/f1hybrid-series-premium-car-floor-mats-set/ as an example.
The jQuery was provided by the plugin author and it always worked good.
add_action('wapf_before_wrapper', 'wapf_before_wrapper');
function wapf_before_wrapper($product) {
?>
<div class="wapf-progress">
<div class="wapf-progress-bar"></div>
<div class="wapf-progress-steps"></div>
</div>
<div class="wapf-step-back"> <a class="button wapf_btn_prev" style="display:none" ><?php _e('Back','sw-wapf'); ?></a></div>
<div class="wapf-updatedetails" style="display:none"> <a class="button wapf_btn_update" ><?php _e('Edit your selection','sw-wapf'); ?></a></div>
<?php
}
add_action('wapf_before_product_totals', 'wapf_before_product_totals');
function wapf_before_product_totals($product) {
?>
<div class="wapf_step_buttons">
<button class="button wapf_btn_next"><?php _e('Continue','sw-wapf'); ?></button>
</div>
<?php
}
/***jquery***/
add_action('wp_footer','wapf_steps_script');
function wapf_steps_script(){
?>
<script>
jQuery( function($) {
var steps = $('.wapf-section.step');
if(!steps.length) return;
var maxSteps = steps.length;
var $prev = $('.wapf_btn_prev');
var $next = $('.wapf_btn_next');
var $stepList = $('.wapf-progress-steps');
var $bar = $('.wapf-progress-bar');
var $cart = $('div.quantity,[name="add-to-cart"]');
var $progress = $('.wapf-progress');
var currentStep = 1;
for(var i = 1; i <= maxSteps; i++) {
var $div = $('<div>');
if(i === 1) $div.addClass('active');
$stepList.append($div);
}
var post = function(e) {
var visibleStepLi = $stepList.find('div:visible');
var idx = $stepList.find('div').index(visibleStepLi.eq(currentStep-1));
idx = Math.max(0,idx);
var max = visibleStepLi.length;
if(e) e.preventDefault();
steps.hide();
steps.eq(idx).css('display','flex');
$stepList.find('div').removeClass('active').eq(idx).addClass('active').prevAll().addClass('active');
if(currentStep >= max) {
$cart.show();
} else $cart.hide();
$bar.css('width', (currentStep-1)*(100/(max-1))+'%');
$prev.hide();
$next.hide();
if(currentStep < max) $next.show();
if(currentStep > 1) $prev.show();
}
var isValid = function() {
var $inputs = steps.eq(currentStep-1).find(':input');
for(var i = 0; i < $inputs.length; i++) {
if(!$inputs[i].checkValidity()) return false;
}
return true;
}
$prev.on('click', function(e) {
currentStep--;
post(e);
});
$next.on('click', function(e) {
var valid = isValid();
if(isValid()) {
currentStep++;
post(e);
}
});
$(document).on('wapf/dependencies', function(){
$stepList.find('div').removeClass('wapf-hide');
steps.each(function(i,s) {
var $s = $(s);
if($s.hasClass('wapf-hide')) $stepList.find('div:eq('+i+')').addClass('wapf-hide');
});
if($stepList.find('div:not(.wapf-hide)').length <= 1)
$progress.hide();
else $progress.show();
post();
});
// Block enter key to prevent jumping to another step on accident.
steps.find('input, select').keypress(function(event) { return event.key != 'Enter'; });
});
</script>
<?php
}