4

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.

4

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.

1

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.

  • I have done that before but in return I have got full Expresso Store form once again in order_shipping div. – JackTheKnife Mar 14 '14 at 20:03
  • 1
    I'm in an extremely similar situation and tried the updated instructions (both options), not working though (no refresh, no error, selection feels empty). – 88mpg Mar 14 '14 at 20:32
  • Updated code returns some kind of "garbage" data :\ – JackTheKnife Mar 14 '14 at 20:34
  • OP updated. Site currently is on a staging environment not accessible for the public. – JackTheKnife Mar 14 '14 at 20:48
  • check it now, I hope this will do the trick – Ahmad Saad Mar 14 '14 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.