gurl_o/plugins/tps/birzha/components/checkout/default.htm

<!-- Breadcumb Area -->
<div class="breadcumb_area">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <h5>Sebedim</h5>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ 'index'|page }}">Esasy sahypa</a></li>
                    <li class="breadcrumb-item active">Sebedim</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- Breadcumb Area -->

<!-- Cart Area -->
<div class="cart_area section_padding_100_70 clearfix">
    <div class="container">
        <form action="#" id="checkoutForm" 
                        data-request="onCreateOrder" 
                        data-request-flash
                        data-request-validate
                        data-request-success="resetForm()"
                        data-request-error="resetFormFailed()"
                        method="POST">
        <div class="row justify-content-between">
            <div class="col-12">
                <div class="cart-table">
                    <div class="table-responsive">
                        <table class="table table-bordered mb-30">
                            <thead>
                                <tr>
                                    <th scope="col">Surat</th>
                                    <th scope="col">Haryt ady</th>
                                    <th scope="col">Bahasy</th>
                                    <th scope="col">Mukdary</th>
                                    <th scope="col">Jemi</th>
                                </tr>
                            </thead>
                            <tbody id="cartBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            
                <div class="col-12 col-lg-6">
                    <div class="cart-apply-coupon mb-30">
                        <div class="coupon-form">
                            <input type="text" class="form-control" name="address" placeholder="Adresiňiz" required>
                            <textarea class="form-control" id="order-notes" cols="30" rows="10" placeholder="Bellik" name="note" required></textarea>
                        </div>
                    </div>
                </div>

            <div class="col-12 col-lg-5">
                <div class="cart-total-area mb-30">
                    <h5 class="mb-3">Sebet jemi</h5>
                    
                        <div class="table-responsive">
                            <table class="table mb-3">
                                <tbody>
                                    <tr>
                                        <td>Harytlaryň jemi</td>
                                        <td><span id="cardAmount">0</span> TMT</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <input type="hidden" id="card_amount" name="cardAmount" />
                        <input type="hidden" id="items" name="items" />
                        <button type="submit" class="btn btn-primary d-block" style="width: 100%;">Zakazy ugratmak</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Cart Area End -->

{% put scripts %}
<script>
    function resetForm() {
        document.getElementById('checkoutForm').reset(); // Reset the form
        localStorage.removeItem("cart");
        localStorage.removeItem("cartForForm");
        localStorage.removeItem("products");
        localStorage.removeItem("productsForForm");
    }
    function resetFormFailed() {
        document.getElementById('checkoutForm').reset(); // Reset the form
    }
</script>
<script>
    window.onload = () => { 
        cart = JSON.parse(localStorage.getItem("cart")) ?? [];
        cartForForm = JSON.parse(localStorage.getItem("cartForForm")) ?? [];
        var totalQuantity = 0;
        var totalPrice = 0;
        cart.map((item) => {
            totalQuantity += parseInt(item.quantity);
            totalPrice += parseInt(item.price * item.quantity);
        });
        $("#cardQuantity").html(totalQuantity);
        $("#cardAmount").html(totalPrice.toFixed(2));
        $("#card_amount").val(totalPrice.toFixed(2));
        $("#items").val(JSON.stringify(cartForForm));
        
        const cartBody = $("#cartBody");
        const form = $("#checkoutForm");
        cartBody.html('');
        products = JSON.parse(localStorage.getItem("cart"));
        productsForForm = JSON.parse(localStorage.getItem("cartForForm"));
        products.map((item) => {
            new_product_total_price = parseFloat(new_product_total_price) + parseFloat(item.total);
            total_quantity = total_quantity + parseInt(item.quantity);
            cartBody.append(`
                <tr>
                    <td>
                        <img src="`+item.image+`" alt="`+item.name+`">
                    </td>
                    <td>`+item.name+`</td>
                    <td>`+item.price+`</td>
                    <td>
                        <div class="quantity input-counter">
                            <span class="minus-btn mr-2" data-id="`+item.id+`"><i class='icofont-minus'></i></span>
                            <input type="text" value="`+item.quantity+`">
                            <span class="plus-btn ml-2" data-id="`+item.id+`"><i class='icofont-plus'></i></span>
                        </div>
                    </td>
                    <td>`+item.price * item.quantity+`</td>
                </tr>
            `);

        });
        
    }

    $('body').on('click', '.plus-btn', function(){
        const id = parseInt($(this).attr('data-id'));
        products.map((item) => {
            if (item.id === id){
                item.quantity++;
                item.total = (item.quantity * item.price).toFixed(2);
            }
        });

        productsForForm.map((item) => {
            if (item.item === id){
                item.qty++;
            }
        });
        updateProducts();
    });
    $('body').on('click', '.minus-btn', function(){
        const id = parseInt($(this).attr('data-id'));
        products.map((item) => {
            if (item.id === id){
                if (item.quantity > 1){
                    item.quantity--;
                    item.total = (item.quantity * item.price).toFixed(2);
                }
                else{
                    products = products.filter((item) => item.id !== id);
                }
            }
        });

        productsForForm.map((item) => {
            if (item.item === id){
                if (item.qty > 1){
                    item.qty--;
                }
                else{
                    productsForForm = productsForForm.filter((item) => item.item !== id);
                }
            }
        });
        updateProducts();
    });
</script>
{% endput %}