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>{{ 'footer.sebedim'|_ }}</h5>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ 'index'|page }}">{{ 'breadcrumbEsasySahypa'|_ }}</a></li>
                    <li class="breadcrumb-item active">{{ 'footer.sebedim'|_ }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- Breadcumb Area -->

<!-- Cart Area -->
<div class="cart_area section_padding_100_70 clearfix" id="checkoutMainDiv">
    <div class="container" id="containerSection">
        <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">{{ 'checkout.Surat'|_ }}</th>
                                    <th scope="col">{{ 'checkout.HarytAdy'|_ }}</th>
                                    <th scope="col">{{ 'checkout.Bahasy'|_ }}</th>
                                    <th scope="col">{{ 'checkout.Mukdary'|_ }}</th>
                                    <th scope="col">{{ 'checkout.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="{{ 'inputPlaceholder.Adresiniz'|_ }}" required>
                            <span style="position:relative;top: 35px;left: 18px;font-size: 13px;">+993</span>
                            <input type="number" class="form-control" name="phone_custom" min="61000000" max="65999999" placeholder="{{ 'inputPlaceholder.TelefonBelgi'|_ }}" style="padding-left: 52px;" required>
                            <textarea class="form-control" id="order-notes" cols="30" rows="10" placeholder="{{ 'inputPlaceholder.Bellik'|_ }}" name="note" style="height: 90px; padding-top:10px;" required></textarea>
                        </div>
                    </div>
                </div>

            <div class="col-12 col-lg-5">
                <div class="cart-total-area mb-30">
                    <h5 class="mb-3">{{ 'checkout.SebetJemi'|_ }}</h5>
                    
                        <div class="table-responsive">
                            <table class="table mb-3">
                                <tbody>
                                    <tr>
                                        <td>{{ 'checkout.HarytlarynJemi'|_ }}</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%;">{{ 'checkout.ZakazyUgratmak'|_ }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Cart Area End -->

{% put scripts %}
<script>
    function resetForm() {
        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")) ?? [];
        if(cart.length == 0){
            const containerSection = $("#containerSection");
            containerSection.html(`
                <div class="container mb-5">
            <div class="row d-block justify-content-center align-items-center">
                <div class="col-6 d-block mx-auto">
                   <div class="text-center">
                      <img src="{{ 'assets/img/core-img/no-products.png'|theme }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi">
                  </div>
                </div>
                <div class="col-6 d-block mx-auto">
                   <div class="text-center">
                      <p>{{ 'checkout.SebetBos'|_ }}</p>
                  </div>
                </div>
              </div>
        </div>
            `);
        }else{
            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="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi `+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 %}