Expresso Store: AJAX shipping cost update

Question

I'm kind of stuck on getting AJAX shipping cost update for Expresso Store.

Shipping part in the checkout page looks like:

        <tr>
            <td>Shipping</td>
            <td colspan="2">
                {field:shipping_method}
                {if error:shipping_method}<p class="help-block">{error:shipping_method}</p>{/if}
            </td>
            <td style="text-align:right"><div id="order_shipping">{embed="cart/shipping"}</div></td>
        </tr>  

then "cart/shipping" include looks like:

{exp:store:checkout}
{order_shipping}
{/exp:store:checkout}

All works fine when I use "Update Total", but my goal is to update shipping cost on shipping method select using AJAX below

<script type="text/javascript">
$(document).ready(function() {
    $("#shipping_method").change(function() {

        var url = $(this.form).attr('action');
        var data = $("#shipping_method").val();

        $.post(url, data, function() {
            $("#order_shipping").load("/cart/shipping");
        });
        return false;       

    });
});
</script>

In that case I'm not able to retrieve updated shipping cost.

Any clue where I have made an error?

UPDATE

"cart/shipping" updated to:

{exp:store:checkout}
<div id="oso">{order_shipping}</div>
{/exp:store:checkout}

And AJAX part looks now like:

$(document).ready(function() {
    $("#shipping_method").change(function() {

        var url = $(this.form).attr('action');
        var data = $(this.form).serialize();

        $.post(url, data, function() {
            $("#order_shipping").load("/cart/shipping #oso);
        });
        return false;       

    });
});

It can retrieve shipping cost, but initial cost for the shipping, when checkout process is started, it becomes selected first from the shipping method list but with real value of 0. I have try to .prepend empty option field, but no matter what is selecting first shipping method for new carts (I'm using UPS shipping module). Default shipping method for new carts from the Store settings is not working either.

Answer 1

After some guidance from Ahmad Saad below (thanks Ahmad!) I was able to get shipping (and total) calculated after shipping method change.

First it will require to change template where shipping form field is located. That part is required due to default shipping value is not loaded when new cart created (in my case). My looks like:

<tr>
<td>Shipping</td>
<td colspan="2">
<select id="shipping_method" name="shipping_method">
<option>Choose Shipping Method</option>
{shipping_method_options}
</select>
{if error:shipping_method}<p class="help-block">{error:shipping_method}</p>{/if}
</td>
<td style="text-align:right"><div id="order_shipping">{embed="cart/shipping"}</div></td>
</tr>  

and AJAX part handling JSON response:

$(document).ready(function() {
    $("#shipping_method").change(function() {

        var url = $(this.form).attr('action');
        var p_data = $(this.form).serialize();

        $.ajax({
            url: url,
            type: "POST",
            data: p_data,
            context: this,
            error: function () {},
            dataType: 'json',
            success : function (response) {
                 $("#order_shipping").html(response.order_shipping_total);
                 $("#order_total").html(response.order_total);               
            }
        });


        return false;       

    });
});

No clue why guys from Expresso Store didn't included that in their code by default :\

Hope it will help other Expresso Store users.

Answer 2

as answer for your last update change your code to :

$(document).ready(function() {
    $("#shipping_method").change(function() {

        var url = $(this.form).attr('action');
        var p_data = $(this.form).serialize();

        $.post(url, p_data , function(data) {
            var new_shipping = $('<div />').append(data).find('#oso').html();
            $("#order_shipping").html(new_shipping);
        });
        return false;       

    });
});

try it and let me know.

Regard's.