The cart variable provides access to the current customer’s shopping cart data within the Superfans SDK.
It allows you to read line items, quantities, prices, discounts, and totals directly from Shopify’s cart.
This variable is available globally whenever a user has an active cart session. If no items have been added, cart will be empty or null.
the compare at price per quantity of each item added to cart
1.2
cart.items.amountPerQuantity
Float
the price per quantity of each item added to cart
1.2
cart.items.title
String
Name of the Product added to the cart
"Shoes"
cart.items.productId
String
ID of the product added to cart
234245345646
cart.items.price
String
Price of the variant
"498.0"
cart.items.currency
String
Currency of the variant
"USD"
cart.items.quantity
Integer
Number of each item of the product added to the cart
3
cart.items.variantId
String
ID of the variant of the particular product added to cart
97976974623974
cart.items.sellingPlanId
String
Unique selling plan ID of the product (if Subscription is enabled)
234899822
cart.items.attributes
Object[]
Custom key-value pair of each item added to cart.Setting the key as read_only and value true enables the cart items to prevent from editing the quantites
[ { key: "_read_only", value: "true" } ]
cart.items.discounts
String[]
Discount applied at individual item of the cart
["ITEM10"]
Example Usage
const cart = Superfans.variables.cart;
if (cart && cart.items?.length > 0) {
console.log(`You have ${cart.totalQuantity} items in your cart.`);
// Show first item info
const firstItem = cart.items[0];
console.log(`First item: ${firstItem.title} - ${firstItem.quantity} pcs`);
// Display subtotal and discount applied
console.log(`Subtotal: $${cart.subtotal}`);
console.log(`Discounts applied: $${cart.appliedDiscounts}`);
} else {
console.log("Your cart is empty.");
}
Best Practices
Check for null or empty carts: Always verify that cart exists and has items before accessing its properties.
Reflect real-time changes: The cart updates automatically when items are added or removed. Use event listeners or refresh functions to re-render totals dynamically.
Avoid direct modification: Cart data is read-only via this variable. Use cart actions (like addToCart, removeFromCart) to modify contents.
Caveats
Price rounding: Shopify handles rounding and currency precision; do not manually round floats.
Discount structures: Some discount allocations may be split per line item instead of the full cart; handle both cases.
Subscriptions: If using Shopify selling plans, ensure sellingPlanAllocation exists before referencing it.
