wojodesign / simplecart-js

A simple javascript shopping cart that easily integrates with your current website.
simplecartjs.org
1.79k stars 492 forks source link

Tax and shipping gets lost #482

Closed anuragji closed 9 years ago

anuragji commented 10 years ago

I am integrating SimpleCart into a small website and am having a bit of an issue with tax and shipping.

My current setup is as follows:

The if a user is logged into the website, they will be able to add items to the cart. The are also asked to set a shipping address, so the grand total can get displayed correctly (with or without Sales Tax). So initially instead of the Checkout they get a Set Shipping Address link, which brings them to a different page where they can set one. Once they do, I do three things:

The way I add the shipping address to the simpleCart instance is like this:

PHP / HTML Markup -

<a href="#" onclick="setShipping(<?php echo $address['id'] . ", '" . $address['ship_first'] [...] ?>Set Address</a>

Javascript on the same page -

<script>
function setShipping(shipId, ship_first [...]) {
    var shippingInfo = {
         shipId: shipId,
         ship_first: ship_first,
         [...]
    };

simpleCart.extend(simpleCart, shippingInfo); 

// update Tax 
var defaultTaxState = "<?php echo get_option('cart_tax_state'); ?>";

if(defaultTaxState == simpleCart.ship_state) {
        simpleCart({ taxRate : <?php echo get_option('cart_tax_rate'); ?>}) ;
        simpleCart.bind('update');
} else {
        simpleCart.taxRate = 0;
}

// Updates to Cart Display on current page
(function($) {
        $("#checkOutLink").append('<a href="javascript:;" onClick="confirm(\'By proceeding to checkout, you are agreeing to our Terms & Conditions.\');" class="simpleCart_checkout"><?php echo __('Checkout with PayPal'); ?></a>');

        // update tax calculation
        $(".simpleCart_tax").empty().append(simpleCart.toCurrency(simpleCart.tax()));

        // update cart total
        $(".simpleCart_grandTotal").empty().append(simpleCart.toCurrency(simpleCart.grandTotal()));
}) (jQuery);   
} // end setShipping()
</script>

Which totally works - as long as I stay on this page. As soon as I leave this page, the taxRate() as well as the shippingInfo gets lost again. Is there a way to set them so that they both get retained?

drewmo commented 9 years ago

You are not actually storing the results in any kind of permanent storage, only requesting the info and using it in local functions. You could store it in localstorage and get the info from there on each page you need it (like how SimpleCart does.)

You can create an array (or whatever you like) to store the tax rate and or shipping info for later use with javascript:

var shiparray = shippingInfo; //may need to parse before storing (see below)
localStorage.setItem("shipArray", JSON.stringify(shiparray)); //store array in localstorage as a string

Then just call it back from storage on any page:

var shiparray = localStorage.getItem("shipArray"); //get value from storage

var shippingInfo = JSON.parse(shiparray); //turn it into an array from a string

You can build one array for both tax rate and shipping info and store them, or store them as two different items in localstorage.

If you need to reset or clear the item from localstorage use: localStorage.removeItem("shipArray");

I had to change my simpleCart.min.js file in order to get taxRate to work for me since that is the one I use, but your mileage may vary. (and it seems like you are doing this differently)

I put the calculated rate into a hidden input element and just parsed the value with simpleCart:

taxRate:function(){
        return parseFloat($("#tax").val())||0 //returns 0 if empty or rate if not
    },

Non of my prices are passed to my final checkout system, those are all done again in php on the server. This code it only for displaying prices before ordering.

anuragji commented 9 years ago

Thank you @drewmo, for the clarification that makes sense. I have since implemented a server side solution, but will evaluate your suggestion as well.