1: Create the discount code. In our example: FREE_AUTO_ADDED_PRODUCT
2: Determine the variant id of the product you wish to be added. Learn how to do this here:
How to: Find a product's variant ID
Learn how to find a product's variant ID
In the Custom HTML section, choose any section. Then type an AI prompt like: I want to check whether the discount code FREE_AUTO_ADDED_PRODUCT is used and if it is then I want to automatically add product with variant id 50829687161111 to cart.
This will result in code like like the following. Save the EliteCart settings, open EliteCart in your theme, and check whether everything works as intended.
<div id="discount-auto-add-handler" class="tw-hidden">
<script>
(function() {
const TARGET_DISCOUNT_CODE = 'FREE_AUTO_ADDED_PRODUCT';
const AUTO_ADD_VARIANT_ID = '50829687161111';
let isProcessing = false;
function hasTargetDiscount(cartData) {
if (!cartData) return false;
// Check if discount codes are available in cart data
if (cartData.discount_codes && Array.isArray(cartData.discount_codes)) {
return cartData.discount_codes.some(discount =>
discount.code && discount.code.toUpperCase() === TARGET_DISCOUNT_CODE
);
}
// Fallback: check if discounts are in cart attributes or other location
if (cartData.attributes && cartData.attributes.discount_code) {
return cartData.attributes.discount_code.toUpperCase() === TARGET_DISCOUNT_CODE;
}
return false;
}
function hasAutoAddProduct(cartData) {
if (!cartData || !cartData.items) return false;
return cartData.items.some(item =>
item.variant_id && item.variant_id.toString() === AUTO_ADD_VARIANT_ID
);
}
async function addAutoProduct() {
if (isProcessing) return;
isProcessing = true;
try {
// Use fetch to add product to cart
const response = await fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: AUTO_ADD_VARIANT_ID,
quantity: 1
})
});
if (response.ok) {
// Trigger cart update in EliteCart
if (window.EliteCart && typeof window.EliteCart.refreshCart === 'function') {
window.EliteCart.refreshCart();
}
}
} catch (error) {
console.warn('Failed to auto-add product:', error);
} finally {
isProcessing = false;
}
}
async function removeAutoProduct() {
if (isProcessing) return;
const cartData = window.EliteCart.getCurrentCart();
if (!cartData || !cartData.items) return;
const autoProduct = cartData.items.find(item =>
item.variant_id && item.variant_id.toString() === AUTO_ADD_VARIANT_ID
);
if (!autoProduct) return;
isProcessing = true;
try {
const response = await fetch('/cart/change.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: autoProduct.variant_id,
quantity: 0
})
});
if (response.ok) {
// Trigger cart update in EliteCart
if (window.EliteCart && typeof window.EliteCart.refreshCart === 'function') {
window.EliteCart.refreshCart();
}
}
} catch (error) {
console.warn('Failed to remove auto product:', error);
} finally {
isProcessing = false;
}
}
function handleCartChange(cartData) {
if (!cartData || isProcessing) return;
const hasDiscount = hasTargetDiscount(cartData);
const hasProduct = hasAutoAddProduct(cartData);
if (hasDiscount && !hasProduct) {
// Discount present but product not in cart - add it
addAutoProduct();
} else if (!hasDiscount && hasProduct) {
// Discount not present but product is in cart - remove it
removeAutoProduct();
}
}
// Initialize on page load
const initialCart = window.EliteCart.getCurrentCart();
handleCartChange(initialCart);
// Listen for cart changes
window.EliteCart.onCartChange(handleCartChange);
})();
</script>
</div>