Поддержка Проблемы и решения Отображение 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();
    }

    Может быть есть более оптимимальное решение такой проблемы, спасибо

Просмотр 5 ответов — с 1 по 5 (всего 5)
  • в файле function.php создаю функцию

    а если хозяин сайта решит сменить тему?

    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    смущает, что уж очень много HTML придется возвращать таким способом

    HTML можно выводить на странице в невидимом слое, а по клику — делать видимым и заполнять данными.

    Да, спасибо, Сергей, именно так и поступлю

    А позвольте ещё вопрос.

    Возвращаю вот так данные, дабы их в дальнейшем разбирать через JS

    function get_form_for_product(){
    	$my_super_product = wc_get_product( $_POST['pr_id'] ); 
    	$ret['my_super_product_name'] = $my_super_product->name;
    	$ret['my_super_product_price'] = $my_super_product->price;
    				// print_r($my_super_product);
    	echo $ret;
    	wp_die();
    }

    Но почему-то приходит ответ: «Array»

    И никак не могу получить элементы массива

    console.log(data.my_super_product_price);

    Вроде разобрался, нужно было возвращать в JSON

    function get_form_for_product(){
    	$my_super_product = wc_get_product( $_POST['pr_id'] ); 
    	$ret['my_super_product_name'] = $my_super_product->name;
    	$ret['my_super_product_price'] = $my_super_product->price;
    				// print_r($my_super_product);
    	echo json_encode($ret);
    	wp_die();
    }
Просмотр 5 ответов — с 1 по 5 (всего 5)
  • Тема «Отображение Ajax формы» закрыта для новых ответов.