Отображение Ajax формы
-
Добрый день, есть страница категории, на которой выводятся продукты Woocommerce и есть задача по клику https://prnt.sc/2OTKov_nLmW1 на каждый из товаров нужно отображать развернутые данные о товаре + плюс будет появляться импровизированный калькулятор https://prnt.sc/SwsT3ugaBv6r
Соответственно при клике на каждый товар, отображается своя инфа.
Не совсем понимаю, как правильно решить эту задачу, пришла в голову такая идея, что в файле function.php создаю функцию, которая будут получать всю инфу о товаре, при помощи ajax со странице категории в function буду передавать product_id и возвращать всю информацию, а на странице категории будет JS, оживляющий калькулятор
Код выглядит вот так, но смущает, что уж очень много HTML придется возвращать таким способом
add_action('wp_ajax_ajaxformPr', 'get_form_for_product'); // wp_ajax_{значение параметра action} add_action('wp_ajax_nopriv_ajaxformPr', 'get_form_for_product'); // wp_ajax_nopriv_{значение параметра action} function get_form_for_product(){ return '<div class="formm"> <div class="formmTitle"> <?php $my_super_product = wc_get_product( $_POST["pr_id"] ); // print_r($my_super_product); echo $my_super_product->name; ?> </div> <label>Цена</label> <input type="text" class="formmPriceForTons" disabled value="<?php echo $my_super_product->price; ?>"> <div class="formmWrapOuter"> <div class="formmWrapInputField"> <input type="hidden" class="weight1Ps" value="<?php echo $my_super_product->get_attribute( "weight" );?>"> <label>Длина</label> <input type="text" value="<?php echo $my_super_product->get_attribute( "weight" );?>" disabled> <label>Кол-во, шт</label> <input type="number" min="1" step="100" value="<?php echo round(1000 / $my_super_product->get_attribute( "weight" )); ?>" class="formmQty"> <label>Кол-во, т</label> <input type="number" min="1" placeholder="0" step="0.01" class="formmTonns" value="<?php echo round(1000 / $my_super_product->get_attribute( "weight" ))*$my_super_product->get_attribute( "weight" )/1000;?>"> <label>На сумму</label> <span>=</span> <div> <div class="finalResult"> <?php // echo $my_super_product->price / 1000 * $my_super_product->get_attribute( "weight" ); echo $my_super_product->price * round(1000 / $my_super_product->get_attribute( "weight" ))*$my_super_product->get_attribute( "weight" )/1000; //$my_super_product->get_attribute( "weight" ) - weight of 1 peaces ?> </div> <span>руб.</span> </div> </div> <div class="rezkaTypes"> <label>Резка</label> <input type="checkbox"> <div class="rezkaWrap"> <div class="containerRezka"> <select name="typeRezka" id="rezka-select"> <?php get_field("prices", $_POST["pr_id"]); // Check rows exists. $cnt_position_rezka = 0; $defaultRezkaPrice = 1; if( have_rows("prices", $_POST["pr_id"]) ): // Loop through rows. while( have_rows("prices", $_POST["pr_id"]) ) : the_row(); // Load sub field value. $sub_value = get_sub_field("prices1"); $sub_value2 = get_sub_field("prices2"); if($cnt_position_rezka == 0){ $defaultRezkaPrice = $sub_value2; }else{ $elseRezkaPrice = $sub_value2; } ?> <option value="<?php echo $sub_value2;?> "><?php echo $sub_value;?></option> <?php $cnt_position_rezka++; // End loop. endwhile; // No value. else : // Do something... endif; ?> </select> <input type="number" min="1" name="quntityRezov" value="1" class="quntityRezov"> <div class="rezkaPrice"><?php echo $defaultRezkaPrice; ?></div> </div> </div> <div class="addRezkaVariant">+++</div> <div class="rezkaWrap"> <div class="containerRezka2"></div> </div> </div> <style type="text/css"> .formm{ width: 50%; margin: 0 auto; } </style> </div> <div class="formmWrapFinalPrice"> <div class="formmWrapFinalPriceTitle"> Итого </div> <div class="formmWrapFinalPriceItem"> <?php echo $my_super_product->price * round(1000 / $my_super_product->get_attribute( "weight" ))*$my_super_product->get_attribute( "weight" )/1000; ?> </div> </div> <div class="buttonAct">В корзину</div> </div>'; // die(); }
Может быть есть более оптимимальное решение такой проблемы, спасибо
- Тема «Отображение Ajax формы» закрыта для новых ответов.