Вопрос Калькулятор по площади

Lemuba

Постоялец
Регистрация
23 Май 2016
Сообщения
55
Реакции
11
Всем привет. Подскажите может кто сталкивался с таким решением. Нужно сделать сайт по аналогии, но вот проблема в реализации подобного решения, я ещё не сталкивался.
Указывается кол-во упаковок, и тут же рассчитывается площадь. Кто ни будь в курсе как это делается?
Ссылка: Для просмотра ссылки Войди или Зарегистрируйся
 

Вложения

  • 001.JPG
    001.JPG
    29,5 KB · Просмотры: 5
Вряд-ли это готовый модуль, скорее всего индивидуальная разработка.
Схема тут простая: у товара хранится “м2 в упаковке”, калькулятор считает ceil(площадь / м2_упаковки) и отправляет это количество в корзину.

Проще всего сделать без отдельного плагина, прямо на странице товара WooCommerce.

Логика такая:
  1. В карточке товара добавить поле: м2 в одной упаковке
    Например: ламинат, 1 упаковка = 2.13 м².
  2. На странице товара вывести калькулятор:
    Пользователь вводит площадь комнаты, например 18 м².
  3. Скрипт считает:
количество упаковок = округлить вверх(площадь / м² в упаковке)

Пример:
18 / 2.13 = 8.45
нужно 9 упаковок
  1. Это количество автоматически подставляется в поле количества WooCommerce.
  2. Пользователь нажимает обычную кнопку “В корзину”, и товар улетает в корзину уже с нужным количеством.
WooCommerce официально поддерживает добавление товара в корзину через URL с параметром количества, то есть можно делать и кнопку вида ?add-to-cart=ID&quantity=9, но я бы лучше делал через стандартную кнопку товара, так надежнее для обычной карточки.

Минимальный вариант для functions.php дочерней темы:

PHP:
add_action('woocommerce_before_add_to_cart_button', function () {
global $product;

if (!$product || !$product->is_type('simple')) {
return;
}

// В админке товара добавить произвольное поле _pack_m2, например 2.13
$pack_m2 = (float) get_post_meta($product->get_id(), '_pack_m2', true);

if ($pack_m2 <= 0) {
return;
}
?>

<div class="floor-calculator" style="margin: 15px 0;">
<label>
Площадь помещения, м²:
<input type="number" id="room_m2" min="0.1" step="0.1" style="width:120px;">
</label>

<p id="floor_calc_result" style="margin-top:10px;font-weight:bold;"></p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
const packM2 = <?php echo json_encode($pack_m2); ?>;
const roomInput = document.getElementById('room_m2');
const result = document.getElementById('floor_calc_result');
const qtyInput = document.querySelector('form.cart input.qty');

if (!roomInput || !qtyInput) return;

roomInput.addEventListener('input', function () {
const roomM2 = parseFloat(roomInput.value);

if (!roomM2 || roomM2 <= 0) {
result.textContent = '';
return;
}

const packs = Math.ceil(roomM2 / packM2);

qtyInput.value = packs;
result.textContent = 'Нужно упаковок: ' + packs + ' шт.';
});
});
</script>

<?php
});

В админке товара нужно добавить произвольное поле:

_pack_m2 = 2.13

Итог: клиент вводит квадратуру, видит сколько надо упаковок, нажимает В корзину, а WooCommerce получает нужное количество. Для ламината, плитки, обоев, линолеума схема отличная, маленький калькулятор-помощник прямо в карточке товара
 
Назад
Сверху