У меня есть несколько единиц количества рядом с продуктами, поэтому пользователь может ввести то количество, которое они хотят от определенного продукта.
В настройке используется пошаговый процесс с использованием JQuery с первым шагом, состоящим из флажков, второй – количеством входов (где мне нужна помощь!), А на последнем этапе показано, что было выбрано …, чтобы отправить все это получает по электронной почте мне.
Шаг 1 с флажками завершен (с большой помощью от @ Beetroot-Beetroot – пошаговый checkbox-процесс с кратким изложением выбора ). Шаг 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> Вот JQuery:
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(''); } });.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(''); } });.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(''); } });.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(''); } });того, как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(''); } });
Во-первых, сделать quantity[] полей quantity[] и product[] более легко выбираемым по class="quantity" жесткого кодирования class="quantity" и class="product" в HTML.
<input type="text" name="quantity[]" class="quantity" style="width:15px;" value="0">25 cm²<br /> <input type="hidden" name="product[]" class="product" value="Equipment Electrode Set - 25 cm²">
Вот javascript:
function makeSummary() { var summary = []; $steps.not(":last").each(function (i, step) { $step = $(step); summary.push('<p><b>' + $step.data('name') + '</b></p>'); var $ch = $('input[type="checkbox"]:checked', $step); var $qty = $('input.quantity', $step).filter(function() { return this.value !== '0'; }); var $selected = $ch.add($qty);//jQuery collection of checkeboxes, or quantity fields, or a mixture of both. if (!$selected.length) { summary.push('<p>No items selected</p><br />'); } else { $selected.each(function (i, s) { var $s = $(s); var prefix = ($s.hasClass('quantity')) ? ($s.nextAll("input.product").val() + ' : ') : ''; summary.push('<p>' + prefix + $s.val() + '</p><br />'); }); } }); return summary.join(''); }
Таким образом, функция остается общей в отношении количества шагов, но также и в отношении состава каждого шага; он будет обрабатывать полностью специализированные «шаговые шаги» и «шаг количества», и (если вам когда-либо понадобится) смешанный «checkbox / quantity step (s)». В каждом случае выбранные элементы будут суммированы в исходном порядке DOM.
DEMO