Provide Shipping Options
This guide explains how to implement flexible shipping options in your Elastic Path storefront using custom cart items. Custom cart items allow you to conveniently add shipping fees, delivery options, and special services that don't exist as products in your catalog at checkout.
Understanding Custom Cart Items for Shipping
Custom cart items are perfect for shipping because they allow you to:
- Add shipping fees based on location, weight, or delivery speed, which may be specific to each cart
- Offer special delivery services (express, overnight, white-glove)
- Apply dynamic shipping costs from third-party APIs
warning
Custom Cart Items can be applied using an implicit
token, so you should validate the contents of your orders.
Setup
Install and configure the Shopper SDK:
npm install @epcc-sdk/sdks-shopper
Basic Shipping Implementation
Apply Shipping to a Cart
import { addCustomItemToCart, getCartId } from "@epcc-sdk/sdks-shopper";
async function addStandardShipping() {
try {
const cartId = getCartId();
// You could also call out to a third party shipping API to get the shipping options
const shippingItem = {
type: "custom_item",
name: "Standard Shipping",
sku: "SHIP-STANDARD",
description: "5-7 business days delivery",
quantity: 1,
price: {
amount: 500,
},
};
const response = await addCustomItemToCart({
path: {
cartID: cartId,
},
body: {
data: shippingItem,
},
});
console.log("Standard shipping added:", response.data);
return response.data;
} catch (error) {
console.error("Failed to add shipping:", error);
throw error;
}
}
Handle Shipping Updates
When users change shipping options, remove the old shipping item:
import { removeCartItem } from "@epcc-sdk/sdks-shopper";
async function updateShippingOption(newShippingOption, currentShippingItemId) {
try {
const cartId = getCartId();
// Remove current shipping
if (currentShippingItemId) {
await removeCartItem({
path: {
cartID: cartId,
cartItemID: currentShippingItemId,
},
});
}
// Add new shipping
await addCustomItemToCart({
path: {
cartID: cartId,
},
body: {
data: newShippingOption,
},
});
} catch (error) {
console.error("Failed to update shipping:", error);
}
}
Next Steps
- Shipping Groups - For complex split shipping scenarios
- Order Confirmation
- Guest Checkout
- Customer Checkout