p Таблица товаров с калькулятором — Данил Самигуллин
+7 982 100 5 999

Таблица товаров с калькулятором

HTML

<?php if( have_rows('таблица_цен') ): ?>
<div class="table">
    <div class="head-table">
        <div class="tab--inner">Сорт</div>
        <div class="tab--inner">Толщина (мм)</div>
        <div class="tab--inner">Ширина (мм)</div>
        <div class="tab--inner">Длина (мм)</div>
        <div class="tab--inner">Цена (руб/шт)</div>
        <div class="tab--inner">Итого (руб)</div>
    </div>
    <div class="head-cont">
        <?php while( have_rows('таблица_цен') ): the_row(); ?>
        <div class="tab--inner_cont">
            <div class="tab--inner"><?php the_sub_field('сорт'); ?></div>
            <div class="tab--inner"><?php the_sub_field('толщина'); ?></div>
            <div class="tab--inner"><?php the_sub_field('ширина'); ?></div>
            <div class="tab--inner"><?php the_sub_field('длина'); ?></div>
            <div class="tab--inner"><?php the_sub_field('цена'); ?><span> руб</span></div>
            <div class="tab--inner">
                <span class="count_price" data-price="<?php the_sub_field('цена'); ?>"><?php the_sub_field('цена'); ?></span><span> руб</span>
            </div>
            <div class="tab--inner">
                <div class="quantity-block">
                    <input class="quantity" type="text" min="1" step="0" max="0" value="1">
                    <span class="plus">+</span>
                    <span class="minus">-</span>
                </div>
                <a class="btn btn-black" href="javascript:PopUpShowTable()">Заказать</a>
            </div>

            <div class="modal-el1t_boby modal-table">
                <div class="modal-el1t_boby-content">
                    <div class="modal-el1t">
                        <div class="modal-el1t_container">
                            <a class="close--modal-el1t" href="javascript:PopUpHideTable()"></a>
                            <form class="form-table">
                                <div class="content-title">Заказать «<?php the_title(); ?>»</div>
                                <div class="clearfix">
                                    <div class="left">
                                        <div class="title-block">Детали заказа:</div>
                                        <div class="info">
                                            <ul>
                                                <li><span>Сорт:</span> <?php the_sub_field('сорт'); ?></li>
                                                <li><span>Толщина:</span> <?php the_sub_field('толщина'); ?> мм</li>
                                                <li><span>Ширина:</span> <?php the_sub_field('ширина'); ?> мм</li>
                                                <li><span>Длина:</span> <?php the_sub_field('длина'); ?> мм</li>
                                                <li><span>Количество:</span> <span class="colvo">1</span> шт</li>
                                            </ul>
                                        </div>
                                        <div class="price">Итого: <span class="price-modal"><?php the_sub_field('цена'); ?></span> руб</div>
                                    </div>
                                    <div class="right">
                                        <div class="descr">Оставьте контакты и мы вам перезвоним, <br>чтобы уточнить детали оплаты, доставки и т.д.</div>
                                        <input type="text" name="name" placeholder="Имя*" required>
                                        <input type="text" name="phone" placeholder="Телефон*" required>
                                        <input type="text" name="mail" placeholder="E-mail">
                                        <button class="btn">Отправить заявку</button>
                                        <div class="info-text">Ваши данные под надёжной защитой</div>

                                        <input type="hidden" name="formData" value="Заказали «<?php the_title(); ?>» с сайта <?php echo get_home_url(); ?>">
                                        <input type="hidden" name="sort" value="<?php the_sub_field('сорт'); ?>">
                                        <input type="hidden" name="tols" value="<?php the_sub_field('толщина'); ?> мм">
                                        <input type="hidden" name="shir" value="<?php the_sub_field('ширина'); ?> мм">
                                        <input type="hidden" name="dlin" value="<?php the_sub_field('длина'); ?> мм">
                                        <input type="hidden" name="colvo" class="colvo-hidden" value="1">
                                        <input type="hidden" name="price" class="price-hidden" value="<?php the_sub_field('цена'); ?>">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <a class="close-el1t_boby" href="javascript:PopUpHideTable()"></a>
                </div>
            </div>
        </div>
        <?php endwhile; ?>
    </div>
</div>
<?php endif; ?>

<script>
(function(){
    $(".form-table").attr("id", function (arr) {
        return "form-table" + arr;
    });
})();
</script>

Jquery

//калькулятор в таблице цен
(function(){
    $(document).ready(function() {
        function change($tr, val) {
            var $input = $tr.find('.quantity');
            var count = parseInt($input.val()) + val;
            count = count < 1 ? 1 : count;
            $input.val(count);
            
            //передать значение в div при клике на + и -
            var $price = $tr.find('.count_price, .price-modal');
            $price.text(count * $price.data('price'));
            
            //передать значение в value при клике на + и -
            var $price2 = $tr.find('.price-hidden');
            $price2.val(count * $price.data('price'));
            
            //передать количество из поля нум в div при клике на + и -
            var $colvo = $tr.find('.colvo');
            $colvo.text(count);
            
            //передать количество из поля нум в input при клике на + и -
            var $colvo2 = $tr.find('.colvo-hidden');
            $colvo2.val(count);
        }
        $('.minus').click(function() {
            change($(this).closest('.tab--inner_cont'), -1);
        });
        $('.plus').click(function() {
            change($(this).closest('.tab--inner_cont'), 1);
        });
        $('.quantity').on("input", function() {
            var $price = $(this).closest('.tab--inner_cont').find('.count_price, .price-modal');
            $price.text(this.value * $price.data('price'));
            
            //передать значение в value, когда просто вводим цифру в поле с клавиатуры
            var $price2 = $(this).closest('.tab--inner_cont').find('.price-hidden');
            $price2.val(this.value * $price.data('price'));
            
            //передать количество из поля нум в div, когда просто вводим цифру в поле с клавиатуры
            var $colvo = $(this).closest('.tab--inner_cont').find('.colvo');
            $colvo.text(this.value);
            
            //передать количество из поля нум в input, когда просто вводим цифру в поле с клавиатуры
            var $colvo2 = $(this).closest('.tab--inner_cont').find('.colvo-hidden');
            $colvo2.val(this.value);
        });
    });
})();
//калькулятор в таблице цен

//модалка в таблице цен
(function(){
    $(document).on('ready', function(){
        $('.tab--inner_cont').on('click', function(){
            $('.tab--inner_cont').removeClass('tab--inner_cont--active');
            $(this).addClass('tab--inner_cont--active');
        });
    });
})();
function PopUpShowTable(){
    $(".tab--inner_cont--active .modal-table").fadeIn(230);
}
function PopUpHideTable(){
    $(".tab--inner_cont--active .modal-table").fadeOut(230);
}
//модалка в таблице цен

mail-table.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['name'])) {$name = $_POST['name'];}
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];}
    if (isset($_POST['mail'])) {$mail = $_POST['mail'];}
    
    if (isset($_POST['sort'])) {$sort = $_POST['sort'];}
    if (isset($_POST['tols'])) {$tols = $_POST['tols'];}
    if (isset($_POST['shir'])) {$shir = $_POST['shir'];}
    if (isset($_POST['dlin'])) {$dlin = $_POST['dlin'];}
    if (isset($_POST['colvo'])) {$colvo = $_POST['colvo'];}
    if (isset($_POST['price'])) {$price = $_POST['price'];}
    if (isset($_POST['formData'])) {$formData = $_POST['formData'];}
 
    $to = "dedmund@yandex.ru";
    $sendfrom   = "info@pilocentre.ru";
    $headers  = "From: " . strip_tags($sendfrom) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
    $subject = "$formData";
    $message = 
    "
            <h3>$formData</h3><br>
            <b>Имя:</b> $name<br>
            <b>Телефон:</b> $phone<br>
            <b>E-mail:</b> $mail<br><br>
            <b>Сорт:</b> $sort<br>
            <b>Толщина:</b> $tols<br>
            <b>Ширина:</b> $shir<br>
            <b>Длина:</b> $dlin<br>
            <b>Количество:</b> $colvo<br>
            <b>На общую сумму:</b> $price<br>
    ";

    $send = mail ($to, $subject, $message, $headers, '-finfo@pilocentre.ru');
    if ($send == 'true')
    {
    echo '';
    }
} else {
    http_response_code(403);
    echo "";
}?>