Triggering Location-Specific Shipping Methods with our JavaScript API

As you may know, we're a small team mostly composed of developers here at Snipcart. We receive a whole lot of different requests and suggestions from various users all over the world to improve our HTML/JS shopping cart. Of course, we'd love to develop every mini-features (and huge features) that pop up on our support radar. However, we can't afford to lose focus and drift away from our product roadmap for too long.

Still, when the same request keeps appearing at the top of our support tickets backlog, we tend to try and prioritize it a little. Last week, for instance, we received yet again such a recurring inquiry:

How can I trigger different shipping methods based on my customer's shipping information?

Since we pride ourselves in offering an effective shipping solution for international e-commerce, we couldn't help but acknowledge the importance of this feature. As a matter of fact, we soon plan to add more features like this one directly in the admin dashboard. In the meantime, we thought about it a little and realized we could already handle this scenario effectively with our set of public, existing e-commerce APIs.

So today, I'll show you how to trigger different shipping methods in your cart based on your customers' shipping info.

Step 1: Creating custom shipping rates

For this quick how-to post, let's pretend you need 3 location-specific rates for the United States, Canada and the rest of the world.

The first step here would be to create the 3 custom shipping rates in the dashboard, under Settings > Carriers. I've named mine:

  • United States
  • Canada
  • Worldwide

snipcart-location-specific-shipping-custom-rates

Normally, in your cart's checkout process, you would get the following options:

snipcart-location-specific-shipping-cart-no-filters

Step 2: Binding to appropriate events

The second main step will be to use the bind method to hook our application to Snipcart's events. We'll need to bind to 3 events here:

  • billingaddress.changed
  • shippingaddress.changed
  • cart.ready

First, let's do what needs to be done in the billingaddress.changed event. If the customer selects the in-cart option to use his billing address as his shipping address, we need to set shipping methods depending on the entered billing address.

    Snipcart.execute('bind', 'billingaddress.changed', function (address) {
        if (address.shippingSameAsBilling) {
            setSnipcartShippingMethods(address);
        }
    });

I created the setSnipcartShippingMethods function because it will also be used in the shippingaddress.changed handler.

function setSnipcartShippingMethods(address) {
    if (address.country == "US") {
        Snipcart.execute('config', 'allowed_shipping_methods', ['united-states']);
    }
    else if (address.country == "CA") {
        Snipcart.execute('config', 'allowed_shipping_methods', ['canada']);
    }
    else {
        Snipcart.execute('config', 'allowed_shipping_methods', ['worldwide']);
    }
}

The key here is to use the config method allowing us to specify which shipping methods are accepted. I suggest you take a look at this documentation section to understand how it works.

Now, we also have to listen to the shippingaddress.changed method in case a customer uses a different shipping address than his billing address.

Snipcart.execute('bind', 'shippingaddress.changed', function (address) {
    setSnipcartShippingMethods(address); 
});

Lastly, we need to listen to cart.ready as well in case the customer refreshes the page. It will make sure only the allowed shipping methods are correctly configured when the cart gets ready.

Snipcart.execute('bind', 'cart.ready', function (cart) {
    setSnipcartShippingMethods(cart.order.shippingAddress);
});

And that's about it! Depending on the customer's shipping address, the adequate, location-specific shipping methods will be displayed in-cart from now on.

The complete code looks like this:

function setSnipcartShippingMethods(address) {
    if (address.country == "US") {
        Snipcart.execute('config', 'allowed_shipping_methods', ['united-states']);
    }
    else if (address.country == "CA") {
        Snipcart.execute('config', 'allowed_shipping_methods', ['canada']);
    }
    else {
        Snipcart.execute('config', 'allowed_shipping_methods', ['worldwide']);
    }
}

Snipcart.execute('bind', 'billingaddress.changed', function (address) {
    if (address.shippingSameAsBilling) {
        setSnipcartShippingMethods(address);
    }
});

Snipcart.execute('bind', 'shippingaddress.changed', function (address) {
   setSnipcartShippingMethods(address); 
});

Snipcart.execute('bind', 'cart.ready', function (cart) {
    setSnipcartShippingMethods(cart.order.shippingAddress);
});

Conclusion

Thanks to our JS API, this particular shipping feature was really easy and fast to configure. A few minutes and a few lines of code was all we needed. Snipcart quickly becomes a scalable and flexible e-commerce solution when developers leverage the power of our APIs and webhooks. A demo is available on our Github page.


If you'd like to provide feedback on this specific feature, shipping functionalities or anything else, hit the comments or visit our public UserVoice forum. As you can see, we like to act on user feedback/requests as much as we can. Thanks for reading, friend. If you've enjoyed the post or found it useful, please, take a second to share it on Twitter.

Suggested posts: