Search code examples
javascriptjqueryangularjssimplecart

Function to update total cost not working

I am building a simple shopping cart using simpleCart.js.

I have been able to display items, add them to my basket and checkout. However, i am trying to add a dropdown to allow the users to select a country to determine the shipping cost.

Plunker: http://plnkr.co/edit/aB6JLxmYcPpWR4IsUqEZ?p=preview

I have added the following select, however how can i connect this to the simpleCart.js? I believe the Update() needs to be called:

JS:

<select class="item_Shipping" id="AddShipping">
  <option value="4.99">England £4.99</option>
  <option value="5.99">Ireland £5.99</option>
  <option value="7.99">Europe £7.99</option>
</select>
Solution

  • See http://plnkr.co/edit/CIZsHALaRqMbRQNb6hgF?p=preview

    First you need a way to get the shipping cost:

    simpleCart({
    shippingCustom: function(){
        var ddl = document.getElementById("AddShipping");
        return ddl.options[ddl.selectedIndex].value;
    }
});

    and then when drop down changes, update the values:

    document.getElementById("AddShipping").addEventListener("change", function(){
    simpleCart.update();
});