CODEWITHSUNDEEP
phpjquerycssajaxhtml
Naren Verma
Naren Verma

Reputation: 2327

How to change the total amount according to quantity using php

I am creating a shopping cart using session which is working, Now I am making the quantity part I mean User can increase the product quantity and decrease the quantity and according to that the total amount will display on screen without refresh the page. I just need when the user clicked on Plus sign then the amount will change as per quantity.

<?php echo $product['qty'];?> I am getting this value from my session

Any idea how can I do this? I also added same code in https://jsfiddle.net/Narendra2015/uLx0912t/

 /*increase the product qty*/
  $(".ddd").on("click", function () {
    var $button = $(this),
        $input = $button.closest('.sp-quantity').find("input.quntity-input");
    var oldValue = $input.val(),
        newVal;
    if ($.trim($button.text()) == "+") {
        newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }
    $input.val(newVal);
});

Second code after suggested Mr.A. Iglesias

$('a.ddd').click(function() {

    var $productContainer = $(this).closest('div.sp-quantity');
    var $pro_list = $(this).closest('tr.pro-list');
    var productPrice = parseInt($pro_list.find('span.price_cal').text());
    var $quantityInput = $productContainer.find('input.quntity-input');
    var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));

    if (newQuantity>= 0) {

        // Refresh quantity input.
        $quantityInput.val(newQuantity);

        // Refresh total div.
        var currentChange = productPrice*parseInt($(this).data('multi'));
        var total = parseInt($('div#total').text());
        $('div#total').text(total + currentChange);
    }

});

Css

.sp-quantity {
    width:124px;
    height:42px;
    float: left;
}
.sp-minus {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    border-left:0px solid black;
    float:left;
}
.sp-plus {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    border-left:0px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input input {
    width:30px;
    height:34px;
    text-align:center;
    border: none;
}
.sp-input input:focus {
    border:1px solid #e1e1e1;
    border: none;
}
.sp-minus a, .sp-plus a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 5px;
}

HTMl

<?php if(!empty($_SESSION['products'])):
                           foreach($_SESSION['products'] as $key=>$product):?>
                    <tbody>
                        <tr class="pro-list">
                            <td>
                                <div class="ordered-product cf">
                                    <div class="pro-img">
                                        <img src="admin/images/products/<?php echo $product['p_images'];?>" alt=" prodcut image">
                                    </div>
                                    <div class="pro-detail-name">
                                        <h3><?php echo $product['p_name'];?></h3>
                                    </div>
                                    <?php 
                                    $p_delete=$product['p_id'];
                                    //$decrypted_delete_id = decryptIt($p_delete);
                                    $encrypted_user_id = encryptIt($p_delete);
                                    $delete_product_id=urlencode($encrypted_user_id);
                                    ?>

                                    <a href="my-cart?action=empty&deletekey=<?php echo $delete_product_id;?>" class="cross-cta"><i class="fa fa-times" aria-hidden="true"></i></a>
                                </div>
                            </td>
                            <td>&#163;<span id="price_cal"><?php echo $product['p_currentprice'];?></span></td>
                            <td>

                                <div class="sp-quantity">
                                    <div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
                                    <div class="sp-input">
                                        <input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" />
                                    </div>
                                    <div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
                                </div>

                            </td>
                                <?php $single_total = $product['qty']*$product['p_currentprice'];?>
                                <td class='total_amount' data-price='&#163;<?php echo $single_total;?>'>&#163;<?php echo $single_total;?></td>
                        </tr>
                            <?php $total = $total+$single_total;
                            $_SESSION['total_cost']=$total;
                            endforeach;?>
                        <tr class="pro-list">
                            <td></td>
                            <td></td>
                            <td><span>Subtotal</span></td>
                            <td>&#163;<?php $_SESSION['total_cost']=$total;echo $total;?></td>
<!--                             <td><span>Shiping Cost</span></td>
                            <td><i class="fa fa-fighter-jet" aria-hidden="true"></i>&#163;<?php echo $total;?></td> -->
                        </tr>


                        <tr class="pro-list">
                            <td></td>
                            <td></td>
                            <td><span>Total Cost</span></td>
                            <td>&#163;<?php echo $total;?></td>
                        </tr>
                    </tbody>
                    <?php endif;?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

for total amount, I added this in the script.

  // Refresh total div.
 var subtotal_amount = subtotal_amount+lineTotal; 
  $pro_list.find('td.subtotal_amount').data('price','&#163;'+subtotal_amount).html('&#163;'+subtotal_amount);

HTML inside <tr class="pro-list">

<td class='subtotal_amount' data-price='&#163;<?php echo $total;?>'>&#163;<?php echo $total;?></td>

Upvotes: 0

Views: 3130

Answers (2)

A. Iglesias
A. Iglesias

Reputation: 2675

First you can put your product price and the total amount inside of div with a class or id, to make them easy to select, something like...

<?php $product=10;?>

<div class="sp-quantity">

    <div class="product-price"><?=$product?></div>

    <div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
    <div class="sp-input">
        <input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" />
    </div>
    <div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>

</div>

<?php
$single_total = $product['qty']*$product;
echo $total = $total + $single_total;
?>
<div id="total"><?=$total?></div>

Then, refresh its values anytime you change the quantity of a product...

$('a.ddd').click(function() {

    var $productContainer = $(this).closest('div.sp-quantity');
    var productPrice = parseInt($productContainer.find('div.product-price').text());
    var $quantityInput = $productContainer.find('input.quntity-input');
    var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));

    if (newQuantity>= 0) {

        // Refresh quantity input.
        $quantityInput.val(newQuantity);

        // Refresh total div.
        var currentChange = productPrice*parseInt($(this).data('multi'));
        var total = parseInt($('div#total').text());
        $('div#total').text(total + currentChange);
    }

});

I hope it helps

Upvotes: 1

YaatSuka
YaatSuka

Reputation: 231

I'm not sure to really understand, but the total amount corresponds to total price (depended on product's quantity), isn't it ?

If I'm right, I think the better way is to display the total amount in a 'div' tag (for example) containing an attribute 'data-total' with the product's price.

Then, in JS, you can access to attribute's data and update the total with the price and the quantity. Something like that:

<div class='total_amount' data-price='<?php echo $product['price']?>' >
  0
</div>

And then update your JS file as:

$(".ddd").on("click", function () {
    var $button = $(this),
        $input = $button.closest('.sp-quantity').find("input.quntity-input");
    var oldValue = $input.val(),
        newVal;
    if ($.trim($button.text()) == "+") {
        newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }
    $input.val(newVal);
    var price = $('.total_amount').data('price');
    $('.total_amount').html(price * newVal);
});

Hope it will help you :)

PS: Sorry for my English, I'm French :P

Upvotes: 0

Related Questions