製品の横に数量ボックスがいくつかあるので、ユーザーは特定の製品に必要な数量を入力できます。
セットアップでは、Jquery を使用したステップバイステップのプロセスを使用します。最初のステップはチェックボックスで構成され、2 番目のステップは数量入力で構成され (ここで助けが必要です!)、最後のステップでは選択されたものが表示されます... すべてを送信すると私にメールが届きます。
チェックボックスを使用したステップ 1 が完了しました (@Beetroot-Beetroot からの多くの助けを借りて -選択の概要を含むステップバイステップのチェックボックスプロセス)。ステップ 2 でサポートが必要です。概要ページにユーザー数の入力を表示するにはどうすればよいですか?
HTMLは次のとおりです。
<form id="customisesystem" method="post" action="">
<div id="first-step">
<div class="steps">
<p><b>Step 1 of 3</b></p>
</div>
<div class="progress-buttons"></div>
<div class="clear"></div>
<div id="customise-area">
<div id="customise-title">
<p><b>1. Hardware & software options</b> <span>Please choose one or more of the following</span></p>
</div>
<div id="customise-area">
<?php $posts = get_field('options');
if( $posts ):
$items = 0;
foreach( $posts as $post): // variable must be called $post (IMPORTANT)
setup_postdata($post); ?>
<div class="custom-option">
<p><b>
<?php the_title(); ?>
</b></p>
<br />
<div> <?php echo the_content(); ?> </div>
<?php $counter = 1; while(the_repeater_field('images')): ?>
<?php if($counter <= 1) { ?>
<img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
<?php $counter++; endwhile; ?>
<p>
<input type="checkbox" name="hardware[]" value="<?php the_title(); ?>">
Select</p>
<div class="clear"></div>
</div>
<?php $items++; endforeach;
wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
endif; ?>
</div>
</div>
</div>
<!-- end first-step -->
<div id="second-step">
<div class="steps">
<p><b>Step 2 of 3</b></p>
</div>
<div class="progress-buttons"></div>
<div class="clear"></div>
<div id="customise-area">
<div id="customise-title">
<p><b>2. Accessories</b> <span>Please choose one or more of the following</span></p>
</div>
<div id="customise-area">
<?php $posts = get_field('accessories');
if( $posts ):
$items = 0;
foreach( $posts as $post): // variable must be called $post (IMPORTANT)
setup_postdata($post); ?>
<?php if ($items&1) { ?>
<div class="custom-option">
<p><b>
<?php the_title(); ?>
</b></p>
<br />
<div> <?php echo the_content(); ?> </div>
<?php $counter = 1; while(the_repeater_field('images')): ?>
<?php if($counter <= 1) { ?>
<img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
<?php $counter++; endwhile; ?>
<p style="clear:right;float:right;width:180px;">
<?php if(get_field('sizes')) { ?>
<?php while(the_repeater_field('sizes')) { ?>
<input type="text" name="quantity[]" style="width:15px;" value="0">
<?php echo the_sub_field('size'); ?><br />
<input type="hidden" name="product[]" value="<?php echo the_title(); ?> - <?php echo the_sub_field('size'); ?>">
<?php } ?>
<?php } else { ?>
<input type="text" name="quantity[]" style="width:15px;" value="">
<?php echo the_sub_field('size'); ?><br />
<input type="hidden" name="product[]" value="<?php echo the_title(); ?>">
<?php } ?>
</p>
<div class="clear"></div>
</div>
<?php } else { ?>
<div class="custom-option">
<p><b>
<?php the_title(); ?>
</b></p>
<br />
<div> <?php echo the_content(); ?> </div>
<?php $counter = 1; while(the_repeater_field('images')): ?>
<?php if($counter <= 1) { ?>
<img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
<?php $counter++; endwhile; ?>
<p style="clear:right;float:right;width:180px;">
<?php if(get_field('sizes')) { ?>
<?php while(the_repeater_field('sizes')) { ?>
<input type="text" name="quantity[]" style="width:15px;" value="0">
<?php echo the_sub_field('size'); ?><br />
<input type="hidden" name="product[]" value="<?php echo the_title(); ?> - <?php echo the_sub_field('size'); ?>">
<?php } ?>
<?php } else { ?>
<input type="text" name="quantity[]" style="width:15px;" value="">
<?php echo the_sub_field('size'); ?><br />
<input type="hidden" name="product[]" value="<?php echo the_title(); ?>">
<?php } ?>
</p>
<div class="clear"></div>
</div>
<?php } ?>
<?php $items++; endforeach;
wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
endif; ?>
</div>
</div>
</div>
<!-- end second-step -->
<div id="third-step">
<div class="steps">
<p><b>Step 3 of 3</b></p>
</div>
<div class="progress-buttons"></div>
<div class="clear"></div>
<div id="customise-area-3">
<p>Summary</p>
<div id="customise-area-3-child">
<input type="submit" name="submit" id="submit" value="submit" />
</div>
</div>
</div>
<!-- end third-step -->
</form>
Jクエリは次のとおりです。
jQuery(document).ready(function( $ ) {
//Create nav wrapper
var $nav = $('<div/>').addClass('prev-next');
//Create Prev button, attach click handler and append to nav wrapper
$('<a class="prev" href="#">Back</a>').on('click', function () {
$(this).closest(".step").hide().prev(".step").show();
}).prependTo($nav);
//Create Next button, attach click handler and append to nav wrapper
$('<a class="next" href="#">Next</a>').on('click', function () {
$('.summary_text').html(makeSummary());
var $step = $(this).closest(".step");
if (validate($step)) {
$step.hide().next(".step").show();
}
}).appendTo($nav);
//In one long jQuery chain ...
//* prepend nav to each step div
//* hide all steps except the first
//* convert first 'Back' link and last 'Next' link to spans.
var $steps = $(".step").prepend($nav).hide()
.filter(":first").show().find("a.prev").after('<a href="#" class="back-to-product">Back</a>').remove().end().end()
.filter(":last").find("a.next").after('').remove().end().end();
//Set step titles
$steps.each(function (i, step) {
$(step).find(".step-title").text('Step ' + (i + 1) + ' of ' + $steps.length);
});
$('a.back-to-product').click(function(){
$(".customise").hide();
$(".entire_product").show();
});
//Unfortunately, hidden form elements are not inlcuded in the submission,
//so all steps must be shown before the form is submitted.
var $submitButton = $("input[name='submit']").on('submit', function () {
$steps.show();
return true;
});
function validate($step) {
//var valid = false;
var valid = true; //for debugging
//Perform validation
switch ($step.index(".step")) { //index-origin is zero
case 0:
//Validate step 1 here
//if valid, set `valid` to true
break;
case 1:
//Validate step 2 here
//if valid, set `valid` to true
break;
case 2:
//No validatation required
break;
}
return valid; //Important - determines behaviour after validate() returns.
}
function makeSummary() {
var summary = [];
$steps.not(":last").each(function (i, step) {
$step = $(step);
summary.push('<p><b>' + $step.data('name') + '</b></p>');
var $ch = $step.find('input[type="checkbox"]:checked');
if (!$ch.length) {
summary.push('<p>No items selected</p><br />');
} else {
$ch.each(function (i, ch) {
summary.push('<p>' + $(ch).val() + '</p><br />');
});
}
});
return summary.join('');
}
});