Создание калькулятора для товаров в WooCommerce

Содержание

Функциональность и требования калькулятора
Создание формы в отдельной вкладке
Расчет стоимости

Сейчас потенциального покупателя мало чем удивишь. Разработчики постоянно совершенствуют дизайн и функциональность товарных страниц в интернет-магазинах. Нередко можно встретить такой интерактивный элемент как расчет стоимости комплекта, доставки, размеров и других особенностей конкретного товара.

В данном материале я покажу, как создать калькулятор для товаров в WooCommerce на базе WordPress. Пусть он будет не самый красивый или функциональный, но достаточно гибкий и легкий (без плагинов).

Один из примеров, как может выглядеть и работать готовый калькулятор на одном из сайтов.

Функциональность и требования калькулятора

Расчет стоимости комплекта межкомнатной двери в WooCommerce Функциональность калькулятора:

Цена товара берется автоматически из той, что указана в карточке. В случае с вариативными товарами и разной стоимостью вариаций, значение будет минимальным.
Не требуется перезагрузки страницы для выполнения расчета и вывода на экран.
Любое количество произвольных полей. Для каждой из категории можно присвоить свой тип калькулятора с нужными данными.
Возможность создания плавной прокрутки до результатов расчета (не проверялось).

Нам потребуются:

Файл functions.php от вашего шаблона, где будет инициироваться вызов JS-скриптов, создание дополнительной вкладки по названию категории и ее содержимое (форма на HTML).
Произвольный документ (например, calc.php), который можно закинуть в папку с плагинами. Здесь и будут производиться все расчеты на PHP с последующим выводом результата без перезагрузки страницы.

Создание формы в отдельной вкладке

Допустим, в вашем интернет-магазине создано 2 категории товаров: “Двери” и “Окна”. Открываем в текстовом редакторе файл functions.php вашего шаблона и добавляем следующий код для создания вкладок в карточках товаров относительно выбранной категории:

function woo_new_product_tab( $tabs ) {
  if ( is_product() AND ( has_term( 'dveri', 'product_cat', $post->ID ) OR has_term( 'okna', 'product_cat', $post->ID ) ) ) {
    $tabs['calculyator'] = array(
      'title' => __( 'Калькулятор', 'woocommerce' ),
      'priority' => 26,
      'callback' => 'woo_new_product_tab_content',
    );
  }
  return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

В данном случае вкладка отобразится в товарах, чьи категории соответствуют названиям условия. Вторая строка является условием, которое отвечает за область применения вкладок.

Дальше подключаем библиотеку JQuery, выводим необходимые скрипты, получаем цену продукта и вставляем форму.

function woo_new_product_tab_content() {
  
  // JS-скрипты
  echo ('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>');
  echo ('
    <script type="text/javascript">
    function AjaxFormRequest(result_id, form_id,url) {
      jQuery.ajax({
        url: url,
        type: "POST",
        dataType: "html",
        data: jQuery("#"+form_id).serialize(),
        success: function(response) {
          document.getElementById(result_id).innerHTML = response;
        },
        error: function(response) {
          document.getElementById(result_id).innerHTML = "Ошибка при отправке формы";
        }
      });
    }
    </script>
  ');
  echo ('
    <script type="text/javascript">
    $("body").on('click', '["#tzUpCalc"]', function(e) {
      var fixed_offset = 100;
      $('html,body').stop().animate({ scrollTop: $("#tzTargetCalc").offset().top - fixed_offset }, 1000);
      e.preventDefault();
    });
    </script>
  ');
  
  // Цена товара
  $product = get_post_meta( get_the_ID(), '_price', true);
  
  // Калькулятор
  echo ('<p>Здесь вы можете рассчитать итоговую сумму всего комплекта.</p>');
  echo ('
    <section id="tzTargetCalc">
      <div id="result_div_id"></div>
      <form action="" method="post">
        <h6>Выберите необходимые комплектующие</h6>
        <div><input id="polotno" name="polotno" type="checkbox" value="'.$product.'" checked /><label for="polotno">Полотно</label></div>
        <div><input id="korobka" name="korobka" type="checkbox" /><label for="korobka">Коробка</label></div>
        <div><input id="nalichnik" name="nalichnik" type="checkbox" /><label for="nalichnik">Наличник</label></div>
        <div><input id="dobor" name="dobor" type="checkbox" /><label for="dobor">Добор</label></div>
        <h6>Доставка</h6>
        <div><input id="dostavka_1" name="dostavka" type="radio" value="200" /><label for="dostavka_1">Сильные мужчины</label></div>
        <div><input id="dostavka_2" name="dostavka" type="radio" value="600" /><label for="dostavka_1">Красивые женщины</label></div>
        <div><input id="tzUpCalc" type="button" value="Рассчитать" onclick="AjaxFormRequest(\'result_div_id\', \'tzFormCalc\', \'https://site.ru/wp-content/plugins/calc/dveri-i-okna.php\')" /></div>
      </form>
    </section>';
  ');

}

Расчет стоимости

Здесь уже все просто. Файл для расчета стоимости создаем из расчета того, как он был указан в событие onclick нашей кнопки. Не сложно догадаться, что положить его нужно туда, куда ведет путь к файлу.

Собственно, открываем сам документ:

<?php
echo ('<h4>Расчет</h4>');

$cena = 0;

if ($_POST['polotno']) $cena += $_POST['polotno'];
if ($_POST['korobka']) $cena += $korobka;
if ($_POST['nalichnik']) $cena += $nalichnik;
if ($_POST['dobor']) $cena += $_POST['polotno'] / 100 * 60;
if ($_POST['dostavka']) $cena += $_POST['dostavka'];

echo ('<div>Цена за комплект: <b>'.$cena.'</b> руб.</div>');
?>

Наш простой калькулятор готов. В ваших силах усовершенствовать его функциональную и визуальную составляющие.

2,345 total views, 1 views today