Реализация калькулятора + форматирование

wp-content/themes/fenixmedica/assets/js/script.js

@@ -101,5 +101,30 @@ $(document).ready(
 
             //Маска ввода телефона
             $('input[name="phone"]').inputmask({"mask": "+7 (999) 999-99-99"});
+
+
+            function fenix_calc (el_wrap)
+                {
+                    if (el_wrap.length>0)
+                        {
+                            var calc_inv = parseInt(el_wrap.find('input[name="calc_inv"]').val());
+                            var calc_s = parseInt(el_wrap.find('input[name="calc_s"]').val());
+                            var calc_rashod = parseInt(el_wrap.find('input[name="calc_rashod"]').val());
+                            
+                            var resut_value = (calc_inv - calc_rashod)*calc_s/50;
+
+                            el_wrap.find('.calc_result_value').text((resut_value).toLocaleString('ru'));
+                        }
+                }        
+
+
+            $(document).on(
+                'click.fenix',
+                '.fenix_calc .calc_btn',
+                function ()
+                    {
+                        fenix_calc($(this).closest('.fenix_calc'));
+                    }
+            );
         }
 );
\ No newline at end of file

wp-content/themes/fenixmedica/functions.php

@@ -31,6 +31,8 @@ include_once(__DIR__.'/inc/youcan.php');
 include_once(__DIR__.'/inc/punkts.php');
 //Подключаем шорткод Мы на 100% гарантируем
 include_once(__DIR__.'/inc/garantii.php');
+//Подключаем шорткод Калькулятор
+include_once(__DIR__.'/inc/calc.php');
 
 //Подключение русурсок к страние
 function action_enqueue_meta() {

wp-content/themes/fenixmedica/inc/calc.php

+<?php 
+function fenix_calc ($atts, $content)
+    {
+        $atts = shortcode_atts(
+            array(
+                'id'            => '',
+                'title'         => ''
+            ),
+            $atts,
+            'fenix_calc'
+        );
+
+        $out = '';
+        $out = ''.
+        '<!--Примеры эффективных-->'.
+        '<div id="'.$atts['id'].'" class="container fenix_calc">'.
+            '<div class="row">'.
+                '<div class="col-12 col-md-7">'.
+                    '<h1>'.$atts['title'].'</h1>'.
+                    '<div class="mb-3">'.
+                        '<label for="calc_inv_'.$atts['id'].'" class="form-label mb-3">Первоначальные инвестиции, руб</label>'.
+                        '<input type="number" class="form-control rounded-pill p-2 px-4" id="calc_inv_'.$atts['id'].'" name="calc_inv" required="required" value="0" min="0" max="10000000" />'.
+                    '</div>'.
+                    '<div class="mb-3">'.
+                        '<label for="calc_s_'.$atts['id'].'" class="form-label mb-3">Площадь помещения, м<sup>2</sup></label>'.
+                        '<input type="number" class="form-control rounded-pill p-2 px-4" id="calc_s_'.$atts['id'].'" name="calc_s" required="required" value="20" min="10" max="10000" />'.
+                    '</div>'.
+                    '<div class="mb-3">'.
+                        '<label for="calc_rashod_'.$atts['id'].'" class="form-label mb-3">Расходы, руб</label>'.
+                        '<input type="number" class="form-control rounded-pill p-2 px-4" id="calc_rashod_'.$atts['id'].'" name="calc_rashod" required="required" value="0" min="0" max="10000000" />'.
+                    '</div>'.
+                '</div>'.
+                '<div class="col-12 col-md-5">'.
+                    '<div class="calc_result_title text-color-3 h1">Примерный доход, руб:</div>'.
+                    '<div class="calc_result_value text-center h3">0</div>'.
+                    (
+                        has_post_thumbnail($post->ID)?
+                            '<img src="'.get_the_post_thumbnail_url($post->ID, 'full').'" class="img-fluid mb-4 mb-md-0"/>':
+                            ''
+                    ).
+                '</div>'.
+            '</div>'.
+            '<div class="row">'.
+                '<div class="col-12">'.
+                    '<button name="calc" type="button" class="btn btn-lg btn-style-0 rounded-pill calc_btn" role="button" id="calc_btn_'.$atts['id'].'">Рассчитать</button>'.
+                '</div>'.
+            '</div>'.
+        '</div>';
+           
+        return $out;
+    }
+add_shortcode('fenix_calc', 'fenix_calc');
\ No newline at end of file

wp-content/themes/fenixmedica/index.php

@@ -8,13 +8,13 @@
 			while ( have_posts() ) :
 				the_post();
 				
-				if ( !is_front_page() && has_post_format( 'aside' ) )
+				if ( !is_front_page() || has_post_format( 'aside' ) )
 					echo '<div class="container">'.
 							'<div class="row">'.
-								'<div class="col-12">'.
+								'<div class="col-12 py-4">'.
 									'<h1 class="text-center text-md-start">'.get_the_title().'</h1>';
 				the_content();
-				if ( !is_front_page() && has_post_format( 'aside' ) )
+				if ( !is_front_page() || has_post_format( 'aside' ) )
 					echo 		'</div>'.
 							'</div>'.
 						'</div>';